JavaScriptの使い方

モジュール式プログラミングを

に実装しますか?

JavaScript アプリケーションの複雑さが増すにつれて、モジュール式プログラミングは開発者の日常業務に不可欠な部分になっています。 Javascript モジュール式プログラミングは、コーディングをより明確にし、保守しやすく、再利用可能にし、名前空間の汚染を軽減するのに役立つため、開発者の間でますます人気が高まっています。この記事では、JavaScript でモジュール型プログラミングを実装する方法を紹介します。

モジュール性の概念

JavaScript では、モジュール化とは、保守、テスト、再利用が容易な個別のモジュールにコードを分割することを指します。各モジュールには独自の名前空間があり、同じモジュール内の変数や関数は相互に干渉しません。モジュールを分割する利点は、グローバル変数の使用を効果的に回避できることです。これにより、変数名と関数名の競合が軽減され、コードがよりモジュール化されて読みやすくなります。

ES6 モジュール仕様

ES6 より前には、JavaScript には標準モジュール仕様がありませんでした。 ES6 では、コードを個別のモジュールに分割することをサポートするネイティブ ソリューションが提供されます。 ES6 のモジュール仕様では、export と import という 2 つの最も重要なキーワードが提供されます。

• export: 特定のオブジェクト、関数、または変数を他のモジュールに公開します。
• import: 他のモジュールによって公開される特定のオブジェクト、関数、または変数を導入します。

構文例:

export function sum(a, b){

return a + b;

}

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

上記のコード スニペットでは、export 関数を使用して sum 関数が公開されています。別のモジュールで、import ステートメントを使用して sum 関数をインポートし、それを使用して 2 つの数値の合計を計算します。

単純なモジュールの実装

オンラインの電子商取引 Web サイトを作成し、ショッピング カート モジュールを実装する必要があるとします。ショッピング カートには 1 つ以上の商品とその数量および合計価格が含まれます。

このモジュールを実装するための単純な cart.js ファイルを作成します。 cart.js のコードを次のように変更します。

const car = [];

// ショッピング カートに商品を追加する関数
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 functionremoveItem(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;

}

上記のコードでは、最初に空の配列カート。配列にはすべての購入品が含まれます。次に 3 つの関数を定義します。 addItme 関数はショッピング カートに新しいアイテムと数量を追加するために使用され、removeItem 関数はショッピング カートからアイテムを削除するために使用され、getTotal 関数はループによってショッピング カートに含まれるアイテムの合計値を返すために使用されます。ショッピング カート配列を通じて。

ショッピング カート モジュールのインポート

次に、ショッピング カート モジュールを使用するための別のモジュールが必要です。 main.js ファイルを作成し、次のコードを追加しましょう:

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

const Shirt = {

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

};

const パンツ = {

name: 'Jeans',
price: 24.99,

};

addItem(シャツ, 3);
addItem(パンツ , 2);

console.log(getTotal());

ここでは、ショッピング カート モジュールが提供する addItem 関数を使用して 2 つのアイテムを追加しました。ショッピング カート モジュールの getTotal 関数を使用して、ショッピング カート内のすべてのアイテムの合計金額を計算します。別の例では、別のモジュールの合計価格計算ツールを紹介します。

結論

JavaScript では、ネイティブ ES6 モジュール仕様を使用してモジュール プログラミングを実現できます。モジュール式プログラミングを使用すると、名前空間の汚染が回避され、コードがより明確になり、保守が容易になります。作成中にモジュールを識別するときは、ユニット間で必要な分離の程度に注意する必要があります。システムを可能な限りモジュール化するには、優れた設計の中核である、高い凝集性と低い結合性という一般的なルールに従う必要があります。

以上がJavaScriptの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。