SeaJS+RequireJS+模塊兒化開發相關筆記（一）

1.網站愈來愈複雜，js代碼，js文件也愈來愈多了，會遇到如下問題。 【 ◆命名衝突問題，代碼的可讀性差，沒辦法完整的寫到一起，團隊協做開發，不一樣開發人員的變量和函數命名可能相同 ◇解決方案一：命名空間法，添加一個命名空間，把某一起代碼放到一個命名空間裏，命名空間法是經過約定的方式定義的，var calculator={ a:123,  add:function(){}, substract:function(){}, mutiply:function(){} };calculator.divide=function(){};，可是若是沒有約定好，那麼別人直接一行 calculator=0;，那麼你的代碼所有沒有用了，雖然能夠解決命名衝突的問題，可是很牽強。 ◇駝峯命名法 ◇匈牙利命名法：如定義一個函數，var fnCalc;如定義一個數字，var numB;如定義一個字符串strName;，先寫這個變量的類型而後再寫變量名，不少年前的，通常用於弱類型，能夠百度查查。 ◇解決方案二：使用匿名函數的封裝性劃分私有空間，外面就調用不了你空間裏的方法和屬性，除了你本身願意暴露，這個解決方案已是極限了 【 var calculator=( function(){ var add=funciton(v1,v2){ return v1+v2; } var divide=funciton(v1,v2){ return v1/v2; } //向外暴露 add ，可是divide沒有暴露 return { add:add } })() 】，可是若是仍是有與方案一同樣的問題，可是若是使用MD5將變量名給加密，那樣就可能好一點，最好仍是須要約定一下，好比開閉原則，對直接修改關閉，對擴展開放，例子以下，對本來的calculator進行擴展，或者自定義 【 //開閉原則，對直接修改關閉，對擴展開放 var calculator=(function(cal){ cal.mod=function(v1,v2){ return v1%v2; } return cal; })(window.calculator||{});//參數的意義是，若是calculator存在，我就傳進去，這樣就是擴展，若是不存在，那麼我傳遞一個空對象進行，那麼就是自定義 】 】 ◆文件依賴問題，代碼重用時，引入 js 文件的數目可能少了或者引入的順序不對 【 ◇第一種方案：【 //本身寫的一個計算器 var calculator=( function(){ var add=funciton(v1,v2){ return v1+v2; } var divide=funciton(v1,v2){ return v1/v2; } //向外暴露 add ，可是divide沒有暴露 return { add:add } })(); //對原來的計算器作擴展 var calculator=(function(cal,$){ cal.add2=function(){ var v1=$('#v1').val(); var v2=$('#v2').val(); return (v1-0)+(v2-0); } return cal; })(window.calculator||{},window.$); //這麼作就是將$傳遞進去了，而且，就算你引入jQuery在這個代碼以後，也可使用，由於你將jQuery傳遞進去了，並且還能夠告訴別人，本身這個計算器是依賴jQuery的，看參數就很明顯了，這種方式很像angularJS中的依賴注入。 】 ◇依賴注入，在參數裏面告訴你，而後纔會去加載，誰幫我加載，我告訴誰，很牽強的解決文件依賴問題的方法，若是對方就是不給你加載，那麼就沒有辦法，只可以提一個醒。 ◇ 】 ◆ 2.模塊兒生產的優勢 ◆生產效率高：直接組裝就是成品。 ◆便於維護：維修方便，哪兒塊兒壞了就換哪塊兒。 ◆現實生活中模塊化的例子：模塊化計算機、谷歌模塊化手機、模塊化房屋 ◆代碼模塊化例子：日期模塊、數學計算模塊、日誌模塊 ◆生產角度： 一種生產方式，生產效率高，維護成本低。 ◆軟件開發角度：就是一種開發模式，寫代碼的一種方式，開發效率高，方便後期維護。 ◆ 3.程序模塊兒化 ◆日期模塊 ◆數學計算模塊 ◆日誌模塊 ◆登錄認證模塊 ◆報表展現模塊 ◆。。。。。。 ◆全部這些模塊共同組成了程序軟件系統 4.程序模塊化開發優勢 ◆開發效率高 ◇代碼方便重用，別人開發的模塊直接拿過來就可使用，不須要重複開發相似的功能 ◆方便後期維護 ◇軟件的聲明週期中最長的階段其實並非開發階段, 而是維護階段，需求變動比較頻繁，使用模塊化的開發方式更容易維護 5.模塊兒化開發演變過程 ◆全局函數：「污染」了全局變量，沒法保證不與其它模塊發生變量名衝突，模塊成員之間看不出直接關係 ◆對象封裝 – 命名空間：暴露了全部的模塊成員，內部狀態能夠被外部改寫，不安全命名，空間愈來愈長 ◆私有共有成員分離：私有空間的變量和函數不會影響全局做用域，公開公有方法，隱藏私有空間內部的屬性、元素。（使用匿名函數的封裝性劃分私有空間）。 6.模塊兒化規範 ◆服務器端規範： ◇CommonJS（http://www.commonjs.org/） ◇Node.js（https://nodejs.org/） ◆瀏覽器端規範： ◇AMD（https://github.com/amdjs/amdjs-api） ◇RequireJS（http://requirejs.org/） ◇CMD （https://github.com/amdjs/amdjs-api） ◇SeaJS（http://seajs.org/） ◆ 7.輔助開發模塊兒化JS的工具 ◆SeaJS ◇一個基於CMD規範實現的模塊化開發解決方案 ◇做者：Alibaba 玉伯 ◇官網：http://seajs.org/(老)、https://seajs.github.io/seajs/(新) ◇github：https://github.com/seajs/seajs ◇特性：簡單友好的模塊定義規範、天然直觀的代碼組織方式 ◇哲學：一切皆模塊 ◇遵循MIT協議，對一切開源，誰均可以避免費試用，可是不能忘記做者。 ◆ 10.SeaJS的使用 ◆開發(development)環境至關於：jquery.js原版，使用的時候沒有那麼多講究 ◆生產(production)環境至關於：jquery.min.js壓縮版，就是上線了，會注意不少地方，好比這時候用的jquery是壓縮過的 ◆SeaJS所在的路徑爲默認根目錄 ◆cmd規範：define()是用來定義模塊兒的，和angluar.module()同樣也是用來定義模塊兒的。 ◆require：加載JS ◆config：配置【 seajs.config({ base:'定義根目錄', alias:{ '別名'：'路徑'//方便調用 } }) 】 ◆exports=>至關於retrun，給它賦值至關於return value，不管是exports仍是module.exports都是向外暴露，他們都是一個對象，也可用經過.或者[]的方式來給它們添加屬性或者方法。 ★使用seajs注意，記住要知道 ☆exports是同樣的module.exports，都至關於向外暴露屬性或者方法 ☆require是在js中引入其它模塊兒的，會返回一個對象，而這個對像就是exports ☆注意cmd規範，規範就是必須用define(function(require, exports, module){})包起來，{}中寫你的代碼。 ☆能夠經過配置seajs.config()，能夠設置根目錄，還有能夠設置某一個模塊兒的路徑的別名，這樣在其它文件中引入其它模塊兒的時候可使用別名 ☆在html頁面中經過seajs.use()來引入而且啓動main.js，這個main.js就是外觀模式，特別重要。 ☆seajs.use(path,callback)，seajs也能夠進行異步操做，如使用callback， seajs.use('main.js',function(obj){ //這裏面的obj實際上是main傳遞過來的數據，能夠是一個函數或者一個對象。 }) ☆一個模塊兒對應一個js文件，而且seajs.use()與window.load沒有任何關係，因此若是你想在頁面文檔加載完畢以後執行，就須要本身加window.load。 ◆ ◆ ◆ ◆ ◆ ◆ 11.requirejs與seajs的區別 ◆requirejs是優先加載的，seajs是懶加載的，就是會在用的時候纔去加載。 ◆requirejs：http://www.requirejs.cn/ ◆不管是seajs仍是requirejs其實都很像是設計模式裏面的外觀模式，它們的main.js就是對全部模塊兒進行整合，這樣就只須要引入一個main.js了。 ◆不管是requirejs仍是seajs都是在一個js中引入其它的js，這個你直接那麼作是不可能的，js中沒法引入其它js ◆原理都是經過建立script標籤來引入js的，可是這個步驟再也不由你本身來實現，而是由requirejs與seajs，你只須要注重模塊兒，而後按照規範去用，就能夠了。 ◆例如你要使用jQuery和jQuery的不少不少插件，你可使用將這些組合起來，放到main.js中，那樣你就只須要引入main.js這一個就好了，還不須要將jQuery和jQuery的不少插件壓縮到一塊兒。 ◆模塊兒化除了解決了大量文件的引入，還解決的命名衝突的問題，由於它最後向外暴露了一個對象，你使用這個對象便可，以及文件依賴存在的順序問題，你能夠在main.js中去處理，不須要你在html文件中去處理，很是好。 ◆在ecma6裏面，是能夠直接引入原生js的，因此requirejs與seajs只是讓你學習模塊兒化的好處罷了，ecma6只是在一些比較新的瀏覽器中可使用，仍是存在兼容性的問題。