当前位置： 代码迷 >> Web前端 >> 小结了Ext, base2, mootools，自己写了一个Class机制
  详细解决方案

小结了Ext, base2, mootools，自己写了一个Class机制

热度：246   发布时间：2012-11-23 00:03:43.0
总结了Ext, base2, mootools，自己写了一个Class机制
特性：

用了原型链继承作为基础（Ext）, 如果有覆写的方法，就把原方法存入新方法的base属性（mootools）。

使用了closure的设计模式，隐藏了内部使用的extend。

相对base2来说简单了许多。

js 代码
?
  1. /**?
  2. ?*??A?clean?and?prototype?class?
  3. ?*??
  4. ?*??msn:?HiYoungJay@hotmail.com?
  5. ?*??last?modified:?2007-10-23?
  6. ?*/??
  7. var?Class?=?(function()?{??
  8. ????var?get_proto?=?function(base)?{??
  9. ????????var?F?=?function(){};??
  10. ????????switch?(typeof?base)?{??
  11. ????????????case?"undefined":??
  12. ????????????????return?{};??
  13. ????????????case?"object":??
  14. ????????????????F.prototype?=?base;??
  15. ????????????????F.prototype.constructor?=?F;??
  16. ????????????????return?new?F();??
  17. ????????????case?"function":??
  18. ????????????????F.prototype?=?base.prototype;??
  19. ????????????????F.prototype.constructor?=?F;??
  20. ????????????????var?f?=?new?F();??
  21. ????????????????f.constructor?=?base;??
  22. ????????????????return?f;??
  23. ????????}??
  24. ????};??
  25. ??????
  26. ????var?extend?=?function(cur,?pre)?{??
  27. ????????for?(var?p?in?cur)?{??
  28. ????????????var?prep?=?pre[p];??
  29. ????????????var?curp?=?cur[p];??
  30. ????????????if?(typeof?curp?==?"function"?&&?typeof?prep?==?"function")?{??
  31. ????????????????curp.base?=?prep;??
  32. ????????????}??
  33. ????????????pre[p]?=?curp;??
  34. ????????}??
  35. ????????return?pre;??
  36. ????};??
  37. ??????
  38. ????var?mix?=?function()?{??
  39. ????????for?(var?i?=?0,?a?=?arguments,?len?=?a.length;?i?<?len;?i++)?{??
  40. ????????????var?ai?=?a[i];??
  41. ????????????if?(typeof?ai?==?"function")?{??
  42. ????????????????ai?=?get_proto(ai);??
  43. ????????????}??
  44. ??????????????
  45. ????????????for?(var?p?in?ai)?{??
  46. ????????????????if?(p?!=?"constructor")?{??
  47. ????????????????????this.prototype[p]?=?ai[p];??
  48. ????????????????}??
  49. ????????????}??
  50. ????????}??
  51. ????};??
  52. ??????
  53. ????var?get_constructor?=?function()?{??
  54. ????????var?native_constructor?=?Object.prototype.constructor;??
  55. ????????for?(var?i?=?0,?a?=?arguments,?len?=?a.length;?i?<?len;?i++)?{??
  56. ????????????var?ctor?=?a[i].constructor;??
  57. ????????????if?(ctor?!=?native_constructor)?{??
  58. ????????????????return?ctor;??
  59. ????????????}??
  60. ????????}??
  61. ????????return?function(){};??
  62. ????};??
  63. ??????
  64. ????return?{??
  65. ????????create:?function(props,?base)?{??
  66. ????????????var?base_props?=?get_proto(base);??
  67. ????????????var?F?=?get_constructor(props,?base_props);??
  68. ????????????F.prototype?=?extend(props,?base_props);??
  69. ????????????F.prototype.constructor?=?F;??
  70. ????????????F.mix?=?mix;??
  71. ????????????return?F;??
  72. ????????}??
  73. ????}??
  74. })();??

test
js 代码
?
  1. //?test??
  2. //?define?base?class??
  3. var?A?=?Class.create({??
  4. ????constructor:?function(name)?{??
  5. ????????this.name?=?name;??
  6. ????},??
  7. ??????
  8. ????getName:?function()?{??
  9. ????????return?this.name??
  10. ????}??
  11. });??
  12. //?define?sub?class??
  13. var?B?=?Class.create({??
  14. ????constructor:?function(name)?{??
  15. ????????arguments.callee.base.call(this,?"B:"?+?name);??
  16. ????}??
  17. },?A);??
  18. ??
  19. //?instantiate??
  20. var?a?=?new?A("I?am?a");??
  21. var?b?=?new?B("I?am?b");??
  22. ??
  23. //?very?lazy?adding?property?to?base?class?also?affects?sub?class??
  24. A.prototype.num1?=?1;??
  25. B.prototype.num2?=?2;??
  26. ??
  27. var?C?=?Class.create({??
  28. ????m1:?"m1"??
  29. });??
  30. //?mix?A?also?affects?B??
  31. A.mix(??
  32. ????{??
  33. ????????m2:?"m2"??
  34. ????},??
  35. ????C??
  36. );??
  37. ??
  38. a.change_prop?=?function()?{??
  39. ????//?instace?method?also?changes?prototype??
  40. ????this.constructor.prototype.tem?=?"tem";??
  41. };??
  42. ??
  43. a.change_prop();??
  44. ??
  45. ??
  46. //?The?changes?above?were?all?applied?to?a?and?b.??
  47. //?firefox?with?firebug??
  48. //console.log(a);??
  49. //console.log(b);??
  50. ??
  51. ??
  52. //?and?the?information?is?clean?:-)??
  53. //alert(A);??
  54. //alert(B);??

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.