本文用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对象
});
*/

require和require.async的区别的更多相关文章

  1. [转]require(),include(),require_once()和include_once()区别

    require(),include(),require_once()和include_once()区别 面试中最容易提到的一个PHP的问题,我想和大家共勉一下: require()和include() ...

  2. <script>标签里的defer和async属性 区别（待补充）

    defer与async的区别(表格显示): table th:first-of-type { width: 150px; } table th:nth-of-type(2) { } 区别 defer ...

  3. url，href和src的区别，defer和async的区别

    URL(Uniform Resource Locator):统一资源定位符,互联网上的每个文件都有一个唯一的URL,基本URL包含协议,IP地址,路径和文件名. 重点:herf和src的区别 href ...

  4. require,include,require_once,include_once的区别

    最近面试时被问到,一时间还真没想到太多,仅仅回答了大概的几个,于是回来再确认一下. 以下内容为网络摘抄: ①作用及用法  可以减少代码的重复 include(_once)("文件的路径&qu ...

  5. require include php5中最新区别，百度上好多错的。

    二者报错机制不同,include是warning 继续执行程序,require会报致命错误,中断程序运行. 前者有返回值,后者则没有. 注意了,php5里有一个区别没了,之前说的是require是无条 ...

  6. require/exports 和 import/export 区别

    零.区别 1.require/exports 是 CommonJS 的标准,适用范围如 Node.js 2.import/export 是 ES6 的标准,适用范围如 React 一.间接获取对象 ( ...

  7. require/load/include/extend的区别

    require 一般用于加载一个库,当多次使用require加载一个库时,只有第一次有效,后面的都会加载失败,也就是会返回"false",以为require会追踪文件是否被加载. ...

  8. 【转载】PHP中require(),include(),require_once()和include_once()区别

    关于这方面的知识,这篇文章讲的较全: http://www.jb51.net/article/22467.htm require 的使用方法如 require("MyRequireFile. ...

  9. [Vue]webpack的require与require.context

    1.require 1.1完整路径的require语句: require('tools'); //preset alias tools require('./js/main'); 1.2带表达式的 r ...

随机推荐

  1. Centos7.4+openvpn-2.4.4+easy-rsa-3.0物理机安装教程

    完整CentOS搭建OpenVPN服务环境图文教程 大福技术 关注 2016.02.17 09:28* 字数 3017 阅读 34000评论 18喜欢 21赞赏 3 对于OpenVPN环境有什么用途老 ...

  2. 【CSS】定义元素的位置

    CSS定义元素的位置html元素的position属性,有4个属性值,分别是static.relative.fixed.absolute static: 1.默认值,一般不显式设置为static 2. ...

  3. JeeSite 4.x 树形结构的表设计和用法

    有些同仁对于 JeeSite 4 中的树表设计不太了解,本应简单的方法就可实现,却写了很多复杂的语句和代码,所以有了这篇文章. 在 JeeSite 4 中的树表设计我还是相对满意的,这种设计比较容易理 ...

  4. [原] eclipse 无法找到 run as junit

    碰见这个问题,折磨我好一下! 问题根源和解决方式 第一,保证有junit jar包,基本不会犯这错误: 第二,保证你这个类是Source可编译文件,要是这个类在普通文件夹下,工程是不会编译它的,也就找 ...

  5. 用于阻止缓冲区溢出攻击的 Linux 内核参数与 gcc 编译选项

    先来看看基于 Red Hat 与 Fedora 衍生版(例如 CentOS)系统用于阻止栈溢出攻击的内核参数,主要包含两项: kernel.exec-shield 可执行栈保护,字面含义比较“绕”, ...

  6. hibernate介绍及环境搭建

    1.前言 hibernate与mybatis的位置一样,都是属于DAO层的框架,代替我们原来的JDBC操作数据库,属于ORM(object relationg mapping. 对象关系映射)框架.O ...

  7. Ansible Tower系列 二（安装 Tower）【转】

    文档:http://docs.ansible.com/ansible-tower/ 安装前检查 python版本为2.6 保持网络畅通 内存预留充足 安装用户为root 软件下载 下载地址:http: ...

  8. [cookie篇]cookie-parser之parser.js

    cookie-parser的作用,官方的说法是:Parse Cookie header and populate req.cookies with an object keyed by the coo ...

  9. eclipse安装插件的常用方法

    安装插件1.从eclipse安装压缩jar包,如安装svn工具包:eclipse_svn_site-1.10.5.zip(不要解压)2.Help3.Install New Software,如下图,N ...

  10. 使用badblocks命令检测、修复硬盘坏道(待验证)

    今天我的新硬盘到了.暂时没想好怎么用它.可以把它装入光驱位硬盘架给G430用,也可以把它当成移动硬盘来用. 想起以前记录过一个badblocks的用法,用来检查坏道,这里再贴一遍备用. ####### ...