一、利用構(gòu)造函數(shù)模式進(jìn)行開發(fā)的優(yōu)勢
1、業(yè)務(wù)邏輯思路更清晰；
2、避免了大量全局變量的產(chǎn)生，只有一個全局變量，相當(dāng)于就是這一功能模塊向外暴露的唯一接口；
3、如果結(jié)合模塊化開發(fā)，很方便就可以把自定義的模塊加到統(tǒng)一modules中，只要自定義的模塊名不沖突，使用起來也不會互相干擾；
4、代碼可維護(hù)性好，利人利己；
二、下面就利用這一模式，以拖拽為實例，進(jìn)行講解。
1、html，如下：
<body> <div class="box" id="box1"><div class="main"><div class="bar">拖拽區(qū)</div><div class="content">內(nèi)容區(qū)塊</div></div></div> <div class="box" id="box2"><div class="main"><div class="bar">拖拽區(qū)</div><div class="content">內(nèi)容區(qū)塊</div></div></div> <div class="box" id="box3"><div class="main"><div class="bar">拖拽區(qū)</div><div class="content">內(nèi)容區(qū)塊</div></div></div></body>
2、css
<style type="text/css"> .box{position:absolute;left:100px;top:100px;padding: 5px;box-shadow:2px 2px 4px #666666; font-size:12px;} #box2{left:500px;} #box3{left:900px; } .main{border:1px solid #a0b3d6;background-color: #fff; } .bar{line-height:24px;padding-left:5px;border-bottom:1px solid #a0b3d6;background-color:#beceeb;cursor:move;} .content{padding: 10px 5px;height:200px;width:250px;}</style> 3、js
// 定義Drag構(gòu)造函數(shù)，并設(shè)置每個實例的特權(quán)屬性（也就是將來要創(chuàng)建的每個實例對象私有的屬性）；function Drag(bar, target) { // 此處的bar是指觸發(fā)拖拽事件的對象； this.bar = bar; // 此處的target是值實際上被拖動的對象； this.target = target; // 這個flag相當(dāng)于是一個開關(guān)，用于判斷事件是否能夠執(zhí)行； this.flag = false;}// 構(gòu)造函數(shù)原型上添加方法，也是為其實例添加公用方法公用方法；Drag.prototype = { // 重新聲明原型的constructor屬性，也就是為實例指定正真的創(chuàng)建者；這里不重新指定也沒問題，就是為了。。。 constructor : Drag, // 初始化每個實例的屬性，為綁定事件做好準(zhǔn)備； init : function(){ // 這邊的this其實是指調(diào)用這個init函數(shù)方法的那個對象，也就是我們所創(chuàng)建的實例； // 這么寫有好處，代碼執(zhí)行到綁定事件那一塊再詳細(xì)的講； var temp = this; // 獲取實例對象上最先設(shè)定的樣式值，這邊就是left和top屬性； temp.left = temp.getCss(temp.target, "left"); temp.top = temp.getCss(temp.target, "top"); // 預(yù)先聲明下面要用的到值，這邊是指儲存鼠標(biāo)點下去的瞬間鼠標(biāo)相對于屏幕的位置（clientX、clientY） temp.mousePosX = null; temp.mousePosY = null; // 發(fā)出為實例對象綁定事件的命令； temp.bindEvent(); }, // getCss : function(o , prop){ // Dom對象的style屬性指向的對象只能獲得嵌入式樣式的值，比如<a style="..."></a>，這種寫在元素內(nèi)部的可以獲得； // 但是通過外聯(lián)樣式表和內(nèi)聯(lián)樣式表設(shè)置的樣式值，只能通過以下方法獲得，currentStyle對應(yīng)的是Ie，另一個對應(yīng)的是其他瀏覽器； return o.currentStyle ? o.currentStyle[prop] : document.defaultView.getComputedStyle(o, null)[prop]; }, bindEvent : function(){ // 先把調(diào)用這個bindEvent方法的this對象（也就是我們創(chuàng)建的實例對象）傳遞給temp變量，于是temp也就指向了實例對象； // 因此，在當(dāng)前函數(shù)的執(zhí)行環(huán)境內(nèi)，想要調(diào)用這個實例對象，而不必要使用this了，因為此時的this可能指向的其他的對象； // 比如，在為某個對象綁定事件的時候，這個事件內(nèi)部的this肯定是指向綁定的對象的，而不是我們想要的最開始的那個“this” var temp = this; // 監(jiān)聽鼠標(biāo)點下的事件函數(shù) temp.bar.onmousedown = function(e){ // 這邊的e是指事件對象，老Ie不能直接使用，得通過window.event來引用； e = e || window.event; // 點下的瞬間就把這個開關(guān)打開，表明現(xiàn)在可以拖動了； temp.flag = true; // 獲取鼠標(biāo)相對與瀏覽器窗口的位置，并且賦值給實例對象的mousePos屬性； temp.mousePosX = e.clientX; temp.mousePosY = e.clientY; }; // 監(jiān)聽鼠標(biāo)移動事件，注意這個綁定到document對象上的事件，因為鼠標(biāo)在整個文檔上移動； // 這邊不能用onmousemove方法綁定事件，因為我們的實例可能有多個，如果用次方法，最后初始化的那個實例才綁定到事件函數(shù)； document.addEventListener('mousemove' ,function(e){ e = e || window.event; // 因為在鼠標(biāo)點下的時候，已經(jīng)指定flag為true了，所以下面的代碼才會執(zhí)行； // 如果沒有這個開關(guān)控制，我們移動鼠標(biāo)的時候，我們創(chuàng)建的實例對象都要移動； if(temp.flag){ // （e.clientX - temp.mousePosX）代表了鼠標(biāo)自按下后滑動的距離； // parseInt(temp.left)是指鼠標(biāo)還沒滑動時，被拖動對象的初始位置； temp.target.style.left = parseInt(temp.left) + e.clientX - temp.mousePosX + "px"; temp.target.style.top = parseInt(temp.top) + e.clientY - temp.mousePosY + "px"; } }); // 鼠標(biāo)放開后事件 document.addEventListener('mouseup', function(e){ // 鼠標(biāo)放開后，就把這個開關(guān)了，就說明拖動對象不能被拖動了； temp.flag = false; // 記錄被拖動對象的被拖動后的位置 temp.left = temp.getCss(temp.target, "left"); temp.top = temp.getCss(temp.target, "top"); }); }}// 獲取Dom元素，oBar是指拖動條，oBox是指實際上拖拽對象；var oBox = document.getElementsByClassName('box');var oBar = document.getElementsByClassName('bar');// 創(chuàng)建實例對象，注意參數(shù)順序；var drag1 = new Drag(oBar[0], oBox[0]);var drag2 = new Drag(oBar[1], oBox[1]);var drag3 = new Drag(oBar[2], oBox[2]);// 調(diào)用實例對象上的init方法，為實例對象指定設(shè)計好的操作流程；drag1.init();drag2.init();drag3.init(); 具體的過程都通過js注釋說明了，希望能夠幫助大家更好地利用構(gòu)造函數(shù)實現(xiàn)拖拽效果。
