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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
在vue中使用image-webpack-loader实例
Nov 12 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
php异常处理技术,顶级异常处理器
2012/06/13 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
javascript 写类方式之九
2009/07/05 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
JS画线(实例代码)
2013/11/20 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
Python第三方库的安装方法总结
2016/06/06 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
python tkinter组件摆放方式详解
2019/09/16 Python
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
Unix里面如何在后台运行程序
2016/10/14 面试题
护理学中专毕业生求职信
2013/11/11 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
团组织关系介绍信
2019/06/24 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
vue router 动态路由清除方式
2022/05/25 Vue.js