js中耦合与解耦问题总结

一.概念

一、耦合

1、耦合是指两个或两个以上的体系或两种运动形式间通过相互作用而彼此影响以至联合起来的现象。

2、在软件工程中，对象之间的耦合度就是对象之间的依赖性。对象之间的耦合越高，维护成本越高，因此对象的设计应使类和构件之间的耦合最小。
二、解耦

1、解耦，就是解除耦合关系。

2、在软件工程中，降低耦合度即可以理解为解耦，模块间有依赖关系必然存在耦合，理论上的绝对零耦合是做不到的，但可以通过一些现有的方法将耦合度降至最低。

4、观察者模式：观察者模式存在的意义就是「解耦」，它使观察者和被观察者的逻辑不再搅在一起，而是彼此独立、互不依赖。QQ消息推送来了之后，既要在通知栏上弹个推送，又要在桌面上标个小红点，也是观察者与被观察者的巧妙配合。

二.耦合类型及解耦

避免全局耦合

<script>
    var PAGE = 20;
</script>
<script src="main.js">
</script>

全局变量跨了两个文件使用，html和main.js,对于维护main.js的开发很难去理解PAGE变量的含义。 不利于维护。

通过事件侦听与事件抛发降低函数耦合

 var o=new EventTarget();
        (function(){
            var b=20;
            init();
            function init(){
               //侦听o事件对象 
                o.addEventListener("javascript",jsHandler);
               
            }
            function dis(){
            //创建事件
                var evt=new Event("abcde");
                evt.b=b;
                //向document中间件抛发事件
                document.dispatchEvent(evt);
            }
            function jsHandler(e){
                console.log(e.a,"bbbbb");
                dis();
            }
        })();
        (function(){
            var a=10;
            init();
            function init(){
            //侦听 document中间件
                document.addEventListener("abcde",fn);
                dis();
            }
        
            function dis(){
                var evt=new Event("javascript");
                evt.a=a;
      
                o.dispatchEvent(evt);
            }
            function fn(e){
                console.log(e.b,"aaaa");
             
            }
        })(); */