js模块化

es6

定义了新的模块标准化,提供了modules

export xxx;
import xxx from file

没有采用nodejs的CommonJS,

没有实现require,

require和module.exports只是node的私有全局方法和对象属性

建议写法:

export {fun as default,a,b,c};

nodejs

模块的规范是CommonJS

module.exports = data;
var data = require(file)

commonjs 对应 浏览器,nodejs的概念位置

  |---------------浏览器----- ------------------|        |--------------------------CommonJS----------------------------------|

  |  BOM  |       | DOM |        | ECMAScript |         | FS |           | TCP |         | Stream |        | Buffer |          |........|

  |-------W3C-----------|       |---------------------------------------Node--------------------------------------------------|

CommonJS 是同步加载模块

var math = require('math'); //(同步) math.js 引去进来后,才会执行后面的add,文件都在磁盘上,同步没有任何问题

math.add(2,3); // 5

浏览器也能用

其为nodejs专有,由于浏览器没有全局变量module、require等,不过可以借助一些工具完成浏览器端的实现,

其原理是现将所有模块都定义好并通过 id 索引,这样就可以方便的在浏览器环境中解析了,

如:Browserify

// foo.js
module.exports = function(x) {
  console.log(x);
};
 
// main.js
var foo = require("./foo");
foo("Hi");
$ browserify main.js > compiled.js
$ browser-unpack < compiled.js
&nbsp;
[
  {
    "id":1,
    "source":"module.exports = function(x) {\n  console.log(x);\n};",
    "deps":{}
  },
  {
    "id":2,
    "source":"var foo = require(\"./foo\");\nfoo(\"Hi\");",
    "deps":{"./foo":1},
    "entry":true
  }
]
 

执行的时候,浏览器遇到 require('./foo') 语句,就自动执行1号模块的 source 属性,并将执行后的 module.exports 属性值输出。

CommonJS 已经过时,Node.js 的内核开发者已经废弃了该规范。

现在用了webpack和babel编译

es6的import 是编译时的,选择import的内容编译进来,性能更好

commonjs的require是运行时的,运行的时候,会执行require 模块后赋值给某个变量

目前不管是nodejs中,还是写前端代码,为了支持es6都是用babel编译,babel其实是把把es6转成es5,import编译成require,

所以用babel编译的代码可以混搭 import和require

浏览器端

为什么commonjs 不适合

CommonJS 是同步加载模块

var math = require('math'); //(同步) 等待math.js 引去进来后,才会执行后面的add,文件都在磁盘上,同步没有任何问题
math.add(2,3); // 5

这时候浏览器端不适合的,js是通过网络加载的,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于"假死"状态。

因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)。这就是AMD规范诞生的背景。

AMD是"Asynchronous Module Definition"的缩写

它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行

require(['math'], function (math) {
    math.add(2, 3);// math 加载好了后执行这句
  });

math.add()与math模块加载不是同步的,浏览器不会发生假死。

说白了,js的执行没有提高和改变,主要是不想让加载js影响到代码;所以需要我们换种回调类型的写法,加载好了通过回调执行js,没有谁会因为加载而卡住。

目前,主要有两个Javascript库实现了AMD规范:require.js和curl.js。

最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。

  <script src="1.js"></script>
  <script src="2.js"></script>
  <script src="3.js"></script>
  <script src="4.js"></script>
  <script src="5.js"></script>
  <script src="6.js"></script>

这段代码依次加载多个js文件。

这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

require.js的诞生,就是为了解决这两个问题:

(1)实现js文件的异步加载,避免网页失去响应;

(2)管理模块之间的依赖性,便于代码的编写和维护。

浏览器目前模块化方式

浏览器端有requirejs(AMD)和seajs(CMD)之类的工具包实现模块化,他们写法差不多,执行原理过程有点区别,后面会说

// ----------- AMD or CMD ----------------
define(function(require, exports, module){
  module.exports = {
    a : function() {},
    b : 'xxx'
  };
});


// ------------ AMD or CMD -------------
define(function(require, exports, module){
   var m = require('./a');
   m.a();
});

AMD(异步模块定义)主要为前端js的表现指定规范

define(id?: String, dependencies?: String[], factory: Function|Object);

id 是模块的名字,它是可选的参数。

dependencies 指定了所要依赖的模块列表,它是一个数组,也是可选的参数,每个依赖的模块的输出将作为参数一次传入 factory 中。如果没有指定 dependencies,那么它的默认值是 ["require", "exports", "module"]

define(function(require, exports, module) {})
 

factory 是最后一个参数,它包裹了模块的具体实现,它是一个函数或者对象。如果是函数,那么它的返回值就是模块的输出接口或值。

eg:

定义一个名为 myModule 的模块,它依赖 jQuery 模块:

define('myModule', ['jquery'], function($) {
    // $ 是 jquery 模块的输出
    $('body').text('hello world');
});
// 使用
define(['myModule'], function(myModule) {});

在模块定义内部引用依赖:

define(function(require) {
    var $ = require('jquery');
    $('body').text('hello world');
});

这里有define,把东西包装起来啦,那require.js 和 Node实现中怎么没看到有define关键字呢,它也要把东西包装起来呀,其实吧,只是他们隐式包装了而已

 

SeaJs和RequireJs区别

SeaJS对模块的态度是懒执行, 而RequireJS对模块的态度是预执行

如下模块通过SeaJS/RequireJS来加载, 执行结果会是怎样?

define(function(require, exports, module) {
    console.log('require module: main');

    var mod1 = require('./mod1');
    mod1.hello();
    var mod2 = require('./mod2');
    mod2.hello();

    return {
        hello: function() {
            console.log('hello main');
        }
    };
});

先试试SeaJS的执行结果,他是需要的时候执行依赖

    require module: main

    require module: mod1

    hello mod1

    require module: mod2

    hello mod2

    hello main

再来是RequireJS的执行结果,他是所有的依赖提前执行好了,

    require module: mod1

    require module: mod2

    require module: main

    hello mod1

    hello mod2

    hello main

参考: 

AMD http://www.cnblogs.com/chenguangliang/p/5856701.html

Commonjs http://www.cnblogs.com/skylar/p/4065455.html

相关推荐