《JS原理、方法与实践》- 模块
模块并不是对象，模块的使用分为两部分：定义模块和使用模块。它们一般位于不同的文件中，使用模块的文件可以调用定义模块的文件中导出的内容，有点像我们平时在一个页面中导入其他的js文件，但模块调用要比导入js文件更加强大。
模块的基本用法
模块最基础的用法就是导出和导入，分别使用export和import关键字来操作。只有模块中导出的变量（可以是变量，函数，类等）才可以被其他文件导入。
下面使用一个React示例，展示下基本用法，以及导入后重命名，默认导出，打包导出。
原因：如果通过本地加载Html 文件 (比如一个 file:// 路径的文件), 你将会遇到 CORS 错误，因为Javascript 模块安全性需要。你需要通过一个服务器来测试。
html加载方式：
导出模块： 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 (
name is {name}, age is {getAgeTest()}, sex is {getSex()}
);
}
export default TestModule;
调用export方式：
import React from 'react';
import Test from './import' // 可自定义名
ReactDOM.render(
name is {exportModule.name}, age is {exportModule.getAge()}, sex is {exportModule.getSex()}
);
}
export default TestModule;
如果觉得文章写得还行，请点个赞。如果想与我进一步交流，可以关注我的公众号或者加我的微信。
个人微信
公众号_前端微说.jpg
发表评论 (审核通过后显示评论)：