前端模組化——seaJS

標籤：表達   非同步   inner   檔案名稱   回調   innerhtml   對象   壓縮   方法   

1、seaJS手記　　

一：Bower擷取 要安裝bower    Npm install -g bower    Bower install seajs二：Use方法是整個項目的入口方法，通常一個項目中只調用一次即可方法接受兩個參數第一個參數表示引入模組的路徑    可以是一個字串，此時引入一個檔案    也可以是一個數組，每個成員表示一個檔案地址第二個參數是一個回呼函數    作用是全域範圍    回調中的參數個數與前面載入的模組一一對應三：Seajs中根目錄就是seajs所在的目錄；    在使用seajs時候，要將seajs放在最外面，這樣方便我們載入模組。    Seajs的use方法傳回值就是seajs對象，因此可以鏈式調用。四：建立一個檔案就是定義了一個模組，檔案中我們必須通過define方法定義模組，如果寫在define方法外面就不是模組的內容;因此屬性，方法，變數等等要寫在define裡面，這樣就是一個模組檔案。Define使用很靈活，有多種使用方法。傳遞一個參數    是一個實值型別的資料，這個資料就作為介面暴漏出來，如；字串，數字，布爾值，null;    是一個對象，此時這個對象就是暴漏的介面，屬性就是暴漏的屬性，方法就是暴漏的方法，如（{}）;    是一個函數（很重要，90%以上都是這種方式），這種方式跟符合commonjs規範，此時有是三個參數，require[載入外部模組]，exports[暴露介面]，module[返回模組資訊]。    範圍是全域範圍，因此不要通過this（它指向window）定義變數，會汙染範圍傳遞兩個參數    第一個參數        是一個字串，表示模組的名稱id;或是一個數組，表示模組依賴的集合。    第二個參數是一個回呼函數，跟上面的函數是一致的。傳遞三個參數    第一個參數是個字串，表示模組的id;[下次use的時候，就可以直接使用這個id，引入該模組]。    第二個參數是個數組，表示模組依賴的集合。    第三個參數是一個回呼函數，跟上面的函數式一致的。    寫在依賴集合中的相依模組，無論你有沒有使用它，它都會被載入。        五：require注意點：    第一點 定義模組的模組函數中參數require不能簡寫;    第二點 require不能修改[不能賦值給其他的變數、require不能賦值、require不能作為內建函式的參數、在子函數的內部，不能再修改require];    第三點 require的參數不能是運算式;    在一個檔案中如果define定義了多個模組時候，若沒指定id，此時後面的模組會覆蓋前面的;若指定了id，這些模組是相容的，此時想使用哪個模組，require這個id即可。    Require是同步載入模組，載入就可以使用[均會載入];Require.async是非同步載入模組，只能在載入完成的回呼函數中使用[條件成立才會載入]六：exports定義介面的6種方式：    1.exports.介面    2.module.exports.介面        第一種方式和第二種方式是可以繼續添加介面的    3.module.exports = {}        定義了所有的介面，不能在使用其他方式定義介面    4.module.exports = function(){}        定義的介面是函數介面，這個函數可以直接執行        定義的介面只一個就是函數，不能在添加其他介面屬性了（不能在使用前面兩種方式了）    5.return {} 這個對象就是暴漏的介面        定義的對象表示全部的介面，不能再用其他方式定義介面了，並且它的優先順序大於前面四種方式    6.return function(){} 將方法作為一個介面    ||----------------------------------------------------------------------------------------||    7.return 實值型別        這個中方式跟module.exports = 實值型別是一樣的， 跟define傳遞實值型別資料是一致的    8.module.exports = 實值型別資料    9.define 一個參數時候，這個參數如果是實值型別資料可以作為介面    10.define 如果是一個對象，這個對象可以作為一個暴漏的介面    ||----------------------------------------------------------------------------------------||    定義介面的優先順序        return > module.exports={} > module.exports.或者exports。    注意:    第三種和第四種方式使用時一定要注意前面是否使用了前兩種定義介面的方式;    所以使用return要注意前面是否使用了其他方式，否則會覆蓋掉;    想逐一定義介面，只能使用前兩種方式。    七：module：    此對象裡包含模組所有的屬性資訊，我們在模組內部可以通過這個模組來查看它的相關屬性資訊。    對象的一些屬性    Id 表示模組的真實id，如果沒有設定，他的值就是uri    Uri 表示模組所在檔案的地址。        若模組沒有定義id，那麼這個uri就是真實的地址;        若模組定義了id，那麼uri的檔案名稱就是id的名稱。    Dependencies 依賴的模組，是一個資料，根據依賴集合構建的    Deps 相依模組對象，每一個屬性對應一個模組的id，屬性值模組的對象    Exports表示模組暴漏的介面    Status 表示模組的狀態    八：對於非seajs模組化的類庫，我們需要手動定義它，通過define的CMD規範定義就可以正常使用了。九：配置config    seajs.config({      alias: {          ‘jquery‘: ‘lib/jquery-1.12.2.js‘      },      // 簡化路徑書寫的      paths: {          lib: ‘lib‘      },      // 如果我們壓縮檔，如果我們將檔案名稱加上.min尾碼，此時如果去模組內部修改寫著模組成本很高，此時我們通過map來配置      map :[          [‘main.js‘, ‘main.min.js‘]          // [‘.js‘, ‘.min.js‘]      ],      // 定義路徑模板變數      vars: {          d: ‘dom‘      },      base: ‘js‘,      debug: true,      charset: ‘gbk‘    });

seaJS手記

2、js經驗手記

1、我們習慣使用setTimeout(function(){    alert(1111111)},1000); 這樣使用也可以,後面是是回調參數setTimeout(function(num){    alert(num);},1000,111111);2、拼接字串window.onload = function(){    document.body.innerHTML = "<div>div</div><span>span</span><p>p</p>";};  window.onload = function(){    document.body.innerHTML = "<div>div</div>"+                            "<span>span</span>"+                            "<p>p</p>"+                            "55555555555";};  window.onload = function(){    document.body.innerHTML = "<div>div</div>                            <span>span</span>                            <p>p</p>                        55555555555";};3、typeof使用var arr = [];console.log( typeof arr);arr.num = 10;【可以這樣加任何行為或是屬性，這樣length還是0】console.log( typeof arr);console.log( typeof(arr));【1-3:object】console.log(arr instanceof Object);console.log(arr instanceof(Object));console.log( ‘num‘ in arr);console.log( ‘num‘ in(arr)); 【4-7:true】4、停止嵌套迴圈for(var i=0;i<5;i++){    for(var j=0;j<1;j++){        if ( i== 3) {            break;          }        alert(i);    }}【只是3不彈出最外面沒有停止】 有時候有需求把所有的迴圈都跳出a : for(var i=0;i<5;i++){        for(var j=0;j<1;j++){            if ( i== 3) {                break a;            }             alert(i);        }}for迴圈其他寫法var i = 0;for(;;){    alert(i);    if (++i>5) {        break;    }}5、匿名函數自執行(function(){     alert(1111);})()； //在函數前面不加小括弧，加上位元運算符都可以解決這個問題 ~ ++function(){    alert(111);}();6、建立對象可以省略括弧 系統對象也有類似的形式function Aaa(){}var a1 = new Aaa;alert(a1);var arr = new Array;alert( arr.length);

js經驗手記

 

前端模組化——seaJS