JS—Module

module方式引入js文件无法加载问题.type=“module“ 报错信息如下:Access to script at 'file:///D:/%E5%9B%9B%E5%B7%9D%E5%86%9C%E4%B8%9A%E5%A4%A7%E5%AD%A6/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88/%E9%9D%A2%E8%AF%95%E7%9B%B8%E5%85%B3/%E9%9D%A2%E8%AF%95%E7%9B%B8%E5%85%B3%E7%BB%83%E4%B9%A0/2022%E 阅读详情

Module模式

模块是任何强大应用程序架构中不可或缺的一部分,它通常能帮助我们清楚地分离和组织项目中的代码单元。

在JS中,有几种用于实现模块的方法,包括:

1、对象字面量表示法

2、Module模式
3、AMD模式
4、CommonJS模块
5、ECMAScript Harmony模块

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

这里我们就了解下前两种方法。
方法一:对象字面量

关键字:声明对象   name/key    :

经典程序:

var myModule = {

			myProperty: "someValue",

			//对象字面量可以包含属性和方法
			//例如:可以声明模块的配置对象
			myConfig: {
				useCaching: true,
				language: "en"
			},

			//基本方法
			myMethod: function() {
				console.log("myMethod");
			},

			//根据当前配置输出信息
			myMethod2: function() {
				console.log("Caching is " + ((this.myConfig.useCaching) ? "enabled" : "disabled"));
			},

			//重写当前配置
			myMethod3: function(newConfig) {

				if(typeof newConfig === "object") {
					this.myConfig = newConfig;
					console.log(this.myConfig.language);
				}
			}
		};

		//输出"myMethod"
		myModule.myMethod();

		//输出enabled
		myModule.myMethod2();

		//输出:fr
		myModule.myMethod3({
			language: "fr",
			useCaching: false
		});

使用对象字面量有助于封装和组织代码。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

方法二  Module(模块)模式
Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。
在JS中,Module模拟用于进一步模拟类的概念,通过这种方式,能够使一个单独对象拥有公有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分。产生的结果是:函数名与在页面上其他脚本定义的函数冲突的可能性降低。

关键字:模拟类    公有/私有

最简单最经典代码:

(function() {
			//在此声明私有变量或者函数
			
			return {
				//在此声明公共变量或者函数
			}
		})();

简单且具体代码:

var testModule = (function () {
			//私有
			var counter = 0;

			return {
				//return以内的均是公有(可被外部访问)
				incrementCounter: function() {
					return ++counter;
				},

				resetCounter: function() {
					console.log("counter value prior to reset: " + counter);
					counter = 0;
				}
			};
		})();

		//增加计数器
		testModule.incrementCounter();

		//检查计数器并重置
		//输出:1
		testModule.resetCounter();

在这里,代码的其他部分无法直接读取incrementCounter()或resetCounter()。counter变量实际上是完全与全局作用域隔离的,因此他表现得就像是一个私有变量,它的存在被局限在模块的闭包内,因此唯一能访问其作用域的代码就是这两个函数。上述方法进行了有效的命名设置,所以在测试代码中,所有的调用都需要加上前缀(如:testModule)

自己的想法:匿名函数+声明的变量或函数+return(本质还是函数,而且利用了函数内部的作用域)

Module模式的变化:引入混入、引出

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

改进版本——Revealing Module(揭示模块)模式
这个模式的产生是因为Heilmann很不满意这种状况:当他想从另一个方法调用一个公有方法或访问公有变量时,必须重复主对象的名称。他也不喜欢使用Module模式时,必须切换到对象字面量表示法让某种方法变成公有方法。
他努力的结果就是创建了一个新的模式,能够在私有范围内简单定义所有的函数和变量,并返回一个匿名对象,它拥有指向私有函数的指针,该函数是他希望展示为公有的方法。

关键字:私有域中定义所有
示例代码:


var revealingModule = (function(){
			var privateVar = "private", publicVar = "Hello World";
			function privateFunction(){
				console.log("Names:" + privateVar);
			}
			function publicSetName(strName){
				privateName = strName;
			}
			function publicGetName(){
				privateFunction();
			}

			return {
				setName: publicSetName,
				greeting: publicVar,
				getName: publicGetName
			}
		})();

		revealingModule.setName("abc");
		// 输出 Names:private
		revealingModule.getName();
		// 输出 Hello World
		console.log(revealingModule.greeting);

该模式可以使脚本语法更加一致,在模块代码底部,它也会很容易指出哪些函数和变量可以被公开访问,从而改变可读性。



摘录于:《JavaScript设计模式》
参考:http://www.cnblogs.com/irocker/p/4-javascript-design-patterns-you-should-know.html





关于JavaScript、TypeScript Module的配置和用法 JavaScript模块 的配置和用法 阅读详情

相关推荐

前端Javascript模块化 CommonJS与ES Module区别

ES Module 的静态结构支持编译时删除未使用代码(如 Webpack 的 Tree Shaking),而 CommonJS 因动态加载无法实现此优化。ES Module的普及促使npm生态向ESM迁移,工具链(如Webpack、Rollup、Vite)全面支持ESM,形成从开发到构建的完整解决方案。从“脚本堆砌”到“工程化设计”,模块化推动了组件化开发、Monorepo架构和微前端实践,例如通过Webpack和Vite实现模块联邦与即时编译。模块化通过独立作用域隔离变量,避免全局命名冲突。

警警的博客 1599

javascript模块 (Module) 简介

随着ES6的出现,js模块已经成为正式的标准了。曾经为了解决js模块问题而发展起来的民间秘籍,requireJs(AMD)、SeaJs(CMD)、Node(CommonJs),已经或者不久的将来会成为历史。了解历史也是很重要的,因为正式标准就是以民间秘籍为基础而发展起来的,有些规范仍然被广泛应用于开发中(CommonJS)。 ES6的class是面向对象的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题。Module功能则是为了解决这一问题而提出的。 在ES6之前,...

有的话没说出来之前,你是他的主人,一旦说出来你就成了他的奴隶||想要干好事,别太把自己当人,别把别人太不当人||认识这个人就是开了一扇窗户,就能看到不一样的东西,听到不一样的声音,能让你思考、觉悟,这已经够了 9758

原生 Javascript JSON Module

JSON Module JSON Module 在开发中已经被我们大量使用,导入 json 在开发中就如同喝水一般常见 目前的现状 得益于构建工具的支持,我们可以随意导入任意 json,并任意使用,但 js 本身并不支持 JSON Module,这只不过是打包工具给予我们的能力罢了,webpack 自 2.x 开始直接支持 JSON Module,rollup 也可以通过 @rollup/plugin-json 支持 JSON Module 直接导入,这些这给我们带来了极大的便利,在此之前,我们需要在

wx_15896014638的博客 400

JavaScript新特性: 模块 (module)

对于模块进行了简单讲解,毕竟模块侧重于使用,然后再通过export和import中的一些注意事项。其它还有模块的动态加载,import可以当作方法一样,然后返回一个promise。下面都通过实例演示,方便理解。

u011863822的博客 4694

从mseed到SAC格式转换全攻略:mseed2sac工具安装与批量处理技巧

本文详细介绍了如何将mseed格式的地震数据高效转换为SAC格式,涵盖mseed2sac工具的安装、单文件转换技巧、批量处理自动化实现以及元数据高级处理策略。通过具体命令和脚本示例,帮助地震学研究者快速掌握数据预处理的关键技术,提升波形数据分析效率。

ruby5的博客 927

SAP-ML章<<<<第二节:物料账报错处理ABAP编程错误:RAISE_EXCEPTION>>>>

#SAP-ML章<<<<第一节:物料账报错处理ABAP编程错误:RAISE_EXCEPTION>>>> 1.物料账报错提示: ABAP编程错误:RAISE_EXCEPTION ABAP程序:SAPLFCML4H_RUN_PRICES应用组件CO-PC-ACT 2. 物料账报错背景: CKMLCP运行结算时 3. 解决方案: 通过DEBUG查看错误的地方 OKTZ:分析原因为:可能打包或者配置传输时弄错 ...

SAP.David.Gao的博客 1858

js Module 模块的使用

ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。

技术的搬运工 2414

【影像组学入门百问】1#---#3

理论上讲三大主流平台Windows, Linux和MacOS均可进行影像组学研究。根据笔者实际经验,如果内存不足可能导致软件罢工,其余显示、GPU等均非必要。显示:最小分辨率为1024×768(推荐为1280×1024或更好)。Slicer中的许多计算都是多线程的,并且将受益于多核,多CPU配置。计算机需要足够的内存和图形功能将原始数据和处理结果保存在其内存中。如涉及深度学习等方法的研究需根据实际需求配置电脑,无法一概而论。接口设备:推荐使用带滚轮的三键鼠标。内存:超过4GB(推荐8G以上)。

weixin_38594676的博客 1484

modulejs 模块化JavaScript框架【国产】

      modulejs是极致模块化的且面向对象的javascript框架,modulejs能让你在简单易用的前提下写出更佳维护性和可重用性的javascript代码。 Features   HTML document query/traversing/manipulation Lightweight selector engine Event handling Ani...

Java More Blog 818

Python爬虫实战:抓取CVE安全漏洞数据库

在网络安全领域,CVE(Common Vulnerabilities and Exposures)是一个非常重要的安全漏洞字典,它为每个安全漏洞提供了唯一的标识符。安全研究人员、开发人员和系统管理员都需要及时了解最新的CVE信息,以便采取相应的防护措施。本文将详细介绍如何使用Python爬虫技术从专业CVE网站抓取漏洞数据,并构建一个完整的CVE信息采集系统。本文详细介绍了如何使用Python爬虫技术从专业CVE网站抓取安全漏洞数据。多种爬虫技术反爬虫策略:User-Agent轮换、代理IP、请求延迟。

2201_76125261的博客 367

虚拟机VMware Horizon Client与主机之间建立共享文件夹

因经常需要在虚拟机和主机之间传递一些日常文件,所以建立共享文件夹。 虚拟机中安装的系统为win10,主机中的系统为win10。 步骤: 第一步:先在虚拟机win10中新建文件夹(我重命名为“共享文件夹”),然后右键属性->共享->共享 进去之后点击自己的账户名 然后点共享。操作完成后,再返回属性界面就能看到该文件夹已经共享而且出现了共享链接,记下此链接。 第二步:回到主机桌面->此电脑->最上面计算机->添加一个网络位置- 点击下一步 然后自定义网络位置,下一步,如下图

AnChenliang_1002的博客 1万+

在 Nginx Stream 层玩转 JavaScript——全面解读ngx_stream_js_module

摘要 NGINX Stream模块新增JavaScript支持,借助njs/QuickJS嵌入式解释器,可在L4层实现协议解析、ACL鉴权、报文改写等能力。关键特性包括:二进制流处理、统一L4/L7开发栈、轻量级高性能运行。典型应用场景涵盖自定义协议网关、动态ACL、灰度发布和长连接健康检查。通过js_preread/js_access/js_filter等生命周期钩子,结合共享字典和Fetch API,开发者能快速构建灵活高效的网络中间件。配置优化建议包括启用QuickJS引擎、复用上下文、预加载对象等方

hello.reader 878

【AHE数据集】中国2019年多源热排放数据集-500m空间分辨率

【AHE数据集】中国2019年多源热排放数据集

WW、forever的博客 411

Node.js:模块化思想中一个Javascript文件分析以及exports 和 module.exports的区别

模块化思想中一个Javascript文件分析以及exports 和 module.exports的区别

KaiSarH 733

【ARM CoreLink 系列 7 -- TZC-400控制器简介】

为了确保内存能够正确识别总线的信号控制位,新增一个TrustZone地址空间控制器(TrustZone Address Space Controller,TZASC)组件来实现对内存地址的安全扩展,将内存区域划分为安全内存区域和非安全内存区域,安全世界可以访问安全内存和非安全内存,而普通世界只能访问非安全内存,如下图所示:图 1-1内存区域的划分是在系统启动时通过配置 TZASC 组件(TZC-400/TZC-380)来实现的。TZC-400由和使能情况;安全访问权限;Base地址;

CodingCos的博客 1634

详解【计算机类&面试真题】军队文职考试——第7期:C盘格式化需要注意什么?| 两台笔记本连起来后ping不同,可能存在哪些问题?| 模拟信号到数字信号是如何转化的?| 计算机由哪些部件组成?

这是我分享的系列面试知识——军队文职(计算机类)面试真题详解(第7期)。本期分享:两台笔记本连起来后ping不同,你觉得可能存在哪些问题?模拟信号到数字信号是如何转化的?谈一谈计算机由哪些部件组成?如何加强计算机网络安全管理?若通过域名无法访问,而通过IP地址能访问。这是怎么回事?你将如何解决?谈一谈C盘格式化需要注意什么?开放类题目:如果应聘的岗位和你想的差距很远,你怎么办?

追光者♂:记录、分享、总结、提升,现象级专栏《Python从入门到人工智能》作者,无惧黑暗,坚信曙光 1922

js引用 module 类型的写法

我们知道,在script标签中写js代码,或者使用src引入js文件时,默认不能使用module形式,即不能使用import导入文件,但是我们可以再script标签上加上type=module属性来改变方式。 <html> <head> here is just a example to import the qunee for js not ts </head> <body> <div ...

dualvencsdn的博客 1467

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

JavaScript模块(ES6 module)化总结(import())

文章目录一、参考二、why 模块化2.1 JavaScript设计缺陷2.2 随着前端和JavaScript的快速发展,JavaScript代码变得越来越复杂,不能满足需求2.3 没有模块化的JavaScript的模块化方案2.3.1 全局函数2.3.1.1 示例2.3.1.2 缺点2.3.2 将函数封装到对象命名空间下2.3.3 立即函数调用表达式(IIFE,Immediately Invoked Function Expression)2.3.3.1 示例2.3.3.2 缺点三、CommonJS规范3.

黄彪博客 3980

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

Common JS和ES Module的区别

2,支持动态导入require可在代码任意位置,是同步加载(运行时加载)5,循环依赖处理方面:因为是同步加载,导致可能加载到未完全初始化的模块。2,支持动态导入import()方法,返回的是Promise。1,require导入,module.exports导出,6,循环依赖处理方面,在编译解析时静态分析解决了循环依赖。3,静态加载,编译时解析依赖,解析时确认依赖关系。5,导出的是值的引用,修改原模块会同步到导入处。4,导出的是值的拷贝,导出后与原模块解耦。1,import导入,export导出。

lexiangqicheng的博客 712

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Node JS 模块:Node.js module.exports 与 exports

当我们在 javascript 中构建大型应用程序时,我们希望将其拆分为多个文件,并为这些文件提供模块。为了在我们的应用程序中使用这样的模块,我们需要导出模块中存在的类或函数。因此,在本文中,我们将研究从模块导出函数或类的两种最常见方法,即 module.exports 和 exports。我们还将研究它们之间的差异,并了解哪种方式最适合给定的情况。我们先来了解一下 javascript 中的模块,可以把模块理解为一个文件,它封装了一块代码,方便应用的相关功能。

新华编程特战队 2577

node.js中的module模块

模块模式 我们把每一个 .js 文件都视为一个 模块,模块内部有自己的作用域,不会影响到全局。并且,我们约定一些关键词来进行依赖声明和 API 暴露。在js中有几种用于实现模块的方法和规范: 对象字面量表示法 Module模式 以下是一些模块化规范,括号内为对应的脚本加载器 CMD(SeaJS) AMD(RequireJS) CommonJS(NodeJS) ES6 Module (...

WJ930708的博客 882

CSS Module vs CSS-in-JS

CSS Module 是“CSS 原生语法 + 模块化”的妥协,兼顾性能和开发者对 CSS 的熟悉度,适合大多数中大型项目;CSS-in-JS 是“样式与 JS 融合”的激进方案,牺牲部分性能换取动态样式的灵活性,适合样式逻辑复杂、组件化程度极高的场景。实际开发中,两者也可混合使用(如全局样式用 CSS Module,动态组件用 CSS-in-JS),关键是根据项目需求平衡性能、开发效率和可维护性。

2401_89241768的博客 679

VS Code 调试JavaScript报错:“crbug1173575, non-JS module files deprecated”

按照网上的方法(VSCODE 调试 Javascript)装好debugger for chrome扩展后,调试JavaScript,结果无法正常在浏览器中显示网页,报错:“crbug/1173575, non-JS module files deprecated”,如下图所示: 解决方法: 打开launch.json,更改"configurations"中的"url"中的端口号为Live Server的端口号 保存,然后再重新按F5,即可正常调试 ...

geejkse_seff的博客 1255

VSCode.javascript报错:crbug/1173575, non-JS module files deprecated.

VSCode

m0_51511564的博客 2246

深入解析JavaScript Module模式

Module模式摘要 Module模式是JavaScript中常用的设计模式,利用闭包和函数作用域封装代码,避免全局污染,并提供私有与公有成员的隔离。核心特点包括: 私有性:通过函数作用域保护内部变量,仅暴露公有接口。 实现方式:基于IIFE(立即执行函数)创建独立作用域,返回公有方法。 变体:包括基础Module、增强Module、揭示模块模式(明确暴露公有方法)、单例模式等。 优势:解决全局命名冲突、代码组织混乱、依赖管理等问题,增强可维护性。 现代应用:虽ES6模块已成主流,但Module模式在遗留代

油墨香^-^的博客 753
上一篇: JS——对三个数进行排序(降序)
下一篇: JS——数组(引用传递)
spfLinux
博客等级 码龄10年 117粉丝 307原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值