模块化加载区别和总结

一、远古时期

• 知识点

• 2、定义模块

  define([module1,module2],function () {//这里也可以定义，定义这个模块需要的依赖
      //加载模块的思路：动态script，包装顺序，就是利用回调
      return {};
    });
  

  3、引入模块

  //main.js
  require.config({
         baseUrl: "/",
      　　paths: {}
  });
  
  require(['jquery','one'], function (res1,res2) {//这里定义：依赖jquery及one，都加载完之后，执行回调函数
  //res1,res2分别代表'jquery'和'one'的返回值
  });
  

  4、总结

  • require.js其实，就是利用动态script及一些列封装，来实现模块化加载

  ---

  • 优点：

  • 模块化初具雏形

  • 特定：

  • 异步加载，回调执行
  • AMD推崇依赖前置、CMD推崇就近依赖

  三、commonJs规范：如Node

  • 特点：同步加载
  • 导出：module.exports 或 exports
  • 导入：require

  1、定义模块

  ...
  module.exports={};//或exports.xx=...;
  

  2、引入模块

  let a=require('...');
  

  四、Es6规范：

  • 特点：结合Node及commonJs优点
  • 优点：词法分析+静态Node+动态script+现代版(promise,解析结构等等)
  • 导出：export
  • 导入：import

  五、对比总结

  对比项	Node	es6
  时机	运行加载	静态加载(编译词法分析时加载)
  采集(可以多次)	exports	export
  采集风格	exports.xx=... module.exports={a,b} 导出一个对象：module.exports	export {a,b} export let a=3 export default a 导出两个对象：匿名采集器容器，及default对象
  导入方式	导入是浅拷贝 基本类型不会同步 对象会同步	导入是赋值 所有都会同步
  导入对象个数	一个 module.exports	两个 匿名采集器容器 default