requireJS 基本使用

 

在requireJs 中，.js的後綴是能夠省略不寫的
 <script data-main="main" src="require.js"></script> 
在require.js 加載完以後，會查找頁面上script標籤的data-main屬性的值，而後加載，data-main指定的js文件

找到名爲main的js文件
經過requireJs同時加載了js一、js二、js3，也能夠同時加載更多js文件
第2個回調函數在導入的js文件所有加載完以後纔會執

require(['js1', 'js2', 'js3'], function(){
console.log('js1 js2 js3 loaded')
var total = num1 + num2 + num3
console.log(total)

hello1()
hello2()
hello3()
})

 

使用requireJs能夠很方便的導入js文件，可是要注意js文件中變量名和方法名與其餘js文件中變量名方法名衝突的問題
產生衝突的緣由：
瀏覽器端js文件存在共用的全局做用域，全局做用域中變量名、方法名可能會被覆使用requireJs加載js文件，會自動在head標籤中添加script標籤，這些script標籤帶有async屬性，async屬性會使瀏覽器異步並行加載這些js文件（即同時開始加載這些js文件）

 

建立模塊

判斷require是否正確

if (typeof define === "function"&&define.amd) {
console.log("define來自require.js")
} 

requirejs == require

requirejs(["js4"],function (js4) {
console.log("導出的是：")
console.log(js4);
});

 

 

 

模塊化 nodejs（服務端，commonJS） require.js（客戶端，AMD） sea.js（中國，客戶端,CMD） ES6（ECMA）

定義模塊

參數一模塊名必須字符串。參數2依賴，

define(["require", "exports", "module","js5"],function (require, exports, module,js5) {
//exports = "天幽"; 失敗
module.exports = "天幽";

console.log(require);
console.log(exports);
console.log(module);

//var num = require("js5") 獲取js5
//console.log(num);
});

或者這樣寫 define(function (require, exports, module,js5) { （ps：推薦上面那種。這種寫法消耗能比較大）

導出的方法4種
exports 是能使用.添加屬性，不能使用=從新賦值
module.exports 既能夠使用.添加屬性，也能夠使用=從新賦值
return 最經常使用方法，至關於在module.exports使用=
define(object) 直接跟一個對象，至關於module.exports = {};
全局中的require == requirejs();
函數做用域require == LocalRequire(); 返回值就是模塊的導出dua

 

require配置config

require.config({
    //  baseUrl:"libs/"  //相對默認位置
    baseUrl:"libs/",
    paths:{//相對位置
        "jquery":"libs/jquery"
    },
    shim:{//依賴關係
        "jquery.zyslide":["jquery"]//zyslide依賴jquery
    }//有依賴關係後能夠省略導入jquery


// 向服務端傳遞額外的參數，一般用來起到禁用緩存的效果

urlArgs: "time=" +  new Date().getTime()

})

requirejs(["jquery.zyslide"],function () {