模块定义规范

文章目录

1. 1. CMD
2. 2. AMD

CMD

• 通用模块定义规范，一般用于后端，采用同步加载的方式。nodejs的npm实现了此标准。
• 规范中指定一个文件对应一个模块
• 代表：CommonJS

  //demo1.js 
  exports.add = function (a,b){
      return a+b;
  }
  
  //demo2.js
  module.exports  = function (){
      console.log("hello world demo2");
  }
  
  //demo3.js
  var Demo3 = function(){
     this.sysHello = function(){
        console.log("hello world Demo3");
     }
  }
  module.exports.Demo3 = Demo3;
  
  //demo4.js
  var Demo4 = function(){
     this.sysHello = function(){
       console.log("hello world Demo4");
     }
  }
  exports.Demo4 = Demo4;
  
  //demo5.js
  exports = [1,2];
  
  //demo6.js
  module.exports = [1,2];
  
  //mian.js
  var demo1 = require('./demo1');
  var demo2 = require('./demo2');
  var Demo3= require('./demo3').Demo3;
  var demo3_ = require('./demo3');
  var demo4 = require('./demo4');
  var demo5 = require('./demo5');
  var demo6 = require('./demo6');
  
  console.log(demo1.add(1,2));
  demo2();
  var demo3 = new Demo3();
  demo3.sysHello();
  var demo3_ = new demo3_.Demo3();
  demo3_.sysHello();
  var demo4 = new demo4.Demo4();
  demo4.sysHello();
  console.log(demo5)
  
  //输出
  3
  hello world demo2
  hello world Demo3
  hello world Demo3
  hello world Demo4
  {}
  [ 1, 2 ]

总结：

• module.exports是真正的模块定义接口，exports只不过是它的辅助工具。推荐使用exports导出，除非你打算从原来的“实例化对象”改变成一个类型
• module.exports 导出的是一个类型或实例对象 而exports返回的是一个实例对象

参考网站：commonjs

AMD

• 异步加载模块定义规范，也是一个文件对应一个模块。一般用于前端浏览器。因为浏览器加载javascript的时候回停止浏览器渲染引擎工作。阻塞页面渲染。页面显示空白对用户体验不好
• 原理就是在<script async/>标签中添加了async属性。只不过async是属于html5中的属性在浏览器IE9以下不支持

  /*
  对模块的返回值类型并没有强制为一定是个object，任何函数的返回值都是允许的。此处是一个返回了函数的模块定义
  */
  define(["./cart", "./inventory"], function(cart, inventory) {
          //return an object to define the "my/shirt" module.
          return {
              color: "blue",
              size: "large",
              addToCart: function() {
                  inventory.decrement(this);
                  cart.add(this);
              }
          }
      }
  );
  /*
  define()中包含了一个模块名称作为首个参数：这些常由优化工具生成。你也可以自己显式指定模块名称，
  但这使模块更不具备移植性——就是说若你将文件移动到其他目录下，你就得重命名。一般最好避免对模块硬编码，
  而是交给优化工具去生成。优化工具需要生成模块名以将多个模块打成一个包，加快到浏览器的载人速度。
  */
  define("foo/title", ["my/cart", "my/inventory"],function(cart, inventory) {
  	//Define foo/title object in here.
  });
  
  //简单包装CommonJS来定义模块
  define(function(require, exports, module) {
  	var a = require('a'),
  	    b = require('b');
  
  	//Return the module value
  	return function () {};
  });
  
  define(function(require) {
      var mod = require("./relative/name");
  });

参考网站：requirejs官网