标签：实例 单词 开始 ola 它的 cti and 方式 工程化
?个?够复杂的?程，需要尽量将功能解耦。什么叫解耦？简单来说，需要将不同的功能分开到不同的?件中，或不同的?录结构中，形成?个个模块，模块之间通过有限的接?交互，模块内部的数据变化对外部隐藏。
在 Node.js 上，这?点表现的?常不错。Node.js 实现了 CommonJS 规范，每个 JS ?件就是?个模块，模块中的所有数据对外隐藏，仅通过 Module.exports 暴露模块内的内容。于是，模块化开发在 Node.js 环境中已不成问题。
1. ?个 JavaScript ?件，即?个模块。
2. 模块中所有的数据，除?导出，否则都是私有数据，仅能在模块中访问。
3. 使? export 关键字导出模块。
4. 使? import 关键字导?模块，导?时使?解构表达式得到导出的数据，否则，将使?导出的默认
数据。
5. ?个模块可以有多个导出。
6. 导?的模块会被缓存。
7. 在??中加载??模块使? <script type="module" src="??模块">
一、模块导出
1、导出数据，定义一个变量，将要导出的数据赋值给变量，通过export导出
// 导出数据 export var color = "red"; export let name = "Nicholas"; export const magicNumber = 7;
2、导出函数，在函数前加上export导出
// 导出函数 export function sum(num1, num2) { return num1 + num2; }
3、导出类，在类class前加上export导出
// 导出类 export class Rectangle { constructor(length, width) { this.length = length; this.width = width; } }
4、也可将定义的私有函数导出，通过export对象导出
// 定义?个函数 function multiply(num1, num2) { return num1 * num2; } // 稍后将其导出 export { multiply };
以上方法最终能够得到的结果为：
{ color: "red", name: "Nicholas", magicNumber: 7, sum: function, Rectangle: class, multiply: function }
二、模块导?
import { color, name, multiply } from "./mymodule.js";
这是导入模块的基本形式。
也可使用通配符（*）导入模块中的所有东西：
import * as all from "./mymodule.js"; // all 可以是任意的名称 // 导?后，all 是?个对象，包含模块中导出的所有内容
注意，export 与 import 都有?个重要的限制，那就是它们必须被?在其他语句或表达式的外部。
if (flag) { export flag; // 语法错误 } function tryImport() { import flag from "./example.js"; // 语法错误 }
以上的导出导入方法就是错误的！
三、导?导出默认值
为了简化导?导出语法，还提供了?种导?导出的?式：默认值。使?这种?式导?导出会更加简单，但要注意的是，每个模块只能导出?个默认值。
export default function(num1, num2) { return num1 + num2; }
<script type="module" src="./app.js"></script>
在base文档中书写以下代码：
export default class { //登录页面的视图 constructor({ el }) { //element this.el = el; this.init(); } init() { this.render(); this.mounted(); this.handle(); } render() { //负责页面渲染 } mounted() { //负责挂载其他操作 } handle() { //负责事件监听的 } }
使用导出默认值的方式导出。
之后再主info.js中导入：
import Base from "./base.js";
之后就可以在info.js中使用继承了：
页面的渲染，事件监听都做好后就可以将其整体再次默认导出，在路由router文档中建立url接口，导入浏览器需要显示的info.js：
import info from "./view/info.js"; import addBooks from "./view/books/addBooks.js"; import updateBooks from "./view/books/updateBooks.js"; var routes = { ‘/info‘: { on: function () { new info({ el: "#root" }) }, ‘/addBooks‘: function () { new addBooks({ el: "#root" }) }, ‘/updateBooks‘: function () { new updateBooks({ el: "#root" }) } } }; var router = Router(routes); export default { init() { router.init(); //初始化路由 location.hash = location.hash || "/info"; //有锚点就不会回到第一个锚点 } };
在进行new的时候，最好使用与导出的标识符相同的单词，这样import会自动出现，避免书写麻烦，或错误导致无法联通。
总的来说，浏览器的模块化开发就是将页面渲染、事件监听进行包裹，整体的导出导入，达到我们一开始说的“形成?个个模块，模块之间通过有限的接?交互，模块内部的数据变化对外部隐藏。”，虽然前期的学习这种方式容易使人混乱，但是让我们的代码实现了工程化，每一个文档都有自己独立的目的，让我们的代码维护更加方便。
标签：实例 单词 开始 ola 它的 cti and 方式 工程化
原文地址：https://www.cnblogs.com/yuanjunjundebo/p/12252224.html
