前端模块化的发展

近年来Web应用变得更加复杂与庞大，Web前端技术的应用范围也更加普遍。经过直接编写JavaScript、CSS、HTML开发 Web 应用的方式已经没法应对当前 Web 应用的发展

模块化

模块化是指将一个复杂的系统分解为多个模块以方便编码。好久之前开发网页要经过命名空间的方式来组织代码。这样作有不少问题，其中包括：

• 命名空间冲突
• 没法合理地管理项目的依赖和版本
• 没法方便地控制依赖的加载顺序

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

CommonJS

一种被普遍使用的JavaScript模块化规范，其核心思想是经过require方法来同步加载依赖的其余模块，经过module.export导出须要暴露的接口。它的流行得益于Node.js采用了这种方法，它的有点是：

• 代码可复用于node.js环境下
• 有不少遵循此规范的Npm包

AMD

也是一种JavaScript模块化规范，与CommonJS最大的不一样在于，它采用了异步的方式去加载依赖的模块。表明实现是requirejs.

ES6模块化

ECMA提出的JavaScript模块化规范。

样式文件中的模块化

除了JavaScript开始进行模块化改造，前端开发里的样式文件也支持模块化，好比SCSS

新框架

在Web应用变得庞大、复杂时，采用直接操做DOM的方式去开发会使代码变得复杂和难以维护。

1. React框架引入了jsx语法到JavaScript语言层面中，能够更灵活地控制视图的渲染逻辑。
2. Vue框架将与一个组件相关的HTML模板、JavaScript逻辑代码、CSS样式代码都写在一个文件里面，这很是直观。
3. Angular推崇采用TypeScript语言开发应用，而且能够经过注解的语法描述组件的各类属性。