Maison > Article > interface Web > 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
Emballer un programme complexe en plusieurs fichiers selon certaines spécifications et les combiner entre eux
Réduisez la complexité, améliorez le découplage et facilitez le déploiement
É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é
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
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
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 :
3036b530131990319a16f367cbb9261b2cacc6d41bbb37262a98f745aa00fbf0 (Ce que le navigateur exécute réellement est le fichier généré par le package)
Spécialisée Utilisé pour les spécifications de modularisation côté navigateur, le chargement des modules est asynchrone
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 })
Exiger .js
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() })
Module d'exportation : exporter xxx
Module d'importation : importer xxx depuis "url"
Introduction à la page
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!