#組件開發是什么  組件開發：多組對象，像兄弟之間的關系（代碼復用的一種形式） 組件開發的第一個問題，當參數不寫的情況下會報錯；第二個問題當參數特別多的情況下，就會出現參數順序的問題 ``` <style> #div1, #div2, #div3, #div4{ width: 100px; height: 100px; position: absolute; } #div1{ background: #c40000; } #div2{ background: green; left: 100px; } #div3{ background: brown; left: 200px; } #div4{ background: blue; left: 300px; } </style> <script> window.onload = function () { var d1 = new Drag(); d1.init('div1'); var d2 = new Drag(); d2.init('div2', function () { document.title = 'hello'; }); var d3 = new Drag(); d3.init('div3', function () { document.title = '妙味'; }, function () { document.title = '課堂'; }); var d4 = new Drag(); d4.init('div4', function () { document.title = 'byebye'; }); }; function Drag() { this.obj = null; this.disX = 0; this.disY = 0; } Drag.prototype.init = function (id, toDown, toUp) { var _this = this; this.obj = document.getElementById(id); this.obj.onmousedown = function (e) { var e = e || window.event; _this.fnDown(e); toDown(); document.onmousemove = function (e) { var e = e || window.event; _this.fnMove(e); }; document.onmouseup = function () { _this.fnUp(); toUp(); }; return false; }; }; Drag.prototype.fnDown = function (e) { this.disX = e.clientX - this.obj.offsetLeft; this.disY = e.clientY - this.obj.offsetTop; }; Drag.prototype.fnMove = function (e) { this.obj.style.left = e.clientX - this.disX + 'px'; this.obj.style.top = e.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> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> ``` 解決方法：參考下一節《給拖拽組件配置不同參數》