首页 > 编程语言 >javascript模块 (Module) 简介

javascript模块 (Module) 简介

时间:2024-11-06 21:46:31浏览次数:1  
标签:profile 简介 javascript Module js export 模块 import 加载

https://blog.csdn.net/chehec2010/article/details/119804381

 

   随着ES6的出现,js模块已经成为正式的标准了。曾经为了解决js模块问题而发展起来的民间秘籍,requireJs(AMD)、SeaJs(CMD)、Node(CommonJs),已经或者不久的将来会成为历史。了解历史也是很重要的,因为正式标准就是以民间秘籍为基础而发展起来的,有些规范仍然被广泛应用于开发中(CommonJS)。 

ES6的class是面向对象的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题。Module功能则是为了解决这一问题而提出的。

在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种。CommonJS用于服务器,AMD用于浏览器。

ES6模块的设计思想是尽量静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。

ES6模块不是对象,而是通过export命令显式指定输出的代码,输入时也采用静态命令的形式。

什么是模块?

一个模块(module)就是一个文件。一个脚本就是一个模块。就这么简单。

模块可以相互加载,并可以使用特殊的指令 export 和 import 来交换功能,从另一个模块调用一个模块的函数:

  • export 关键字标记了可以从当前模块外部访问的变量和函数。
  • import 关键字允许从其他模块导入功能。
import { Fun1, Fun2, Fun3 } from 'file';

以上代码的实质是从file模块加载3个方法Fun1、Fun2和Fun3,其他方法不加载。这种加载方式称为编译时加载,即ES6能在编译时就完成模块编译。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果想要外接获取模块内部的某个变量或方法,就必须使用export关键字输出该变量。

  1.   // profile.js
  2.   export var firstName = "John";
  3.   export var lastName = "Jackson";
  4.   export var year = 1999;

上述代码表示在profile.js文件(模块)中,输出了3个变量。

这种写法等价于:

  1.   var firstName = "John";
  2.   var lastName = "Jackson";
  3.   var year = 1999;
  4.   export { firstName, lastName, year };

在export命令后面使用大括号指定了所要输出的一组变量,等价于在每个变量前面加export。

export命令除了可以输出变量,也可以输出函数和类,写法相同。

export输出的变量就是本来的名字,但是可以使用as关键字重命名。

  1.   function f1() {}
  2.   function f2() {}
  3.   export { v1 as Fun1, v2 as Fun2, v2 as Foo };

可以使用as关键字对同一个变量或方法重命名两次,使其在引入模块中,可以使用不同的名字进行引用。

 

export命令可以出现在模块的任意顶层作用域的位置,不能出现在块级作用域内。

export语句输出的值是动态绑定的,绑定其所在的模块。

import命令

使用export命令定义了模块的对外接口后,其他JS文件就可以通过import命令加载这个模块的接口。

  1.   // main.js
  2.   import { firstName, lastName, year } from './profile';

import命令接受一个对象,里面指定了要从其他模块导入的变量名。对象中的变量名必须和要加载的模块导出的接口变量名一致(如果接口没有使用as关键字,就使用原始变量名,如果使用as关键字,则使用重命名后的接口名)。

同理,如果要对引入的变量名进行重命名,可以在import命令中使用as关键字,将输入的变量重命名。

  1.   // main.js
  2.   import { firstName as surname } from './profile';

上述写法中,需要书写每个接口的变量名,如果是要对整个模块进行整体加载,可以使用星号(*)指定一个对象,将输出模块的所有接口都加载到这个对象上。

  1.   // main.js
  2.   import * as person from './profile';

import命令具有提升效果,会提升到整个模块的顶部首先执行。

export default命令

import命令在加载变量名或函数名时,需要事先知道导出的模块的接口名,否则无法加载。可以使用export default命令指定模块的默认输出接口。

  1.   // profile.js
  2.   export default function () {
  3.   console.log("my name is John Jackson, I was born in 1999");
  4.   }

上述代码中,profile模块默认输出的是一个函数。这样,导入模块就可以不用指定要加载的接口名了。

  1.   // main.js
  2.   import myName from './profile';
  3.   myName(); // "my name is John Jackson, I was born in 1999"

在main.js文件中,myName指代的就是profile文件输出的默认接口。这意味着import命令可以用任意名称指向profile文件输出的默认接口,而不需要知道接口名。

 

export default命令用在非匿名函数前也是可以的,此时函数名在模块外部是无效的,加载时视同匿名函数。

  1.   // profile.js
  2.   export default function sayName () {
  3.   console.log("my name is John Jackson, I was born in 1999");
  4.   }
  5.    
  6.   // main.js
  7.   import myName from './profile';
  8.   myName(); // "my name is John Jackson, I was born in 1999"

一个模块只能有一个默认输出,因此export default在一个模块中只能使用一次。所以,对应的import命令可以不加大括号。

如果要在一条import命令中同时引入默认方法和其他变量,可以写成以下这样:

import customName, { otherMethod } from './module-name';

customName指代默认接口的命名,otherMethod指代其他接口。

模块的继承

模块之间可以继承。假设有个Circle模块继承了Shape模块。

  1.   // cicle.js
  2.   export * from 'Shape';
  3.   export var pi = 3.14159265359;
  4.   export default function area(r) {
  5.   return pi * r * r;
  6.   }

export * 表示输出模块Shape的所有属性和方法,但不会输出Shape的默认方法。

 

module命令

如果要整体加载模块,可以使用module命令代替上述的import * as命令。module命令不会加载模块的默认方法。需要额外使用import命令加载模块的默认方法。

  1.   // main.js
  2.   module person from './profile';

ES6模块加载的实质

ES6模块输出的是值的引用。

ES6模块遇到模块加载命令import时不会去执行模块,只会生成一个动态的只读引用。等到真的需要用到时,再到模块中取值。

ES6的输入有点像UNIX系统的“符号链接”,原始值变了,输入值也会跟着变。因此,ES6模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。

  1.   // lib.js
  2.   export let count = 3;
  3.   export function add() { count++; }
  4.    
  5.   // main.js
  6.   import { count, add } from './lib';
  7.   console.log(count); // 3
  8.   add();
  9.   console.log(count); // 4

由于ES6输入的模块变量只是一个“符号链接”,所以这个变量是只读的,对它进行重新赋值会报TypeError异常。

  1.   // lib.js
  2.   export let obj = {};
  3.    
  4.   // main.js
  5.   import { obj } from './lib';
  6.   obj.prop = 123; // OK
  7.   obj = {}; // TypeError

obj指向的地址是只读的,无法为其重新赋值。

 

模块接口的导出

 

模块接口的导入

 

标签:profile,简介,javascript,Module,js,export,模块,import,加载
From: https://www.cnblogs.com/chinasoft/p/18531134

相关文章

  • [Javascript] Iterate over Object
    const[a,b]={a:3,b:4,};console.log(a,b);//TypeError:{(intermediatevalue)(intermediatevalue)}isnotiterable Howtomakeitworkwithouttouchoriginalcode?Weneedtouse[Symbol.iterator]forObject.prototype;Object.prototype[Sym......
  • 深入理解JavaScript中的闭包
    写在前面在JavaScript中,闭包是一个强大的概念,它允许我们创建私有变量和函数,并在需要时访问它们。虽然闭包可能看起来有些神秘,但实际上它是基于JavaScript的词法作用域和函数的特性。理解闭包对于编写高效、可维护的JavaScript代码至关重要。什么是闭包?闭包是指一个函数能......
  • Selenium简介
    Selenium是一个广泛应用的自动化测试工具,专门用于Web应用的测试。它提供了多种功能和灵活的操作方式,使测试人员可以通过编程方式模拟用户与Web浏览器的交互。以下是一些Selenium的基础介绍材料:1.什么是Selenium?Selenium是一个开源的Web自动化测试框架,可以通过编......
  • 基于JavaScript的关键词过滤示例
    业务场景中,合作第三方的的各种AI内容审核模型,完全达不到满意的状态,奇怪这么简单的一个东西,有这么复杂吗,自己动手来一个DEMO,给开发,仅供参考。<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-wi......
  • JavaScript的对象事件监听处理,交互式网页的关键!
    目录一、对象的事件二、常用的事件及处理1、鼠标事件(1) mousedown事件(2) mouseup事件(3) click事件(4)dblclick事件(5)mouseenter事件(6)mouseleave事件(7)wheel事件2、键盘事件(1)keydown事件(2)keyup事件3、表单事件(1)概念 (2)先设置一个简单的表单(3)获取表单节点(4)添加表......
  • JavaScript用法
    JavaScript 用法HTML中的Javascript脚本代码必须位于 <script> 与 </script> 标签之间。Javascript脚本代码可被放置在HTML页面的 <body> 和 <head> 部分中。<script>标签如需在HTML页面中插入JavaScript,请使用<script>标签。<script>和</script>......
  • Ollama简介,以及中文使用指南和AMD图形显卡驱动下载
    Ollama是一个开源的大型语言模型(LLM)服务工具,它旨在简化在本地运行大语言模型的过程,降低使用大语言模型的门槛。Ollama使得开发者、研究人员和爱好者能够在本地环境快速实验、管理和部署最新的大语言模型,包括但不限于如Qwen2、Llama3、Phi3、Gemma2等开源的大型语言模型。Oll......
  • LPC1100 系列_1.简介与入门
    1.简介与入门1.1LPC1100系列概述LPC1100系列是NXP推出的一款基于ARMCortex-M0内核的低功耗、高性能单片机。该系列单片机适用于各种嵌入式应用,包括传感器网络、工业控制、消费电子和医疗设备等。LPC1100系列的主要特点包括:低功耗:具有多种低功耗模式,适用于电池......
  • javascript跨域问题排查
    什么是跨域问题跨域是指浏览器从一个域名的网页去请求另一个域名下的资源。出于安全考虑,浏览器会限制这种跨域请求。例如,网页http://example1.com中的JavaScript代码尝试去获取http://example2.com的数据,这就会触发跨域问题。同源策略规定,只有当协议(如http、https)、域名(如ex......
  • Javascript 代码规范
    JavaScript代码规范是编程时遵循的一套规则和最佳实践,以确保代码的可读性、可维护性和一致性。以下是一些关键的JavaScript常见代码规范:1.使用严格模式在所有脚本文件或函数开头添加‘usestrict’;声明,以启用严格模式(strictmode),这有助于捕获潜在的错误并避免不明......