Js组件的一些写法


Posted in Javascript onSeptember 10, 2010

今天看了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

Javascript 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
编写Js代码要注意的几条规则
Sep 10 #Javascript
jquery之empty()与remove()区别说明
Sep 10 #Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 #Javascript
有趣的javascript数组定义方法
Sep 10 #Javascript
心扬JS分页函数代码
Sep 10 #Javascript
JavaScript中获取元素索引的函数
Sep 10 #Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 #Javascript
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
jquery获取radio值(单选组radio)
2014/10/16 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
教师优秀党员事迹材料
2014/08/14 职场文书
环卫工作汇报材料
2014/10/28 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
团员年度个人总结
2015/02/26 职场文书
员工辞职信怎么写
2015/02/27 职场文书
个人年终总结结尾
2015/03/06 职场文书