comment utiliser javascript

Implémenter une programmation modulaire dans

 ?

À mesure que la complexité des applications JavaScript continue de croître, la programmation modulaire devient une partie essentielle du travail quotidien des développeurs. La programmation modulaire Javascript contribue à rendre le codage plus clair, plus facile à maintenir, réutilisable et réduit la pollution de l'espace de noms, elle devient donc de plus en plus populaire parmi les développeurs. Cet article présentera comment implémenter la programmation modulaire en JavaScript.

Le concept de modularité

En JavaScript, la modularisation fait référence à la division du code en modules distincts faciles à maintenir, tester et réutiliser. Chaque module possède son propre espace de noms, et les variables et fonctions d'un même module n'interféreront pas les unes avec les autres. L'avantage de diviser les modules est que vous pouvez effectivement éviter d'utiliser des variables globales, ce qui peut réduire les conflits entre les noms de variables et de fonctions, rendant le code plus modulaire et plus lisible.

Spécification de modularité ES6

Avant ES6, JavaScript n'avait pas de spécification de modularité standard. Dans ES6, une solution native est fournie qui prend en charge la division du code en modules distincts. La spécification de modularité ES6 fournit les deux mots-clés les plus importants : export et 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 : exposez des objets, fonctions ou variables spécifiques à d'autres modules.
• import : introduisez des objets, fonctions ou variables spécifiques exposés par d'autres modules.

Exemple de syntaxe :

export function sum(a, b){

rrreee

}🎜🎜import { sum } from './math.js';
console.log(sum (1, 2)); // sortie : 3🎜🎜Dans l'extrait de code ci-dessus, nous exposons la fonction sum via la fonction export. Dans un autre module, utilisez l'instruction import pour importer la fonction sum et utilisez-la pour calculer la somme de deux nombres. 🎜🎜Implémentation d'un module simple🎜🎜Supposons que nous créions un site Web de commerce électronique en ligne et que nous devions implémenter un module de panier d'achat. Le panier contiendra un ou plusieurs articles ainsi que leur quantité et leur prix total. 🎜🎜Créez un simple fichier cart.js pour implémenter ce module. Modifiez le code de cart.js comme suit : 🎜🎜const cart = [];🎜🎜// Fonction pour ajouter des articles au panier
fonction d'export addItem(item,Quantity) {🎜 rrreee🎜 }🎜🎜// Fonction pour annuler les articles dans le panier
fonction d'exportation RemoveItem(item) {🎜rrreee🎜}🎜🎜// Obtenez le prix total de tous les articles dans le panier
fonction d'exportation getTotal () {🎜rrreee 🎜}🎜🎜Dans le code ci-dessus, nous définissons d'abord un panier de tableau vide, qui contiendra tous les articles achetés. Les trois fonctions suivantes sont définies. La fonction addItme est utilisée pour ajouter de nouveaux articles et quantités au panier, la fonction RemoveItem est utilisée pour supprimer des articles du panier et la fonction getTotal est utilisée pour renvoyer la valeur totale des articles contenus dans le panier en boucle. via le tableau du panier. 🎜🎜Importer le module panier🎜🎜Maintenant, nous avons besoin d'un autre module pour utiliser le module panier. Créons un fichier main.js et ajoutons-y le code suivant : 🎜🎜import { addItem, getTotal } from './cart.js';🎜🎜const shirt = {🎜rrreee🎜} ; 🎜🎜const pants = {🎜rrreee🎜};🎜🎜addItem(shirt, 3);
addItem(pants, 2);🎜🎜console.log(getTotal());🎜🎜Ici, nous utilisons le addItem fournie par le module de panier ajoute deux articles, puis utilise la fonction getTotal du module de panier pour calculer la valeur totale de tous les articles du panier. Dans un autre exemple, nous introduisons un calculateur de prix total pour un module différent. 🎜🎜Conclusion🎜🎜En JavaScript, la programmation modulaire peut être réalisée en utilisant la spécification modulaire native ES6. L'utilisation de la programmation modulaire évite la pollution de l'espace de noms et rend le code plus clair et plus facile à maintenir. Lors de l'identification des modules lors de l'écriture, nous devons faire attention au degré de découplage que nous devons avoir entre les unités. Afin de rendre le système aussi modulaire que possible, nous devons suivre les règles générales de cohésion élevée et de faible couplage, qui sont au cœur d’une bonne conception. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!