Analyse de la modularité JS

Cet article présente principalement l'analyse de la modularisation JS, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

1. Comprendre

1. Que sont les modules et la modularisation ?

Emballer un programme complexe en plusieurs fichiers selon certaines spécifications et les combiner entre eux

2. Pourquoi modulariser ?

Réduisez la complexité, améliorez le découplage et facilitez le déploiement

3.Avantages de la modularité

• Évitez les conflits de noms. (réduire la pollution de l'espace de noms)

• Meilleure séparation, chargement à la demande

• Réutilisabilité plus élevée

• Haute maintenabilité

4. Script de chargement d'introduction de page

2. Modulaire spécification

1. CommonJS (le nœud est écrit selon cette spécification)

Remarque :

Chaque fichier peut être en tant que module

Côté serveur : le module est chargé de manière synchrone lors de l'exécution

Côté navigateur : le module doit être compilé et empaqueté au préalable Traitement

Syntaxe de base :

Introduction au module : require(xxx)

Module tiers : xxx est le nom du module

Module personnalisé : xxx est le chemin du fichier du module

Module exposé : exports.xxx = valeur et module.exports = valeur

L'essence du module exposé est l'objet d'exportation

Les exportations elles-mêmes sont un objet vide exports.xxx = la valeur consiste à ajouter des attributs ou des méthodes à l'objet d'exportation

Module.exports = value écrase directement l'objet vide d'origine par le nouvel objet de valeur

Implémentation :

Côté serveur implémentation : Node .js

Implémentation côté navigateur : Browserify (outil d'empaquetage côté navigateur CommonJS)

Télécharger et installer Browserify

Global : npm install browserify -g

Local : npm install browserify --save-dev

Définir le code du module (code du fichier js et exposer le contenu correspondant)

Introduction des modules Utilisez require dans app.js pour introduire les modules, mais le navigateur ne reconnaît pas la méthode require, donc js a besoin à empaqueter et à traiter

Entrez browserify js/src/app.js -o js/dist/bundle.js dans le terminal dans le répertoire racine (js/src/app.js le fichier source js/dist/bundle.js est empaqueté et le fichier de sortie)

Introduction à l'utilisation de la page :

(Ce que le navigateur exécute réellement est le fichier généré par le package)

2. AMD

Instructions :

Spécialisée Utilisé pour les spécifications de modularisation côté navigateur, le chargement des modules est asynchrone

Syntaxe de base :

Définir les modules exposés :

　//定义没有依赖的模块：
　　define(function(){
　　　　return 模块
　　})
　　//定义有依赖的模块：
　　define(['module1','module2'],function(m1,m2){
　　　　return 模块
　　})

Introduction à l'aide du module :

require(['module1','module2'],function(m1,m2){
　　　　使用m1/m2
　　})

Implémentation (côté navigateur) :

Exiger .js

3 CMD (comprendre)

Explication : Utilisé spécifiquement côté navigateur, le chargement du Le module est asynchrone, et le module sera chargé et exécuté uniquement lorsqu'il sera utilisé

Syntaxe de base :

Définir le module exposé :

　//定义没有依赖的模块：
　　define(function(require,exports,module){
　　　　exports.xxx = value
　　　　module.exports = value
　　})
　　//定义有依赖的模块：
　　define(function(require,exports,module){
　　　　//引入依赖模块(同步)
　　　　var module2 = require("./module2")
　　　　//引入依赖模块（异步）
　　　　require.async("./module3",function(m3){
　　　　})
　　　　//暴露模块
　　　　exports.xxx = value
　　})

Présenter à l'aide du module :

require(function(require){
　　　　var m1 = require('./module1')
　　　　var m4 = require('./module4')
　　　　m1.show()
　　　　m4.show()
　　})

Implémentation (côté navigateur) : Sea.js

4, ES6

Remarque : des modules dépendants sont requis Traitement de la compilation et du packaging

Syntaxe :

Module d'exportation : exporter xxx

Module d'importation : importer xxx depuis "url"

Introduction à la page

implémentation (côté navigateur) :

Utilisez Babel pour compiler le code ES6 vers ES5

Utilisez Browserify pour compiler et empaqueter js

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse du chargement de Javascript

Analyse de la fonction d'exécution immédiate de javascrip

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!