wie man Javascript verwendet

Modulare Programmierung in

implementieren?

Da die Komplexität von JavaScript-Anwendungen immer weiter zunimmt, wird die modulare Programmierung zu einem wesentlichen Bestandteil der täglichen Arbeit von Entwicklern. Die modulare Javascript-Programmierung trägt dazu bei, die Codierung klarer, einfacher zu warten und wiederverwendbar zu machen und die Namensraumverschmutzung zu reduzieren, sodass sie bei Entwicklern immer beliebter wird. In diesem Artikel wird erläutert, wie Sie modulare Programmierung in JavaScript implementieren.

Das Konzept der Modularität

In JavaScript bezieht sich Modularisierung auf die Aufteilung von Code in separate Module, die einfach zu warten, zu testen und wiederzuverwenden sind. Jedes Modul verfügt über einen eigenen Namensraum und Variablen und Funktionen innerhalb desselben Moduls stören sich nicht gegenseitig. Der Vorteil der Aufteilung von Modulen besteht darin, dass Sie die Verwendung globaler Variablen effektiv vermeiden können, wodurch Konflikte zwischen Variablen- und Funktionsnamen reduziert werden können und der Code modularer und lesbarer wird.

ES6-Modularitätsspezifikation

Vor ES6 hatte JavaScript keine Standardmodularitätsspezifikation. In ES6 wird eine native Lösung bereitgestellt, die die Aufteilung von Code in separate Module unterstützt. Die ES6-Modularitätsspezifikation stellt die beiden wichtigsten Schlüsselwörter bereit: export und import. export和import。

• export：将具体的对象、函数或变量公开给其他模块。
• import：引入其他模块公开的具体的对象、函数或变量。

语法示例：

export function sum(a, b){

return a + b;

}

import { sum } from './math.js';
console.log(sum(1, 2)); // output: 3

在以上代码片段中，我们通过export函数将sum函数暴露出来。在另一个模块中，利用import语句导入sum函数，并使用它来计算两个数字的和。

实现一个简单的模块

假设我们制作了一个在线电商网站，我们需要实现一个购物车模块。购物车将包含一个或多个商品以及它们的数量和总价。

创建一个简单的cart.js文件来实现这个模块。修改cart.js的代码如下：

const cart = [];

// 向购物车中添加商品的函数
export function addItem(item, quantity) {

for (let i = 0; i < cart.length; i++) {
    let current = cart[i];
    if (current.item === item) {
        current.quantity += quantity;
        return;
    }
}
cart.push({ item: item, quantity: quantity });

}

// 取消购物车中商品的函数
export function removeItem(item) {

for (let i = 0; i < cart.length; i++) {
    let current = cart[i];
    if (current.item === item) {
        cart.splice(i, 1);
        break;
    }
}

}

// 获取购物车中所有商品的总价
export function getTotal() {

let total = 0;
for (let i = 0; i < cart.length; i++) {
    let current = cart[i];
    total += current.item.price * current.quantity;
}
return total;

}

在上述代码中，我们首先定义了一个空数组cart，该数组将包含所有的购买项。接下来定义了三个函数。addItme函数用于向购物车中添加新的物品和数量，removeItem函数用于将购物车中的物品移除，getTotal函数用于通过循环购物车数组返回购物车所包含物品的总价值。

导入购物车模块

现在，我们需要另一个模块要使用购物车模块。让我们创建一个main.js文件，并在其中添加以下代码：

import { addItem, getTotal } from './cart.js';

const shirt = {

name: 'T-Shirt',
price: 10.99,

};

const pants = {

name: 'Jeans',
price: 24.99,

};

addItem(shirt, 3);
addItem(pants, 2);

console.log(getTotal());

在这里，我们使用由购物车模块提供的addItem函数添加了两个商品，然后使用购物车模块的getTotal

• export: Stellen Sie bestimmte Objekte, Funktionen oder Variablen anderen Modulen zur Verfügung.
• import: Führen Sie bestimmte Objekte, Funktionen oder Variablen ein, die von anderen Modulen bereitgestellt werden.

Grammatikbeispiel:

Funktion sum(a, b) exportieren{

rrreee

}#🎜🎜##🎜🎜# import { sum } from './math.js';
console.log(sum(1, 2)); // Ausgabe: 3#🎜🎜##🎜🎜#Im obigen Codeausschnitt übergeben wir export macht die Funktion sum verfügbar. In einem anderen Modul verwenden Sie die Anweisung import, um die Funktion sum zu importieren und damit die Summe zweier Zahlen zu berechnen. #🎜🎜##🎜🎜#Ein einfaches Modul implementieren #🎜🎜##🎜🎜# Angenommen, wir erstellen eine Online-E-Commerce-Website und müssen ein Warenkorbmodul implementieren. Der Warenkorb enthält einen oder mehrere Artikel mit deren Menge und Gesamtpreis. #🎜🎜##🎜🎜#Erstellen Sie eine einfache cart.js-Datei, um dieses Modul zu implementieren. Ändern Sie den Code von cart.js wie folgt: #🎜🎜##🎜🎜#const cart = [];#🎜🎜##🎜🎜#// Funktion zum Hinzufügen von Artikeln zum Warenkorb Exportfunktion addItem(item, amount) {#🎜🎜#rrreee#🎜🎜#}#🎜🎜##🎜🎜#// Funktion zum Stornieren von Artikeln im Warenkorb
Exportfunktion removeItem(item) {# 🎜🎜# rrreee#🎜🎜#}#🎜🎜##🎜🎜#// Gesamtpreis aller Artikel im Warenkorb abrufen
Exportfunktion getTotal() {#🎜🎜#rrreee#🎜🎜#}# 🎜🎜##🎜 🎜#Im obigen Code definieren wir zunächst einen leeren Array-Warenkorb, der alle Kaufartikel enthält. Als nächstes werden drei Funktionen definiert. Mit der Funktion „addItme“ werden neue Artikel und Mengen zum Warenkorb hinzugefügt, mit der Funktion „removeItem“ Artikel aus dem Warenkorb entfernt und mit der Funktion „getTotal“ durch Schleifen der Gesamtwert der im Warenkorb enthaltenen Artikel zurückgegeben werden durch das Warenkorb-Array. #🎜🎜##🎜🎜#Warenkorbmodul importieren #🎜🎜##🎜🎜#Jetzt benötigen wir ein weiteres Modul, um das Warenkorbmodul zu verwenden. Lassen Sie uns eine main.js-Datei erstellen und den folgenden Code hinzufügen: #🎜🎜##🎜🎜#import { addItem, getTotal } from './cart.js';#🎜🎜# # 🎜🎜#const shirt = {#🎜🎜#rrreee#🎜🎜#};#🎜🎜##🎜🎜#const pants = {#🎜🎜#rrreee#🎜🎜#};#🎜🎜##🎜🎜# addItem (shirt, 3);
addItem(pants, 2);#🎜🎜##🎜🎜#console.log(getTotal());#🎜🎜##🎜🎜#Hier verwenden wir den Warenkorb Der addItem fügt zwei Artikel hinzu und verwendet dann die Funktion getTotal des Warenkorbmoduls, um den Gesamtwert aller Artikel im Warenkorb zu berechnen. In einem anderen Beispiel stellen wir einen Gesamtpreisrechner für ein anderes Modul vor. #🎜🎜##🎜🎜#Fazit#🎜🎜##🎜🎜#In JavaScript kann modulare Programmierung durch Verwendung der nativen modularen ES6-Spezifikation erreicht werden. Die Verwendung modularer Programmierung vermeidet die Verschmutzung von Namespaces und macht den Code klarer und einfacher zu warten. Wenn wir Module beim Schreiben identifizieren, müssen wir auf den Grad der Entkopplung achten, die zwischen den Einheiten bestehen muss. Um das System so modular wie möglich zu gestalten, müssen wir die allgemeinen Regeln hoher Kohäsion und geringer Kopplung befolgen, die den Kern eines guten Designs bilden. #🎜🎜#

Das obige ist der detaillierte Inhalt vonwie man Javascript verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!