配置項

配置項類實例化時的初始配置，決定對象的初始值惠猿，我們看一下示例：

<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;">

1. <script>

2. function A (a,b){

3. }

4. var a = new A('a,','b'); //配置項作為獨立的參數(shù)傳入

5. function B (config){

6. }

7. var b = new B({a : 'a',b : 'b'}); //配置項作為鍵值對的形式傳入

8. </script>

</pre>

我們在這里約定胁艰，BUI中的所有控件的配置項全部按照鍵值對的形式傳入漾岳，也就是說所有的類實例化時只需要傳入一個參數(shù)腋寨。

屬性

屬性一般是指對象的某個性質蹋砚，對于javascript對象而言可以是對象扼菠、方法摄杂、直接量。由于javascript對象對于成員不存在訪問控制循榆，所以對成員的訪問和設置沒法進行控制析恢，屬性發(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;">

1. <script>

2. function A (a){

3. this.a = a;

4. this.setA = function(a){

5. this.a = a;

6. //do something

7. //log(a);

8. }

9. }

10. var obj = new A('a value');

11. //如果我想伴隨著a 值的改變做些處理

12. obj.setA('new a value');

13. //但是由于對象不存在訪問控制

14. obj.a = 'new b value'; //此時不會執(zhí)行對應的操作

15. </script>

</pre>

所以我們需要這樣一種屬性：

• 能夠對屬性的設置和訪問做限制
• 屬性的改變能夠通知其他對象
• 配置項通過初始化能夠轉成屬性

BUI.Base類

所以我們使用了BUI.Base類秧饮，它擁有以下功能：

• 有get和set方法用于獲取和設置屬性映挂，不能直接通過“.”,“[]”操作符修改屬性值。
• 屬性值發(fā)生改變時觸發(fā) beforeXxxChange 和 afterXxxChange 事件盗尸，其中屬性名是xxx
• 構造函數(shù)的配置項可以轉換成屬性值

屬性的細節(jié)和使用接下來我們會詳細的講解柑船，所有需要使用屬性的類，繼承BUI.Base類即可

<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;">

1. <script>

2. function A (config){

3. A.superclass.constructor.call(this,config)

4. }

5. BUI.extend(A,BUI.Base); //繼承屬性類

6. A.ATTRS = { //在ATTRS上定義屬性

7. a : {

8. value : 'a' //默認值

9. },

10. b : {

11. }

12. };

13. var a = new A({ a : 'initial a',b : 'b'}); //創(chuàng)建A 的實例

14. a.get('a'); //initial a

15. a.set('a','new a'); //new a

16. b.get('b'); //b

17. a.set('c','c');

18. a.get('c'); //c

19. </script>

</pre>

1. 聲明新的類A泼各，并在構造函數(shù)里調用父類的構造函數(shù)
2. 繼承BUI.Base使用BUI.extend方法
3. 聲明屬性值鞍时，每個屬性是一個對象，value是默認值历恐，屬性的定義下面有更詳細的介紹
4. 創(chuàng)建A的實例a寸癌，傳遞配置項，配置項會轉變成屬性值
5. 通過A的示例獲取弱贼，設置定義的屬性蒸苇，會觸發(fā)（beforeXxxChange,afterXxxChange)事件，例如name 屬性會觸發(fā)（beforeNameChange,afterNameChange)
6. 設置未定義的屬性吮旅，依然會生效溪烤，但是不會有默認值，依然會觸發(fā)事件

屬性的定義

上面的示例說明了如何定義一個屬性庇勃，和如何設置默認值value檬嘀，接下來我們來看屬性還支持哪些功能

<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;">

1. <script>

2. function A (config){

3. A.superclass.constructor.call(this,config)

4. }

5. BUI.extend(A,BUI.Base); //繼承屬性類

6. A.ATTRS = { //在ATTRS上定義屬性

7. a : {

8. value : 'a' //默認值

9. },

10. b : {

11. getter : function(v){ //獲取函數(shù)，v是當前屬性設置的值责嚷，返回值為 a.get('b')的值

12. return v * 2;

13. },

14. setter : function(v){

15. return parseInt(v);

16. }

17. },

18. c : {

19. valueFn : function(){ //在第一次調用此屬性是執(zhí)行此函數(shù)鸳兽，并作為屬性的值使用，只執(zhí)行一次

20. return this.get('a') + this.get('b');

21. }

22. },

23. d : {

24. value : 'd', //如果value和valueFn同時存在罕拂，則以value優(yōu)先

25. valueFn : function(){

26. return this.get('a');

27. }

28. }

29. };

30. var a = new A({a : 'a1',b : '2'}); //{a :'a1',b : '2'}

31. a.get('a'); //a1

32. a.get('b'); //2 * 2 = 4

33. a.get('c'); //a1 + 4 = a14

34. a.get('d'); //a1

35. </script>

</pre>

上面的示例說明了屬性的具體用法揍异，以及內部的成員的含義：

1. value : 屬性的默認值
2. getter : 獲取屬性時執(zhí)行，并以getter的返回結果為準
3. setter : 設置屬性時執(zhí)行爆班，以setter的返回值為準
4. valueFn : 屬性第一次獲取時執(zhí)行衷掷，之后作為value來使用，如果同時定義了value 柿菩，不執(zhí)行此函數(shù)戚嗅。

屬性圖示

下圖說明了屬性的執(zhí)行過程

image

Base類有2個私有字段和一個靜態(tài)字段：

1. ATTRS：是在類定義時指定的屬性定義
2. __attrs ：存放類和從父類繼承來的屬性定義
3. __attrVals：存放通過配置項設置的值或者通過set方法設置的值

屬性獲取

1. 獲取屬性值，先查找__attrVals中是否存在值，如果存在通過getter（如果存在）格式化返回懦胞；
2. 如果不存在查看__attrs里對應的屬性替久，查看是否存在value，存在通過getter格式化返回
3. 如果不存在医瘫，查看valueFn侣肄，執(zhí)行完valueFn后旧困，將返回值替換為value醇份，通過getter格式化返回

屬性設置

1. 設置值，先通過setter（如果存在）格式化
2. 觸發(fā)beforeXxxChange事件
3. 覆蓋__attrVals中的值
4. 觸發(fā)afterXxxChange事件

Xxx代表屬性名吼具，首寫字母大寫僚纷，如： name => beforeNameChange,afterNameChange

屬性類的API

BUI.Base繼承自BUI.Obeservable，繼承來的屬性和方法拗盒，請查看BUI的方法和事件

下面只是簡單的列表怖竭，未顯示從父類繼承來的方法，詳細信息請查看API文檔

下一步學習

BUI的配置和屬性是所有控件的一個基礎章節(jié)陡蝇，接下來繼續(xù)學習BUI的方法和事件痊臭，你可以去看一下如何組織模塊CMD組織模塊，然后進入到BUI控件編寫的學習中登夫。