js之模块化(2)

简介: js之模块化(2)

关于js的模块化,如下图
image.png

commonjs的规范之前有提到过,我们这里就不再提了,我们知道commonjs适用于服务端。不适合浏览器。这是为什么呢?因为它是同步的。我们可以想一想:

浏览器获取每一个文件,都需要发送请求,去服务器取回来,如果网速非常的慢,那么浏览器就会一直等require的那个文件返回,就会出现页面卡在那里。阻塞后续代码的执行。用户体验很不好。

下面再来说说其他模块化的东西:

requirejs
是一个工具库,定义了模块定义和模块加载功能。AMD是在requirejs推广的过程中形成的模块化规范。

下面来看一下requirejs的具体使用

首先需要引入

<script src="require.js"></script>
<script src="a.js"></script>

因为requirejs提供了一个全局的define函数来定义模块,所以在requirejs之后引入的文件,都可以使用define来定义模块。

define(id?,dependencies?,factory)

id:
可选参数,模块的标识。

dependencies:
可选参数,是一个数组,注明当前模块所要依赖的模块,如果没有依赖,则可以不写。

factory:
工厂方法,模块初始化要执行的函数或对象。如果是函数,则只执行一次,函数的返回值,就是模块的导出值。如果是对象,则该对象就是模块的导出值。

//a.js
define(function(){
   
   
  var name='tom';
  retrurn {
   
   name}
})
//b.js
define(['a.js'],function(a){
   
   
    var name='jerry';
    console.log(a.name);
    return {
   
   name};
})

requirejs采用异步的方式加载模块,模块的加载不影响后续代码的执行,所有依赖这个模块的代码,都写在回调函数中,等模块加载完成之后再去执行。

requirejs的基本思想就是使用define定义模块,当开始执行这块代码的时候,它先加载这个模块所依赖的模块,等所依赖的模块加载完成之后,再去执行回调函数,回调函数返回的值,就是当前模块的导出值。
seajs
CMD是在seajs推广的过程中,对模块化规范的产物。
Sea.js 官网这么介绍 Sea.js:

Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。 自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。

具体使用:和requirejs类似

<script src="sea.js"></script>
<script src="a.js"></script>

引入 sea.js 工具库,就是这个库提供了定义模块、加载模块等功能。它提供了一个全局的 define 函数用来定义模块。所以在引入 sea.js 文件后,再引入的其它文件,都可以使用 define 来定义模块。

//a.js
define(function(require,exports,module){
   
   
    var name = 'morrain'
    exports.name = name
})

//b.js

define(function(require, exports, module){
   
   
    var name = 'lilei'
    var a = require('a.js')
    console.log(a.name) // 'morrain'
    exports.name = name
})

我们可以看到seajs并没有像requirejs那样,先需要把依赖写在一个数组中。它的工作方式是当b.js被加载后,seajs会扫描b.js这个文件,找到require这个关键字,提取所有的依赖,然后去加载。加载完成后,再去执行回调函数,所以当再次执行到require('a.js')的时候,a.js已经存在了。
参考:https://zhuanlan.zhihu.com/p/113009496

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