Js组件的一些写法_javascript技巧-js教程-PHP中文网

Js组件的一些写法_javascript技巧

php中文网

发布： 2016-05-16 18:20:00

原创

1406人浏览过

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

　　首先看下Prototype里的写法：

易语言学习手册十天学会易语言图解教程 pdf版

十天学会易语言图解教程用图解的方式对易语言的使用方法和操作技巧作了生动、系统的讲解。需要的朋友们可以下载看看吧！全书分十章，分十天讲完。第一章是介绍易语言的安装，以及运行后的界面。同时介绍一个非常简单的小程序，以帮助用户入门学习。最后介绍编程的输入方法，以及一些初学者会遇到的常见问题。第二章将接触一些具体的问题，如怎样编写一个1+2等于几的程序，并了解变量的概念，变量的有效范围，数据类型等知识。其后，您将跟着本书，编写一个自己的MP3播放器，认识窗口、按钮、编辑框三个常用组件。以认识命令及事件子程序。第

查看详情

复制代码代码如下:

 
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