Js组件的一些写法

今天看了rank的一篇javascript脚本控件topic，突然想总结一下一些写JS组件的方法，或者说一些不同人的不同coding style。

　　首先看下Prototype里的写法：


代码如下:

var Class = {
create: function() {
return function() { this.init.apply(this, arguments); }
}
}
var A = Class.create();
A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}
var a = new A("myMsg");
a.fn();

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


代码如下:

function A() { } //var A = function(){}
A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}
var a = new A();
a.init("myMsg");
a.fn();

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


代码如下:

function A() {
this.init.apply(this, arguments);
}
A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}
var a = new A("myMsg");
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(){...}

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


代码如下:

var A = function(msg) {
this.msg = msg;
var _this = this;
var privateFn1 = function() {
alert(_this.msg);
}
var privateFn2 = function() {
alert(_this.msg);
}
return { fn1: privateFn1, fn2: privateFn2 };
}
var a = new A("myMsg");
a.fn1();

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

　　（未完待续，下面会讲些不同框架的一些写法）
作者：JayChow

赞 (0)

相关推荐

  • JS组件系列之使用HTML标签的data属性初始化JS组件

    JS组件系列之使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里面,可是从后台取数据就需要js的初始化,所以导致页面初始化的时候js的初始化代码里面出现很多重复的代码,看着很闹心.于是想起bootstrap table里面的data属性来,如果能够直接在html里面使用data-*这种方式来初始化简单的组件,那该多爽.我们先来看看bootstrap table的

  • JS组件Form表单验证神器BootstrapValidator

    JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

  • ExtJs 学习笔记基础篇 Ext组件的使用第1/2页

    ExtJs 学习笔记基础篇 Ext组件的使用第1/2页

    天介绍一下Ext中组件举几个简单的例子做说明.注意:文章内容有些摘自本人学习过程中看到的资料. Ext2.0对框架进行了非常大的重构,其中最重要的是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext控件.Ext组件由Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件. Ext组件体系由下图所示: 组件大致可分成三大类,即基本组件.工具栏组件.表单元素组件.      基本组件有这么多的组件,可都是非常酷的.组件使

  • JS组件Bootstrap Select2使用方法详解

    JS组件Bootstrap Select2使用方法详解

    在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的单选.多选.分组等功能这里就不多做介绍了,multiselect这方面是强项.重点介绍下select2的一些特性效果: 一.特性效果 1.多选效果 可以设置最多只能选几个 2.图文结合的效果 3.远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前 输入空格搜索出全部 滚动条滑动到底部

  • JS组件Bootstrap实现弹出框和提示框效果代码

    JS组件Bootstrap实现弹出框和提示框效果代码

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

  • JS组件Bootstrap Table使用方法详解

    JS组件Bootstrap Table使用方法详解

    最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一.效果展示 二.BootStrap table简单介绍 bootStra

  • js实现通用的微信分享组件示例

    一.可定义的信息 1.分享时显示的LOGO:2.分享LOGO的宽度:3.分享LOGO的高度:4.分享出去显示的标题(默认调用网页标题):5.分享出去显示的描述(默认调用网页标题):6.分享链接(默认为当前页面的URL).7.分享微信的APPID(一般为空). 二.使用方法1.引入微信分享组件js: 复制代码 代码如下: /******************************* * Author:Mr.Think * Description:微信分享通用代码 * 使用方法:_WXShare

  • jquery滚动组件(vticker.js)实现页面动态数据的滚动效果

    复制代码 代码如下: <script language="javascript" src="lirms/Test/jquery-1.4.2.js"></script> <script language="javascript" src="lirms/Test/vticker.js"></script> <script type="text/javascript&q

  • JS表格组件神器bootstrap table详解（基础版）

    JS表格组件神器bootstrap table详解（基础版）

    一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

  • 解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题

    解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题

    Extjs的Panel和Window等组件在默认情况下是带边框的,通常情况下,单独使用没有什么关系,但是将Panel作为Window组件的子组件时就会出现双重边框的现象,如果Window组件中含有两个或者两个以上的Panel,那么Panel和Panel组件之间的边框会重复累加,也就是说会变成双重边框.实际上双重边框并不是很影响外观,但多少看上去会有些不太令人满意,因此我们就得想办法将两重边框去掉,变成单边框.下面是前后两张对比图,大家仔细观察一下两个window的边框部分,可以发现前者较粗,后者

随机推荐