本文用seajs来讲解两种模块加载方式require和require.async的区别,类似java里的import,php里的include。
seajs模块加载器 seajs采用CMD规范,模块化开发,模块化要解决的问题:命名冲突、文件依赖关系。一个文件就是一个模块。
//test01.jsdefine(function(require){ console.log("这是test01"); var obj = { title:"这是test01" } return obj;});
//test02.jsdefine(function(require){ console.log("这是test02"); var obj = { title:"这是test02" } return obj;});
1、加载方式不同
require方法的加载方式是提前并行加载,并不是同步加载,看似同步,但还会往下执行,它不会因为一个文件而阻塞其他文件的加载。require.async方法的加载方式是异步按需加载,异步回调执行。
//index.js,1、比较加载方式define(function(require, exports, module){ if(false) { require("myjs/test01"); //加载文件:test01.js和test02.js }else{ require("myjs/test02"); } });/* define(function(require, exports, module){ if(false) { require.async("myjs/test01"); //加载文件:test02.js }else{ require("myjs/test02"); } }); *//*define(function(require, exports, module){ if(false) { require.async("myjs/test01",function(){ //加载文件:test02.js require("myjs/test02"); }); }});*/
2、加载阶段不同
require的文件在代码分析期加载,require. async的文件在代码执行期加载。
3、执行时间不同
require的文件预加载完成但不执行,require. async的文件加载完后立即执行。
//index.js,2,3、比较加载阶段和执行时间define(function(require, exports, module){ setTimeout(function(){ require("myjs/test01"); //页面渲染时就开始加载test01.js,代码执行在2s以后 },2000);}); /* define(function(require, exports, module){ setTimeout(function(){ require.async("myjs/test01",function(obj){ console.log(obj); }); //页面加载完成2s后开始加载test01.js,加载完执行代码,将返回值作为参数,执行回调函数 },2000);});*/
4、是否有回调函数
在seajs里,require没有回调函数,只能通过变量赋值,require.async可以将返回值作为一个参数放到回调函数中使用。
//index.js,4、比较是否有回调函数define(function(require, exports, module){ require.async('myjs/test01',function(obj){ console.log(obj); //加载并执行index.js,test01.js,输出obj对象 });});/* define(function(require, exports, module){ require('myjs/test01',function(obj){ console.log(obj); //只加载index.js,不加载test01.js,不执行index.js和test01.js,也不报错 });});*//*define(function(require, exports, module){ var obj = require('myjs/test01'); console.log(obj); //加载并执行index.js,test01.js,输出obj对象});*/