1. 程式人生 > >前端模塊化——seaJS

前端模塊化——seaJS

bug jquery 文件的 問題 use bre 是個 靈活 彈出

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:true4、停止嵌套循環
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