requireJS 基本使用

 

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

找到名為main的js文件
通過requireJs同時加載了js1、js2、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 () {