JS模块化开发----require.js

前言

前端开发中，起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果，后来js获得重视，应用也普遍起来了，jQuery，Ajax，Node.Js，MVC，MVVM等的助力也使得前端开发获得重视，也使得前端项目愈来愈复杂，然而，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，因此，进行模块化开发的重要性就不言而喻了。那么什么是模块呢？

一个模块就是实现特定功能的文件，有了模块，咱们就能够更方便地使用别人的代码，想要什么功能，就加载什么模块。

因此，今天小编介绍一下js模块化开发的几种方法。

 

1、模块化开发规范

js模块化的开发并非为所欲为的，为了便于他人的使用和交流，须要遵循必定的规范。目前，通行的js模块规范主要有两种：CommonJS和AMD。

 

1.1AMD

AMD 即Asynchronous Module Definition，中文名是“异步模块定义”的意思。它是一个在浏览器端模块化开发的规范，服务器端的规范是CommonJS；

模块将被异步加载，模块加载不影响后面语句的运行。全部依赖某些模块的语句均放置在回调函数中。

关于AMD有两个很是重要的概念，那就是用于模块定义的define方法和用于处理依赖加载的require方法。

 

（1）做为一个规范，只需定义其语法API，而不关心其实现。define函数定义以下：

1 define(
2      [module-name?] /*可选*/, 
3      [array-of-dependencies?] /*可选*/, 
4      [module-factory-or-object]
5  );

其中：

• module-name: 模块标识，能够省略。若是没有这个属性，则称为匿名模块。
• array-of-dependencies: 所依赖的模块，能够省略。
• module-factory-or-object: 模块的实现，或者一个JavaScript对象

举个栗子：

define(
    "myModule",
    ["foo", "bar"],

    // 模块定义函数，依赖(foo,bar)做为参数映射到函数上
    function (foo, bar) {
        // 建立模块
        var myModule = {
            myFun: function () {
                console.log("Jeri");
            }
        }

        // 返回定义的模块
        return myModule;
    }
);

 

（2）require()方法，有两个参数：

require([module], callback);

 

 其中：

• 第一个参数[module]，是一个数组，里面的成员就是要加载的模块；
• 第二个参数callback，则是加载成功以后的回调函数。

 举个实际栗子：

1 require(['math'], function (math) {
2 　　　　math.add(2, 3);
3 　　});

 

1.2CommonJS规范

 CommonJS是服务器端模块的规范，根据CommonJS规范，一个单独的文件就是一个模块。每个模块都是一个单独的做用域，也就是说，在该模块内部定义的变量，没法被其余模块读取，除非定义为global对象的属性。输出模块变量的最好方法是使用module.exports对象。

不过，与AMD表现形式不一样的是，CommonJS模块并不使用define进行定义。CommonJS模块由两部分组成：变量exports和require函数。

（1）exports/require:加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的module.exports对象。

再举个栗子：建立两个js文件：

libJS:

1 // 新定义的模块方法
2 function log(arg) {
3     console.log(arg);
4 }
5 
6 // 把方法暴露给其余模块
7 exports.log = log;

 

 app.JS:

 1 // ./lib是咱们须要的一个依赖
 2 var lib = requrie("./lib");
 3 
 4 // 新定义的模块方法
 5 function foo() {
 6     lib.log("jeri");
 7 }
 8 
 9 // 把方法暴露给其余模块
10 exports.foo = foo;

 

（2）module.exports

直接举栗子：

1 var i = 1;
2 var max = 30;
3 
4 module.exports = function () {
5   for (i -= 1; i++ < max; ) {
6     console.log(i);
7   }
8   max *= 1.1;
9 };

 

2、JS模块的经常使用写法

 在前言中小编也提过，模块：就是一个模块就是实现特定功能的文件，有了模块，咱们就能够更方便地使用别人的代码，想要什么功能，就加载什么模块。

除了接下来要讲的require.js，还有适合于一些简单模块的几种经常使用写法。

 

2.1字面量写法

要知道，模块就是实现特定功能的一组方法。

只要把不一样的函数（以及记录状态的变量）简单地放在一块儿，就算是一个模块。这也是最简单的一种写法。也就是说，每个函数就是一个简单的模块。

1 function func1 (){
2   alert("这是func1");
3 };
4 function func2 (){
5   alert("这是func2");
6 }

 把栗子中的两个函数func1()和func2()就组成了一个模块；

不过，这种写法有着必定的缺点：

若是只是实现一些简单的功能还好，若是实现复杂的功能，太多的函数就会出现问题，"污染"了全局变量，没法保证不与其余模块发生变量名冲突，并且模块成员之间看不出直接关系。

2.2对象写法

 因此，为了解决上述的问题，把模块写成一个对象，全部的模块成员都放到这个对象里面不失为一个好的方式。

再再举个栗子：

 1 var module = {
 2     func1 : function(){
 3       alert(1);      
 4     }
 5 
 6     func2 : function(){
 7       alert(2);      
 8     }
 9 }
10 
11 module.func1();
12 module.func2();

 

2.3经过闭包实现

 在JavaScript中，并不能能够直接声明类，但咱们可使用闭包来封装私有的属性和方法，进而模拟类的概念，在JavaScript中实现Module模式；

疯狂的举栗子：

 1 var myModule = (function () {
 2 
 3     // 私有变量
 4     var privateVar = 0;
 5 
 6     // 私有函数
 7     var privateFun = function (foo) {
 8         console.log(foo);
 9     };
10 
11     return {
12         // 私有变量
13         publicVar: "foo",
14 
15         // 公有函数
16         publicFun: function (arg) {
17 
18             // 修改私有变量
19             privateVar ++;
20 
21             // 传入bar调用私有方法
22             privateFun(arg);
23         }
24     };
25 }) ()

 

2.4输入全局变量

独立性是模块的重要特色，模块内部最好不与程序的其余部分直接交互。为了在模块内部调用全局变量，必须显式地将其余变量输入模块。

 

1 var module1 = (function ($, YAHOO) {
2 　　　　//...
3 　　})(jQuery, YAHOO);

 

3、require.js

 requir.JS本就是为了实现js的模块开发而建立的一个js脚本，其主要有着两大优势：

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

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

 

3.1require.js的实现步骤

 （1）众所周知，要导入js文件，为了不网页失去响应有两种方法；

第一种，把<script></script>放在文件的最后。

今天，咱们主要说第二种：

　<script src="js/require.js" defer async="true" ></script>

 async属性代表这个文件须要异步加载，避免网页失去响应。可是，IE不支持这个属性，只支持defer，因此须要把defer也写上。

（2）在HTML中导入require.JS文件后，就能够编写本身的main.js文件。

首先，导入main.js文件：

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

 

其中：data-main属性的做用是，指定网页程序的主模块。

在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。因为require.js默认的文件后缀名是js，因此能够把main.js简写成main。 

（3）编写main.js;

1 　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
2 　　　　// some code here
3 　　});

 经过require方法，实现代码的模块加载，传入两个参数：

①第一个参数是一个数组，表示代码所依赖的模块。
②第二个参数是一个回调函数，当前面的模块加载完成后，就会被调用。
加载的模块一参数的形式传入，从而在回调函数内部可使用这些模块，回调函数就是整个页面的JS代码;

再次疯狂的举栗子：

1 require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
2 　　　　// some code here
3 　　});

 

3.2模块的加载

在上面的栗子中，咱们可使用require.config()方法，对模块的加载行为进行自定义。

（1）require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。 

 不要命的举栗子：

1 require.config({
2 　　　　paths: {
3 　　　　　　"jquery": "jquery.min",
4 　　　　　　"underscore": "underscore.min",
5 　　　　　　"backbone": "backbone.min"
6 　　　　}
7 　　});

 

 （2）上面的代码给出了三个模块的文件名，路径默认与main.js在同一个目录（js子目录）。

若是这些模块在其余目录，好比js/lib目录，则有两种写法。

一种是逐一指定路径。

再次举栗子：

1 require.config({
2 　　　　paths: {
3 　　　　　　"jquery": "lib/jquery.min",
4 　　　　　　"underscore": "lib/underscore.min",
5 　　　　　　"backbone": "lib/backbone.min"
6 　　　　}
7 　　});

 另外一种则是直接改变基目录（baseUrl）。

再再次举栗子：

　require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

 （3）若是某个模块在另外一台主机上，也能够直接指定它的网址；

举栗子:

require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});

 

3.3require的AMD模块写法

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。

具体来讲，就是模块必须采用特定的define()函数来定义。若是一个模块不依赖其余模块，那么能够直接定义在define()函数之中。

假定如今有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：

 1 // math.js
 2 
 3 　　define(function (){
 4 
 5 　　　　var add = function (x,y){
 6 
 7 　　　　　　return x+y;
 8 
 9 　　　　};
10 
11 　　　　return {
12 
13 　　　　　　add: add
14 　　　　};
15 
16 　　});

 

 

加载方法以下：

1 // main.js
2 
3 　　require(['math'], function (math){
4 
5 　　　　alert(math.add(1,1));
6 
7 　　});

 

 

若是这个模块还依赖其余模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

 1 　define(['myLib'], function(myLib){
 2 
 3 　　　　function foo(){
 4 
 5 　　　　　　myLib.doSomething();
 6 
 7 　　　　}
 8 
 9 　　　　return {
10 
11 　　　　　　foo : foo
12 
13 　　　　};
14 
15 　　});

 

做者编

 在平常的工做中，js的模块法开发是一个不可或缺的一部分。在这里只是介绍了基于AMD模块的require.js。还有基于commonJS规范的node.js。小编会在下次和你们一块儿学习。