ES6 模块化(1)

简介:

模块化:将某段独立功能的代码封装为一个模块,在其他模块或代码中导入使用。


模块化可以将一个复杂的程序拆分为若干个模块。

js发明之初,只是一门简单的脚本语言,仅仅用于编写网页脚本,所以没有模块化功能。

在nodejs中,执行的代码都是本地的,所以nodejs实现了模块化功能。使用module.exports导出一个模块,使用require导入模块。

浏览器中运行js,代码资源都是从互联网中异步载入的,所以不可能实现同步模块化。只能通过script标签导入多个js文件,

多个js文件实质上是前后拼接在一起运行的。


这种导入js的方式有两个缺点:
1,由于代码时拼接在一起运行的,所以多个js文件处于同一个全局作用域,可能形成变量名冲突。
2,如果多个js文件有相互依赖的关系,则必须按照依赖顺序先后导入。

随着网站功能越来越来丰富,网页中的js代码量也越来越多,通过script标签导入js文件的缺点越来越明显,所以前端js也迫切的需要模块化技术。

所以有第三方为前端js实现了模块化功能,例如requirejs和seajs。但是,这些前端模块化技术并不是真正的模块化,而是使用ajax请求实现了类

似模块化的效果。


这些第三方实现的前端模块化技术也有不足之处:
1,这些技术是第三方实现的,并不是官方标准。
2,这些模块化技术对于js源代码的格式有一定要求,必须按照要求的格式书写才能使用模块化。


直到ES6,ECMA才推出了官方标准的js模块化技术。使用export 导出,使用import导入。
但是目前没有任何js平台直接支持es6的模块化标准:
1,浏览器由于载入的代码资源是网络中的,所以不可能实现同步模块化。
2,nodejs中已经有了自己的模块化技术,所以没有再支持es6的模块化标准。
目录
相关文章
|
2月前
|
JavaScript 前端开发 开发工具
ES6模块化
【10月更文挑战第11天】 ES6模块化是JavaScript中重要的代码组织方式,通过`import`和`export`实现模块间的功能导入与导出,具备独立作用域和静态特性,有效提升代码的可读性、可维护性和复用性,支持动态导入和循环依赖处理,是现代JS开发的关键技术。
|
2月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
89 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
4月前
|
JavaScript 前端开发 C++
CommonJS和ES6模块规范有何区别
【8月更文挑战第21天】
51 8
|
4月前
|
缓存 JavaScript 前端开发
|
7月前
|
缓存 JavaScript 前端开发
JavaScript模块化:CommonJS与ES Modules的对比与使用
【4月更文挑战第22天】本文探讨了JavaScript模块化的两种规范——CommonJS和ES Modules。CommonJS适用于Node.js,通过`require`同步加载模块,而ES Modules(ES6模块)用于前端,支持异步加载和静态导入导出。CommonJS有缓存,ES Modules无缓存。在选择时,Node.js环境常用CommonJS,但趋势正转向ES Modules,前端项目推荐使用ES Modules以利用其优化性能的优势。
|
7月前
|
JavaScript 前端开发
说说你对ES6模块化的理解?和commonJS的区别?
ES6模块化(也称为ES2015模块化)是ECMAScript 6中引入的一种模块化规范,用于在JavaScript中组织和管理代码。它提供了一种更优雅和强大的方式来定义、引入和导出模块。
86 0
|
编解码 JavaScript 前端开发
ES6 模块化编程 详解
ES6新特性 模块化编程详解。
113 0
|
JavaScript 前端开发
深入了解前端开发规范的区别《Commonjs、AMD、CMD、ES6模块化》
深入了解前端开发规范的区别《Commonjs、AMD、CMD、ES6模块化》
115 0
|
JSON 资源调度 JavaScript
Node入门(3):CommonJS 模块化规范的使用
本文讲解了CommonJS 模块化规范在 Node.js 中的使用,以及查找模块时的机制。
212 0