前端发展概述

模块化

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

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

CommonJS

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

CommonJS的优点:

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

AMD

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

采用AMD导入和导出时:

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

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

AMD的优点:

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

TypeScript

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

Flow

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

SCSS

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

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

构建工具

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

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的最大特点是引入了流的概念,同时提供了一系列常用的插件去处理流,流可以在插件之间传递。

//引入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开发中的常用构建功能。

//加上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的优点: