编写和维护复杂的Javascipt代码,必须使用模块化策略。目前,业界的主流做法是采用"面向对象编程"。因此,Javascript如何实现面向对象编程,就成了一个热门课题。
麻烦的是,Javascipt语法不支持class,导致传统的面向对象编程方法无法直接使用。(当然ES6已经支持class),可以还是有一部分前端工作人员在现有的工作环境上无法使用ES6标准
下面代码本人使用的一段定义类的方法,代码不长,但很实用,希望能帮助到想摆脱javascript代码一多就乱成一坨的同学们
/**
* 封装类方法
* @methodOf Clazz.prototype
*/
var Clazz = function() {};
/**
* [给基类的原型赋值一个方法 当作类的构造器]
* @return {[Object]} [description]
*/
Clazz.prototype.construct = function() {};
/**
* 创建类
* @example
* var MyClass = Clazz.extend({
* //构造器,new时执行
* construct: function(myParam){
* // 编写你的代码逻辑
* }
* });
*
* 继承类
* var MySubClass = MyClass.extend({
* construct: function(myParam){
* // 使用这个来调用父类的构造函数
* 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;
//给这个新类相同的静态扩展方法
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(){
//未调用父类的构造函数
this.name = 'SubClass ';
}
});
//继承MyClass 类
var SubClass2 = MyClass .extend({
construct: function(){
//调用父类构造函数
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