require和require.async的区别

最新推荐文章于 2023-04-04 14:14:30 发布

weixin_30664615

最新推荐文章于 2023-04-04 14:14:30 发布

阅读量1k

点赞数

文章标签： javascript php java ViewUI

原文链接：http://www.cnblogs.com/camille666/p/require_requireasync.html

版权

本文用seajs来讲解两种模块加载方式require和require.async的区别，类似java里的import，php里的include。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>seajs模块加载器</title>
</head>
<body>
seajs采用CMD规范，模块化开发，模块化要解决的问题：命名冲突、文件依赖关系。一个文件就是一个模块。
  <!--<script type="text/javascript" src="scripts/seajs/sea.js" id="seajsnode" data-main="myjs/index"></script>-->
  <script src="scripts/seajs/sea.js" id="seajsnode"></script>
  <script>
    seajs.use("myjs/index");
  </script>
</body>
</html>

//test01.js
define(function(require){
  console.log("这是test01");
  var obj = {
    title:"这是test01"
  }
  return obj;
});

//test02.js
define(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对象
});
*/

转载于:https://www.cnblogs.com/camille666/p/require_requireasync.html

weixin_30664615

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
require和require.async的区别

本文用seajs来讲解两种模块加载方式require和require.async的区别，类似java里的import，php里的include。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>seajs模块加载器</t...
复制链接

扫一扫