近年来Web应用变得更加复杂与庞大，Web前端技术的应用范围也更加广泛。从复杂、庞大的管理后台，到对性能要求苛刻的移动网页，再到类似于ReactNative的原生应用开发方案，Web前端工程师在面临更多机遇的同时也面临更大的挑战。通过直接编写JavaScript、CSS、HTML开发Web应用的方式已经无法应对当前Web应用的发展。近年来，前端社区涌现出许多新思想与框架，下面将一一介绍它们。 模块化 模块化是指将一个复杂的系统分解为多个模块以方便编码。 很久以前，开发网页要通过命名空间的方式来组织代码，例如jQuery库将它的API都放在了window.$下，在加载完jQuery后，其他模块再通过window.$去使用jQuery。这样做有很多问题，其中包括： · 命名空间冲突，两个库可能会使用同一个名称，例如Zepto也被放在window.$下； · 无法合理地管理项目的依赖和版本； · 无法方便地控制依赖的加载顺序。 当项目变大时，这种方式将变得难以维护，需要用模块化的思想来组织代码。 1.CommonJS CommonJS是一种被广泛使用的 JavaScript 模块化规范，其核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。CommonJS规范的流行得益于Node.js采用了这种方式，后来这种方式被引入到了网页开发中。 采用CommonJS导入及导出的代码如下： CommonJS的优点在于： · 代码可复用于Node.js环境下并运行，例如做同构应用； · 通过Npm发布的很多第三方模块都采用了CommonJS规范。 CommonJS 的缺点在于，这样的代码无法直接运行在浏览器环境下，必须通过工具转换成标准的ES5。 CommonJS还可以细分为CommonJS1和CommonJS2，区别在于CommonJS1只能通过exports.XX=XX的方式导出，而CommonJS2在CommonJS1的基础上加入了module.exports=XX的导出方式。CommonJS通常指CommonJS2。 2.AMD AMD也是一种JavaScript模块化规范，与CommonJS最大的不同在于，它采用了异步的方式去加载依赖的模块。AMD规范主要用于解决针对浏览器环境的模块化问题，最具代表性的实现是 requirejs。 采用AMD导入及导出的代码如下： AMD的优点在于： · 可在不转换代码的情况下直接在浏览器中运行； · 可异步加载依赖； · 可并行加载多个依赖； · 代码可运行在浏览器环境和Node.js环境下。 AMD的缺点在于JavaScript运行环境没有原生支持AMD，需要先导入实现了AMD的库后才能正常使用。 3.ES6模块化 ES6模块化是国际标准化组织ECMA提出的JavaScript模块化规范，它在语言层面上实现了模块化。浏览器厂商和 Node.js 都宣布要原生支持该规范。它将逐渐取代 CommonJS 和AMD规范，成为浏览器和服务器通用的模块解决方案。 采用ES6模块化导入及导出的代码如下： ES6模块虽然是终极模块化方案，但它的缺点在于目前无法直接运行在大部分JavaScript运行环境下，必须通过工具转换成标准的ES5后才能正常运行。 4. 样式文件中的模块化 除了JavaScript开始进行模块化改造，前端开发里的样式文件也支持模块化。以SCSS为例，将一些常用的样式片段放进一个通用的文件里，再在另一个文件里通过@import语句导入和使用这些样式片段： 新框架 在Web应用变得庞大、复杂时，采用直接操作DOM的方式去开发会使代码变得复杂和难以维护，许多新思想被引入到网页开发中以减少开发难度和提升开发效率。 1.React React框架引入了JSX语法到JavaScript语言层面中，可以更灵活地控制视图的渲染逻辑。 这种语法无法直接在任何现成的JavaScript引擎里运行，必须经过转换。 2.Vue Vue框架将与一个组件相关的HTML模板、JavaScript逻辑代码、CSS样式代码都写在一个文件里，这非常直观。
- 文章导航