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控件编写的学习中。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容