alzui类封装的演化过程(形式化阶段)

1、原始的基于构造函数的类模拟方式,这是JS语法默认支持的创建类的方式

function ClassA(){
this.a = "a";
this.b = "a";
this.c = "a";
this.d = "a";
this.e = "a";
this.f1 = function(){};
this.f2 = function(){};
this.f3 = function(){};
this.f4 = function(){};
}


2、基于原型的类模拟方式,也是JS语法默认支持的

function ClassA(){
this.a = "a";
this.b = "a";
this.c = "a";
this.d = "a";
this.e = "a";
}
ClassA.prototype.f1 = function(){};
ClassA.prototype.f2 = function(){};
ClassA.prototype.f3 = function(){};
ClassA.prototype.f4 = function(){};


3、简化ClassA.prototype的书写,目的只是为了省键盘

function ClassA(){
this.a = "a";
this.b = "a";
this.c = "a";
this.d = "a";
this.e = "a";
}
var _p = ClassA.prototype; //p是prototype的首字母
_p.f1 = function(){};
_p.f2 = function(){};
_p.f3 = function(){};
_p.f4 = function(){};


4、松散的类方法定义集中到一个函数classImp中,隐藏变量_p

function ClassA(){
this.a = "a";
this.b = "a";
this.c = "a";
this.d = "a";
this.e = "a";
}
function classImp(){
var _p = ClassA.prototype;
_p.f1 = function(){};
_p.f2 = function(){};
_p.f3 = function(){};
_p.f4 = function(){};
}
classImp();


5、类具体实现函数classImp匿名化,取消不必要的全局变量

function ClassA(){
this.a = "a";
this.b = "a";
this.c = "a";
this.d = "a";
this.e = "a";
}
(function(){
var _p = ClassA.prototype;
_p.f1 = function(){};
_p.f2 = function(){};
_p.f3 = function(){};
_p.f4 = function(){};
})();


6、参数传递_p变量

function ClassA(){
this.a = "a";
this.b = "a";
this.c = "a";
this.d = "a";
this.e = "a";
}
(function(_p){
_p.f1 = function(){};
_p.f2 = function(){};
_p.f3 = function(){};
_p.f4 = function(){};
})(ClassA.prototype);


7、引入apply,取消_p变量

function ClassA(){
this.a = "a";
this.b = "a";
this.c = "a";
this.d = "a";
this.e = "a";
}
(function(){
this.f1 = function(){};
this.f2 = function(){};
this.f3 = function(){};
this.f4 = function(){};
}).apply(ClassA.prototype);


8、定义构造函数替代方法[color=red]_init[/color],封装属性声明代码
_init方法名字来源自java class字节码文件中每个类的构造函数的的名字都是_init
这一步里面实际的构造函数被架空,慢慢被演化为一个傀儡了:)

function ClassA(){
this._init();
}
(function(){
this._init = function(){
this.a = "a";
this.b = "a";
this.c = "a";
this.d = "a";
this.e = "a";
};
this.f1 = function(){};
this.f2 = function(){};
this.f3 = function(){};
this.f4 = function(){};
}).apply(ClassA.prototype);


9、构造函数改进,实现参数传递
这样new一个类的时候,参数能够正常传递给_init这个模拟的构造函数了

function ClassA(){
this._init.apply(this, arguments);
}
(function(){
this._init = function(p1, p2){
this.a = "a";
this.b = "a";
this.c = "a";
this.d = "a";
this.e = "a";
};
this.f1 = function(){};
this.f2 = function(){};
this.f3 = function(){};
this.f4 = function(){};
}).apply(ClassA.prototype);


10、建立基础支持代码,类形式化定义最终稳定下来

function _class(className, classImp){
var clazz = (function(){
return function(){
this._init.apply(this, arguments);
};
})();
window[className] = clazz;
classImp.apply(clazz.prototype);
}
//----下面两个函数是上面的代码改进后的形式
function __newClass(){
return function(){ //<--这就是那个傀儡!
this._init.apply(this, arguments);
};
}
function _class(className, classImp){
var clazz = __newClass();
window[className] = clazz;
classImp.apply(clazz.prototype);
}

_class("ClassA", function(){
this._init = function(p1, p2){
this.a = "a";
this.b = "a";
this.c = "a";
this.d = "a";
this.e = "a";
};
this.f1 = function(){};
this.f2 = function(){};
this.f3 = function(){};
this.f4 = function(){};
});


类形式化定义,至此完成。以后可能会提供框架代码更深层的演化细节,让大家能够更好地了解alzui框架的完整的演化过程。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值