前端开发的发展

近年来 Web 应用变得更加复杂与庞大， Web 前端技术的应用范围也更加广泛。从复杂、庞大的管理后台，到对性能要求苛刻的移动网页，再到类似于 ReactNative 的原生应用开发方案， Web 前端工程师在面临更多机遇的同时也面临更大的挑战 通过直接编写 JavaScript cssHTML 开发 Web 应用的方式己经无法应对当前 Web 应用的发展 近年来，前端社区涌现出多新思想与框架，下面将一一介绍它们。

模块化

模块化是指将一个复杂的系统分解为多个模块以方便编码。

很久以前，开发网页通过命名空间的方式来组织代码，例如jQuery库将他的API都放在了window.$下，在加载完jQuery后，其他模块再通过window.$去使用jQuery。这样有很多问题，其中包括:

1.命名空间冲突，两个库可能会使用同一个名称，例如Zepto(http://zeptojs.com)也被放在window.$下;

2.无法合理地管理项目的依赖和版本;

3.无法方便的控制依赖的加载顺序。

当项目变大时，这种方式将变得难以维护，需要使用模块化的思想来组织代码。

1.CommonJS

CommonJS ( http: //www.commonjs.org ）是一种被广泛使用的 JavaScript 模块化规范，其核心思想是通过 require 方法来同步加载依赖的其他模块，通过 module.exports 出需要暴露的接口。 CommonJS 规范的流行得益于 Node.js 采用了这种方式，后来这种方式被引入 到了网页开发中

采用CommonJS导入及导出的代码如下：

// 导入

const moduleA = reqiuire('./moduleA');

// 导出

module.exports = moduleA.someFunc;

CommonJS的优点在于：

1.代码可复用于Node.js环境下运行，例如做同构应用;

2.通过Npm发布的很多第三方模块都采用了CommonJS规范

CommonJS的缺点在于：

这样的代码无法直接运行在浏览器环境下，必须通过工具转换成标准的ES5。

另外说明：

CommonJS 还可以细分为 CommonJSl CommonJS2 ，区别在于 CommonJSl 只能通过exports . XX = XX 的方式导出，而 CommonJS2 CommonJSl 基础上加入了 module.exports = XX 的导出方式。 CommonJS 通常指 CommonJS2。

2.AMD

AMD ( https://en.wikipedia.org/wiki/ Asynchronous_ module_ definition ）也是 JavaScript模块化规范，与 CommonJS 最大的不同在于，它采用了异步的方式去加载依赖的模块。 AMD规范主要用于解决针对浏览器环境的模块化问题，最具代表性的实现是 requirejs (http:// requirejs. org )。

采用AMD导入及导出的代码如下：

// 定义一个模块

define('module',['dep'],function(dep){

    return exports;

});

// 导入和使用

require(['module'],function(){

});

AMD的优点在于：

1.可以在不转换代码的情况下直接在浏览器中运行。

2.可异步加载依赖。

3.代码可运行在浏览器和Node.js环境下。

AMD的缺点在于：

JavaScript运行环境没有原生支持AMD，需要先导入实现了AMD的库后才能正常使用。

3.ES6模块

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

采用ES6模块化导入及导出的代码如下：

// 导入

import { readFile } from 'fs';

import React from 'react';

// 导出

export function hello(){};

export default{

    // ...

};

另外说明：

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

4.样式文件中的模块化

除了JavaScript开始进行模块改造，前端开发里的样式文件也支持模块化。以SCSS为例，将一些常用的样式片段放进了一个通用的文件里，再在另一个文件里通过@import语句导入和使用这些样式片段：

// util.scss文件

// 定义样式片段

@mixin center{

    // 水平竖直居中

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

}

// main.scss文件

// 导入和使用util.scss中定义的样式片段

@import "util";

#box{

    @include center;

}

Webpack

Webpack(https//webpack.js.org)是一个打包模块化JavaScript的工具，在Webpack里一切文件接模块，通过Loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。Webpack专注于构建模块化项目

一切文件如JavaScript、CSS、SCSS、图片、模块，对于Webpack来说都是一个个模块，这样的好处能清晰的描述各个模块之间的依赖关系，以方便Webpack对模块化进行组合和打包。经过Webpack的处理，最终会输出浏览器能使用的静态资源。

Webpack 具有很大的灵活性，能配置处理文件的方式，使用方法大致如下：

module.exports = {

        // 所有模块的入口，webpack从入口开始递归解析出所有依赖的模块

        entry: './app.js',

        output: {

      // 将入口所依赖的所有模块打包成一个文件bundle.js输出

            filename: 'bundle.js'

    }

}