javascript设计模式（Alloy Team）

时间  2019-12-10
标签 javascript 设计 模式 alloy team 栏目 JavaScript 繁體版
原文   原文链接

1.单例模式

单例模式的核心：
（1）确保只有一个实例
（2）提供全局访问javascript

用代理实现单例模式：html

var ProxySingletonCreateDiv = (function(){
        var instance;
        return function( html ){
            if ( !instance ){
                instance = new CreateDiv( html );
            }
            return instance;
        }
    })();

通用的惰性单例模式：建立登录悬浮窗java

//fn保存建立逻辑
//单例模式：只建立一次
 var getSingle = function( fn ){
        var result;
        return function(){
            return result || ( result = fn .apply(this, arguments ) );
        }
    };

    var createLoginLayer = function(){
        var div = document.createElement( 'div' );
        div.innerHTML = '我是登陆浮窗';
        div.style.display = 'none';
        document.body.appendChild( div );
        return div;
    };
    var createSingleLoginLayer = getSingle( createLoginLayer );
    document.getElementById( 'loginBtn' ).onclick = function(){
        var loginLayer = createSingleLoginLayer();
        loginLayer.style.display = 'block';
    };

2.发布-订阅者模式

（1）首先要指定好谁充当发布者
（2）而后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者
（3）最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者函数算法

var Event = (function(){
        var clientList = {},
        listen,
        trigger,
        remove;
        listen = function( key, fn ){
            if ( !clientList[ key ] ){
                clientList[ key ] = [];
            }
            clientList[ key ].push( fn );
        };
        trigger = function(){
            var key = Array.prototype.shift.call( arguments ),
            fns = clientList[ key ];
            if ( !fns || fns.length === 0 ){
                return false;
            }
            for( var i = 0, fn; fn = fns[ i++ ]; ){
                fn.apply( this, arguments );
            }
        };
        remove = function( key, fn ){
            var fns = clientList[ key ];
            if ( !fns ){
                return false;
            }
            if ( !fn ){
                fns && ( fns.length = 0 );
            }else{
                for ( var l = fns.length - 1; l >=0; l-- ){
                    var _fn = fns[ l ];
                    if ( _fn === fn ){
                        fns.splice( l, 1 );
                    }
                }
            }
        };
        return {
            listen: listen,
            trigger: trigger,
            remove: remove
        }
    })();

给全部的对象都动态安装一个发布-订阅功能：缓存

var installEvent = function( obj ){
        for ( var i in event ){
            obj[ i ] = event[ i ];
        }
    };

3.装饰着模式

（1）装饰者模式能够动态的给某个对象添加一些额外的职责，而不会影响从这个类中派生出的其余对象。
（2）装饰者也是包装器：装饰者模式将一个对象嵌入到另外一个对象中，实际上至关于这个对象被另外一个对象包装起来，造成一条包装链。app

3-1.在不改变原来函数的状况下给函数增长新的功能dom

var a=function(){
        alert(1);
    }
    var _a = a;
    a=function(){
        _a();
        alert(2);
    }

可是这样作会带来两个问题：必须维护_a这个中间变量；存在this被劫持的问题
3-2.用AOP装饰函数函数

Function.prototype.before = function( beforefn ){
        var __self = this; // 保存原函数的引用
        return function(){ // 返回包含了原函数和新函数的"代理"函数
            beforefn.apply( this, arguments ); // 执行新函数，且保证this 不被劫持，新函数接受的参数
        // 也会被原封不动地传入原函数，新函数在原函数以前执行
            return __self.apply( this, arguments ); // 执行原函数并返回原函数的执行结果，
        // 而且保证this 不被劫持
    }
}

Function.prototype.after = function( afterfn ){
    var __self = this;
    return function(){
        var ret = __self.apply( this, arguments );
        afterfn.apply( this, arguments );
        return ret;
    }
};
//调用：重写原来函数
formSubmit = formSubmit.before( validata );

4.策略模式

策略模式的定义是：定义一系列的算法，把它们一个个封装起来，而且使它们能够相互替换。
4-1.使用策略模式计算奖金
绩效为S的人年终奖金是工资的4倍，绩效为A的人年终奖金是工资的3倍，绩效为B的人年终奖金是工资的2倍post

var performanceS = function(){};
    performanceS.prototype.calculate = function( salary ){
        return salary * 4;
    };
    var performanceA = function(){};
    performanceA.prototype.calculate = function( salary ){
        return salary * 3;
    };
    var performanceB = function(){};
    performanceB.prototype.calculate = function( salary ){
        return salary * 2;
    };

    //接下来定义奖金类Bonus：

    var Bonus = function(){
        this.salary = null; // 原始工资
        this.strategy = null; // 绩效等级对应的策略对象
    };
    Bonus.prototype.setSalary = function( salary ){
        this.salary = salary; // 设置员工的原始工资
    };
    Bonus.prototype.setStrategy = function( strategy ){
        this.strategy = strategy; // 设置员工绩效等级对应的策略对象
    };
    Bonus.prototype.getBonus = function(){ // 取得奖金数额
        return this.strategy.calculate( this.salary ); // 把计算奖金的操做委托给对应的策略对象
    };

    var bonus = new Bonus();
    bonus.setSalary( 10000 );

    bonus.setStrategy( new performanceS() ); // 设置策略对象
    console.log( bonus.getBonus() ); // 输出：40000

4-2.javascript版本的策略模式this

var strategies = {
        "S": function( salary ){
            return salary * 4;
        },
        "A": function( salary ){
            return salary * 3;
        },
        "B": function( salary ){
            return salary * 2;

        }
    };
    var calculateBonus = function( level, salary ){
        return strategies[ level ]( salary );
    };

    console.log( calculateBonus( 'S', 20000 ) ); // 输出：80000
    console.log( calculateBonus( 'A', 10000 ) ); // 输出：30000

经过使用策略模式重构代码，咱们消除了原来程序中大片的条件分支代码。全部和计算奖金的逻辑再也不放在context中，而是分布在各个策略对象中。每一个策略对象负责的算法已被各自封装在对象内部。当咱们对这些策略对象发出“计算奖金”请求时，它们会返回各自不一样的计算结果。

4-3.用策略模式进行表单校验
（1）用户名不能为空
（2）密码长度不能少于6位
（3）手机号码必须符合格式

<html>
<body>
    <form action="http:// xxx.com/register" id="registerForm" method="post">
        请输入用户名：<input type="text" name="userName"/ >
        请输入密码：<input type="text" name="password"/ >
        请输入手机号码：<input type="text" name="phoneNumber"/ >
        <button>提交</button>
    </form>
    <script>
        /***********************策略对象**************************/
        var strategies = {
            isNonEmpty: function( value, errorMsg ){
                if ( value === '' ){
                    return errorMsg;
                }
            },
            minLength: function( value, length, errorMsg ){
                if ( value.length < length ){
                    return errorMsg;
                }
            },
            isMobile: function( value, errorMsg ){
                if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
                    return errorMsg;
                }
            }
        };
        /***********************Validator 类**************************/
        var Validator = function(){
            this.cache = [];
        };
        Validator.prototype.add = function( dom, rules ){
            var self = this;
            for ( var i = 0, rule; rule = rules[ i++ ]; ){
                (function( rule ){
                    var strategyAry = rule.strategy.split( ':' );
                    var errorMsg = rule.errorMsg;
                    self.cache.push(function(){
                        var strategy = strategyAry.shift();
                        strategyAry.unshift( dom.value );
                        strategyAry.push( errorMsg );
                        return strategies[ strategy ].apply( dom, strategyAry );
                    });
                })( rule )
            }
        };
        Validator.prototype.start = function(){
            for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
                var errorMsg = validatorFunc();
                if ( errorMsg ){
                    return errorMsg;
                }
            }
        };
        /***********************客户调用代码**************************/
        var registerForm = document.getElementById( 'registerForm' );
        var validataFunc = function(){
            var validator = new Validator();
            validator.add( registerForm.userName, [{
                strategy: 'isNonEmpty',
                errorMsg: '用户名不能为空'
            }, {
                strategy: 'minLength:6',
                errorMsg: '用户名长度不能小于10 位'
            }]);
            validator.add( registerForm.password, [{
                strategy: 'minLength:6',
                errorMsg: '密码长度不能小于6 位'
            }]);
            var errorMsg = validator.start();
            return errorMsg;
        }
        registerForm.onsubmit = function(){
            var errorMsg = validataFunc();
            if ( errorMsg ){
                alert ( errorMsg );
                return false;
            }

        };
    </script>
</body>
</html>

5.代理模式

代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。
5-1.小明追女神的故事
小明遇到了他的女神A，打算送一朵鲜花来表白。恰好小明打听到他和A有一个共同的好友B，因而小明决定让B来替本身来完成这件事。

var Flower = function(){};
var xiaoming = {
    sendFlower: function( target ){
        var flower = new Flower();
        target.receiveFlower( flower );
    }
};
var A = {
    receiveFlower: function( flower ){
        console.log( '收到花 ' + flower );
    }
};
xiaoming.sendFlower( A );


//接下来，咱们引入代理B，即小明经过B 来给A 送花：
var Flower = function(){};
var xiaoming = {
    sendFlower: function( target){
        var flower = new Flower();
        target.receiveFlower( flower );
    }
};
var B = {
    receiveFlower: function( flower ){
        A.receiveFlower( flower );
        90 第6 章 代理模式
    }
};
var A = {
    receiveFlower: function( flower ){
        console.log( '收到花 ' + flower );
    }
};
xiaoming.sendFlower( B );

//而后选择A 心情好的时候把花转交给A，代码以下：

var Flower = function(){};
var xiaoming = {
    sendFlower: function( target){
        var flower = new Flower();
        target.receiveFlower( flower );
    }
};
var B = {
    receiveFlower: function( flower ){
        A.listenGoodMood(function(){ // 监听A 的好心情
            A.receiveFlower( flower );
        });
    }
};

var A = {
    receiveFlower: function( flower ){
        console.log( '收到花 ' + flower );
    },
    listenGoodMood: function( fn ){
        setTimeout(function(){ // 假设10 秒以后A 的心情变好
            fn();
        }, 10000 );
    }
};

xiaoming.sendFlower( B );

var myImage = (function(){
    var imgNode = document.createElement( 'img' );
    document.body.appendChild( imgNode );
    return {
        setSrc: function( src ){
            imgNode.src = src;
        }
    }
})();

5-2.保护代理与虚拟代理
保护代理：好比B能够帮助A过滤掉一些请求，如送花的人中年龄较大的
虚拟代理：new Flower多是很是昂贵的，这时候须要B代理去执行，代理B在A心情好的时候再执行。
5-3.虚拟代理实现图片预加载

var myImage = (function(){
        var imgNode = document.createElement( 'img' );
        document.body.appendChild( imgNode );
        return function( src ){
            imgNode.src = src;
        }
    })();
    var proxyImage = (function(){
        var img = new Image;
        img.onload = function(){
            myImage( this.src );
        }
        return function( src ){
            myImage( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
            img.src = src;

        }
    })();
    proxyImage( 'http:// imgcache.qq.com/music// N/k/000GGDys0yA0Nk.jpg' );

纵观整个程序，咱们并无改变或者增长myImage接口，可是经过代理对象，其实是给系统添加了新的行为：给img节点设置 src和图片预加载这两个功能。
5-4.虚拟代理合并http请求

<body>
    <input type="checkbox" id="1"></input>1
    <input type="checkbox" id="2"></input>2
    <input type="checkbox" id="3"></input>3
    <input type="checkbox" id="4"></input>4
    <input type="checkbox" id="5"></input>5
    <input type="checkbox" id="6"></input>6
    <input type="checkbox" id="7"></input>7
    <input type="checkbox" id="8"></input>8
    <input type="checkbox" id="9"></input>9
</body>

script.js:

var synchronousFile = function( id ){
        console.log( '开始同步文件，id 为: ' + id );
    };

    var proxySynchronousFile = (function(){
        var cache = [], // 保存一段时间内须要同步的ID
        timer; // 定时器
        return function( id ){
            cache.push( id );
            if ( timer ){ // 保证不会覆盖已经启动的定时器
                return;
            }
            timer = setTimeout(function(){
            synchronousFile( cache.join( ',' ) ); // 2 秒后向本体发送须要同步的ID 集合
            clearTimeout( timer ); // 清空定时器
            timer = null;
            cache.length = 0; // 清空ID 集合
        }, 2000 );
        }
    })();

    var checkbox = document.getElementsByTagName( 'input' );
    for ( var i = 0, c; c = checkbox[ i++ ]; ){
        c.onclick = function(){
            if ( this.checked === true ){
                proxySynchronousFile( this.id );
            }
        }
    };
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程