模块化是指把一个复杂的系统分解到多个模块以方便编码。
jQuery库把API都放在window.$
下,在加载完jQuery后其他模块再通过window.$
去使用jQuery。这样做有很多问题:
Zepto
也被放在window.$
下;CommonJS是一种使用广泛的JavaScript模块化规范,核心思想是通过require
方法来同步加载依赖的其他模块,通过module.exports
导出需要暴露的接口。
CommonJS的优点:
CommonJS的缺点在于这样的代码无法直接运行在浏览器环境下,必须通过工具转换成标准的ES5。
AMD也是一种JavaScript模块化规范,与CommonJS最大的不同在于它采用异步的方式加载依赖。AMD规范主要是为了解决针对浏览器环境的模块化问题,最具代表性的实现是requirejs
。
采用AMD导入和导出时:
//定义一个模块
define('module', ['dep'], function (dep) {
return exports;
});
//导入和使用
require(['module'], function (module) {
});
AMD的优点:
AMD的缺点在于JavaScript运行环境没有原生支持AMD,需要先导入实现了AMD的库后才能正常使用。
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框架引入JSX语法到JavaScript中,以更灵活地控制视图的渲染逻辑。
let has = true;
render(has ? <h1>hello,react</h1> : <div>404</div>);
这种语法无法直接在任何现成的JavaScript引擎中运行,必须经过转换。
<!--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推崇采用TypeScript语言开发应用,并且可以通过注解的语法描述组件的各种属性。
@Component({
selector: 'my-app',
template: `<h1>{{title}}</h1>`
})
export class AppComponent {
title = 'Tour of Heroes';
}
let
声明代码块内有效的变量,用const
声明变量async
函数Set
和Map
数据结构TypeScript多用于开发大型项目,缺点是无法直接运行在浏览器或Node.js环境。
Flow和TypeScript一样都是JavaScript的一个超集,它的主要特点是为JavaScript提供静态类型检查,和TypeScript相似但更灵活,只在需要的地方加上类型检查。
SCSS是一种CSS预处理器,基本思想是用和CSS相似的编程语言写完后再编译成正常的CSS文件。
$blue: #1875e7;
div {
color: $blue;
}
构建工具就是把源代码转换成发布到线上的可执行代码,包括如下内容:
Npm Script是一个任务执行者。N排名是在安装Node.js时附带的包管理器,Npm Script则是Npm内置的一个功能,允许在package.json
文件里面使用scripts
字段定义任务:
{
"scripts": {
"dev": "node dev.js",
"pub": "node build.js"
}
}
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.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集成了Web开发中的常用构建功能。
fis.match
读文件,release
配置文件输出路径useHash
配置输出文件时给文件URL加上md5
戳来优化浏览器缓存parser
配置文件解析器做文件转换,例如把ES6编译成ES5optimizer
配置代码压缩方法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是一个打包模块化JavaScript工具,在webpack里一切文件皆模块,通过Loader转转文件,通过Plugin注入钩子,最后输出由多个模块组合成的文件。Webpack专注于构建模块化项目。
module.exports = {
// 所有模块的入口,Webpack 从入口开始递归解析出所有依赖的模块
entry: './app.js',
output: {
// 把入口所依赖的所有模块打包成一个文件 bundle.js 输出
filename: 'bundle.js'
}
};
Webpack的优点: