js之模块化(1)

简介: js之模块化(1)

我们知道在刚开始,JavaScript语言是没有模块化的概念,但是随着前端能干的事情越来越多,事情越来越复杂,模块化就显得不可或缺,当然,这还要得益于node.js和commonjs走入了人们的视线。

关于commonjs
我们先来看一下,它在维基百科的定义

CommonJS 是一个项目,其目标是为 JavaScript 在网页浏览器之外创建模块约定。创建这个项目的主要原因是当时缺乏普遍可接受形式的 JavaScript 脚本模块单元,模块在与运行JavaScript 脚本的常规网页浏览器所提供的不同的环境下可以重复使用。

由此可见commonjs主要是服务于服务器端的,并不是前端,但载体确是javascript,所以对推动前端模块化,具有深远影响。

关于为什么要使用前端模块化
当然,如果业务场景简单,是没有必要使用。但是随着逻辑的复杂,我们遇到了各种各样的问题。可以想一想,你是否在开发中也遇到了下面的问题。

随着代码的增多,我们会让html和js代码解耦,也就是说,我们会把js代码放在一个单独的文件中,使用script引入。但是随着更多开发者的加入,我们会引入许多js文件,如下:

<script src="./a.js"></script>
<script src="./b.js"></script>
//a.js
var name='123';
//b.js
var name ='456';

其实这个时候问题就已经来了,因为没有封闭作用域的概念,声明的变量存在在全局中,造成全局污染,而开发者本身又很难保证自己维护的js文件不和其他的js文件发生冲突,于是代码开发和维护简直成了噩梦。

为了解决全局污染,命名冲突的问题,聪明的开发者想到,那我们就使用命名空间就好了嘛,其实这里已经有一点模块化的意思了。如下

<script src="./a.js"></script>
<script src="./b.js"></script>
//a.js
app.moduleA = {
   }
app.moduleA.name = 'lilei'
//b.js
app.moduleB = {
   }
app.moduleB.name = 'hanmeimei'

这种方式解决了命名冲突,但是还有一个问题,就是我们在b模块中可以获取moduleA的name,同时在moduleA毫无感知的情况下去修改它。

为了解决这个问题,聪明的开发者利用了javascript的函数作用域,闭包的特性去解决这一问题。如下

<script src="./a.js"></script>
<script src="./b.js"></script>
//a.js
app.moduleA = (function(){
   
  var name='lilei';
  return function getName(){
   return name};
})()
//b.js
app.moduleB = (function(){
   
  var name='hanmeimei';
  return function getName(){
   return name};
})()

这样我们就保护了我们的数据。但是还是有不足的地方,者两个文件的加载有先后顺序,如果加载的两个文件之间有依赖,维护这种依赖关系就变得很复杂。

所以,综上所述,前端需要模块化,并且模块化不光要处理全局变量污染、数据保护的问题,还要很好的解决模块之间依赖关系的维护。

相关文章
|
6月前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
34 0
|
2月前
|
JavaScript UED
js之模块化(2)
js之模块化(2)
|
3月前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
47 3
|
14天前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
18 0
|
2月前
|
JavaScript
js之模块化(3)
js之模块化(3)
|
3月前
|
前端开发 JavaScript
前端必会的JavaScript模块化
【8月更文挑战第3天】JavaScript模块化
26 1
|
3月前
|
存储 缓存 JavaScript
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
JavaScript——请列出目前主流的 JavaScript 模块化实现的技术有哪些?说出它们的区别?
29 0
|
4月前
|
JavaScript 前端开发
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
48 1
|
5月前
|
JavaScript 前端开发
JavaScript进阶-Class与模块化编程
【6月更文挑战第21天】**ES6引入Class和模块化,提升JavaScript的代码组织和复用。Class是原型机制的语法糖,简化面向对象编程。模块化通过`import/export`管理代码,支持默认和命名导出。常见问题包括`this`指向和循环依赖。理解这些问题及避免策略,能助你写出更高效、可维护的代码。**
62 5
|
5月前
|
JSON JavaScript 前端开发
Javascript 模块化编程的方法和代码
Javascript 模块化编程的方法和代码
38 1