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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,445评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,889评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,047评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,760评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,745评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,638评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,011评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,669评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,923评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,406评论 4赞 320
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,995评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2赞 342

推荐阅读更多精彩内容