九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

define({a:"這里是屬性a的值"});

define傳入的是一個(gè)對(duì)象字面量?，F(xiàn)在這個(gè)東東就可以叫做一個(gè)模塊了~我想在頁(yè)面一加載的時(shí)候就把a(bǔ)的值alert出來(lái)，怎么做呢？繼續(xù)往下看。

2，在頁(yè)面上引入這個(gè)模塊：

1 seajs.use('./m1.js',function(ex){2      alert(ex.a);3  }); //彈出“這里是屬性a的值”

翻譯得直白一點(diǎn)，大意就是：

seajs : Hi~m1.js，我現(xiàn)在要用（use）你了，然后把你的公開(kāi)接口（exports）存到我回調(diào)函數(shù)的參數(shù)（ex）里，你把想給我調(diào)用的東東放到這個(gè)參數(shù)里吧~么么噠

m1.js : 好的，我定義的對(duì)象字面量放到接口里給你了，拿去盡管刷~

然后……a的值就彈出來(lái)了。很愉快的一次交易。 PS：頁(yè)面所調(diào)用的模塊就為整個(gè)web應(yīng)用的js入口。本例中js的入口就是m1.js。 接下來(lái)再來(lái)看看如果 define的參數(shù)是個(gè)函數(shù) 的情況。

1，先定義一個(gè)模塊m2.js：

1 define(function(require,exports,module){2     var var1 = "這是要alert出來(lái)的值";//私有變量，沒(méi)有通過(guò)接口返出去的其他模塊不能訪問(wèn)3     function alerts(){4         alert(var1);5     }6     exports.alerts = alerts;//將需要公開(kāi)的方法存入exports接口中7 });

1 seajs.use('./m2.js',function(ex){2      ex.alerts();//ex中存的有m2.js中的公開(kāi)對(duì)象3 }); //彈出“這是要alert出來(lái)的值”

1 define({a:"這里是屬性a的值"});

2，m2.js模塊要依賴（require）m1.js：

1 define(function(require,exports,module){2     var var1 = "這是要alert出來(lái)的值";//私有變量，沒(méi)有通過(guò)接口返出去的其他模塊不能訪問(wèn)3     var var2 = require('./m1.js').a;//這里就是m2.js模塊調(diào)用m1.js的方式：var2的值等于當(dāng)前模塊所依賴的m1.js對(duì)外接口中屬性a的值4     function alerts(){5         alert(var2);6     }7     exports.alerts = alerts;//將需要公開(kāi)的方法存入exports接口中8 });

3，頁(yè)面上引入m2.js模塊（同上一個(gè)例子），結(jié)果就會(huì)把a(bǔ)的屬性值給alert出來(lái)~

五、實(shí)例：模塊化的拖拽個(gè)窗口縮放

當(dāng)然，上面幾個(gè)例子是簡(jiǎn)單到不能再簡(jiǎn)單的例子，估計(jì)親們也已經(jīng)看出來(lái)一些道道，但個(gè)人感覺(jué)還是沒(méi)能體現(xiàn)出 模塊化開(kāi)發(fā)的優(yōu)勢(shì) 。那下面就來(lái)看一個(gè)實(shí)例： 模塊化的拖拽個(gè)窗口縮放 。先看一下效果圖：

PS：效果圖中的紅色區(qū)域要先定縮放的范圍，即寬高0px-寬高500px 。要寫(xiě)這樣一個(gè)需求的例子，按照之前的編程習(xí)慣你會(huì)怎么寫(xiě)？反正在之前，我是會(huì)把所有的功能寫(xiě)到一個(gè)js文件里，效果出來(lái)就行，隨你們?cè)趺春鷶囆U纏

。而自從認(rèn)識(shí)了模塊化開(kāi)發(fā)，內(nèi)心不止一次告訴自己，拿到需求bigger一定要高，一定要高（雖然require.js和sea.js這兩個(gè)東東在圈內(nèi)多多少少還是有些爭(zhēng)議）……

廢話少說(shuō)，首先來(lái)分析一下需要?jiǎng)澐侄嗌賯€(gè)模塊吧：

1，一開(kāi)始就要有個(gè)入口模塊的吧？恩，必須的！ 入口模塊 Get√~

2，既然是拖拽，要有個(gè)拖拽模塊吧？恩，必須的！ 拖拽模塊 Get√~

3，既然要縮放，要有個(gè)縮放模塊吧？恩，必須的！ 縮放模塊 Get√~

4，既然限定縮放范圍<=500px，那還要有個(gè)限定縮放范圍的模塊吧？恩，這個(gè)可以有，但為了以后調(diào)整范圍數(shù)值方便，還是單列個(gè)模塊吧。 限定縮放范圍模塊 Get√~

到這里我們就把本需求劃分成了四個(gè)模塊：

·  入口模塊：main.js

·  拖拽模塊：drag.js

·  縮放模塊：scale.js

·  限定縮放范圍模塊：range.js

首先，是頁(yè)面引入入口模塊（我盡量把注釋都寫(xiě)在代碼中，以便對(duì)照代碼，這樣也就不用寫(xiě)大片大片的文字了~）：

1  <script>2     seajs.use('./js/main.js');//沒(méi)有callback函數(shù)表明引入后直接執(zhí)行入口模塊3 </script>

 1 //入口模塊 2 define(function(require,exports,module){ 3     var $id = function(_id){return document.getElementById(_id);} 4     var oInput = $id("button1"); 5     var div1 = $id("div1"); 6     var div2 = $id("div2"); 7     var div3 = $id("div3");//以上是獲取頁(yè)面元素的幾只變量 8     require('./drag.js').drag(div3);//引入拖拽模塊，執(zhí)行拖拽模塊接口中的drag方法并傳參 9     exports.oInput = oInput;10     oInput.onclick = function(){11         div1.style.display = "block";12         require('./scale.js').scale(div1,div2);//引入縮放模塊，執(zhí)行縮放模塊接口中的scale方法并傳參13     }14 });

恩，還真是全面呢

 1 //拖拽模塊 2 define(function(require,exports,module){ 3     //這個(gè)方法就是實(shí)現(xiàn)拖拽的方法，不用詳述了吧？ 4     function drag(obj){ 5         var disX = 0; 6         var disY = 0; 7         obj.onmousedown = function(e){ 8             var e = e || window.event; 9             disX = e.clientX - obj.offsetLeft;10             disY = e.clientY - obj.offsetTop;11             document.onmousemove = function(e){12                 var e = e || window.event;13                 var l = require('./range.js').range(e.clientX - disX, document.documentElement.clientWidth - obj.offsetWidth,0);14                 var t = require('./range.js').range(e.clientY - disY, document.documentElement.clientHeight - obj.offsetHeight,0);15                 obj.style.left = l + "px";16                 obj.style.top = t + "px";17             }18             document.onmouseup = function(){19                 document.onmousemove = null;20                 document.onmouseup = null;21             }22         }23     }24     exports.drag = drag;//返回拖拽模塊中想要被公開(kāi)的對(duì)象，也就是在本模塊中定義的drag方法。注意有參數(shù)~25 });

接下來(lái)是 縮放模塊(scale.js) ?？s放模塊還需要調(diào)用  限定縮放范圍模塊 (range.js)  的哦~這點(diǎn)不要搞忘了。

 1 //縮放模塊 2 define(function(require,exports,module){ 3     //這個(gè)方法就是obj2控制obj1改變大小的方法，也不再詳述啦~ 4     function scale(obj1,obj2){ 5         var disX = 0; 6         var disY = 0; 7         var disW = 0; 8         var disH = 0; 9         obj2.onmousedown = function(e){10             var e = e || window.event;11             disX = e.clientX;12             disY = e.clientY;13             disW = obj1.offsetWidth;14             disH = obj1.offsetHeight;15             document.onmousemove = function(e){16                 var e = e || window.event;17                 var w = require('./range.js').range(e.clientX - disX + disW,500,100);//看這里看這里，引入了限定范圍的range.js模塊~18                 var h = require('./range.js').range(e.clientY - disY + disH,500,100);19                 obj1.style.width = w + "px";20                 obj1.style.height = h + "px";21             }22             document.onmouseup = function(){23                 document.onmousemove = null;24                 document.onmouseup = null;25             }26         }27     }28     exports.scale = scale;//將需要公開(kāi)的對(duì)象存入模塊接口中，以便其他模塊調(diào)用~29 });

最后就是 限定范圍的模塊(range.js) 了。

 1 //限定拖拽的范圍模塊 2 define(function(require,exports,module){ 3     function range(inum,imax,imin){ 4         if(inum > imax){ 5             return imax; 6         }else if(inum < imin){ 7             return imin; 8         }else{ 9             return inum;10         }11     }12     exports.range = range;13 });

這就是模塊化，雖然在這個(gè)實(shí)例中我們用到了4個(gè)js，但在頁(yè)面上我們只引入了一個(gè)入口模塊main.js，其他模塊都會(huì)按需自動(dòng)引入（如下圖所示），而且每個(gè)功能模塊的區(qū)分特別清晰，再也不用擔(dān)心神馬命名沖突啊、依賴混亂啊之類的，而且團(tuán)隊(duì)小伙伴每人負(fù)責(zé)一個(gè)模塊，只要放出當(dāng)前模塊的公開(kāi)接口并提供簡(jiǎn)要的說(shuō)明文檔（因?yàn)闃?biāo)準(zhǔn)統(tǒng)一），其他小伙伴們寫(xiě)的模塊就能非常方便地調(diào)用到你寫(xiě)的模塊，連修改的時(shí)候都不用考慮對(duì)其他功能的影響，變得更大膽了呢~

查看完整DEMO請(qǐng)猛戳

寫(xiě)在最后

其實(shí)本文介紹的模塊化和seajs的使用依舊比較淺顯，但基本的模塊化思想已經(jīng)融入到例子中了。 如果你經(jīng)歷過(guò)前文所述的以前寫(xiě)js邏輯的各種糾結(jié)各種坑爹，不妨嘗試一下將你的代碼模塊化，那將是一種飛一樣的感覺(jué)……

SeaJs官網(wǎng) ：  http://seajs.org/docs/