how to use javascript

Implement modular programming in

?

As JavaScript applications continue to increase in complexity, modular programming becomes an essential part of developers' daily work. Javascript modular programming helps make coding clearer, easier to maintain, reusable and reduces namespace pollution, so it is becoming more and more popular among developers. This article will introduce how to implement modular programming in JavaScript.

The concept of modularity

In JavaScript, modularization refers to dividing code into separate modules that are easy to maintain, test, and reuse. Each module has its own namespace, and variables and functions within the same module will not interfere with each other. The advantage of dividing modules is that you can effectively avoid using global variables, which can reduce conflicts between variable and function names, making the code more modular and readable.

ES6 Modularity Specification

Before ES6, JavaScript did not have a standard modularity specification. In ES6, a native solution is provided that supports dividing code into separate modules. The ES6 modularity specification provides the two most important keywords:exportandimport.

• export: Expose specific objects, functions or variables to other modules.
• import: Introduce specific objects, functions or variables exposed by other modules.

Syntax example:

export function sum(a, b){

return a + b;

}

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

In the above code snippet, we use theexportfunction toThe sumfunction is exposed. In another module, use theimportstatement to import thesumfunction and use it to calculate the sum of two numbers.

Implementing a simple module

Suppose we make an online e-commerce website, and we need to implement a shopping cart module. The shopping cart will contain one or more items along with their quantity and total price.

Create a simplecart.jsfile to implement this module. Modify the code ofcart.jsas follows:

const cart = [];

// Function to add items to the shopping 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 });

}

// Function to cancel items in the shopping cart
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; } }

}

// Get the total price of all items in the shopping cart
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;

}

In the above code, we first define an empty array cart, which The array will contain all purchases. Next three functions are defined. The addItme function is used to add new items and quantities to the shopping cart, the removeItem function is used to remove items from the shopping cart, and the getTotal function is used to return the total value of the items contained in the shopping cart by looping through the shopping cart array.

Import Shopping Cart Module

Now, we need another module to use the shopping cart module. Let's create amain.jsfile and add the following code in it:

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());

Here, we added two items using theaddItemfunction provided by the shopping cart module, Then use thegetTotalfunction of the shopping cart module to calculate the total value of all items in the shopping cart. In another example, we introduce a total price calculator for a different module.

Conclusion

In JavaScript, modular programming can be achieved by using the native ES6 modular specification. Using modular programming avoids namespace pollution and makes code clearer and easier to maintain. When identifying modules while writing, we must be careful about the degree of decoupling we must have between units. In order to make the system as modular as possible, we need to follow the general rules of high cohesion and low coupling, which are the core of good design.

The above is the detailed content of how to use javascript. For more information, please follow other related articles on the PHP Chinese website!