果你正在構(gòu)建網(wǎng)站或Web應(yīng)用程序，你應(yīng)該已經(jīng)知道代碼重復(fù)被認(rèn)為是一種不良實(shí)踐。

這就是為什么你應(yīng)該學(xué)習(xí)如何使用CSS變量來(lái)減少你編寫的CSS代碼量并將你的樣式帶到一個(gè)新的水平。

最成功的Web應(yīng)用程序擁有令人驚嘆的設(shè)計(jì)。不幸的是，為了達(dá)到預(yù)期的效果，Web開發(fā)人員需要準(zhǔn)備大量的樣式。這迫使我們?cè)谠S多不同的元素中重復(fù)值，比如顏色。

幸運(yùn)的是，現(xiàn)代樣式表支持CSS變量，這使您可以減少代碼庫(kù)中的重復(fù)。你不需要像CSS模塊、Less或SASS這樣的外部工具來(lái)利用它。

在這個(gè)全面的指南中，我將向您展示如何有效地使用CSS變量，涵蓋從純HTML和CSS的基本示例到更高級(jí)的框架，如React和Next.js。

（本文內(nèi)容參考：java567.com）

言

JavaScript 模塊是現(xiàn)代前端開發(fā)中的重要組成部分。它們?cè)试S開發(fā)者將代碼組織成獨(dú)立、可重用的單元，從而提高了代碼的可維護(hù)性、可擴(kuò)展性和可讀性。本文將深入探討 JavaScript 模塊的概念、語(yǔ)法和最佳實(shí)踐，幫助你充分利用模塊化開發(fā)的優(yōu)勢(shì)。

模塊的基本概念

JavaScript 模塊是指將代碼封裝在單獨(dú)的文件中，并按需導(dǎo)出和導(dǎo)入其中的功能。它們可以包含變量、函數(shù)、類和其他任何 JavaScript 實(shí)體。模塊有自己的作用域，而不是和腳本一樣在全局作用域內(nèi)執(zhí)行代碼。一組相互導(dǎo)入、導(dǎo)出的模塊組成的圖形通常被稱為模塊樹。

模塊的語(yǔ)法

在過(guò)去，JavaScript 沒(méi)有原生的模塊系統(tǒng)，但隨著 ECMAScript 6（ES6）的出現(xiàn)，現(xiàn)在我們可以使用 import 和 export 關(guān)鍵字來(lái)定義和使用模塊。

• 導(dǎo)出介紹

一個(gè)模塊可包含多個(gè) 命名導(dǎo)出 以及 單個(gè)默認(rèn)導(dǎo)出。可使用導(dǎo)出聲明指定從模塊中導(dǎo)出的內(nèi)容，聲明以關(guān)鍵字 export 開頭，示例如下：

export function fun() {
  // ...
}

export const name='aa';

• 導(dǎo)入介紹

可以使用 導(dǎo)入聲明 (也被稱為靜態(tài)導(dǎo)入) 或 動(dòng)態(tài)導(dǎo)入 來(lái)加載模塊并從其中導(dǎo)入內(nèi)容。導(dǎo)入聲明使用關(guān)鍵字 import，接著是要導(dǎo)入的內(nèi)容，然后是關(guān)鍵字 from，之后是指定從哪一個(gè)模塊導(dǎo)入的模塊說(shuō)明符的字符串字面量。示例如下：

import { fun } from './mod.js';
import { fun1 } from './mod.js';

或

import { greet, pi } from './myModule.js';

• 默認(rèn)導(dǎo)出

一個(gè)模塊只能有一個(gè)默認(rèn)導(dǎo)出或者沒(méi)有，多個(gè)默認(rèn)導(dǎo)出，代碼會(huì)報(bào)錯(cuò)。注意單詞 default。

export default functio test() {
 // ...
}

或

function test() {}

export default test;

默認(rèn)導(dǎo)出對(duì)應(yīng)的導(dǎo)入方式如下，注意這里沒(méi)有大括號(hào)。

import test from './mod.js';

• 只是簡(jiǎn)單導(dǎo)入

也可以不列出任何導(dǎo)入的內(nèi)容，從而只使用導(dǎo)入模塊的副作用。只是加載對(duì)應(yīng)的模塊以及它依賴的模塊，并且執(zhí)行它的代碼，但是不導(dǎo)入任何內(nèi)容。

import './modk.js';

注意：

• 只用模塊中的代碼才可使用聲明式的 export 和 import ，非模塊代碼不能使用。
• import 和 export的聲明只能出現(xiàn)在模塊頂層作用域，而不能出現(xiàn)在任何控制流程的結(jié)構(gòu)中。例如循環(huán)和if語(yǔ)句。
• 模塊只能導(dǎo)出它聲明的內(nèi)容或重新導(dǎo)出它導(dǎo)入的內(nèi)容。

模塊導(dǎo)出方式

• 直接把關(guān)鍵字 export 放在聲明或定義的前面

export const age=32;
export let name='javascript';
export var username='jack';
export function test() {}
export class Example {}

• 導(dǎo)出的位置不必和創(chuàng)建的位置相同，可以獨(dú)立使用導(dǎo)出單個(gè)聲明，也可獨(dú)立使用多個(gè)聲明。

const age=32;
let name='javascript';
var username='jack';
function test() {}
class Example {}

// 獨(dú)立使用單個(gè)聲明
export { age, name, username, test, Example };

// 獨(dú)立使用多個(gè)聲明

export { age, name };
export { username };
export { test, Example };

• 導(dǎo)出聲明可在代碼結(jié)尾、開頭或中間的任何位置：下面展示將單個(gè)聲明放在代碼開頭位置

export { age, name, username, test, Example };

const age=32;
let name='javascript';
var username='jack';
function test() {}
class Example {}

• 模塊中不同導(dǎo)出風(fēng)格可以混用

export const age=32;
let name='javascript';
var username='jack';

export function test() {}
class Example {}
export { name, username, Example };

注意導(dǎo)出的唯一限制是 導(dǎo)出的名稱必須是唯一的,不能重復(fù)。

模塊說(shuō)明符

以示例解釋：

import { test } from './ab.js';

模塊說(shuō)明符指的是單詞 from 后面的 './ab.js' 部分。在導(dǎo)入聲明中，模塊說(shuō)明符必須是一個(gè) 字符串字面量，不能只是返回字符串的表達(dá)式，因?yàn)槁暶魇庆o態(tài)的，在執(zhí)行代碼前必須解析他們。單引號(hào)或雙引號(hào)都可以使用。

瀏覽器中使用

模塊說(shuō)明符要么是 絕對(duì)URL，要么是以 /(斜線)， ./(點(diǎn)斜線)， ../(點(diǎn)點(diǎn)斜線) 開頭的 相對(duì)URL。模塊有最終解析的 URL 確定。

以下有效說(shuō)明符介紹：

import /*...*/ from "http://test.com/a.js"; // 絕對(duì)路徑
import /*...*/ from "/a.js";  // 以 / 開始
import /*...*/ from "./bbb.js";  // 以 ./ 開始
import /*...*/ from "../ccc.js";  // 以 ../ 開始
import /*...*/ from "./test/a.js";  // 以 ./ 開始

以下在目前瀏覽器中， 是無(wú)效的：

import /*...*/ from "a";
import /*...*/ from "a.js";

重命名導(dǎo)出

從模塊導(dǎo)出的標(biāo)識(shí)符不必與模塊代碼中的標(biāo)識(shí)符相同，可以使用導(dǎo)出聲明中的 as 子句重命名導(dǎo)出：

let name='java';
export { name as username };

在另一個(gè)模塊使用名稱 username 將其導(dǎo)入：

import { username } from './a.js';

name 只是僅用戶模塊內(nèi)部，而不是模塊外部。只能在獨(dú)立導(dǎo)出時(shí)使用重命名，而不能在內(nèi)聯(lián)導(dǎo)出時(shí)使用重命名。

export let name as username='java';  // 這樣重命名是錯(cuò)誤的

如果想創(chuàng)建別名，可以使用一個(gè)內(nèi)聯(lián)命名導(dǎo)出，然后使用重命名導(dǎo)出：

export let name="java";

export { name as usernam };

// 這樣為同一個(gè)函數(shù)創(chuàng)建了兩個(gè)導(dǎo)出： name 和 username

重新導(dǎo)出另一個(gè)模塊的導(dǎo)出

模塊可以重新導(dǎo)出另一個(gè)模塊的導(dǎo)出：

export { name } from './b.js';

使用 星號(hào)(*) 來(lái)導(dǎo)出其他模塊的所有 命名導(dǎo)出 ，不能導(dǎo)出 默認(rèn)導(dǎo)出 。

export * from "./a.js";

重新導(dǎo)出時(shí)可以使用 as 字句更改導(dǎo)出的名稱：

export { name as username } from './ab.js';

重命名導(dǎo)入

如果兩個(gè)模塊都導(dǎo)出了函數(shù)test, 并且想在模塊中使用這兩個(gè)函數(shù)，或者模塊使用的名稱與代碼某些內(nèi)容沖突，這時(shí)可以使用 as 子句進(jìn)行重命名導(dǎo)入。

import { test as testOne } from './a.js';
import { test as testTwo } from './b.js';

// 調(diào)用它們
testOne();
testTwo();

模塊的好處

1. 組織性： 模塊化使得代碼結(jié)構(gòu)更加清晰，易于維護(hù)和擴(kuò)展。每個(gè)模塊都專注于特定功能，降低了代碼的復(fù)雜度。
2. 封裝性： 模塊允許將功能封裝在單獨(dú)的文件中，并通過(guò)導(dǎo)出和導(dǎo)入控制模塊的可訪問(wèn)性，從而提高了代碼的安全性和可靠性。
3. 重用性： 模塊化使得代碼可以被輕松地重用。一個(gè)模塊定義的功能可以在多個(gè)地方導(dǎo)入和使用，避免了重復(fù)編寫相似的代碼。
4. 依賴管理： 使用模塊可以更好地管理代碼之間的依賴關(guān)系。每個(gè)模塊只需關(guān)注自己的依賴，而不必?fù)?dān)心全局作用域的污染。

最佳實(shí)踐

1. 單一職責(zé)原則： 每個(gè)模塊應(yīng)該只負(fù)責(zé)一項(xiàng)功能或功能集合，保持代碼的簡(jiǎn)潔和可維護(hù)性。
2. 明確導(dǎo)入和導(dǎo)出： 在模塊的頂部明確導(dǎo)出模塊提供的功能，并在導(dǎo)入時(shí)明確指定需要的功能，避免導(dǎo)入整個(gè)模塊。
3. 模塊命名規(guī)范： 使用有意義的文件名和模塊名，遵循命名約定，使代碼更易讀、易懂。
4. 避免循環(huán)依賴： 盡量避免模塊之間的循環(huán)依賴，這會(huì)導(dǎo)致代碼不穩(wěn)定和難以維護(hù)。

結(jié)語(yǔ)

JavaScript 模塊為開發(fā)者提供了一種強(qiáng)大的工具，用于組織、封裝和重用代碼。通過(guò)合理地利用模塊化開發(fā)的技術(shù)和最佳實(shí)踐，我們可以構(gòu)建出更加靈活、可靠和可維護(hù)的應(yīng)用程序。開始使用模塊化開發(fā)，解鎖 JavaScript 開發(fā)的新境界！