[javascript模块化]require.js简单使用

##1.javascript模块规范

###CommonJS

主要用于服务器端编程，比如node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。

引用一段代码：
```
  // package/lib is a dependency we require

  var lib = require( "package/lib" );

  // behavior for our module

  function foo(){

      lib.log( "hello world!" );

  }

  // export (expose) foo to other modules as foobar

  exports.foobar = foo;
```
注释也很清楚，但是这里面有个很大的问题，不适用于浏览器环境。当需要用到log方法时候必须等待依赖模块lib加载完毕，整个应用将会停滞，因此浏览器环境不能使用commonjs规范，只能采用异步加载，即下面将要引出的AMD规范。
###AMD

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

上面的代码可以修改为如下：
```
  define(["package/lib"], function (lib) {

      // behavior for our module

      function foo() {

          lib.log( "hello world!" );

      }

      // export (expose) foo to other modules as foobar

      return {

          foobar: foo

      }

  });
```
然后我们需要调用这个模块方法的时候可以这样：
```
  require(["package/myModule"], function(myModule) {

      myModule.foobar();

  });
```
利用一个毁掉函数，这样加载不是同步的，浏览器就不会假死，显然AMD规范更适合浏览器环境。现在最流行的AMD规范的javascript库就是require.js,下面我们来介绍。

##2.require.js使用

###为什么要使用

（1）实现js文件的异步加载，避免网页失去响应；

　　（2）管理模块之间的依赖性，便于代码的编写和维护。

###引入require.js

  　<script src="js/require.js"></script>

  　<script src="js/require.js" data-main="js/main"></script>

这里的data-main是指定主模块，即js目录下的main.js，这里简写省去后缀。

###main.js写法
```
  　　// main.js

  　　requirejs(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB,moduleC){

  　　　　// some code here

  　　});

  　　
```
require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA', 'moduleB', 'moduleC']，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
###requirejs.config()　
```
  requirejs.config({

  	//设置别名

  	paths: {

  		jquery : "jquery-1.11.3.min"

  	}

  });
```
require.js要求，每个模块是一个单独的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。

###define方法

正如前面AMD规范中引用的例子，模块必须采用define函数来定义。假设main.js中定义了一个log模块，log.js应该这样写：

  define(["lib"], function (lib) {

      // behavior for our module

      function foo() {

          lib.log( "hello world!" );

      }

      // export (expose) foo to other modules as foobar

      return {

          foobar: foo

      }

  });

然后在main.js中引用：

	require(["log"], function(log) {

	    log.foobar();

	});

巴特西

[javascript模块化]require.js简单使用

最新文章

热门文章