首页 > 其他分享 >第129篇:JS模块化开发

第129篇:JS模块化开发

时间:2023-03-13 23:22:28浏览次数:48  
标签:ES6 CommonJS 模块化 AMD JS 模块 129 moduleA 加载

好家伙,本篇为《JS高级程序设计》第二十六章“模块”学习笔记

 

JS开发会遇到代码量大和广泛使用第三方库的问题。

解决这个问题的方案通 常需要把代码拆分成很多部分,然后再通过某种方式将它们连接起来。

若代码量较大,我们使用模块化开发的模式,也能够使代码容易维护

我们需要模块

 

1.模块模式

把逻辑分块,各自封装,相互独立,每个块自行决定对外暴露什么,同时自行决定引入执行哪 些外部代码。

这就是模块模式的思想

 

 

2.es6前的模块加载器

2.1.commonJS规范

注意了,这不是某个包或者某个方法,而是某种规范

CommonJS 规范概述了同步声明依赖的模块定义。

//moduleA.js
module.exports = 'foo'


//moduleB.js
var moduleA = require('./moduleA');
console.log(moduleA);

 

 

CommonJS 依赖几个全局属性如 require 和 module.exports。

如果想在浏览器中使用 CommonJS 模块,就需要与其非原生的模块语法之间构筑“桥梁”。

模块级代码与浏览器运行时之间也需要某种“屏 障”,因为没有封装的 CommonJS 代码在浏览器中执行会创建全局变量。 

全局变量出现了,那么就违背了模块模式的"各自封装,相互独立"

 

 

 

2.2.AMD异步模块定义

CommonJS 以服务器端为目标环境,能够一次性把所有模块都加载到内存,

而异步模块定义的模块定义系统则以浏览器为目标执行环境,这需要考虑网络延迟的 问题。

AMD 的一般策略是让模块声明自己的依赖,而运行在浏览器中的模块系统会按需获取依赖,并 在依赖加载完成后立即执行依赖它们的模块。

AMD 模块实现的核心是用函数包装模块定义。这样可以防止声明全局变量,并允许加载器库控制 何时加载模块。

// ID 为'moduleA'的模块定义。moduleA 依赖 moduleB,
// moduleB 会异步加载
define('moduleA', ['moduleB'], function(moduleB) { 
 return { 
 stuff: moduleB.doStuff(); 
 }; 
}); 

 

CommonJS模块和AMD模块之间的冲突主要是在模块加载方面。

CommonJS模块是同步加载的,而AMD模块是异步加载的,这使得CommonJS模块和AMD模块无法很好地运行在一起。

此外,CommonJS模块和AMD模块的模块定义语法也不同,这也会对它们之间的冲突产生影响。

 

 

 

3.ES6模块

ES6 模块系统是集 AMD 和 CommonJS 之大成者。

 

3.1.外部文件引入

 

tips:扩展名为 .mjs 的文件是 JavaScript 源代码文件,在 Node.js 应用程序中用作 ECMA 模块(ECMAScript 模块)。

Node.js 的 natvie 模块系统是 CommonJS,用于将代码拆分到不同的文件中,以保持 JS 代码的组织性。

MJS 是 Node.js 用来识别模块是 CommonJS 还是 ES6 的唯一方法。 

外部文件引入示例:

//moduleA.mjs
const foo = "foo";
export {foo};


//moduleB.mjs
import { foo } from "./moduleA.mjs"
console.log(foo);

 

 

3.2.网页嵌入

<script type="module" src="moduleA.js"></script>

 

 

4.课后习题

与commonJS规范和AMD规范相比,ES6模块有什么优点?

答:  1.更安全,因为ES6模块有自己独立的作用域,避免了变量污染。

  2.更容易维护,因为模块可以明确的规定输入和输出,便于模块的重用和维护。

  3.更简洁,ES6模块的语法更加简洁易懂,模块的加载更加高效。

 

2.与ES6模块相比,commonJS规范和AMD规范有什么缺点?

答:  CommonJS规范的缺点是它只能在服务器端运行,而不能在浏览器端运行。

  AMD规范的缺点是它增加了很多的书写工作,而且不能很好的处理循环依赖,代码复杂

 

标签:ES6,CommonJS,模块化,AMD,JS,模块,129,moduleA,加载
From: https://www.cnblogs.com/FatTiger4399/p/17213072.html

相关文章

  • FastJson 反序列化漏洞原理分析
    Fastjson简介fastjson框架:https://github.com/alibaba/fastjsonfastjson-jndi:https://github.com/earayu/fastjson_jndi_pocfastjson是阿里巴巴开发的java语言编写的......
  • angularJs模块对象,常用指令
    同一个模块中生成两个作用域对象,数据显示相互不影响  <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>模块对象测试</title> </head> <bod......
  • NodeJS开发服务端实现文件上传下载和数据增删改查
    本文主要讲解已NodeJS作为服务器完成文件的上传下载和数据增删改查,前端框架为Vue3,UI框架为element-plus,Node版本为V16.14.2. 项目场景模拟是开发一个项目管理的系统,支持......
  • js事件的防抖和节流处理
    1.为什么需要处理?在进行窗口的resize、scroll、输出框内容校验等操纵的时候,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常之差。那么为了前端性......
  • 使用jsoup抓取和解析网页数据
    ​如果您觉得本博客的内容对您有所帮助或启发,请关注我的博客,以便第一时间获取最新技术文章和教程。同时,也欢迎您在评论区留言,分享想法和建议。谢谢支持!一、jsoup是什么,它的......
  • js实用函数
    1.批量设置元素属性,代码将所有视频音频图片设置属性,添加控制按钮,设定宽度不超过屏幕setAttr点击查看代码letmedias=[];lettagAttr={'video':{'width':......
  • js技术之“自定义包含方案”
    调用//用于判断包含functiondiaoyong(arr,str){//初始化varsizes=['L','XL','S','M'];for(vari=0;i<sizes.length;i++){vars......
  • 【建造者设计模式详解】Java/JS/Go/Python/TS不同语言实现
    简介建造者模式(BuilderPattern),也叫生成器模式,属于创建型模式。它使用多个简单的对象一步一步构建成一个复杂的对象。它允许你使用相同的创建代码生成不同类型和形式的对......
  • JS_0075:判断方法是否含有参数,并做处理 hasOwnProperty
    functionmakeTextSprite(message,parameters){if(parameters===undefined)parameters={}letfontface=parameters.hasOwnP......
  • java对象和json字符串互转时名称不一样解决办法:@JsonProperty
    @JsonProperty添加在属性上,并使用newObjectMapper().writeValueAsString(object)转换为别名的JSON字符串引入依赖<dependency><groupId>com.fasterxml.ja......