類的創(chuàng)建
BUI里的所有類的方法都在原型鏈上唬渗，這決定了創(chuàng)建類和繼承類的方式。關(guān)于類的定義和實(shí)例化請(qǐng)參看w3school的文章
下面是一個(gè)BUI中創(chuàng)建的最簡(jiǎn)單的類苦丁，其中的細(xì)節(jié)我們?cè)诒菊潞徒酉聛淼膸渍吕镌敿?xì)論述
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<script>
//創(chuàng)建類
function NewClass(config){
NewClass.superclass.constructor.call(this,config); //調(diào)用父類的構(gòu)造函數(shù)
//ToDo Something
}
BUI.extend(NewClass,BUI.Base); //繼承BUI.Base類
BUI.augment(NewClass,{ //在原型鏈上注冊(cè)方法
m1 : function(){
this.m2();
this.m3();
},
m2 : function(){
},
m3 : function(){
}
});
var a = new NewClass({a : '124'}); //實(shí)例化對(duì)象
a.m1();
</script>
</pre>
上面的內(nèi)容包含了以下信息：
- 聲明一個(gè)類浸颓，在構(gòu)造函數(shù)中調(diào)用父類的構(gòu)造函數(shù)
- superclass：指向父類
- BUI.extend方法，實(shí)現(xiàn)了繼承，下面會(huì)詳細(xì)講解
- BUI.augment : 將對(duì)象上的成員復(fù)制到類的原型鏈上产上，如上代碼參數(shù)2對(duì)象中的成員方法將會(huì)復(fù)制到NewClass的原型鏈上面去
類的繼承
BUI的類的繼承使用原型鏈的方式棵磷，提供了BUI.extend方法，具體的實(shí)現(xiàn)原理請(qǐng)參看：JS 繼承
我們通過下面的示例晋涣，來了解BUI.extend方法的使用
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<script>
//聲明類A
function A(config){
BUI.mix(this,config); //將配置信息附加到實(shí)例自身仪媒，后面講解BUI.Base后，就不再使用此方式
}
//聲明A的方法
BUI.augment(A,{
m1 : function(){
console.log('a m1');
},
m2 : function(){
console.log('a m2');
}
});
//聲明B
function B (config){
B.superclass.constructor.call(this,config); //B 繼承A姻僧，調(diào)用A的構(gòu)造函數(shù)
}
BUI.extend(B,A); //B 繼承A
BUI.augment(B,{ //實(shí)現(xiàn)B的方法
m1 : function(){
console.log('b m1');
},
m3 : function(){
console.log('b m3');
}
});
//聲明C
function C (config){
C.superclass.constructor.call(this,config);
}
BUI.extend(C,B); //C 繼承B
BUI.augment(C,{
m1 : function(){
console.log('c m1');
B.prototype.m1.call(this); //調(diào)用父類的m1方法
//不要使用 C.superclass.m1.call(this);
},
m2 : function(){
console.log('c m2');
}
});
//實(shí)例化
var c = new C({a : 'a',b : 'b'});
c.m1(); //c m1 > b m1
c.m2(); //c m2
c.m3(); //b m3
</script>
</pre>
解釋說明
- BUI.mix ： 把一個(gè)對(duì)象的成員復(fù)制到另一個(gè)對(duì)象
- 構(gòu)造函數(shù)里面需要調(diào)用父類的構(gòu)造函數(shù)规丽，由于javascript缺少原生的支持，所以需要自己調(diào)用
- 原型鏈上的方法會(huì)覆蓋撇贺，子類的方法覆蓋父類的方法
- 調(diào)用父類的同名方法時(shí)赌莺，直接調(diào)用父類prototype上的方法，而不要通過superclass,在這篇文章里有論述
類的多繼承
javascript不支持多繼承松嘶，BUI.extend方法只能指定一個(gè)類作為superclass艘狭，所以為了實(shí)現(xiàn)多繼承我們引入了一個(gè)新的方法BUI.mixin,這個(gè)方法可以將多個(gè)類的原型鏈上的方法復(fù)制到需要繼承的類上
<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<script>
//聲明類A
function A(){
}
//聲明A的方法
BUI.augment(A,{
m1 : function(){
console.log('a m1');
},
m2 : function(){
console.log('a m2');
}
});
//聲明B
function B (){
}
BUI.augment(B,{ //實(shí)現(xiàn)B的方法
m1 : function(){
console.log('b m1');
},
m3 : function(){
console.log('b m3');
}
});
//聲明C
function C (config){
this.mix(this,config);
}
BUI.augment(C,{
m1 : function(){
console.log('c m1');
},
m2 : function(){
console.log('c m2');
}
});
function D (config){
D.superclass.constructor.call(this,config);
}
BUI.extend(D,C);
BUI.mixin(D,[A,B]);
BUI.augment(D,{
m2 : function(){
console.log('d m2');
},
m3 : function(){
console.log('d m3');
}
});
//實(shí)例化
var d = new D({a : 'a',b : 'b'});
d.m1(); //b m1
d.m2(); //d m2
d.m3(); //d m3
</script>
</pre>
我們把mixin的方式叫做擴(kuò)展，可以通過多個(gè)類擴(kuò)展自己的方法翠订，這里有擴(kuò)展的更加詳細(xì)的介紹
繼承的相關(guān)函數(shù)
上面的示例中用到了幾個(gè)繼承中常用的函數(shù)：
- BUI.extend(newclass,superclass): 實(shí)現(xiàn)類的繼承
- BUI.augment(newclass,obj): 把對(duì)象的成員復(fù)制到類的原型鏈上
- BUI.mix(obj1,obj2,...objn): 把后面對(duì)象的成員復(fù)制到第一個(gè)巢音，封裝 jQuery.extend 方法，將多個(gè)對(duì)象的屬性merge到第一個(gè)對(duì)象中
- BUI.merge(obj1,obj2..objn): 把所有對(duì)象的成員復(fù)制到一個(gè)新的對(duì)象上尽超，不影響參數(shù)中的對(duì)象
上面方法詳細(xì)的API官撼，請(qǐng)查看BUI的工具方法
下一步學(xué)習(xí)
恭喜您，相信您已經(jīng)對(duì)BUI的類的創(chuàng)建和繼承有一定的了解了似谁，那么接下來需要了解的是配置和屬性傲绣、方法和事件，再去學(xué)習(xí)CMD組織模塊巩踏，然后進(jìn)入到BUI控件編寫的學(xué)習(xí)中秃诵。
