《JS原理、方法与实践》- 模块

简介: 《JS原理、方法与实践》- 模块

模块并不是对象,模块的使用分为两部分:定义模块和使用模块。它们一般位于不同的文件中,使用模块的文件可以调用定义模块的文件中导出的内容,有点像我们平时在一个页面中导入其他的js文件,但模块调用要比导入js文件更加强大。

#### 模块的基本用法

模块最基础的用法就是导出和导入,分别使用export和import关键字来操作。只有模块中导出的变量(可以是变量,函数,类等)才可以被其他文件导入。

下面使用一个React示例,展示下基本用法,以及导入后重命名,默认导出,打包导出。

> 原因:如果通过本地加载Html 文件 (比如一个 file:// 路径的文件), 你将会遇到 CORS 错误,因为Javascript 模块安全性需要。**你需要通过一个服务器来测试**。

html加载方式:<script type="module" src="module.mjs"></script>

导出模块: export.js

```

export const name = 'zzh'; // method 1, 基本导出方式

const  getAge  = ()  => 18;

const getSex = () => 'male';

export { getAge, getSex} // method 2, 打包导出方式

```

导入模块;import.jsx, 里面包含一个默认导出TestModule

```

import React from 'react'

import { name, getAge as getAgeTest, getSex } from './export';

// getAge as getAgeTest: 利用as重命名

function TestModule () {

   return (<div> name is {name}, age is {getAgeTest()}, sex is {getSex()}   </div>);

}

export default TestModule;

```

调用export方式:

```

import React from 'react';

import Test from './import' // 可自定义名

ReactDOM.render(

   <Test />,

   document.getElementById('root')

 );

```

调试结果:

name is zzh, age is 18, sex is male

一个小示例,包含了基本用法,以及导入后重命名,默认导出,打包导出,还有一种导入方式就是导入命名空间,用星号(*)将模块中导出的所有变量全部导入,这时需要一个命名空间,调用时使用命名空间调用就好了,例如将上面的导入改写:

import.jsx

```

import React from 'react'

import * as exportModule from './export';

function TestModule () {

   return (<div> name is {exportModule.name}, age is {exportModule.getAge()}, sex is {exportModule.getSex()}   </div>);

}

export default TestModule;

```

目录
相关文章
|
13天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
22小时前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
6天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
17天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
18天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
38 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
22小时前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
22小时前
|
JavaScript 前端开发 开发者
|
18天前
|
存储 JavaScript 前端开发
JavaScript数组去重的八种方法详解及性能对比
在JavaScript开发中,数组去重是一个常见的操作。本文详细介绍了八种实现数组去重的方法,从基础的双重循环和 indexOf() 方法,到较为高级的 Set 和 Map 实现。同时,分析了每种方法的原理和适用场景,并指出了使用 Set 和 Map 是目前最优的解决方案。通过本文,读者可以深入理解每种方法的优缺点,并选择最合适的数组去重方式。
32 0
|
19天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
93 0
|
19天前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
24 0