前端模块化的发展

近年来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语言开发应用，并且可以通过注解的语法描述组件的各种属性。