JavaScript 模块封装

最新推荐文章于 2023-10-31 00:00:06 发布
最新推荐文章于 2023-10-31 00:00:06 发布
阅读量160 收藏
点赞数
文章标签： python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49399323/article/details/107867317
版权

在最早的时候JavaScript这门语言其实是并没有模块这一概念，但是随着时间的推移与技术的发展将一些复用性较强的代码封装成模块变成了必要的趋势。

在这篇文章中主要介绍原生的 JavaScript封装的几种手段以及新增的 ES6 Module的语法，来实现模块封装。

并且会简单的使用Webpack让Es6代码向后兼容。

引入问题
　　以下有两个Js文件，如果不采取任何封装手段直接导入会导致window环境污染。

并且，如果文件中有相同名字的变量或函数会发生命名冲突，因为它们都是放在全局作用域window对象中的。

var module_name = “js_m1”;
​
function show(){
console.log(“js_m1.show”);
}

var module_name = “js_m2”;
​
function show(){
console.log(“js_m2.show”);
}

image-20200807115438551

简单解决
IIFE封装
　　针对上述问题，采取函数的闭包及作用域特性我们为每个模块封装一个作用域。

第一步：进行自执行函数包裹代码封装出局部作用域

第二步：向外部暴露接口，为window对象添加新的对象

(function () {
​
var module_name = “js_m1”;
​
function show() {
console.log(“js_m1.show”);
}
​
window.js_m1 = { module_name: module_name, show: show };
// 在es6中，可简写为 { module_name , show }
}())

(function () {
​
var module_name = “js_m2”;
​
function show() {
console.log(“js_m2.show”);
}
​
window.js_m2 = { module_name: module_name, show: show };
// 在es6中，可简写为 { module_name , show }
}())

image-20200807120606342

Es6块级封装
　　在Es6之前，由于没有出现块级作用域的概念，那时候大家都使用上面的方式进行封装。

在当Es6的块级作用域出现之后，又诞生出了新的封装方式即块级作用域封装。

和IIFE封装相同，都是利用作用域的特性进行封装。

注意一点，块级作用域只对let或const声明有效。

{
let module_name = “js_m1”;
​
let show = function () {
console.log(“js_m1.show”);
}
​
window.js_m1 = { module_name, show };
​
}

{
let module_name = “js_m2”;

    let show = function () {
            console.log("js_m2.show");
    }

    window.js_m2 = { module_name, show };

}

image-20200807121327601

Es6 module 语法
　　上面的两种方式虽然都能达到模块封装的效果，但是我们依然有更好的选择。

下面将介绍极力推荐的Es6 module语法进行导入。

学习Es6 module从以下三个方面来入手：

1.模块标签及其特性

2.导出

3.导入

模块标签
　　要想使用Es6 module语法导入模块，必须使用模块标签来引入Js文件。

模块标签与普通的

声明标签
　　将

导入路径
　　在浏览器中引用模块必须添加路径如./ ，但在打包工具如webpack中则不需要，因为他们有自己的存放方式。

总而言之，即使是在当前目录也要添加上./，不可以进行省略。

这也是推荐的一种引入文件方式，不管是何种语言中都推荐引入文件时不进行路径省略。

正确的导入路径

错误的导入路径

// 不可省略!省略就会抛出异常

延迟解析
　　所谓延迟解析是指在模块标签中的代码会提到HTML代码以及嵌入式的

注意看下面的示例，编码时模块标签在普通的

image-20200807123803291

严格模式
　　模块标签中的所有代码都是按严格模式运行的，请注意变量名的声明以及this指向问题，同时还有解构赋值等等。

作用域
　　每个模块标签中的代码都会为其创建一个专属的作用域，禁止相互之间进行访问。

而普通的

预解析
　　模块在导入时只执行一次解析，之后的导入不会再执行模块代码，而使用第一次解析结果，并共享数据。

可以在首次导入时完成一些初始化工作

如果模块内有后台请求，也只执行一次即可

导出模块
　　ES6使用基于文件的模块，即一个文件一个模块。

可以使用export来将模块中的接口进行导出，导出方式分为以下几种：

1.单个导出

2.默认导出

3.多个导出

4.混合导出

5.别名导出

另外，ES6的导出是是以引用方式导出，无论是标量还是对象，即模块内部变量发生变化将影响已经导入的变量。

单个导出
　　下面将使用export来将模块中的接口进行单个单个的导出。

export let module_name = “js_m3.js”;

export function test(){
console.log(“测试功能”);
}

export class User{
constructor(username){
this.username = username;
}

    show(){
            console.log(this.username);
    }

}

默认导出
　　一个模块中，只能默认导出一个接口。

如果默认导出的是一个类，那么该类就可以不用起类名，此外函数同理。

export let module_name = “js_m3.js”;

export function test(){
console.log(“测试功能”);
}

export default class{ // 默认导出
constructor(username){
this.username = username;
}

    show(){
            console.log(this.username);
    }

}

多个导出
　　可以使用exprot与{}的形式进行接口的批量多个导出。

let module_name = “js_m3.js”;

function test() {
console.log(“测试功能”);
}

class User {
constructor(username) {
this.username = username;
}

    show() {
            console.log(this.username);
    }

}

export { module_name, test, User };

混合导出
　　使用export default 导出默认接口，使用 export {} 批量导入普通接口

let module_name = “js_m3.js”;

function test() {
console.log(“测试功能”);
}

export default class {
constructor(username) {
this.username = username;
}

    show() {
            console.log(this.username);
    }

}

export { module_name, test };

同时也可以使用as来为一个导出的接口取别名，如果该接口别名为default则将该接口当做默认导出。

let module_name = “js_m3.js”;

function test() {
console.log(“测试功能”);
}

class User {
constructor(username) {
this.username = username;
}

    show() {
            console.log(this.username);
    }

}

export { module_name, test, User as default };

别名导出
　　使用as来为导出的export {}中的导出接口起一个别名，当导入时也应该使用导出接口的别名进行接收。

当一个接口的别名为default时，该接口将当做默认导出。

let module_name = “js_m3.js”;

function test() {
console.log(“测试功能”);
}

class User {
constructor(username) {
this.username = username;
}

    show() {
            console.log(this.username);
    }

}

export { module_name as m_name, test as m_tst, User as default };

导入模块
　　使用import与from进行静态的模块的导入，注意导入时必须将导入语句放在顶层。

模块的导入分为以下几部分：

1.具名导入

2.批量导入

3.默认导入

4.混合导入

5.别名导入

6.动态导入

具名导入
　　具名导入应该注意与导出的接口名一致。

下面是模块导出的代码：

let module_name = “js_m3.js”;

function test() {
console.log(“测试功能”);
}

class User {
constructor(username) {
this.username = username;
}

    show() {
            console.log(this.username);
    }

}

export { module_name, test, User };

使用具名导入：

批量导入
　　如果导入的内容过多，可使用*进行批量导入，注意批量导入后应该使用as来取一个别名方便调用。

下面是模块导出的代码：

let module_name = “js_m3.js”;

function test() {
console.log(“测试功能”);
}

class User {
constructor(username) {
this.username = username;
}

    show() {
            console.log(this.username);
    }

}

export { module_name, test, User };

使用批量导入：

默认导入
　　使用默认导入时不需要用{}进行接收，并且可以使用任意名字来接收默认导出的接口。

下面是模块导出的代码：

let module_name = “js_m3.js”;

function test() {
console.log(“测试功能”);
}

class User {
constructor(username) {
this.username = username;
}

    show() {
            console.log(this.username);
    }

}

export { module_name, test, User as default };

使用默认导入，我们只导入默认导出的接口，可以随便取一个名字。

混合导入
　　当一个模块中导出的又有默认导出的接口，又有其他的导出接口时，我们可以使用混合导入。

使用{}来接收其他的导出接口，对于默认导出的接口而言只需要取一个名字即可。

下面是模块导出的代码：

let module_name = “js_m3.js”;

function test() {
console.log(“测试功能”);
}

class User {
constructor(username) {
this.username = username;
}

    show() {
            console.log(this.username);
    }

}

export { module_name, test, User as default };

使用混合导入：

别名导入
　　为了防止多个模块下接口名相同，我们可以使用as别名导入，再使用时也应该按照别名进行使用。

下面是m1模块导出的代码：

let module_name = “js_m1”;

let show = function () {
console.log(“js_m1.show”);
}

export { module_name, show };

下面是m2模块导出的代码：

let module_name = “js_m2”;

let show = function () {
console.log(“js_m2.show”);
}

export { module_name, show };

下面是使用别名导入这两个模块的接口并进行使用：

动态导入
　　使用import与from的导入方式属于静态导入，必须将导入语句放在最顶层，如果不是则抛出异常。

这是模块中的导出接口：

export function test() {
console.log(“测试功能”);
}

如果我们想在某种特定条件下才导入并调用改接口，使用import与from的方式会抛出异常。

这个时候就需要用到动态导入，使用 import() 函数可以动态导入，实现按需加载，它返回一个 promise 对象。

我们可以使用解构语法来将模块中的接口一个一个全部拿出来。

合并使用
　　如果有多个模块都需要被使用，我们可以先定义一个Js文件将这些需要用到的模块中的接口做一个合并，然后再将该文件导出即可。

合并导出请将export与from结合使用。

// js_m1

export default class{ // 默认导出
static register(){
console.log(“注册功能”);
}
}

// js_m2

export class Login{
static login(){
console.log(“登录功能”);
}
}

export function test(){
console.log(“js_m2测试功能”);
}

// index.js

// 合并导出

import js_m1 from “./js_m1.js”;

// js_m1中有接口是默认导出，因此我们需要不同的导出方式 , 注意这里就导出了一个接口，即js_m1的注册类
export {default as js_m1_register} from “./js_m1.js”;

// 导出js_m2中的接口，共导出两个接口。登录类和测试函数。
export * as js_m2 from “./js_m2.js”;

导入与使用：

指令总结

表达式 说明
export function show(){} 导出函数
export const name=“Yunya” 导出变量
export class User{} 导出类
export default show 默认导出
const name = “Yunya”

export {name}

导出已经存在变量
export {name as m1_name} 别名导出
import m1_default from ‘./m1_js.js’ 导入默认导出
import {name,show} from ‘/m1_js.js’ 导入命名导出
Import {name as m1_name,show} from ‘m1_js.js’ 别名导入
Import * as m1 from ‘/m1_js.js’ 导入全部接口

编译打包
　　由于module语法是Es6推出的，所以对老旧的浏览器兼容不太友好，这个时候就需要用到打包工具进行打包处理使其能让老旧的浏览器上进行兼容。

首先登录 https://nodejs.org/en/ 官网下载安装Node.js，我们将使用其他的npm命令，npm用来安装第三方类库。

在命令行输入 node -v 显示版本信息表示安装成功。

安装配置
　　cd到你的项目路径，并使用以下命令生成配置文件 package.json

npm init -y

修改package.json添加打包命令

…
“main”: “index.js”,
“scripts”: {
“dev”: “webpack --mode development --watch” // 添加这一句
},
…

安装webpack工具包，如果安装慢可以使用淘宝 cnpm 命令

npm i webpack webpack-cli --save-dev

目录结构

index.html

–dist #压缩打包后的文件

–src

----index.js #合并入口

----style.js //模块

index.html内容如下

Document

index.js内容如下

import style from “./style”;
new style().init();

style.js

export default class User {
constructor() {}
init() {
document.body.style.backgroundColor = “green”;
}
}

执行打包
　　运行以下命令将生成打包文件到 dist目录，因为在命令中添加了 --watch参数，所以源文件编辑后自动生成打包文件。

npm run dev

体育爱我
关注
javascript全局变量封装模块实现代码
01-19
下面的代码是我的测试代码，注释很重要： 代码如下: /*global window,jQuery,validate_email,masterUI,$,rest*/ /** Enable ECMAScript “strict” operation for this function. See more: * ...
node js模块 打包
10-18
如果出现了module.js:529 throw err; ^ 这些错误 可以找到node.js 安装目录 把此文件解压到C:\Program Files\nodejs\node_modules 目录下 既可以解决问题，里面包括ws 等模块
js模块封装
chuanpizhe9926的博客
03-19 772
1. 使用 对象 来模拟模块封装，可以避免命名冲突，但是对象里面的变量值可以被随意的修改 var modules2 = { _count: 0, m1: function () { console.log('m1 ' + this._count) ...
js的模块封装（二）
weixin_33832340的博客
10-01 258
(function(w){ 　　var dateUtils = {}; 　　dateUtils.test1 = function(){ 　　　　alert("123"); 　　} 　　window.dateUtils = dateUtils;})(window); 转载于:https://www.cnblogs.com/lichenx/p/9734544.html...
JavaScript的模块化:封装(闭包),继承(原型) 介绍
10-27
在JavaScript中，模块封装经常用于创建独立的模块，这些模块可以复用和测试，同时保持代码的清晰和组织性。然而，为了更深入理解模块封装，我们需要从基础出发，理解函数作用域、作用域链和闭包之间的关系。 在作用...
Javascript模块化编程详解
12-03
JavaScript模块化编程是一种组织代码的方式，它使得代码更容易理解和维护。模块化编程通过将相关的功能封装起来，避免了全局变量的滥用，提高了代码的复用性和可读性。以下是JavaScript模块化编程的一些核心概念和...
JavaScript 模块化编程(笔记)
10-24
### JavaScript模块化编程知识点 #### 模块化编程概述 模块化编程是一种将复杂系统的不同部分组织为独立模块的方法。在JavaScript中，模块化可以带来代码复用、封装、依赖管理等诸多优点。JavaScript模块化编程允许...
js封装任意级列表模块
hugejihu9的专栏
12-26 171
文章来自：源码在线https://www.shengli.me/javascript/492.html   在开发中常常会使用到多级列表。为了不再重复写构建列表的代码，可以规定列表的数据格式， 并将列表封装成一个可重用的模块，因为递归解析列表数据源，所以支持任意多级，代码在最后给出链接。   要使用这个模块，传入的数据要遵守以下格式          ...
用模块封装代码
Luckyzhoufangbing的博客
06-05 258
（一）模块（ Modules ）是使用不同方式加载的 JS 文件 1. 模块代码自动运行在严格模式下，并且没有任何办法跳出严格模式 2. 在模块的顶级作用域创建的变量，不会被自动添加到共享的全局作用域，它们只会在模块顶级作用域的内部存在； 3. 模块顶级作用域的 this 值为 undefined ； 4. 模块不允许在代码中使用 HTML 风格的注释（这是 JS 来自于早期浏览器的历史遗留特性）； 5. 对于需要让模块外部代码访问的内容，模块必须导出它们； 6. 允许模块从其他模块导入绑定。
JavaScript方法封装的实现方法
我点评的博客
07-15 531
在这个例子中，我们使用一个对象来表示一个矩形，这个对象包含了矩形的宽度和高度属性，并将计算矩形面积和周长的代码块放入这个对象中。面积和周长函数都可以通过this关键字访问矩形的宽度和高度属性，这样我们就可以通过这个对象计算矩形的面积和周长，而不需要重复写计算矩形面积和周长的代码块。方法封装允许开发人员将代码分解为小而独立的模块，从而使代码的复杂性降低，提高代码的可读性和可维护性。在这个例子中，我们使用一个类来表示一个矩形，这个类包含了矩形的宽度和高度属性，并将计算矩形面积和周长的方法定义为类的属性。
js模块化
yifan6688的博客
11-27 868
将一个复杂的程序依据一定的规则（规范）封装成几个块，内部私有，外部暴露接口。
JS 中的模块化
桃树林
06-10 220
文章目录JS 中的模块化CommonJSAMDESModule后模块化的编译时代 来源：止水的公开课《webpack 原理与实战》，手码整理的笔记（只有前半部分，后半部分关于 webpack 打包的内容由于视频中没有全部出现所以无法记录）。 JS 中的模块化 要明白我们的打包工具究竟做了什么，首先必须明白的一点就是 JS 中的模块化。在 ES6 规范之前，我们有 CommonJS、AMD的主流的模块化规范。 CommonJS Node.js 是一个基于 V8 引擎、事件驱动 I/O 的服务端 JS 运行
js call/apply 封装实现
weixin_42448623的博客
10-14 124
call 改变 this指向 function test(){ } test()// 调用函数 // 会隐式 的调用 call方法 test.call() 传参 this指向 第一个参数 var obj = { name:'obj', obb:function(age){ console.log(this.name,age) } } var obj2 = { name:"ob...
如何封装一个js文件？
mzc的博客
05-19 1209
这个 DOM 库使用模块模式封装了一些常用的 DOM 操纵方法,并暴露了一个 dom 的命名空间对象给外部使用。：使用闭包或模块模式封装代码,不将变量暴露在全局作用域。：使用对象字面量创建命名空间,防止函数与变量名称冲突。：不仅可以避免变量污染全局作用域,还可以模拟类。：这可以防止浏览器加载缓存的脚本文件。：这是一种暗示这些成员是私有的约定。这能避免许多 JS 潜在的问题。：在 JS 文件的首行添加。
浅谈js代码的封装方法（2023.10.30）
最新发布
I have a dream, here my dreams come true!
10-31 1364
js代码封装方法
JS设计模式——封装与对象
qq_35729091的博客
04-07 253
如何使用创建型设计模式更好的封装代码、更好的创建对象；工厂模式；建造者模式；单例模式；
封装js文件(查询，编辑，删除，添加，分页)等基本功能
qq_33968099的博客
08-27 398
封装js文件(查询，编辑，删除，添加，分页)等基本功能 在小公司做项目人少，单独开发前端功能，自己封装好之后，在做页面可以特别快，代码复用性也很强 基于vantui封装一个共用的js文件 自己命名 import modalConfirmLoading from './modal-confirm-loading' export default { mixins: [modalConfirmLoading], data () { return { addModal: false,
JavaScript模块封装：闭包与原型详解
JavaScript模块化是提升代码组织和复用性的重要手段，尤其是在大型项目中处理复杂逻辑时。本文主要关注两个关键概念：封装（通过闭包实现）和继承（利用原型链）。 封装是模块化的核心，它涉及到隐藏内部实现细节，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值