JavaScript模块化编程

最近更新时间：2018年4月10日14:59:30

《我的博客地图》

    技术需要学习，更需要实践和积累，随着web项目的健壮，前端的岗位职责越来越重大，本文主要详解JavaScript模块化编程的概念、由来、发展和现状。

    JavaScript语言，对于初级web前端工程师而言，说到API，可能指的就是官方定义的用于浏览器应用程序的那些方法，比如：String.slice()、Reg.exec()、Array.map()。但是站在一门语言的高度上，这种理解过于狭隘。此时，就出现了各种组织，纷纷制定语言层面上的API，这里所说的API是用于普通应用程序的，而非浏览器应用，类似于Python、Ruby和Java的标准库。

    三大规范：CommonJS、AMD、CMD

1、CommonJS

    CommonJS, a group with a goal of building up the JavaScript ecosystem for web servers, desktop and command line apps and in the browser.——为web服务器、桌面应用程序、命令行工具建立JavaScript生态系统的一个组织。（commonjs wiki）

实例：NodeJS、webpack

注：NodeJS，将javascript语言用于服务器端编程，完全遵循CommonJS规范，是CommonJS规范的实现。

    CommonJS定义的模块分为以下三部分内容：

require()用来引入外部模块；

exports对象用于导出当前模块的方法或变量，唯一的导出口；

module对象就代表模块本身。

    原理：

浏览器不兼容CommonJS的根本原因是缺少四个Node.js环境的变量，module、exports、require、global，只要能够提供这四个变量，浏览器就能加载 CommonJS 模块。

2、AMD

    Asynchronous Module Definition，异步模块定义，AMD也采用require()语句加载模块，但要求两个参数：

require([moduleA,moduleB], function(moduleA,moduleB){

moduleA.fun();

moduleA.attr;

});

实例：require.js curl.js，这两个库实现了AMD规范

3、CMD

    Common Module Definition，通用模块定义

实例：seajs，创始人，玉伯，支付宝前端，seajs作者，国内开源支持者，中文github排行第二。玉伯（王保平），淘宝前端类库 KISSY、前端模块化开发框架SeaJS、前端基础类库Arale的创始人。

4、最佳模块化编程方案：立即执行函数写法封装独立模块的私有变量和方法

    比如，项目整体需要封装一个 用户输入信息（手机号、身份证号、邮箱）的校验模块，可采用如下模块化方案，模块内部对象成员私有化不对外暴露，即外部无法修改内部私有成员，只能访问。

//commonJS.js

var commonJS = (function(){

  var statement = "this module is a common JS function!";

  var isPhone = function(){if(true) return true};

  var isIdcard = function(){if(true) return true};

  var isEmail = function(){if(true) return true};

  return {

    statement:statement,

    isPhone:isPhone,

    isIdcard:isIdcard,

    isEmail:isEmail

  }

})();

参考：

js模块化编程之彻底弄懂CommonJS和AMD/CMD！

再谈 JS中的模块规范（CommonJS，AMD，CMD）来自玉伯的seajs分析