前端发展概述

模块化

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

jQuery库把API都放在window.$下，在加载完jQuery后其他模块再通过window.$去使用jQuery。这样做有很多问题：

• 命令空间冲突，两个库可能会使用同一个名称，例如Zepto也被放在window.$下；
• 无法合理地管理项目的依赖和版本；
• 无法方便地控制依赖的加载顺序。

CommonJS

CommonJS是一种使用广泛的JavaScript模块化规范，核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。

CommonJS的优点：

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

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

AMD

AMD也是一种JavaScript模块化规范，与CommonJS最大的不同在于它采用异步的方式加载依赖。AMD规范主要是为了解决针对浏览器环境的模块化问题，最具代表性的实现是requirejs。

采用AMD导入和导出时：

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

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

AMD的优点：

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

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

ES6模块化

ES6逐渐取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

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

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

样式文件中的模块化

以SCSS为例，把一些常用的样式片段放进一个通用的文件里，再在另一个文件里通过@import导入和使用这些样式片段。

@charset "utf-8";

// / util.scss文件
// 定义样式片段
@mixin center {
  //  水平垂直居中
  position: absolute;
  left: 50%;
  top: 50%;
  transform: transparentize(-50%, -50%);
}

// main.scss文件
// 导入和使用util.scss中定义的样式片段
@import "util";

#box {
  @include center;
}

新框架

React

React框架引入JSX语法到JavaScript中，以更灵活地控制视图的渲染逻辑。

let has = true;
render(has ? <h1>hello,react</h1> : <div>404</div>);

这种语法无法直接在任何现成的JavaScript引擎中运行，必须经过转换。

Vue

<!--HTML 模版-->
<template>
  <div class="example">{{ msg }}</div>
</template>

<!--JavaScript 组件逻辑--> 
<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<!--CSS 样式-->
<style>
.example {
  font-weight: bold;
}
</style>

Angular2

Angular2推崇采用TypeScript语言开发应用，并且可以通过注解的语法描述组件的各种属性。

@Component({
    selector: 'my-app',
    template: `<h1>{{title}}</h1>`
})
export class AppComponent {
    title = 'Tour of Heroes';
}

新语言

ES6

• 规范模块化
• Class语法
• 用let声明代码块内有效的变量，用const声明变量
• 箭头函数
• async函数
• Set和Map数据结构

TypeScript

TypeScript多用于开发大型项目，缺点是无法直接运行在浏览器或Node.js环境。

Flow

Flow和TypeScript一样都是JavaScript的一个超集，它的主要特点是为JavaScript提供静态类型检查，和TypeScript相似但更灵活，只在需要的地方加上类型检查。

SCSS

SCSS是一种CSS预处理器，基本思想是用和CSS相似的编程语言写完后再编译成正常的CSS文件。

$blue: #1875e7;
div {
  color: $blue;
}

构建工具

构建工具就是把源代码转换成发布到线上的可执行代码，包括如下内容：

• 代码转换：TypeScript编译成JavaScript、SCSS编译成CSS等
• 文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
• 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件
• 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器
• 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过
• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统

Npm Script

Npm Script是一个任务执行者。N排名是在安装Node.js时附带的包管理器，Npm Script则是Npm内置的一个功能，允许在package.json文件里面使用scripts字段定义任务：

{
  "scripts": {
    "dev": "node dev.js",
    "pub": "node build.js"
  }
}

Grunt

Grunt有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化执行依赖的任务，每个任务的具体执行代码和依赖关系写在配置文件Gruntfile.js里。

module.exports = function (grunt) {
//    所有插件的配置信息
    grunt.initConfig({
        //    uglify 插件的配置信息
        uglify: {
            app_task: {
                files: {
                    'build/app.min.js': ['lib/index.js', 'lib/test.js']
                }
            }
        },
        watch: {
            another: {
                files: ['lib/*.js']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

在项目根目录下执行命令grunt dev就会启动JavaScript文件压缩和自动刷新功能。

Gulp

Gulp是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。

• 通过gulp.task注册一个任务；
• 通过gulp.run执行任务；
• 通过gulp.watch监听文件变化；
• 通过gulp.src读取文件；
• 通过gulp.dest写文件。

Gulp的最大特点是引入了流的概念，同时提供了一系列常用的插件去处理流，流可以在插件之间传递。

//引入Gulp
var gulp = require('gulp');
//引入插件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

//编译SCSS任务
gulp.task('sass', function () { //读取文件通过管道传给插件
    gulp.src('./scss/*.scss') //SCSS插件把 scss 文件编译成 CSS 文件
        .pipe(sass())
        .pipe(gulp.dest('./css'));//输出文件
});

//合并压缩JS
gulp.task('scripts', function () {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

//监听文件变化
gulp.task('watch', function () {
//    当scss文件被编辑时执行SCSS任务
    gulp.watch('./scss/*.scss', ['sass']);
    gulp.watch('./js/*.js', ['scripts'])
});

Gulp的优点是好用又不失灵活，既可以单独完成构建也可以和其他工具搭配使用。其缺点是和Grunt类似，集成度不高，要写很多配置后才可以使用，无法做到开箱即用。

Fis3

Fis3是一个来自百度的优秀国产构建工具。Fis3集成了Web开发中的常用构建功能。

• 读写文件：通过fis.match读文件，release配置文件输出路径
• 资源定位：解析文件之间的依赖关系和文件位置
• 文件指纹：通过useHash配置输出文件时给文件URL加上md5戳来优化浏览器缓存
• 文件编译：通过parser配置文件解析器做文件转换，例如把ES6编译成ES5
• 压缩资源：通过optimizer配置代码压缩方法
• 图片合并：通过spriter配置合并CSS里导入的图片到一个文件来减少HTTP请求数

//加上md5
fis.match('*.{js,css,png}', {
    useHash: true
});

//fis3-parser-typescript 插件把TypeScript文件转换成JavaScript文件
fis.match('*.ts', {
    parser: fis.plugin('typescript')
});

//对CSS进行雪碧图合并
fis.match('*.css', {
//    给匹配到的文件分配属性 useSprite
    userSprite: true
});

//压缩JavaScript
fis.match('*.js', {
    optimizer: fis.plugin('uglify-js')
});

//压缩 CSS
fis.match('*.css', {
    optimizer: fis.plugin('clean-css')
});

//压缩图片
fis.match('*.png', {
    optimizer: fis.plugin('png-compressor')
});

Fis3的优点是集成了各种Web开发所需的构建功能，配置简单，开箱即用。其缺点是已经停止更新。

Webpack

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

module.exports = {
//    所有模块的入口，Webpack 从入口开始递归解析出所有依赖的模块
    entry: './app.js',
    output: {
        //    把入口所依赖的所有模块打包成一个文件 bundle.js 输出
        filename: 'bundle.js'
    }
};

Webpack的优点：

• 专注于处理模块化的项目，能做到开箱即用
• 通过Plugin扩展，完整好用又不失灵活
• 使用场景不仅限于Web开发
• 社区庞大活跃
• 缺点是只能用于采用模块化开发的项目