我的前端进阶学习（一）—— 模块化开发

本文是我在学习一个开源的 Ajax 库时所总结的内容，总共分为了几个部分
这是其中第一部分，关于如何书写模块化的代码

;(function (root, factory) {
    'use strict'
    /* istanbul ignore next */
    if (typeof define === 'function' && define.amd) {
        define('ajax', factory)
    } else if (typeof exports === 'object') {
        exports = module.exports = factory()
    } else {
        // @deprecated
        root.Ajax = factory()
        root.ajax = factory()
  }
})(this, function () {
    'use strict'
    function Ajax (options) {/* code */}
    return Ajax
})

上面一段代码是从 Ajax 库中截取的头部代码，这里我们可以看到这个库在定义时是用了不同的方式。

首先它使用了一个匿名的自执行函数将代码包裹起来，这样做的好处就是可以避免全局变量污染和命名冲突等问题，但代码中那写if判断又是做什么的，
这就需要牵扯到前端的模块化开发。

javascript以前只是用于网页的特效、表单的验证等简单的功能，对于这些功能，我们只需要不多的代码就可以完成这些功能。

但随着技术的发展，我们需要使用javascript处理越来越多的事情，以前许多本来后台该处理的内容都转移的前端来处理，这使我们的代码量就会急剧膨胀。
如果还是像以前一样书写代码，那么对于我们后期的维护将是一场噩梦。

同时在开发中，我们难免会需要一些轮子，如果没有模块（model）这个概念，我们将很难简便的去使用别人制造的轮子。所以我们需要前端模块化。

因为我以前学习过python，这里用python的模块来解释，python中的模块，就是将逻辑上相关的代码放进同一个文件、文件夹当中，在这个模块中，我们只需要专注的实现我们想要的功能就好了，而不需要考虑类似命名冲突、全局变量污染等问题。
而对于模块的使用，只需要简单的使用import就可以调用。

前端的模块化开发就是类似于java中的包或python中的模块一样，我们将不同的功能放在不同的模块当中，在需要时简单调用就可以。但是javascript中并没有给我们提供这样的能（ES6中提供了Model，Module - ECMAScript 6入门）
所以我们需要一些方法去实现这样的功能。

首先推荐几篇文章，可以帮助我们更好的理解这些问题

• Javascript模块化编程（一）：模块的写法
• Javascript模块化编程（二）：AMD规范
• Javascript模块化编程（三）：require.js的用法
• 浏览器加载 CommonJS 模块的原理与实现

第一篇文章给了我们自己实现模块的方法，后面的文章提到了几个新的名词AMD、CMD、'CommonJS'等，还有两个js文件，require.js和sea.js
具体的内容可以看看知乎的这篇文章AMD 和 CMD 的区别有哪些？

我这里主要说说怎么去使用

// AMD 定义模块
define(['./model-a', './model-b'], 'name', function(model-a, model-b){
    model-a.doSomething();
    model-b.doSomething();
    // factory code;
})

// CMD 定义模块
define(function (require, exports, module){
    function factory(){};
    module.exports = factory; // 导出需要公开的api
})

有了这些只是的内容的铺垫，我们再看看上面的那段代码，这样就很清晰了

if (typeof define === 'function' && define.amd) {
    // 使用 require.js 的情况
    define('ajax', factory)
} else if (typeof exports === 'object') {
    // 使用 sea.js 的情况
    exports = module.exports = factory()
} else {
    // @deprecated
    // 这是传入的 root === window
    // 绑定到全局变量上
    root.Ajax = factory()
    root.ajax = factory()
}

学习这些东西是为了让自己的代码更加的精炼，将相关的代码放在同一个模块当中，方便自己以后的调用。
也可以将代码共享出来，方便别人调用，这在团队开发中是必不可少的。