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

如果觉得文章写得还行，请点个赞。如果想与我进一步交流，可以关注我的公众号或者加我的微信。

个人微信
公众号_前端微说.jpg