js设计模式

Posted 2020-09-26 noooooob

1.接口

　   -接口是面向对象javascript程序员工具箱中最有用的工具之一，那么对于javaScript没有定义接口的概念，

我们通过模拟高级程序语言的方式来创建javaScript中的接口。

　　-接口的概念：提供一种以说明一个对象应该有哪些方法的手段。

　　-通常建立javaScript接口的三种方式：

　　　　-1.注释描述接口

　　　　

<script type="text/javascript" charset="utf-8">
            // javaScript中，定义接口有三种方式
            // 1.注解描述(特点，1.程序员可以有一个参考，2缺点是还是属于文档范畴,3如果程序员忘记了定义方法，不会出错。)
            // 缺点，方式太过松散，并没有检查接口方式是否被完全实现。
            /**
             * interface Composite {
             *     
             *      function add();
             *         function remove();
             *         function update();
             * }
             */
            // CompositImpl implements Composite
            var CompositImpl = function () {
                
            };
            
            // 用原型对象做，直接写在类里，会多次创建方法。
            CompositeImpl.prototype.add = function(obj) {
                // do something
            };
            
            CompositeImpl.prototype.remove = function(obj) {
                // do something
            };
            
            CompositeImpl.prototype.update = function(obj) {
                // do something
            };

            
        </script>

　　　　-2.属性检测接口

<script type="text/javascript" charset="utf-8">
            // 2.属性检测
            /**
             * interface Composite {
             *     
             *      function add();
             *         function remove();
             *         function update();
             * }
             * 
             * interface FormItem {
             *         function select(obj);
             * }
             */
            
            // CompositImpl implements Coposite 和 FormItem
            var CompositImpl = function (){
                // 显示的在类的内部接受所实现的接口
                // 一般来讲  在类的内部定义一个变量，名字要固定。这是一个规范
                this.implemtnsInterface = [‘Comosite‘,‘FormItem‘];
                
            };
            
            CompositeImpl.prototype.add = function(obj) {
                // do something
                alert(‘add‘);
            };
            
            CompositeImpl.prototype.remove = function(obj) {
                // do something
                alert(‘remove‘);
            };
            
            CompositeImpl.prototype.update = function(obj) {
                // do something
                alert(‘update‘);
            };
            
            CompositeImpl.prototype.select = function(obj) {
                // do something
                alert(‘select‘);
            };
            
            // 定义一个方法去检测 类是否实现了所有的接口
            function checkCompositImpl() {
                // 判断当前对象是否实现了所有接口
                if(!IsImplments(instance, ‘Composite‘, ‘FormItem‘)) {
                    throw new Error(‘Object does not implement a required interface‘);
                }
            }
            
            // 判断当前对象是否实现了所有接口
            // 这个方法的主要目的就是判断 实例对象有没有实现相关的接口
            function IsImplments(Object) {
                //arguments 获得实际参数
                for (var i = 1; i < arguments.length; i++) {
                    // 接受所实现的每一个接口的名字
                    var interfaceNmae = arguments[i];
                    
                    var interfaceFound = false;
                    
                    for (var g = 0; g < Object.implemtnsInterface.length; g++) {
                        if (Object.implemtnsInterface[g] == interfaceName) {
                            interfaceFound = true;
                            break;
                        }
                    }
                    
                    if (!iterfaceName) {
                        return false;
                    }
                }
                return true;
            }

        </script>

　　　　-3.鸭式辨型接口

<script type="text/javascript" charset="utf-8">
            // 3.鸭式辨型(最完美的实现接口的方式)
            // 核心：一个类实现接口的主要目的就是将接口中的方法全部实现。(检测方法)
            // 优点：完全面向对象，代码也实现统一，也实现了解耦
            
            
            // 1.接口类  Class Interface  ==> 实例化N多个接口
            
            /*
             * 接口类需要两个参数
             * 1.接口的名字
             * 2.接受方法名称的数组
             */
            var Interface = function(name, methods) {
                // 1.判断接口的参数个数
                if(arguments.length != 2) {
                    throw new Error(‘this instance interface constructor must be 2 length‘);
                }
                this.name = name;
                // 定义一个内置空数组，等待接受methods里面的元素
                this.methods = [];
                for (var i = 0, len = methods.length; i < len; i++) {
                    if(typeof methods[i] !== ‘string‘) {
                        throw new Error(‘the interface method name is error!‘);
                    }
                    this.methods.push(methods[i]);
                }
            };
            
            
            // 2.准备工作：具体的实现类
            // 实例化接口对象
            var CompositeInterFace = new Interface(‘CompositeInterFace‘, [‘add‘, ‘remove‘]);
            var FormItemInterFace = new Interface(‘FormItemInterFace‘, ‘update‘, ‘select‘);
            
            // CompositImpl 实现了CompositeInterFace和FormItemInterFace
            var CompositImpl = function() {
                
            };
            
            CompositeImpl.prototype.add = function(obj) {
                // do something
                alert(‘add‘);
            };
            
            CompositeImpl.prototype.remove = function(obj) {
                // do something
                alert(‘remove‘);
            };
            
            CompositeImpl.prototype.update = function(obj) {
                // do something
                alert(‘update‘);
            };
            
            CompositeImpl.prototype.select = function(obj) {
                // do something
                alert(‘select‘);
            };
             
            // 3.检验接口里的方法
            // 如果检验通过，不做任何处理。如果没有通过，则浏览器抛出异常
            // 这个方法的目的就是检测方法的
            Interface.ensureImplments = function(Object) {
                if(arguments.length < 2) {
                    throw new Error(‘Interface.ensureImplments method constructor arguments must be >= 2‘);
                }
                
                // 获得接口实例对象
                for (var i = 1; i < arguments.length; i++) {
                    var instanceInterface = arguments[i];
                    // 判断参数是否是接口类的类型
                    if (instanceInterface.constructor !== interface) {
                        throw new Error(‘the arguments constructor not be Interface class!‘);
                    }
                    // 循环接口实例对象中的每一个方法
                    for (var j = 0; j < instanceInterface.methods.length; j++) {
                        // 用一个临时变量接受每一个方法的名字(字符串)
                        var methodName = instanceInterface.methods[j];
                        if(!Object[methodName] || typeof Object[methodName] != ‘function‘) {
                            throw new Error(‘the method is not found‘);
                        }
                    }
                }
            };
            
            var c1 = new ComopsitImpl();
            
            Interface.ensureImplments(c1, CompositeInterFace, FormItemInterFace);
        </script>
        

　　-接口的利弊：

　　　　-对于一些中小程序来说，使用接口显然是不明智的，对于项目来说接口的好处不明显，只是徒增复杂度。

　　　　-对于接口的好处，首先增进了代码的重用，对于开发来讲，还可以告诉程序员哪些类都使用了哪些方法，

如果你事先知道接口，那么就减少了你在编码的时候对类与类之间冲突，实现解耦。对于测试和调试也变得轻松。

对于javaScript的弱类型语言，类型不匹配很常见，使用接口会变得容易一些。