前端模块化

前言

  模块化是前端开发的一个重要理念/思想，随着web的发展，嵌入网页的代码js代码越来越来，web开发变得越来越复杂，大型的web应用的复杂程度可能超过了桌面程序，所以模块化的思想因此而发展起来。模块就是实现特定功能的相互独立的一组方法。有了模块，就可以更好的管理web应用的逻辑，使用这种方式在不仅能提高代码复用率、可维护性，还能作为开源项目提供给开发者使用。

  模块化的发展经历了几个阶段，现在逐渐发展成熟，特别是ES6的模块化，引用前端圈的话可以说是王者归来。有了模块，为了开发者能够方便的加载模块，就需要一套编写模块的规范了，比较流行的有CommonJS、AMD、以及ES6模块化规范。我觉得学习的重点主要还是ES6模块化规范，毕竟被誉为终极解决方案、王者归来等等。目前nodejs还在使用CommonJS，但相信不久的将来nodejs也会转而使用ES6模块化规范。

CommonJS

  CommonJS核心思想是通过require方法同步加载依赖的其他模块，通过module.exports导出需要暴露的接口和变量。如上面所说，CommonJS的流行是因为nodejs采用了这种方式，CommonJS也被用于web开发中。

// 采用ES5语法
// 定义一个math模块
var baseCount = 0;

function add(a, b) {
    return a + b;
}

// 暴露需要导出的接口和变量
module.exports = {
    add: add,
    baseCount: baseCount
}

// 引入自定义模块
var math = require('./math')
// 引入核心模块不需要带路径
var http = require('http')

优点：

  代码可复用于nodejs环境下，通过npm发布的第三方模块大多都采用CommonJS规范(现在更多的则是ES6模块规范)

缺点：

  采用同步加载模块的方式，在服务端很适用，因为模块文件都存在本地，加载快。浏览器就会受限于网络原因，更好的方式是使用异步加载。

AMD

  AMD也是一种模块化规范，其采用了异步加载模块的方式，主要是用来解决浏览器环境的模块化问题。

// 定义模块
define('module', ['dep'], function(dep) {
  return exports;
});

// 导入使用
require(['module'], function(module) {
});

优点：

  在不转换代码的情况下可直接运行于浏览器环境和nodejs环境，可以异步加载多个模块。

缺点：

  没有原生支持，需要导入AMD的库才可以使用。

ES6

  ES6模块化是国际标准化组织ECMA提出的javascript模块化规范，在语言层面上实现了模块化。浏览器厂商和nodejs都宣布要原生支持该规范。它将逐渐取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

// 导出
export default Router;
export default {
    // ...
};
export function hello() {};
// 导入
import { Component, Vue, Prop, ... } from 'vue-property-decorator';
import Header from './components/Header.vue';

  ES6模块化是终极模块化解决方案，但缺点是目前无法直接运行于大部分JavaScript环境，必须通过工具转换成标准的ES5才能正常运行。

总结

  现在这个阶段，前两者作个了解就可以了，重点还是ES6模块化规范，是未来的趋势，也是模块化的终极解决方案，现在也可以通过工具转换成标准的ES5代码运行。另外，如果看完我的博客觉得还不ok，推荐去看一下黄玄的JavaScript模块化七日谈。