編寫和維護復雜的Javascipt代碼,必須使用模塊化策略。目前,業(yè)界的主流做法是采用"面向?qū)ο缶幊?。因此,Javascript如何實現(xiàn)面向?qū)ο缶幊?,就成了一個熱門課題。
麻煩的是,Javascipt語法不支持class,導致傳統(tǒng)的面向?qū)ο缶幊谭椒o法直接使用。(當然ES6已經(jīng)支持class),可以還是有一部分前端工作人員在現(xiàn)有的工作環(huán)境上無法使用ES6標準
下面代碼本人使用的一段定義類的方法,代碼不長,但很實用,希望能幫助到想擺脫javascript代碼一多就亂成一坨的同學們
/**
* 封裝類方法
* @methodOf Clazz.prototype
*/
var Clazz = function() {};
/**
* [給基類的原型賦值一個方法 當作類的構(gòu)造器]
* @return {[Object]} [description]
*/
Clazz.prototype.construct = function() {};
/**
* 創(chuàng)建類
* @example
* var MyClass = Clazz.extend({
* //構(gòu)造器,new時執(zhí)行
* construct: function(myParam){
* // 編寫你的代碼邏輯
* }
* });
*
* 繼承類
* var MySubClass = MyClass.extend({
* construct: function(myParam){
* // 使用這個來調(diào)用父類的構(gòu)造函數(shù)
* arguments.callee.$.construct.apply(this, arguments);
* // 編寫你的代碼邏輯
* }
* });
*/
Clazz.extend = function(def) {
var classDef = function() {
if (arguments[0] !== Clazz) { this.construct.apply(this, arguments); }
};
var proto = new this(Clazz);
var superClass = this.prototype;
for (var n in def) {
var item = def[n];
if (item instanceof Function) item.$ = superClass;
proto[n] = item;
}
classDef.prototype = proto;
//給這個新類相同的靜態(tài)擴展方法
classDef.extend = this.extend;
return classDef;
};
//========使用實例=========
var MyClass = Clazz.extend({
construct: function(options){
this.name = 'MyClass ';
this.myClassName = 'myClassName ';
},
getName: function(){
return this.name;
},
setName: function(name){
if(name) this.name = name;
}
});
//繼承MyClass 類
var SubClass1 = MyClass .extend({
construct: function(){
//未調(diào)用父類的構(gòu)造函數(shù)
this.name = 'SubClass ';
}
});
//繼承MyClass 類
var SubClass2 = MyClass .extend({
construct: function(){
//調(diào)用父類構(gòu)造函數(shù)
arguments.callee.$.construct.apply(this, arguments);
this.name = 'SubClass ';
}
});
var myClass = new MyClass();
var subClass1 = new SubClass1();
var subClass2 = new SubClass2();
console.log(myClass.getName()); //MyClass
console.log(myClass.myClassName); //myClassName
console.log(subClass1.getName()); //SubClass1
console.log(subClass1.myClassName); //undefined
console.log(subClass2.getName()); //SubClass2
console.log(subClass2.myClassName); //myClassName