BUI基础-类的创建和继承

类的创建

BUI里的所有类的方法都在原型链上，这决定了创建类和继承类的方式。关于类的定义和实例化请参看w3school的文章

下面是一个BUI中创建的最简单的类，其中的细节我们在本章和接下来的几章里详细论述

<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. //创建类

3. function NewClass(config){

4. NewClass.superclass.constructor.call(this,config); //调用父类的构造函数

5. //ToDo Something

6. }

7. BUI.extend(NewClass,BUI.Base); //继承BUI.Base类

8. BUI.augment(NewClass,{ //在原型链上注册方法

9. m1 : function(){

10. this.m2();

11. this.m3();

12. },

13. m2 : function(){

14. },

15. m3 : function(){

16. }

17. });

18. var a = new NewClass({a : '124'}); //实例化对象

19. a.m1();

20. </script>

</pre>

上面的内容包含了以下信息：

• 声明一个类，在构造函数中调用父类的构造函数
• superclass：指向父类
• BUI.extend方法，实现了继承，下面会详细讲解
• BUI.augment : 将对象上的成员复制到类的原型链上，如上代码参数2对象中的成员方法将会复制到NewClass的原型链上面去

类的继承

BUI的类的继承使用原型链的方式，提供了BUI.extend方法，具体的实现原理请参看：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;">

1. <script>

2. //声明类A

3. function A(config){

4. BUI.mix(this,config); //将配置信息附加到实例自身，后面讲解BUI.Base后，就不再使用此方式

5. }

6. //声明A的方法

7. BUI.augment(A,{

8. m1 : function(){

9. console.log('a m1');

10. },

11. m2 : function(){

12. console.log('a m2');

13. }

14. });

15. //声明B

16. function B (config){

17. B.superclass.constructor.call(this,config); //B 继承A，调用A的构造函数

18. }

19. BUI.extend(B,A); //B 继承A

20. BUI.augment(B,{ //实现B的方法

21. m1 : function(){

22. console.log('b m1');

23. },

24. m3 : function(){

25. console.log('b m3');

26. }

27. });

28. //声明C

29. function C (config){

30. C.superclass.constructor.call(this,config);

31. }

32. BUI.extend(C,B); //C 继承B

33. BUI.augment(C,{

34. m1 : function(){

35. console.log('c m1');

36. B.prototype.m1.call(this); //调用父类的m1方法

37. //不要使用 C.superclass.m1.call(this);

38. },

39. m2 : function(){

40. console.log('c m2');

41. }

42. });

43. //实例化

44. var c = new C({a : 'a',b : 'b'});

45. c.m1(); //c m1 > b m1

46. c.m2(); //c m2

47. c.m3(); //b m3

48. </script>

</pre>

解释说明

• BUI.mix ： 把一个对象的成员复制到另一个对象
• 构造函数里面需要调用父类的构造函数，由于javascript缺少原生的支持，所以需要自己调用
• 原型链上的方法会覆盖，子类的方法覆盖父类的方法
• 调用父类的同名方法时，直接调用父类prototype上的方法，而不要通过superclass,在这篇文章里有论述

类的多继承

javascript不支持多继承，BUI.extend方法只能指定一个类作为superclass，所以为了实现多继承我们引入了一个新的方法BUI.mixin,这个方法可以将多个类的原型链上的方法复制到需要继承的类上

<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. //声明类A

3. function A(){

4. }

5. //声明A的方法

6. BUI.augment(A,{

7. m1 : function(){

8. console.log('a m1');

9. },

10. m2 : function(){

11. console.log('a m2');

12. }

13. });

14. //声明B

15. function B (){

16. }

17. BUI.augment(B,{ //实现B的方法

18. m1 : function(){

19. console.log('b m1');

20. },

21. m3 : function(){

22. console.log('b m3');

23. }

24. });

25. //声明C

26. function C (config){

27. this.mix(this,config);

28. }

29. BUI.augment(C,{

30. m1 : function(){

31. console.log('c m1');

32. },

33. m2 : function(){

34. console.log('c m2');

35. }

36. });

37. function D (config){

38. D.superclass.constructor.call(this,config);

39. }

40. BUI.extend(D,C);

41. BUI.mixin(D,[A,B]);

42. BUI.augment(D,{

43. m2 : function(){

44. console.log('d m2');

45. },

46. m3 : function(){

47. console.log('d m3');

48. }

49. });

50. //实例化

51. var d = new D({a : 'a',b : 'b'});

52. d.m1(); //b m1

53. d.m2(); //d m2

54. d.m3(); //d m3

55. </script>

</pre>

我们把mixin的方式叫做扩展，可以通过多个类扩展自己的方法，这里有扩展的更加详细的介绍

继承的相关函数

上面的示例中用到了几个继承中常用的函数：

• BUI.extend(newclass,superclass): 实现类的继承
• BUI.augment(newclass,obj): 把对象的成员复制到类的原型链上
• BUI.mix(obj1,obj2,...objn): 把后面对象的成员复制到第一个，封装 jQuery.extend 方法，将多个对象的属性merge到第一个对象中
• BUI.merge(obj1,obj2..objn): 把所有对象的成员复制到一个新的对象上，不影响参数中的对象

上面方法详细的API，请查看BUI的工具方法

下一步学习

恭喜您，相信您已经对BUI的类的创建和继承有一定的了解了，那么接下来需要了解的是配置和属性、方法和事件，再去学习CMD组织模块，然后进入到BUI控件编写的学习中。