模块化

模块化是将一个复杂的系统分解为多个模块以方便编码。
以前开发通过命名空间的方式来组织代码，例如JQuery，放在window.$下，但是存在一些缺点：

  • 命名空间冲突，例如Zepto也被放在window.$下
  • 无法合理的管理项目的依赖和版本
  • 无法方便地控制依赖的加载顺序

CommonJS

CommonJS(​​http://www.commonjs.org​​)是一种广泛使用的JS模块化规范，使用方式如下：

// 导入
const moduleA = requre(./moduleA);

// 导出
module.exports = moduleA.someFunc;

优点：

  • 代码可复用于Node.js环境下并运行，例如做同构应用
  • 通过NPM发布的很多第三方模块都采用了CommonJS规范

缺点：
　* 无法直接在浏览器环境下运行，必须通过工具转换成ES5

AMD

也是一种JS模块化规范，与CommonJS不同在于，它采用了异步的方式去加载依赖的模块。

// 定义一个模块
define('module', ['dep'], function(dep){
  return exports;
});
// 导入和使用
require(['module'], funciton(module){
});

优点：

  • 可在不转换代码的情况下直接在浏览器中运行
  • 可异步加载依赖
  • 可并行加载多个依赖
  • 代码可运行在浏览器环境和Node.js环境下

ES6 模块化

它在语言层面上实现了模块化。浏览器厂商和Node.js都宣布要原生支持该规范，它将逐渐取代CommonJS和AMD规范，成为浏览器和拂去起通用的模块解决方案。

// 导入
import { readFile } from 'fs';
import React from 'react';

// 导出
export function hello() {};
export default {
// ...
};

缺点:
目前无法直接运行在大部分JS环境下，必须通过工具转换成标准的ES5后才能正常运行。

样式中的模块化

除了JS开始进行模块化改造，前端开发里的样式文件也支持模块化，例如SCSS、LESS等。

新框架

React、Vue、Angular

新语言

  • ES6
  • TS
  • Flow(类TS，但更灵活)
  • SCSS、LESS

常见构建工具

构建工具的功能：

  • 代码转换
  • 文件优化
  • 代码分割
  • 模块合并
  • 自动刷新
  • 代码校验
  • 自动发布

常见构建工具：

  • Npm Script
  • Grunt
  • Gulp
  • Fis3
  • Rollup
  • webpack(随着时代的发展，webpack目前已经具有统治的地位，其他的就不介绍了)