JavaScript模块化编程-require.js

2017-09-04 本文已影响61人 plainnany

随着网页越来越复杂、代码量越来越巨大，网页已经趋近于桌面应用，因此JavaScript模块化编程显得尤为重要。理想情况下，开发者只需要关注核心业务逻辑的实现，其他都可以加载别人已经写好的模块。

一、什么是模块？

我们先来看一下通常情况下js的写法

var a = 'hello'
function foo(){
  // do something
}

在这个例子中，我们暴露了一下全局变量，如a，foo等，并且代码没有很好的分离开来，这样的代码，可以称为“面条式代码”，这些代码看起来杂乱无章，我们希望的是这些代码也可以跟html页面中的div一样，分割成一个一个的“豆腐块”，例如

// play.js
function foo1(){}
function foo2(){}

// tab.js
function tab(){}

函数foo1和函数foo2分割成了两个独立的部分，它们负责不同的功能，相互之间互不影响，那么，我们可以说foo1和foo2是两个不同的模块。当foo1和foo2在play.js这个文件里，例如表示该文件是某个播放功能的实现，而tab.js文件表示某个切换功能的实现，这两个文件表示不同功能，它们之间相互独立，互不影响，也可以认为是两个独立的模块。
因此我们可以认为一个模块就是一个独立的功能，它可以是一个函数，也可以是一个对象，还可以是一个文件。

二、产生的问题

但是这又出现了另外一个问题，暴露了foo1和foo2两个全局变量，无法保证不与其他模块产生冲突。为了解决这个问题，我们可以通过立即执行函数来处理

!function(){
  foo1(){}
  foo2(){}
}()

我们执行立即执行函数可以避免产生全局变量的问题，这样foo1()和foo2()就都是局部变量了。
不过又出现了另外一个问题，假如模块与模块之间有依赖关系怎么办呢？一个简单的例子就是当我们引入jQuery时进行编程，jQuery就可以认为是一个依赖，我们可以通过传入这个依赖来解决

!function($){
  foo1(){}
  foo2(){}
}(jQuery)

但是当模块与模块之间有较多的依赖，一个模块必须要等到所依赖的模块加载完成，才可以进行后面的代码，而且这个模块必须要写到所依赖的模块之后，上面的例子中这部分的代码必须写到引入的jQuery之后，否则就会出现错误。因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。

三、AMD

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

　require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。我们要介绍的require.js就是AMD规范实现的一个库。

四、require.js

根据之前描述，当多个模块产生依赖，首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的jQuery文件要在foo文件的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
require.js可以很好的解决这两个问题

实现js文件的异步加载，避免网页失去响应；
管理模块之间的依赖性，便于代码的编写和维护。

使用require.js

首先新建一个requirejs-demo的目录，安装require.js

也可以去官网下载
安装完成之后把它移动到scripts子目录下，
在index.html中引入

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

data-main属性的作用是，指定网页程序的主模块。在上例中，就是scripts目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。
假设现在 main.js 依赖 hello.js，hello.js 依赖 nany.js，最终需要在页面上输出'hello,nany'，那么我们可以这样实现

// main.js
require(['./hello'],function(x){
   document.write(x.x.name)
})
// 表示main.js主模块依赖hello.js当hello.js加载完成之后，再执行main.js指定的回调函数

// hello.js
define(['./nany'],function(x){
    return {
        x
    }
});
 // 在hello.js中，它依赖nany.js这个模块，加载nany.js完毕后，将nany.js保存的对象返回给hello.js

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。第二个参数为回调函数。

// nany.js
define({
    name: 'hello, nany'
})

当我们打开index.html，可以看到