requireJS 基本使用

Posted 2020-08-04

 

在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(); 返回值就是模块的导出