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