如果不了解js的继承的写法,可以先去看看我之前写的js的子类继承父类文章
http://www.jianshu.com/p/61b17c62c9fa

js的继承在写好后,我们会发现构造器传参,当参数多的情况下会出现,参数先后问题,和参数数量不对应的问题,而且直接js会报错

  • 要解决这个问题其实很简单,首先传参的先后顺序只需要一个是不是就解决问题了?可是要传很多东西呢,又要放在一个变量里,对,就是json,将变量放在一个json对象中。再来就是参数个数问题,当在调用的时候,传过来的参叫配置参数,我们可以在父类里预先设定好默认参数,在配置参数来了之后将其复制给默认参数,没有的参数将会使用默认的,有的用配置参数就搞定了参数个数问题了。
  • 下面直接上demo(对之前做的div拖动进行组件化的加工)

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5. <title>无标题文档</title>
    6. <style>
    7. #div1 {
    8. width: 100px;
    9. height: 100px;
    10. background: red;
    11. position: absolute;
    12. }
    13. #div2 {
    14. width: 100px;
    15. height: 100px;
    16. background: yellow;
    17. position: absolute;
    18. left: 100px;
    19. }
    20. #div3 {
    21. width: 100px;
    22. height: 100px;
    23. background: blue;
    24. position: absolute;
    25. left: 200px;
    26. }
    27. #div4 {
    28. width: 100px;
    29. height: 100px;
    30. background: green;
    31. position: absolute;
    32. left: 300px;
    33. }
    34. </style>
    35. <script>
    36. //组件开发 : 多组对象,像兄弟之间的关系( 代码复用的一种形式 )
    37. window.onload = function () {
    38. var d1 = new Drag();
    39. d1.init({ //配置参数
    40. id: 'div1'
    41. });
    42. var d2 = new Drag();
    43. d2.init({ //配置参数
    44. id: 'div2',
    45. toDown: function () {
    46. document.title = 'hello';
    47. document.body.style.background = 'black';
    48. }
    49. });
    50. var d3 = new Drag();
    51. d3.init({ //配置参数
    52. id: 'div3',
    53. toDown: function () {
    54. document.title = '妙味';
    55. },
    56. toUp: function () {
    57. document.title = '课堂';
    58. }
    59. });
    60. var d4 = new Drag();
    61. d4.init({ //配置参数
    62. id: 'div4',
    63. toUp: function () {
    64. document.title = 'beybye';
    65. }
    66. });
    67. };
    68. function Drag() {
    69. this.obj = null;
    70. this.disX = 0;
    71. this.disY = 0;
    72. this.settings = { //默认参数
    73. toDown: function () {
    74. },
    75. toUp: function () {
    76. }
    77. };
    78. }
    79. Drag.prototype.init = function (opt) {
    80. var This = this;
    81. this.obj = document.getElementById(opt.id);
    82. extend(this.settings, opt);
    83. this.obj.onmousedown = function (ev) {
    84. var ev = ev || window.event;
    85. This.fnDown(ev);
    86. This.settings.toDown();
    87. document.onmousemove = function (ev) {
    88. var ev = ev || window.event;
    89. This.fnMove(ev);
    90. };
    91. document.onmouseup = function () {
    92. This.fnUp();
    93. This.settings.toUp();
    94. };
    95. return false;
    96. };
    97. };
    98. Drag.prototype.fnDown = function (ev) {
    99. this.disX = ev.clientX - this.obj.offsetLeft;
    100. this.disY = ev.clientY - this.obj.offsetTop;
    101. };
    102. Drag.prototype.fnMove = function (ev) {
    103. this.obj.style.left = ev.clientX - this.disX + 'px';
    104. this.obj.style.top = ev.clientY - this.disY + 'px';
    105. };
    106. Drag.prototype.fnUp = function () {
    107. document.onmousemove = null;
    108. document.onmouseup = null;
    109. };
    110. function extend(obj1, obj2) {
    111. for (var attr in obj2) {
    112. obj1[attr] = obj2[attr];
    113. }
    114. }
    115. </script>
    116. </head>
    117. <body>
    118. <div id="div1"></div>
    119. <div id="div2"></div>
    120. <div id="div3"></div>
    121. <div id="div4"></div>
    122. </body>
    123. </html>

如果是一个人开发,这个组件化开发的形式基本够用

但是为了后期易于维护,更有利于团队开发,要使用将类里面的配置参数,方法,事件进行分离,编写自定义事件进行开发,后续自定义事件开发我也会写相关文档

可以先看看这个demo(基于之前的div拖动事件修改的自定义事件):
http://www.jianshu.com/p/4f2a951cb41a

您的支持是对我最大的鼓励!