首先看下Prototype里的写法:

  1. var Class = {
  2. create: function() {
  3. return function() { this.init.apply(this, arguments); }
  4. }
  5. }
  6. var A = Class.create();
  7. A.prototype = {
  8. init: function(msg) {
  9. this.msg = msg;
  10. },
  11. fn: function() {
  12. alert(this.msg);
  13. }
  14. }
  15. var a = new A("myMsg");
  16. a.fn();

如果你不喜欢上面这一大堆Class.create之类的,你也可以这样:

  1. function A() { } //var A = function(){}
  2. A.prototype = {
  3. init: function(msg) {
  4. this.msg = msg;
  5. },
  6. fn: function() {
  7. alert(this.msg);
  8. }
  9. }
  10. var a = new A();
  11. a.init("myMsg");
  12. a.fn();

当然,也可以把this.msg的初始化放到function A(msg){this.msg=msg;}里。总之你会发现这样调用很麻烦,并且参数是固定对应好的。 
你如果既不愿搞一大堆Class.create,也不愿调用不方便,那就把Prototype里的var Class = {...} 和 var A = Class.create();合并起来。得到:

  1. function A() {
  2. this.init.apply(this, arguments);
  3. }
  4. A.prototype = {
  5. init: function(msg) {
  6. this.msg = msg;
  7. },
  8. fn: function() {
  9. alert(this.msg);
  10. }
  11. }
  12. var a = new A("myMsg");
  13. a.fn();

看上去干净了许多,但是如果你的库里有很多组件,则每个组件都要写一遍this.init.apply(this, arguments); 如果用Class.create的话,则只要写一个Class,然后每个组件执行下Class.create()即可。当然,每个组件都写一遍this.init.apply(this, arguments);也没啥不好的,还是看个人喜好了。另外写原型方法是合在一起还是分开来写也是个人喜好,出于封装的角度,合一起好,但是分开有时候显的更清晰。譬如A.prototype.init=function(msg){...} A.prototype.fn=function(){...}

然后还有人喜欢这样去写组件:

  1. var A = function(msg) {
  2. this.msg = msg;
  3. var _this = this;
  4. var privateFn1 = function() {
  5. alert(_this.msg);
  6. }
  7. var privateFn2 = function() {
  8. alert(_this.msg);
  9. }
  10. return { fn1: privateFn1, fn2: privateFn2 };
  11. }
  12. var a = new A("myMsg");
  13. a.fn1();

这边一定要把A构造的对象this放到临时变量_this中哦,因为运行时,privateFn1的函数体内this实际是{fn1:...,fn2:...}这样的匿名对象,你可以用this.hasOwnProperty("fn1")去测试。this是在运行时才有意义的一个东西。另外这种方法每个对象都会有privateFn1 和 privateFn2的副本,这种方法不太好。

Js组件的一些写法的更多相关文章

  1. Js组件的一些写法【转】

    首先看下Prototype里的写法: var Class = { create: function() { return function() { this.init.apply(this, argu ...

  2. js组件的写法

    工作之中的不足,报了js培训班,因为工作加班原因缺了几天课(js组件开发),现在拾起来补补 <!doctype html> <html> <head> <me ...

  3. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  4. JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

  5. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  6. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  7. JS组件系列——封装自己的JS组件,你也可以

    前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...

  8. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  9. JS组件系列——Form表单验证神器: BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

随机推荐

  1. Future和FutureTask

    上次介绍了Callable实现多线程的方法.现在介绍和Callable搭配的类.上一篇只是简单的用Callable做了一个demo. 一.Future 1.关于callable和runable的区别( ...

  2. NOIP练习赛题目2

    小K的农场 难度级别:C: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 小K在MC里面建立很多很多的农场,总共n个,以至于他自己都忘记了每个 ...

  3. 关于ListView中EditText在软键盘弹出后的焦点问题

    转自:http://www.cnblogs.com/haofei/p/3305030.html 在ListView中,每次弹出软键盘后就会重新调用getView()方法,导致EditText失去焦点. ...

  4. shell脚本调用C语言之字符串切分函数——strtok

    今天上午在写一个需求,要求的比较急,要求当天完成,我大致分析了一下,可以采用从shell脚本中插入一连串的日期,通过调用proc生成的可执行文件,将日期传入后台数据库,在数据库中进行计算.需要切分日期 ...

  5. IBM MR10i阵列卡配置Raid0/Raid1/Raid5(转)

    RAID5配置: 其实RAID0/RAID1都基本一致,只是选择的类型不同. 1. 开机看到ctrl+h的提示按下相应的键,等ServerRaid 10-i卡初始化完成则进入WebBIOS 配置界面: ...

  6. 強大的jQuery Chart组件-Highcharts

    Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图 ...

  7. Java clone() 浅克隆与深度克隆(转)

    以下文字转自:桔子园 http://www.blogjava.net/orangelizq/archive/2007/10/17/153573.html 现在Clone已经不是一个新鲜词语了,伴随着“ ...

  8. 百度外卖接口调试 C#版

    主类 class Program    {        static void Main(string[] args)        {            string cmdStr = &qu ...

  9. C - 项目收藏

    Web框架 [荐]Kore:开源 C 语言 Web 框架 Raphters:A web framework for C ulfius:Web Framework for REST API in C, ...

  10. [Asp.net core 2.0]Ueditor 图片上传

    摘要 在项目中要用到富文本编辑器,包含上传图片,插入视频等功能.但ueditor只有.net版本,没有支持core.那么上传等接口就需要自己实现了. 一个例子 首先去百度ueditor官网下载简化版的 ...