Js組件的一些寫法
更新時(shí)間:2010年09月10日 16:47:42 作者:
今天看了rank的一篇javascript腳本控件topic,突然想總結(jié)一下一些寫JS組件的方法,或者說一些不同人的不同coding style。
今天看了rank的一篇javascript腳本控件topic,突然想總結(jié)一下一些寫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();
當(dāng)然,也可以把this.msg的初始化放到function A(msg){this.msg=msg;}里。總之你會(huì)發(fā)現(xiàn)這樣調(diào)用很麻煩,并且參數(shù)是固定對應(yīng)好的。
你如果既不愿搞一大堆Class.create,也不愿調(diào)用不方便,那就把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();
看上去干凈了許多,但是如果你的庫里有很多組件,則每個(gè)組件都要寫一遍this.init.apply(this, arguments); 如果用Class.create的話,則只要寫一個(gè)Class,然后每個(gè)組件執(zhí)行下Class.create()即可。當(dāng)然,每個(gè)組件都寫一遍this.init.apply(this, arguments);也沒啥不好的,還是看個(gè)人喜好了。另外寫原型方法是合在一起還是分開來寫也是個(gè)人喜好,出于封裝的角度,合一起好,但是分開有時(shí)候顯的更清晰。譬如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構(gòu)造的對象this放到臨時(shí)變量_this中哦,因?yàn)檫\(yùn)行時(shí),privateFn1的函數(shù)體內(nèi)this實(shí)際是{fn1:...,fn2:...}這樣的匿名對象,你可以用this.hasOwnProperty("fn1")去測試。this是在運(yùn)行時(shí)才有意義的一個(gè)東西。另外這種方法每個(gè)對象都會(huì)有privateFn1 和 privateFn2的副本,這種方法不太好。
?。ㄎ赐甏m(xù),下面會(huì)講些不同框架的一些寫法)
作者:JayChow
首先看下Prototype里的寫法:
復(fù)制代碼 代碼如下:
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之類的,你也可以這樣:
復(fù)制代碼 代碼如下:
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();
當(dāng)然,也可以把this.msg的初始化放到function A(msg){this.msg=msg;}里。總之你會(huì)發(fā)現(xiàn)這樣調(diào)用很麻煩,并且參數(shù)是固定對應(yīng)好的。
你如果既不愿搞一大堆Class.create,也不愿調(diào)用不方便,那就把Prototype里的var Class = {...} 和 var A = Class.create();合并起來。得到:
復(fù)制代碼 代碼如下:
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();
看上去干凈了許多,但是如果你的庫里有很多組件,則每個(gè)組件都要寫一遍this.init.apply(this, arguments); 如果用Class.create的話,則只要寫一個(gè)Class,然后每個(gè)組件執(zhí)行下Class.create()即可。當(dāng)然,每個(gè)組件都寫一遍this.init.apply(this, arguments);也沒啥不好的,還是看個(gè)人喜好了。另外寫原型方法是合在一起還是分開來寫也是個(gè)人喜好,出于封裝的角度,合一起好,但是分開有時(shí)候顯的更清晰。譬如A.prototype.init=function(msg){...} A.prototype.fn=function(){...}
然后還有人喜歡這樣去寫組件:
復(fù)制代碼 代碼如下:
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構(gòu)造的對象this放到臨時(shí)變量_this中哦,因?yàn)檫\(yùn)行時(shí),privateFn1的函數(shù)體內(nèi)this實(shí)際是{fn1:...,fn2:...}這樣的匿名對象,你可以用this.hasOwnProperty("fn1")去測試。this是在運(yùn)行時(shí)才有意義的一個(gè)東西。另外這種方法每個(gè)對象都會(huì)有privateFn1 和 privateFn2的副本,這種方法不太好。
?。ㄎ赐甏m(xù),下面會(huì)講些不同框架的一些寫法)
作者:JayChow
您可能感興趣的文章:
- js實(shí)現(xiàn)通用的微信分享組件示例
- JS表格組件神器bootstrap table詳解(基礎(chǔ)版)
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- JS組件Bootstrap Select2使用方法詳解
- JS組件Bootstrap Table使用方法詳解
- ExtJs 學(xué)習(xí)筆記基礎(chǔ)篇 Ext組件的使用
- 解決Extjs 4 Panel作為Window組件的子組件時(shí)出現(xiàn)雙重邊框問題
- jquery滾動(dòng)組件(vticker.js)實(shí)現(xiàn)頁面動(dòng)態(tài)數(shù)據(jù)的滾動(dòng)效果
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- JS組件系列之使用HTML標(biāo)簽的data屬性初始化JS組件
相關(guān)文章
微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解
這篇文章主要介紹了微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JS實(shí)現(xiàn)可改變列寬的table實(shí)例
本文為大家詳細(xì)介紹下通過JS實(shí)現(xiàn)可改變列寬的table,具體的思路及代碼如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07
微信小程序?qū)崿F(xiàn)action-sheet彈出底部菜單功能【附源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)action-sheet彈出底部菜單功能,結(jié)合實(shí)例形式分析了action-sheet組件彈出菜單的使用技巧,包括元素遍歷、事件響應(yīng)及屬性設(shè)置等操作方法,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
javascript css styleFloat和cssFloat
在寫js操作css的過程中發(fā)現(xiàn)float屬性在IE和firefox下對應(yīng)的js腳本是不一樣的,IE下對應(yīng)得是 styleFloat,firefox,chorme,safari下對應(yīng)的是cssFloat,可用in運(yùn)算符去檢測style是否包含此屬性。2010-03-03
javascript動(dòng)態(tài)添加單元格的腳本代碼
javascript動(dòng)態(tài)添加單元格的腳本代碼...2007-11-11

