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按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
VUE项目实现主题切换的多种方法
Nov 26 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 新手入门教程
2009/08/03 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
js表头排序实现方法
2015/01/16 Javascript
jQuery 选择器详解
2015/01/19 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
Python换行与不换行的输出实例
2020/02/19 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
耐克亚太地区:Nike APAC
2019/12/07 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
我的动漫时代的创业计划书范文
2014/01/27 职场文书
四年级数学教学反思
2014/02/02 职场文书
关于美容院的活动方案
2014/08/14 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
扬州个园导游词
2015/02/06 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
建国大业观后感800字
2015/06/01 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL