JavaScript 模块封装

湉湉幂幂 發表於 2020-8-7 16:13:00

<h1 class="md-end-block md-heading">前言介绍</h1>
 　　在最早的时候<code>JavaScript</code>这门语言其实是并没有模块这一概念，但是随着时间的推移与技术的发展将一些复用性较强的代码封装成模块变成了必要的趋势。
 　　在这篇文章中主要介绍原生的 <code>JavaScript</code>封装的几种手段以及新增的 <code>ES6 Module</code>的语法，来实现模块封装。
 　　并且会简单的使用<code>Webpack</code>让<code>Es6</code>代码向后兼容。
<h1 class="md-end-block md-heading">引入问题</h1>
 　　以下有两个<code>Js</code>文件，如果不采取任何封装手段直接导入会导致<code>window</code>环境污染。
 　　并且，如果文件中有相同名字的变量或函数会发生命名冲突，因为它们都是放在全局作用域<code>window</code>对象中的。
<div class="cnblogs_code">
<pre><script src="./js_m1.js"></script>
<script src="./js_m2.js"></script>
<script>"use strict";

// 这是由于js_m2后引入，所以js_m1的同名变量以及函数都被覆盖掉了。

console.log(module_name);// js_m2

show();// js_m2.show
</script></pre>
</div>
<div class="cnblogs_code">
<pre>var module_name = "js_m1";

function show(){
 console.log("js_m1.show");
}</pre>
</div>
<div class="cnblogs_code">
<pre>var module_name = "js_m2";

function show(){
 console.log("js_m2.show");
}</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1881426/202008/1881426-20200807160218927-349382145.png" alt="image-20200807115438551">
<h1 class="md-end-block md-heading">简单解决</h1>
<h2 class="md-end-block md-heading">IIFE封装</h2>
 　　针对上述问题，采取函数的闭包及作用域特性我们为每个模块封装一个作用域。
<blockquote>
 　　第一步：进行自执行函数包裹代码封装出局部作用域
 　　第二步：向外部暴露接口，为<code>window</code>对象添加新的对象
</blockquote>
<div class="cnblogs_code">
<pre><script src="./js_m1.js"></script>
<script src="./js_m2.js"></script>
<script>"use strict";

console.log(js_m1.module_name);// js_m1

js_m1.show();// js_m1.show

console.log(js_m2.module_name);// js_m2

js_m2.show();// js_m2.show
</script></pre>
</div>
<div class="cnblogs_code">
<pre>(function () {

 var module_name = "js_m1";

 function show() {
 console.log("js_m1.show");
 }

 window.js_m1 = { module_name: module_name, show: show };
 // 在es6中，可简写为 { module_name , show }
}())</pre>
</div>
<div class="cnblogs_code">
<pre>(function () {

 var module_name = "js_m2";

 function show() {
 console.log("js_m2.show");
 }

 window.js_m2 = { module_name: module_name, show: show };
 // 在es6中，可简写为 { module_name , show }
}())</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1881426/202008/1881426-20200807160218534-1906327129.png" alt="image-20200807120606342">
<h2 class="md-end-block md-heading">Es6块级封装</h2>
 　　在<code>Es6</code>之前，由于没有出现块级作用域的概念，那时候大家都使用上面的方式进行封装。
 　　在当<code>Es6</code>的块级作用域出现之后，又诞生出了新的封装方式即块级作用域封装。
<blockquote>
 　　和<code>IIFE</code>封装相同，都是利用作用域的特性进行封装。
 　　注意一点，块级作用域只对<code>let</code>或<code>const</code>声明有效。
</blockquote>
<div class="cnblogs_code">
<pre><script src="./js_m1.js"></script>
<script src="./js_m2.js"></script>
<script>"use strict";

console.log(js_m1.module_name);// js_m1

js_m1.show();// js_m1.show

console.log(js_m2.module_name);// js_m2

js_m2.show();// js_m2.show
</script></pre>
</div>
<div class="cnblogs_code">
<pre>{
 let module_name = "js_m1";

 let show = function () {
 console.log("js_m1.show");
 }

 window.js_m1 = { module_name, show };

}</pre>
</div>
<div class="cnblogs_code">
<pre>{
 let module_name = "js_m2";

 let show = function () {
 console.log("js_m2.show");
 }

 window.js_m2 = { module_name, show };

}</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1881426/202008/1881426-20200807160218114-262657353.png" alt="image-20200807121327601">
<h1 class="md-end-block md-heading">Es6 module 语法</h1>
 　　上面的两种方式虽然都能达到模块封装的效果，但是我们依然有更好的选择。
 　　下面将介绍极力推荐的<code>Es6 module</code>语法进行导入。
 　　学习<code>Es6 module</code>从以下三个方面来入手：
<blockquote>
 　　1.模块标签及其特性
 　　2.导出
 　　3.导入
</blockquote>
<h1 class="md-end-block md-heading">模块标签</h1>
 　　要想使用<code>Es6 module</code>语法导入模块，必须使用模块标签来引入<code>Js</code>文件。
 　　模块标签与普通的<code><script></code>标签具有一些不太一样的地方，下面会从各个方面逐一进行介绍。
<h2 class="md-end-block md-heading">声明标签</h2>
 　　将<code><script></code>标签添加上<code>type="module"</code>的属性。
<div class="cnblogs_code">
<pre><script type="module"></script></pre>
</div>
<h2 class="md-end-block md-heading">导入路径</h2>
 　　在浏览器中引用模块必须添加路径如<code>./</code> ，但在打包工具如<code>webpack</code>中则不需要，因为他们有自己的存放方式。
 　　总而言之，即使是在当前目录也要添加上<code>./</code>，不可以进行省略。
 　　这也是推荐的一种引入文件方式，不管是何种语言中都推荐引入文件时不进行路径省略。
 　　正确的导入路径
<div class="cnblogs_code">
<pre><script type="module" src="./js_m1.js"></script>
<script type="module" src="./js_m2.js"></script></pre>
</div>
 　　错误的导入路径
<div class="cnblogs_code">
<pre><script type="module" src="js_m1.js"></script>// 不可省略!省略就会抛出异常
<script type="module" src="js_m2.js"></script></pre>
</div>
<h2 class="md-end-block md-heading">延迟解析</h2>
 　　所谓延迟解析是指在模块标签中的代码会提到<code>HTML</code>代码以及嵌入式的<code><script></code>标签后才进行执行。
 　　注意看下面的示例，编码时模块标签在普通的<code><script></code>之上，但是结果却相反。
<div class="cnblogs_code">
<pre><script type="module">

console.log("<script type='module'> code run...");

</script>

<script>

"use strict";

console.log("<script> code run...");

</script></pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1881426/202008/1881426-20200807160217400-1628674175.png" alt="image-20200807123803291">
<h2 class="md-end-block md-heading">严格模式</h2>
 　　模块标签中的所有代码都是按严格模式运行的，请注意变量名的声明以及<code>this</code>指向问题，同时还有解构赋值等等。
<div class="cnblogs_code">
<pre><script type="module">

username = "云崖";// 抛出异常，未声明

</script></pre>
</div>
<div class="cnblogs_code">
<pre><script type="module">

let obj = {
 show() {
 console.log(this); // {show: ƒ}
 (function () { console.log(this); }())// undefined 严格模式下为undefined ，普通模式下为window对象
 }
};

obj.show();

</script></pre>
</div>
<h2 class="md-end-block md-heading">作用域</h2>
 　　每个模块标签中的代码都会为其创建一个专属的作用域，禁止相互之间进行访问。
 　　而普通的<code><script></code>标签中的代码全部在全局作用域下执行。
<div class="cnblogs_code">
<pre><script>

let m1 = "m1...";

</script>

<script>

console.log(m1);// m1...

</script></pre>
</div>
<div class="cnblogs_code">
<pre><script type="module">

let m1 = "m1...";

</script>

<script type="module">

console.log(m1);// Uncaught ReferenceError: m1 is not defined

</script></pre>
</div>
<h2 class="md-end-block md-heading">预解析</h2>
 　　模块在导入时只执行一次解析，之后的导入不会再执行模块代码，而使用第一次解析结果，并共享数据。
<blockquote>
 　　可以在首次导入时完成一些初始化工作
 　　如果模块内有后台请求，也只执行一次即可
</blockquote>
<div class="cnblogs_code">
<pre><script type="module" src="./js_m3.js"></script>
<script type="module" src="./js_m3.js"></script>
<script type="module" src="./js_m3.js"></script>




</pre>
</div>
<h1 class="md-end-block md-heading">导出模块</h1>
 　　<code>ES6</code>使用基于文件的模块，即一个文件一个模块。
 　　可以使用<code>export</code>来将模块中的接口进行导出，导出方式分为以下几种：
<blockquote>
 　　1.单个导出
 　　2.默认导出
 　　3.多个导出
 　　4.混合导出
 　　5.别名导出
</blockquote>
 　　另外，<code>ES6</code>的导出是是以引用方式导出，无论是标量还是对象，即模块内部变量发生变化将影响已经导入的变量。
<h2 class="md-end-block md-heading">单个导出</h2>
 　　下面将使用<code>export</code>来将模块中的接口进行单个单个的导出。
<div class="cnblogs_code">
<pre>export let module_name = "js_m3.js";

export function test(){
 console.log("测试功能");
}

export class User{
 constructor(username){
 this.username = username;
 }

 show(){
 console.log(this.username);
 }
}</pre>
</div>
<h2 class="md-end-block md-heading">默认导出</h2>
 　　一个模块中，只能默认导出一个接口。
 　　如果默认导出的是一个类，那么该类就可以不用起类名，此外函数同理。
<div class="cnblogs_code">
<pre>export let module_name = "js_m3.js";

export function test(){
 console.log("测试功能");
}

export default class{// 默认导出
 constructor(username){
 this.username = username;
 }

 show(){
 console.log(this.username);
 }
}</pre>
</div>
<h2 class="md-end-block md-heading">多个导出</h2>
 　　可以使用<code>exprot</code>与<code>{}</code>的形式进行接口的批量多个导出。
<div class="cnblogs_code">
<pre>let module_name = "js_m3.js";

function test() {
 console.log("测试功能");
}

class User {
 constructor(username) {
 this.username = username;
 }

 show() {
 console.log(this.username);
 }
}

export { module_name, test, User };</pre>
</div>
<h2 class="md-end-block md-heading">混合导出</h2>
 　　使用<code>export default</code> 导出默认接口，使用 <code>export {}</code> 批量导入普通接口
<div class="cnblogs_code">
<pre>let module_name = "js_m3.js";

function test() {
 console.log("测试功能");
}

export default class {
 constructor(username) {
 this.username = username;
 }

 show() {
 console.log(this.username);
 }
}

export { module_name, test };</pre>
</div>
 　　同时也可以使用<code>as</code>来为一个导出的接口取别名，如果该接口别名为<code>default</code>则将该接口当做默认导出。
<div class="cnblogs_code">
<pre>let module_name = "js_m3.js";

function test() {
 console.log("测试功能");
}

class User {
 constructor(username) {
 this.username = username;
 }

 show() {
 console.log(this.username);
 }
}

export { module_name, test, User as default };</pre>
</div>
<h2 class="md-end-block md-heading">别名导出</h2>
 　　使用<code>as</code>来为导出的<code>export {}</code>中的导出接口起一个别名，当导入时也应该使用导出接口的别名进行接收。
 　　当一个接口的别名为<code>default</code>时，该接口将当做默认导出。
<div class="cnblogs_code">
<pre>let module_name = "js_m3.js";

function test() {
 console.log("测试功能");
}

class User {
 constructor(username) {
 this.username = username;
 }

 show() {
 console.log(this.username);
 }
}

export { module_name as m_name, test as m_tst, User as default };</pre>
</div>
<h1 class="md-end-block md-heading">导入模块</h1>
 　　使用<code>import</code>与<code>from</code>进行静态的模块的导入，注意导入时必须将导入语句放在顶层。
 　　模块的导入分为以下几部分：
<blockquote>
 　　1.具名导入
 　　2.批量导入
 　　3.默认导入
 　　4.混合导入
 　　5.别名导入
 　　6.动态导入
</blockquote>
<h2 class="md-end-block md-heading">具名导入</h2>
 　　具名导入应该注意与导出的接口名一致。
 　　下面是模块导出的代码：
<div class="cnblogs_code">
<pre>let module_name = "js_m3.js";

function test() {
 console.log("测试功能");
}

class User {
 constructor(username) {
 this.username = username;
 }

 show() {
 console.log(this.username);
 }
}

export { module_name, test, User };</pre>
</div>
 　　使用具名导入：
<div class="cnblogs_code">
<pre><script type="module">

import { module_name, test, User} from "./js_m3.js";

console.log(module_name);// js_m3.js

test(); // 测试功能

let u1 = new User("云崖");

u1.show(); // 云崖

</script></pre>
</div>
<h2 class="md-end-block md-heading">批量导入</h2>
 　　如果导入的内容过多，可使用<code>*</code>进行批量导入，注意批量导入后应该使用<code>as</code>来取一个别名方便调用。
 　　下面是模块导出的代码：
<div class="cnblogs_code">
<pre>let module_name = "js_m3.js";

function test() {
 console.log("测试功能");
}

class User {
 constructor(username) {
 this.username = username;
 }

 show() {
 console.log(this.username);
 }
}

export { module_name, test, User };</pre>
</div>
 　　使用批量导入：
<div class="cnblogs_code">
<pre><script type="module">

import * as m3 from "./js_m3.js"; // 别名为m3，下面使用都要以m3开头

console.log(m3.module_name);// js_m3.js

m3.test(); // 测试功能

let u1 = new m3.User("云崖");

u1.show(); // 云崖

</script></pre>
</div>
<h2 class="md-end-block md-heading">默认导入</h2>
 　　使用默认导入时不需要用<code>{}</code>进行接收，并且可以使用任意名字来接收默认导出的接口。
 　　下面是模块导出的代码：
<div class="cnblogs_code">
<pre>let module_name = "js_m3.js";

function test() {
 console.log("测试功能");
}

class User {
 constructor(username) {
 this.username = username;
 }

 show() {
 console.log(this.username);
 }
}

export { module_name, test, User as default };</pre>
</div>
 　　使用默认导入，我们只导入默认导出的接口，可以随便取一个名字。
<div class="cnblogs_code">
<pre><script type="module">

import m3U from "./js_m3.js";

let u1 = new m3U("云崖");

u1.show(); // 云崖

</script></pre>
</div>
<h3 class="md-end-block md-heading">混合导入</h3>
 　　当一个模块中导出的又有默认导出的接口，又有其他的导出接口时，我们可以使用混合导入。
 　　使用<code>{}</code>来接收其他的导出接口，对于默认导出的接口而言只需要取一个名字即可。
 　　下面是模块导出的代码：
<div class="cnblogs_code">
<pre>let module_name = "js_m3.js";

function test() {
 console.log("测试功能");
}

class User {
 constructor(username) {
 this.username = username;
 }

 show() {
 console.log(this.username);
 }
}

export { module_name, test, User as default };</pre>
</div>
 　　使用混合导入：
<div class="cnblogs_code">
<pre><script type="module">

import m3U, { module_name, test } from "./js_m3.js";

console.log(module_name);// js_m3.js

test();// 测试功能

let u1 = new m3U("云崖");

u1.show(); // 云崖

</script></pre>
</div>
<h3 class="md-end-block md-heading">别名导入</h3>
 　　为了防止多个模块下接口名相同，我们可以使用<code>as</code>别名导入，再使用时也应该按照别名进行使用。
 　　下面是<code>m1</code>模块导出的代码：
<div class="cnblogs_code">
<pre>let module_name = "js_m1";

let show = function () {
 console.log("js_m1.show");
}

export { module_name, show };</pre>
</div>
 　　下面是<code>m2</code>模块导出的代码：
<div class="cnblogs_code">
<pre>let module_name = "js_m2";

let show = function () {
 console.log("js_m2.show");
}

export { module_name, show };</pre>
</div>
 　　下面是使用别名导入这两个模块的接口并进行使用：
<div class="cnblogs_code">
<pre><script type="module">

import { module_name as m1_name, show as m1_show } from "./js_m1.js";
import { module_name as m2_name, show as m2_show } from "./js_m2.js";

console.log(m1_name);// js_m1
console.log(m2_name);// js_m2

m1_show();// js_m1.show
m2_show();// js_m2.show

</script></pre>
</div>
<h3 class="md-end-block md-heading">动态导入</h3>
 　　使用<code>import</code>与<code>from</code>的导入方式属于静态导入，必须将导入语句放在最顶层，如果不是则抛出异常。
 　　这是模块中的导出接口：
<div class="cnblogs_code">
<pre>export function test() {
 console.log("测试功能");
}</pre>
</div>
 　　如果我们想在某种特定条件下才导入并调用改接口，使用<code>import</code>与<code>from</code>的方式会抛出异常。
<div class="cnblogs_code">
<pre><script type="module">

if (true) {

 import { test } from "./js_m3.js"; // Error

 test();// 想在特定条件下执行模块中的测试功能
 }

</script></pre>
</div>
 　　这个时候就需要用到动态导入，使用 <code>import()</code> 函数可以动态导入，实现按需加载，它返回一个 <code>promise</code> 对象。
<div class="cnblogs_code">
<pre><script type="module">

if (true) {

 let m3 = import("./js_m3.js");

 m3.then((module)=> module.test()); // 测试功能

}

</script></pre>
</div>
 　　我们可以使用解构语法来将模块中的接口一个一个全部拿出来。
<div class="cnblogs_code">
<pre><script type="module">

if (true) {

 let m3 = import("./js_m3.js");

 m3.then(({ test, }) => test()); // 拿出test接口

}

</script></pre>
</div>
<h1 class="md-end-block md-heading">合并使用</h1>
 　　如果有多个模块都需要被使用，我们可以先定义一个<code>Js</code>文件将这些需要用到的模块中的接口做一个合并，然后再将该文件导出即可。
 　　合并导出请将<code>export</code>与<code>from</code>结合使用。
<div class="cnblogs_code">
<pre>// js_m1

export default class{// 默认导出
 static register(){
 console.log("注册功能");
 }
}</pre>
</div>
<div class="cnblogs_code">
<pre>// js_m2

export class Login{
 static login(){
 console.log("登录功能");
 }
}

export function test(){
 console.log("js_m2测试功能");
}</pre>
</div>
<div class="cnblogs_code">
<pre>// index.js

// 合并导出

import js_m1 from "./js_m1.js";

// js_m1中有接口是默认导出，因此我们需要不同的导出方式 , 注意这里就导出了一个接口，即js_m1的注册类
export {default as js_m1_register} from "./js_m1.js";

// 导出js_m2中的接口，共导出两个接口。登录类和测试函数。
export * as js_m2 from "./js_m2.js";</pre>
</div>
 　　导入与使用：
<div class="cnblogs_code">
<pre><script type="module">

import * as index from "./index.js";

index.js_m1_register.register();// 注册功能

index.js_m2.Login.login();// 登录功能

index.js_m2.test();//js_m2测试功能

</script></pre>
</div>
<h1 class="md-end-block md-heading">指令总结</h1>
<table class="md-table">
<thead>
<tr class="md-end-block"><th>表达式</th><th>说明</th></tr>
</thead>
<tbody>
<tr class="md-end-block">
<td>export function show(){}</td>
<td>导出函数</td>
</tr>
<tr class="md-end-block">
<td>export const name="Yunya"</td>
<td>导出变量</td>
</tr>
<tr class="md-end-block">
<td>export class User{}</td>
<td>导出类</td>
</tr>
<tr class="md-end-block">
<td>export default show</td>
<td>默认导出</td>
</tr>
<tr class="md-end-block">
<td>
const name = "Yunya" 
export {name}
</td>
<td>导出已经存在变量</td>
</tr>
<tr class="md-end-block">
<td>export {name as m1_name}</td>
<td>别名导出</td>
</tr>
<tr class="md-end-block">
<td>import m1_default from './m1_js.js'</td>
<td>导入默认导出</td>
</tr>
<tr class="md-end-block">
<td>import {name,show} from '/m1_js.js'</td>
<td>导入命名导出</td>
</tr>
<tr class="md-end-block">
<td>Import {name as m1_name,show} from 'm1_js.js'</td>
<td>别名导入</td>
</tr>
<tr class="md-end-block">
<td>Import * as m1 from '/m1_js.js'</td>
<td>导入全部接口</td>
</tr>
</tbody>
</table>
<h1 class="md-end-block md-heading">编译打包</h1>
 　　由于<code>module</code>语法是<code>Es6</code>推出的，所以对老旧的浏览器兼容不太友好，这个时候就需要用到打包工具进行打包处理使其能让老旧的浏览器上进行兼容。
 　　首先登录 <code>https://nodejs.org/en/</code> 官网下载安装<code>Node.js</code>，我们将使用其他的<code>npm</code>命令，<code>npm</code>用来安装第三方类库。
 　　在命令行输入 <code>node -v</code> 显示版本信息表示安装成功。
<h3 class="md-end-block md-heading">安装配置</h3>
 　　<code>cd</code>到你的项目路径，并使用以下命令生成配置文件 <code>package.json</code>
<div class="cnblogs_code">
<pre>npm init -y</pre>
</div>
 　　修改<code>package.json</code>添加打包命令
<div class="cnblogs_code">
<pre>...
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch"// 添加这一句
},
...</pre>
</div>
 　　安装<code>webpack</code>工具包，如果安装慢可以使用淘宝 cnpm 命令
<div class="cnblogs_code">
<pre>npm i webpack webpack-cli --save-dev</pre>
</div>
<h3 class="md-end-block md-heading">目录结构</h3>
<blockquote>
index.html
--dist #压缩打包后的文件
--src
----index.js #合并入口
----style.js //模块
</blockquote>
 　　index.html内容如下
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html></pre>
</div>
 　　index.js内容如下
<div class="cnblogs_code">
<pre>import style from "./style";
new style().init();</pre>
</div>
 　　style.js
<div class="cnblogs_code">
<pre>export default class User {
constructor() {}
init() {
document.body.style.backgroundColor = "green";
}
}</pre>
</div>
<h3 class="md-end-block md-heading">执行打包</h3>
 　　运行以下命令将生成打包文件到 <code>dist</code>目录，因为在命令中添加了 <code>--watch</code>参数，所以源文件编辑后自动生成打包文件。
<div class="cnblogs_code">
<pre>npm run dev</pre>
</div> 
来源：https://www.cnblogs.com/Yunya-Cnblogs/p/13453519.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript 模块封装