Vous apprendre étape par étape comment écrire des modules courants en utilisant JS (explication détaillée du code)

Dans l'article précédent "Une brève analyse de la méthode d'opération d'horodatage en JavaScript (avec code)", nous avons découvert la méthode d'opération d'horodatage en js. L'article suivant vous montrera comment utiliser JS pour écrire des modules communs. Voyons comment le faire ensemble.

Le problème de la modularisation n'existait pas depuis le début Lorsque WWW est sorti pour la première fois, html, JavaScript, CSS (<code>JS et CSS ont été introduits plus tard dans le navigateur de Netscape) sont extrêmement simples et ne nécessitent pas de modularisation. WWW刚刚问世的时候，html，JavaScript，CSS（JS和CSS都是后来在网景被引进浏览器的）都是极其简单的存在，不需要模块化。

模块化的需求是规模的产物，当web page进化到web application，浏览器端处理的逻辑越来越复杂，展现的样式和动画越来多，对于工程的要求也就越来越高。于是模块化的需求也就产生了。模块化的意义：

• 组件的复用，降低开发成本和维护成本

• 组件单独开发，方便分工合作

• 模块化遵循标准，方便自动化依赖管理，代码优化，部署

JavaScript长久以来被认为是简单的脚本语言，实际上情况早就发生来变化，在最新版的 ECMA-262（ES6）文档中强调JavaScript是通用编程语言而不是脚本语言。脚本语言，比如shell并不是用来完成复杂功能的，只是用来做一些自动化控制，是不需要模块化的。而用于构建复杂系统通用编程语言（比如Java）一般都有模块的实现。

在ES6以前，JS语言没有模块化，如何让JS不止运行在浏览器，且能更有效的管理代码， 于是应运而生CommonJS这种规范，定义了三个全局变量：

require，exports，module

• require用于引入一个模块

• exports对外暴露模块的接口，可以是任何类型

• module是这个模块本身的对象

用require引入时获取的是这个模块对外暴露的接口（exports）

Node.js使用了CommonJS规范：

var foo = require("foo");
var out = foo.sayName();
module.exports = out;

在浏览器端，不像Node.js内部支持CommonJS，如何进行模块化，于是出现了CMD与AMD两种方式，其主要代表是seajs和requirejs，他们都定义了一个全局函数define来创建一个模块：

//CMD
define(function (require, exports, module) {
  var foo = require("foo");
  var out = foo.sayName();
  module.exports = out;
});

//AMD
define(["foo"], function (foo) {
  var out = foo.sayName();
  return out;
});

可以看出CMD完好的保留了CommonJS的风格， 而AMD用了一种更简洁的依赖注入和函数返回的方式实现模块化。 两者除风格不同外最大区别在于加载依赖模块的方式，CMD是懒加载，在require时才会加载依赖， 而AMD是预加载，在定义模块时就提前加载好所有依赖。 

 我们要实现一个模块，让它既能在seajs（CMD）环境里引入，又能在requirejs（AMD）环境中引入，当然也能在Node.js（CommonJS）中使用，另外还可以在没有模块化的环境中用script标签全局引入。

首先搞一个模块

var factory = function () {
  var moduleName = {};
  return moduleName;
};

当然return输出的可以是任何值，对象，类，其他都可以

首先满足Node.js或者ES6，我们可以通过全局变量module和exports来判断

var factory = function () {
  var moduleName = {};
  return moduleName;
};
if (typeof module !== "undefined" && typeof exports === "object") {
  module.exports = factory;
}

在CMD和AMD中，我们需要提供一个工厂函数传入define来定义模块，当没有上述全局变量，且有define全局变量时，我们认为是AMD或CMD，可以直接将factory传入define：

var factory = function () {
  var moduleName = {};
  return moduleName;
};
if (typeof module !== "undefined" && typeof exports === "object") {
  module.exports = factory;
} else if (typeof define === "function" && (define.cmd || define.amd)) {
  define(factory);
}

注意：CMD 其实也支持 return 返回模块接口，所以两者可以通用。

然后还要满足script标签全局引入，我们可以将模块放在window上，为了模块内部在浏览器和Node.js中都能使用全局对象，我们可以做此判断：

var global = typeof window !== "undefined" ? window : global;

我们用一个立刻执行的闭包函数将所有代码包含，来避免污染全局空间，并将global

La demande de modularisation est un produit d'échelle. Lorsque la page Web évolue vers une application Web, la logique traitée par le navigateur devient de plus en plus complexe, ainsi que les styles et les animations affichées deviennent de plus en plus complexes. Avec le nombre croissant de projets à venir, les exigences en matière de projets sont de plus en plus élevées. Puis le besoin de modularisation s’est fait sentir. Le sens de la modularité :

• La réutilisation des composants réduit les coûts de développement et de maintenance

Il est pratique de développer des composants individuellement Division de travail et de coopération

La modularité suit des normes pour faciliter la gestion automatisée des dépendances, l'optimisation du code et le déploiement

JavaScript a longtemps été considéré comme simple Langage de script, en fait, la situation a changé depuis longtemps. Dans la dernière version du document ECMA-262 (ES6), il est souligné que JavaScript est un langage de script. langage de programmation général plutôt qu’un langage de script. Les langages de script, tels que shell, ne sont pas utilisés pour exécuter des fonctions complexes. Ils sont uniquement utilisés pour effectuer un contrôle automatisé et ne nécessitent pas de modularisation. Les langages de programmation à usage général (tels que Java) utilisés pour construire des systèmes complexes ont généralement des implémentations de modules.

Avant ES6, le langage JS n'était pas modulaire. Comment faire en sorte que JS non seulement s'exécute dans le navigateur, mais également gère davantage le code. efficacement? Ainsi, la spécification CommonJS est née, définissant trois variables globales :

(function (global) {
  var factory = function () {
    var moduleName = {};
    return moduleName;
  };
  if (typeof module !== "undefined" && typeof exports === "object") {
    module.exports = factory;
  } else if (typeof define === "function" && (define.cmd || define.amd)) {
    define(factory);
  } else {
    global.factory = factory;
  }
})(typeof window !== "undefined" ? window : global);

require code> est utilisé pour introduire un module

🎜exportsL'interface qui expose le module au monde extérieur peut être de n'importe quel type🎜

🎜module C'est l'objet de ce module lui-même🎜

🎜Lorsqu'il est introduit en utilisant require, ce qui est obtenu est l'interface exposée par ce module (exports)🎜🎜<code>Node.js utilise la spécification CommonJS : 🎜

//Node.js
var myModule = require('moduleName')

//Seajs
define(function(require,exports,module){
  var myModule = require('moduleName')
})

// Browser global
<script src=&#39;moduleName.js&#39;></script>

🎜Côté navigateur, contrairement à Node.js qui supporte CommonJS en interne >, comment modulariser, il y a donc deux méthodes : CMD et AMD, les principaux représentants sont seajs et requirejscode>, ils définissent tous une fonction globale pour créer un module : 🎜rrreee🎜 On voit que CMD conserve complètement le style de CommonJS code>. Et <code>AMD utilise un moyen plus simple d'injection de dépendances et de retour de fonctions pour atteindre la modularité. Outre les différents styles, la plus grande différence entre les deux réside dans la manière de charger les modules dépendants. CMD est un chargement paresseux, et les dépendances ne seront chargées que lorsque require est utilisé. Et AMD est un préchargement, qui charge toutes les dépendances à l'avance lors de la définition du module. 🎜🎜 Nous devons implémenter un module pour qu'il puisse être introduit à la fois dans l'environnement seajs (CMD) et dans l'environnement requirejs (AMD). Bien sûr, cela peut aussi. être introduit dans Il est utilisé dans Node.js(CommonJS) Il peut également être introduit globalement à l'aide de la balise script dans un environnement sans modularisation. . 🎜🎜Créez d'abord un module🎜rrreee🎜Bien sûr, la sortie de return peut être n'importe quelle valeur, objet, classe, n'importe quoi d'autre🎜🎜Satisfaire d'abord Node.js ou ES6, on peut utiliser les variables globales module et exports pour juger 🎜rrreee🎜 en CMD et AMD >, nous devons fournir une fonction d'usine et transmettre <code>define pour définir le module. Lorsqu'il n'y a pas de variable globale mentionnée ci-dessus et qu'il y a une variable globale define. , nous pensons que c'est AMD ou CMD, vous pouvez directement passer factory dans define : 🎜rrreee🎜🎜Note : CMD prend également en charge l'interface du module de retour, les deux peuvent donc être utilisés de manière interchangeable. 🎜🎜🎜Ensuite, nous devons également répondre à l'introduction globale de la balise script. Nous pouvons placer le module sur window, afin que le module puisse être utilisé en interne dans le navigateur. et Node.js Les objets globaux peuvent être utilisés dans le code>, nous pouvons porter ce jugement : 🎜rrreee🎜Nous utilisons une fonction de fermeture qui est exécutée immédiatement pour inclure tous les codes afin d'éviter de polluer l'espace global, et passez l'objet global Entrez la fonction de fermeture, et cela finira par ressembler à ceci : 🎜rrreee🎜🎜 Remarque : Le point-virgule avant la fermeture sert à combler les trous du module précédent s'il y en a aussi. il y a beaucoup de points-virgules, il n'y a pas de problème, mais s'il y en a trop peu, l'énoncé peut changer. 🎜🎜🎜Ensuite, vous pouvez volontiers appeler 🎜rrreee🎜【Fin】🎜🎜🎜Apprentissage recommandé : 🎜Tutoriel avancé JavaScript🎜🎜

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!