Para aplicaciones a gran escala con colaboración de varias personas, el tema eterno es reducir la complejidad del sistema. La forma más común de reducir la complejidad es el desacoplamiento. Para el desacoplamiento, la solución proporcionada por JavaScript es modular y la solución proporcionada por el marco front-end es la fragmentación, un buen sistema debe lograr bajo acoplamiento, alta cohesión y bajo acoplamiento de cada módulo, que es la premisa de un buen diseño de módulo.
Tanto la alta cohesión como el bajo acoplamiento se miden. Por ejemplo, según el grado de acoplamiento, hay 7 relaciones de acoplamiento diferentes. Este artículo explicará las diferencias entre los 7 acoplamientos en detalle con imágenes y textos.
Alta cohesión y bajo acoplamiento
Alta cohesión y bajo acoplamiento son los objetivos que persigue todo desarrollador de software, entonces, ¿qué significan cohesión y acoplamiento?
La cohesión es la medida de las conexiones dentro de los módulos desde una perspectiva funcional, y un buen módulo cohesivo debería hacer exactamente una cosa. Describe conexiones funcionales dentro de un módulo.
El acoplamiento es una medida de la interconexión entre módulos en una estructura de software. La fuerza del acoplamiento depende de la complejidad de la interfaz entre módulos, el punto de entrada o acceso a un módulo y los datos que pasan a través de la interfaz.
acoplamiento
La relación entre los diferentes módulos es el acoplamiento, que se puede dividir en 7 tipos según el grado de acoplamiento, y el grado de acoplamiento se vuelve más bajo a su vez.
- acoplamiento de contenido
- acoplamiento publico
- acoplamiento externo
- acoplamiento de control
- acoplamiento de etiqueta
- acoplamiento de datos
- acoplamiento indirecto
Hablemos de qué es cada acoplamiento y hablemos de las funciones que se implementarán antes de comenzar. m1 y m2 son dos módulos separados, donde m2 mostrará la entrada de m1 y m1 mostrará la entrada de m2.
Obviamente, habrá alguna conexión (acoplamiento) entre los dos módulos m1 y m2. También puede pensar en cómo implementar esta función. Las siguientes 7 formas diferentes se utilizan para implementar esta función.
**Nota:** Puse el código del proyecto en github , la demostración del proyecto se puede ver aquí .
acoplamiento de contenido
El acoplamiento de contenido es el grado de acoplamiento más estrecho. Un módulo accede directamente al contenido de otro módulo, y los dos módulos se denominan acoplamiento de contenido.
Para implementar la función, ponemos la entrada de m1 en m2.m1input y la entrada de m2 en m1.m2input.
// m1.js
root.m2.m1input = this.value;
m2.update();
// m2.js
root.m1.m2input = this.value;
m1.update();
**PD:** No sé quién escribiría un código así, excepto yo para una demostración. . .
Consulte el código completo y la demostración .
acoplamiento publico
一组模块都访问同一个全局数据结构，则称之为公共耦合。
在这种 case 中，m1 和 m2 将自己的输入放到全局的 data 上。
// m1.js
root.data.m1input = this.value;
m2.update();
// m2.js
root.data.m2input = this.value;
m1.update();
外部耦合
一组模块都访问同一全局简单变量，而且不通过参数表传递该全局变量的信息，则称之为外部耦合。外部耦合和公共耦合很像，区别就是一个是简单变量，一个是复杂数据结构。
在这种 case 中，m1 和 m2 都将自己的输入放到全局上。
// m1.js
root.m1input = this.value;
m2.update();
// m2.js
root.m2input = this.value;
m1.update();
控制耦合
模块之间传递的不是数据信息，而是控制信息例如标志、开关量等，一个模块控制了另一个模块的功能。
从控制耦合开始，模块的数据就放在自己内部了，不同模块之间通过接口互相调用。
在这个 case 中，得增加一个需求，就是当 m1 的输入为空时，隐藏 m2 的显示信息。
// m1.js
root.m1input = this.value;
m2.update();
m2.toggle(!!this.value); // 传递flag
上面的代码中 m1 直接控制了 m2 的显示和隐藏。
标记耦合
调用模块和被调用模块之间传递数据结构而不是简单数据，同时也称作特征耦合。
在这个 case 中，m1 传给 m2 的是一个对象。
// m1.js
me.m1input = this.value;
m2.update(me); // 传递引用
// m2.js
me.m2input = this.value;
m1.update(me);
数据耦合
调用模块和被调用模块之间只传递简单的数据项参数。相当于高级语言中的值传递。
在这个 case 中，m1 传给 m2 的是一个简单数据结构。
// m1.js
me.m1input = this.value;
m2.update(me.m1input); // 传递值
// m2.js
me.m2input = this.value;
m1.update(me.m2input);
非直接耦合
两个模块之间没有直接关系，它们之间的联系完全是通过主模块的控制和调用来实现的。耦合度最弱，模块独立性最强。
子模块无需知道对方的存在，子模块之间的联系，全部变成子模块和主模块之间的联系。
在这个 case 种，增加一个 index.js 作为主模块。
// index.js
var m1 = root.m1;
var m2 = root.m2;
m1.init(function (str) {
m2.update(str);
});
m2.init(function (str) {
m1.update(str);
});
// m1.js
me.m1input = this.value;
inputcb(me.m1input); // inputcb是回调函数
// m2.js
me.m2input = this.value;
inputcb(me.m2input);
内聚
其实关于内聚也分为很多种，如下所示，如果你感兴趣可以自己研究研究，我们下次再来分享内聚的问题。
- 偶然内聚
- 逻辑内聚
- 时间内聚
- 通信内聚
- 顺序内聚
- 功能内聚
总结
希望你看完上面的文章，搞懂了耦合的种类，也希望你以后能使用非直接耦合这种方式来写代码，祝好。
欢迎大家阅读本文，如果你觉得本文对你有帮助，那就点赞加关注作者吧，如果对本文有任何疑问，欢迎在评论区交流。
原创不易，求分享、求一键三连
Estoy participando en el reclutamiento del programa de firma de creadores de la Comunidad Tecnológica de Nuggets, haga clic en el enlace para registrarse y enviar .