前端模块化发展史
时间:2022-07-25
本文章向大家介绍前端模块化发展史,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
模块化的优势不言而喻:
- 避免命名冲突
- 依赖管理
- 提供可维护性和代码复用
相对于其他静态语言,JS最大缺陷就是天生不具有模块化,没有语言层面的命名空间的概念。问题如下:
- 编写通用模块很容易将其暴露给全局作用域,造成命名冲突。
- 浏览器按照从上到下解析HTML文档,多个<script>标签按照次序解析加载。这种机制导致存在依赖关系的JS模块,必须被依赖者先执行,依赖者后执行。比如使用
jquery
时,必须先导入jquery
:
<script src='jquery.js'></script>
<script src='jquery.plugin.js'></script>
一直以来,前端工程师们都在探索如何做到JavaScript模块化,其中以CommonJS,AMD,CMD为代表。
直到ES6 Module的出现,才从语言层面上解决了JS模块化的问题。
1. CommonJS(面对浏览器之外的模块化规范)
CommonJS是针对服务器或桌面应用环境下的JavaScript开发(非浏览器),其被Node.js采用为默认的模块化规范,并随着Node.js的流行被广大Web开发者熟知。
CommonJS有两个弊端,使其不适合浏览器环境开发:
- 无法处理非JavaScript资源(比如CSS,图片等)。
- 模块是同步阻塞式加载,无法实现按需加载(像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式。)。
使用方法如下:
- 模块导出
exports
- 模块导入
require
// foobar.js
//私有变量
var test = 123;
//公有方法
function foobar () {
this.foo = function () {
// do someing ...
}
this.bar = function () {
//do someing ...
}
}
//exports对象上的方法和变量是公有的var foobar = new foobar();
exports.foobar = foobar;
// main.js
//require方法默认读取js文件,所以可以省略js后缀
var test = require('./foobar').foobar;
test.bar();
2. AMD & CMD(针对浏览器的模块化规范)
在CommonJS基础上,还扩展了以下功能:
- 可以处理JavaScript以外的资源。
- 可按需加载,可并行加载。
AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义";CMD是SeaJS 在推广过程中对模块定义的规范化产出。使用方式如下:
//AMD
define(['./a','./b'], function (a, b) {
//依赖一开始就写好
a.test();
b.test();
});
//CMD
define(function (requie, exports, module) {
//依赖可以就近书写
var a = require('./a');
a.test();
...
//软依赖
if (status) {
var b = requie('./b');
b.test();
}
});
上面的例子可以看出两者的区别:
- 对于依赖的模块AMD是提前执行,CMD是延迟执行。不过RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不通过)。
- CMD推崇依赖就近,AMD推崇依赖前置
3. ES6 Module - 规范的静态模块体系
ES6 Module是语言层面的规范,与应用场景无关,完全可以取代现有的 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。 目前受限与浏览器的实现程度,针对浏览器的模块化仍然需要构建工具进行编译。
ES6 Module与CommonJS类似,是一种静态模块规范,不支持异步加载。不过,结合其他框架或者构建工具(比如React的lazy load
,webpack的require.ensure
)可以实现按需加载和异步加载。
// react lazy loader
const Home = React.lazy(() => import('./pages/Home'));
const Page1 = React.lazy(() => import('./pages/Page1'));
const Page2 = React.lazy(() => import('./pages/Page2'));
// webpack
window.onload =require.ensure([], require => {
const b = require('./module.a.js');
b()
}, 'async')
- Silverlight制作scrollbar.
- [Silverlight动画]转向行为 - 躲避行为
- WCF后续之旅(1): WCF是如何通过Binding进行通信的
- CaseStudy(showcase)布局篇-列表的排放与遮罩
- [Silverlight动画]转向行为 - 追捕行为
- 前端三大框架vue,angular,react大杂烩
- CaseStudy(showcase)布局篇-如何做一个自适应窗口大小的布局
- WCF后续之旅(2): 如何对Channel Layer进行扩展——创建自定义Channel
- [Silverlight动画]转向行为 - 到达行为
- Asp.Net统一前后端提示信息方案
- 人工智能:未来决策制定的机遇与影响
- CaseStudy(showcase)界面篇-导出xaml以及放入Blend的技巧
- [Silverlight动画]转向行为 - 避开行为
- CaseStudy(showcase)界面篇-desing设计界面
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CS学习笔记 | 20、通过Socks转发的方法
- 构建的抽象
- 低成本个人建站系列二 —— 使用 Hexo+GitHub 搭建个人免费博客
- 42图揭秘,「后端技术学些啥」
- R-ggTimeSeries | ggplot2: 热力日历图
- R-wordcloud: 词云图
- 直播APP源码是如何实现音视频同步的
- 动态规划算法练习(5)--medium
- phpstudy漏洞分析原因到修复
- 哈?命令注入外带数据的姿势还可以这么骚?
- 记一次曲折的RCE挖掘
- pytest文档49-命令行参数--tb的使用
- pytest文档50-命令行参数--durations统计用例运行时间
- pytest文档51-内置fixture之cache使用
- pytest文档53-命令行实时输出错误信息(pytest-instafail)