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只是在一些比較新的瀏覽器中可以使用，還是存在兼容性的問題。