《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;

```

目录
相关文章
|
20天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
1月前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
5天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
|
19天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
19天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
7天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
|
19天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
36 7
|
20天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
25天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
18天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
下一篇
无影云桌面