如果不了解js的继承的写法，可以先去看看我之前写的js的子类继承父类文章
http://www.jianshu.com/p/61b17c62c9fa
js的继承在写好后，我们会发现构造器传参，当参数多的情况下会出现，参数先后问题，和参数数量不对应的问题，而且直接js会报错
要解决这个问题其实很简单，首先传参的先后顺序只需要一个是不是就解决问题了？可是要传很多东西呢，又要放在一个变量里，对，就是json，将变量放在一个json对象中。再来就是参数个数问题，当在调用的时候，传过来的参叫配置参数，我们可以在父类里预先设定好默认参数，在配置参数来了之后将其复制给默认参数，没有的参数将会使用默认的，有的用配置参数就搞定了参数个数问题了。
-
下面直接上demo（对之前做的div拖动进行组件化的加工）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 { width: 100px; height: 100px; background: red; position: absolute; } #div2 { width: 100px; height: 100px; background: yellow; position: absolute; left: 100px; } #div3 { width: 100px; height: 100px; background: blue; position: absolute; left: 200px; } #div4 { width: 100px; height: 100px; background: green; position: absolute; left: 300px; } </style> <script> //组件开发 : 多组对象，像兄弟之间的关系( 代码复用的一种形式 ) window.onload = function () { var d1 = new Drag(); d1.init({ //配置参数 id: 'div1' }); var d2 = new Drag(); d2.init({ //配置参数 id: 'div2', toDown: function () { document.title = 'hello'; document.body.style.background = 'black'; } }); var d3 = new Drag(); d3.init({ //配置参数 id: 'div3', toDown: function () { document.title = '妙味'; }, toUp: function () { document.title = '课堂'; } }); var d4 = new Drag(); d4.init({ //配置参数 id: 'div4', toUp: function () { document.title = 'beybye'; } }); }; function Drag() { this.obj = null; this.disX = 0; this.disY = 0; this.settings = { //默认参数 toDown: function () { }, toUp: function () { } }; } Drag.prototype.init = function (opt) { var This = this; this.obj = document.getElementById(opt.id); extend(this.settings, opt); this.obj.onmousedown = function (ev) { var ev = ev || window.event; This.fnDown(ev); This.settings.toDown(); document.onmousemove = function (ev) { var ev = ev || window.event; This.fnMove(ev); }; document.onmouseup = function () { This.fnUp(); This.settings.toUp(); }; return false; }; }; Drag.prototype.fnDown = function (ev) { this.disX = ev.clientX - this.obj.offsetLeft; this.disY = ev.clientY - this.obj.offsetTop; }; Drag.prototype.fnMove = function (ev) { this.obj.style.left = ev.clientX - this.disX + 'px'; this.obj.style.top = ev.clientY - this.disY + 'px'; }; Drag.prototype.fnUp = function () { document.onmousemove = null; document.onmouseup = null; }; function extend(obj1, obj2) { for (var attr in obj2) { obj1[attr] = obj2[attr]; } } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>
如果是一个人开发，这个组件化开发的形式基本够用
但是为了后期易于维护，更有利于团队开发，要使用将类里面的配置参数，方法，事件进行分离，编写自定义事件进行开发，后续自定义事件开发我也会写相关文档
可以先看看这个demo（基于之前的div拖动事件修改的自定义事件）：
http://www.jianshu.com/p/4f2a951cb41a
