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 相关文章推荐
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
javascript中数组方法汇总
Jul 07 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
编写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
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
python实现类的静态变量用法实例
2015/05/08 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
python实现多线程抓取知乎用户
2016/12/12 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
python安装及变量名介绍详解
2020/12/12 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
护士求职推荐信范文
2013/11/23 职场文书
婚礼答谢词
2015/01/04 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers