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 () {