Avantages de la programmation modulaire du module (partage de résumé)

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement les avantages de la programmation modulaire des modules. À mesure que les fonctions frontales deviennent de plus en plus complexes, le code frontal s'étend de jour en jour afin de réduire la maintenance. les coûts et améliorer l'efficacité du code. La réutilisabilité et la modularisation frontale sont impératives. Jetons-y un coup d'œil, j'espère que cela sera utile à tout le monde.

[Recommandations associées : tutoriel vidéo javascript, front-end web]

Contexte

À mesure que les fonctions frontales deviennent de plus en plus complexes, le code frontal s'étend de jour en jour. pour réduire les coûts de maintenance et améliorer la réutilisabilité du code, la modularisation frontale est impérative.

Tous les fichiers js sont introduits dans un seul code HTML, provoquant les effets indésirables suivants :

• Trop de requêtes. Tout d'abord, nous devons nous appuyer sur plusieurs modules, qui enverront plusieurs requêtes, ce qui entraînera trop de requêtes

• dépendances obscures. Nous ne savons pas quelles sont leurs dépendances spécifiques, ce qui signifie qu’il est facile de commettre des erreurs dans la séquence de chargement car nous ne comprenons pas les dépendances entre eux.

• Difficile à entretenir. Les deux raisons ci-dessus rendent la maintenance difficile, et il est très probable qu'une chose affectera tout le corps, causant de graves problèmes dans le projet.

Le concept de modules

est défini dans webpack comme suit :

Dans la programmation modulaire, les développeurs décomposent le programme en morceaux discrets de fonctionnalités et les appellent modules. Chaque module a une surface de contact plus petite qu'un programme complet, ce qui facilite la vérification, le débogage et les tests. Les modules bien écrits fournissent des limites d'abstraction et d'encapsulation solides afin que chaque module de l'application ait une conception cohérente et un objectif clair.

Les modules doivent être des blocs fonctionnels discrets avec des responsabilités uniques, indépendants les uns des autres, un faible couplage, une cohésion élevée et une remplaçabilité.

Le concept de modularité

La modularisation est un moyen de décomposer des systèmes complexes en modules mieux gérables. Elle peut diviser le code du système en une série de modules avec des responsabilités uniques, un découplage élevé et une remplaçabilité. une partie du système affectera d’autres parties et la maintenabilité du système sera plus facile à réaliser.

La modularisation est une idée diviser pour régner qui permet d'obtenir un contrôle précis en décomposant les systèmes complexes en modules indépendants, ce qui est très bénéfique pour la maintenance et la gestion de systèmes complexes. La modularité est également la pierre angulaire de la composantisation et une condition préalable au monde frontal coloré d'aujourd'hui.

Pourquoi la modularisation est nécessaire

La principale différence entre le développement front-end et les autres travaux de développement est que le front-end est basé sur un travail de codage et d'organisation multilingue et multi-niveaux, et la livraison du front-end Les produits sont basés sur des navigateurs. Ces ressources sont via La méthode de chargement incrémentiel s'exécute du côté du navigateur. Comment organiser ces codes et ressources fragmentés dans l'environnement de développement et garantir qu'ils sont chargés et mis à jour rapidement et élégamment du côté du navigateur nécessite une approche modulaire. système.

Avantages de la modularité

• Maintenabilité. Les modules étant indépendants, un module bien conçu rendra le code externe moins dépendant de lui-même, afin qu'il puisse être mis à jour et amélioré de manière indépendante.

• Espace de noms. En JavaScript, si une variable est déclarée en dehors de la fonction de niveau supérieur, elle devient disponible globalement. Par conséquent, les conflits de noms surviennent souvent accidentellement. L’utilisation du développement modulaire pour encapsuler des variables peut éviter de polluer l’environnement mondial.

• Réutiliser le code. Nous aimons parfois copier le code de projets déjà écrits vers de nouveaux projets. Cela ne pose aucun problème, mais une meilleure façon est d'éviter de dupliquer les bases de code via les références de modules. Après la mise à jour du module, nous pouvons mettre à jour simultanément tous les projets qui référencent le module et spécifier le numéro de version pour éviter les problèmes causés par les modifications de l'API.

Un bref historique de la modularisation

1. La manière la plus simple et la plus grossière

function fn1(){
  // ...
}
function fn2(){
  // ...
}

Introduisez des fichiers via des balises de script et appelez les fonctions associées. Cela nécessite une gestion manuelle de l'ordre des dépendances, ce qui peut facilement provoquer des conflits de noms et polluer la situation globale. À mesure que la complexité du projet augmente, le coût de maintenance devient de plus en plus élevé.

2. Utilisez des objets pour simuler des espaces de noms

var output = {
  _count: 0,
  fn1: function(){
    // ...
  }
}

Cela peut résoudre le problème de pollution globale ci-dessus. Cela a une certaine signification en matière d'espace de noms, mais à mesure que la complexité du projet augmente, de plus en plus d'objets de ce type doivent être maintenus. , choisir un nom est un problème. Le plus important est que les propriétés internes restent directement accessibles et modifiables.

3.Fermeture

var module = (function(){
  var _count = 0;
  var fn1 = function (){
    // ...
  }
  var fn2 = function fn2(){
    // ...
  }
  return {
    fn1: fn1,
    fn2: fn2
  }
})()
module.fn1();
module._count; // undefined

这样就拥有独立的词法作用域，内存中只会存在一份 copy。这不仅避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域，通过 return 暴露出公共接口供外界调用。这其实就是现代模块化实现的基础。

4. 更多

还有基于闭包实现的松耦合拓展、紧耦合拓展、继承、子模块、跨文件共享私有对象、基于 new 构造的各种方式，这种方式在现在看来都不再优雅。

// 松耦合拓展
// 这种方式使得可以在不同的文件中以相同结构共同实现一个功能块，且不用考虑在引入这些文件时候的顺序问题。
// 缺点是没办法重写你的一些属性或者函数，也不能在初始化的时候就是用module的属性。
var module = (function(my){
  // ...
  return my
})(module || {})
// 紧耦合拓展（没有传默认参数）
// 加载顺序不再自由，但是可以重载
var module = (function(my){
  var old = my.someOldFunc
  
  my.someOldFunc = function(){
    // 重载方法，依然可通过old调用旧的方法...
  }
  return my
})(module)

实现模块化的方案规范总览

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

目前实现模块化的规范主要有：

• CommonJS

CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。

采用同步加载模块的方式，也就是说只有加载完成，才能执行后面的操作。CommonJS 代表：Node 应用中的模块，通俗的说就是你用 npm 安装的模块。

它使用 require 引用和加载模块，exports 定义和导出模块，module 标识模块。使用 require 时需要去读取并执行该文件，然后返回 exports 导出的内容。

• CMD

CMD（Common Module Definition）

CMD是SeaJS在推广过程中生产的对模块定义的规范，在Web浏览器端的模块加载器中，SeaJS与RequireJS并称，SeaJS作者为阿里的玉伯。

CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。在 Sea.js 中，所有 JavaScript 模块都遵循 CMD模块定义规范。

• AMD

AMD（Asynchronous Module Definition）

异步模块定义，所谓异步是指模块和模块的依赖可以被异步加载，他们的加载不会影响它后面语句的运行。有效避免了采用同步加载方式中导致的页面假死现象。AMD代表：RequireJS。

AMD一开始是CommonJS规范中的一个草案，全称是Asynchronous Module Definition，即异步模块加载机制。后来由该草案的作者以RequireJS实现了AMD规范，所以一般说AMD也是指RequireJS。

RequireJS是一个工具库，主要用于客户端的模块管理。它的模块管理遵守AMD规范，RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。

• ES6模块

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。所以说ES6是编译时加载，不同于CommonJS的运行时加载(实际加载的是一整个对象)，ES6模块不是对象，而是通过export命令显式指定输出的代码，输入时也采用静态命令的形式。

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上”use strict”;。

严格模式主要有以下限制。

• 变量必须声明后再使用

• 函数的参数不能有同名属性，否则报错

• 不能使用with语句

• 不能对只读属性赋值，否则报错

• 不能使用前缀 0 表示八进制数，否则报错

• 不能删除不可删除的属性，否则报错

• 不能删除变量delete prop，会报错，只能删除属性delete global[prop]

• eval不会在它的外层作用域引入变量

• eval和arguments不能被重新赋值

• arguments不会自动反映函数参数的变化

• 不能使用arguments.callee

• 不能使用arguments.caller

• 禁止this指向全局对象

• Vous ne pouvez pas utiliser fn.caller et fn.arguments pour obtenir la pile d'appels de fonctions

• Mots réservés ajoutés (tels que protégé, statique et interface)

Les modules doivent être conformes aux restrictions ci-dessus.

【Recommandations associées : tutoriel vidéo javascript, front-end web】

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!