前端发展史浅谈

前言

刚毕业开始做前端的时候,只需要一个jQuery加上各种jQuery-plugin,就能撸完一整个项目,基本上就没有考虑过什么模块化、代码可扩展性、组件化、代码优化之类的。甚至开发移动端的网页的时候,也是一顿jQuery乱写。那时候在宁波,意识到前端技术在这类IT沙漠城市基本上是不行的,没人引路。
到了杭州进入一家有正规军的公司,学到的开发技术只能用舒服二字形容。对前端的理解也是从来杭州之后开始发生转变的。开始用框架写代码,用最新的最前沿的技术写。

模块化

模块化是指把一个复杂的系统分解到多个模块以方便编码。
早些时候,开发网页组织代码的方式是通过命名空间,比如说jQuery这个库把它所有的方法和API都放在window.$下,网页加载的时候,先加载完jQuery之后再通过window.$去使用jQuery的各种方法。

后来想想这种形式其实存在着很多问题,比如命名空间冲突,两个类库使用了一样的名称,加载顺序也是一个头疼的事情,插件用多了就很难控制,很难管理项目所依赖插件的版本等等。项目迭代之后,变得演绎维护,成本很大。

CommonJS

CommonJS是目前广泛使用的JS模块化规范,通过require的方式来同步加载依赖的模块,通过module.exports来导出需要暴露的接口。这种方式起初是在NodeJS中使用,后来引入到了网页开发中来。
采用 CommonJS 导入及导出时的代码如下:

1
2
3
4
5
// 导入
const a = require('./a');
// 导出
module.exports = a.func

CommonJS优点:

1、代码可在Node环境下运行;

2、NPM发布的很多第三方模块都是采用CommonJS规范

CommonJS 的缺点:

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

此处就不介绍AMD和CMD规范了,因为。。。。用的不多了

ECMA2015(俗称ES6)模块化

ES6号称JS下一代语言,是欧洲计算机制造联合会 ECMA 提出的 JavaScript 模块化规范,个人觉得它将取代CommonJS规范,成为新一代的模块化规范。

采用 ES6 导入及导出时的代码如下:

1
2
3
4
5
6
7
8
9
// 导入
import { a } from 'a';
import React from 'react';
// 导出
export func b() {};
export default {
//....
}

虽然看起来很吊,但是目前大部分浏览器是不支持运行这类代码的,必须通过babel转化为ES5才能正常运行。

它在语言层面为 JavaScript 引入了很多新语法和 API ,使得 JavaScript 语言可以用来编写复杂的大型应用程序。例如:

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

这些新特性能让我们高效的编写代码,不用去担心新的语法浏览器的支持情况,因为我们的Babel能很好的解决这个问题,它能将所有的新语法转化为ES5的方法,这样浏览器就能正常运行了。

文末安利一个关于Babel的小知识