zoukankan      html  css  js  c++  java
  • 设计模式 --深入理解javascript

    /*
        一、单例模式
    */
    var Universe;
    (function () {
        var instance;
        Universe = function Universe() {
            if (instance) {
                return instance;
            }
            instance = this;
        };
    }());
    /*
        二、构造函数模式
    */
    function VM() {
        this.name = "123";
    }
    VM.prototype.Method = function () { }
    var vm = new VM();
    /*
        三、建造者模式  --- 回调
        一个复杂对象由多个部分对象构成,应对部分对象发生变化,组合后算法结构不变的情况
    */
    //  回调:回调函数的处理,不关心数据来源,如ajax里的succes
    function GetBeer(id, callback) {
        //复杂对象 = GetBeer ,算法结构不变
        asyncRequest('get', URL, function (resp) {
            //部分对象callback,算法变化
            callback(resp, responseText);
        });
    }
    var el = document.querySelector('#test');
    el.addEventListener('click', GetBeerByIdBridge, false);
    
    function GetBeerByIdBridge(e) {
        GetBeer(this.id, function (beer) { });
    }
    /*
        四、工厂模式
    */
    //创建对象时,无需指定创建对象的具体类
    var productManager = {};
    productManager.createProductA = function () { };
    productManager.createProductB = function () { }
    productManager.factory = function (type) {
        return new productManager[type]();
    }
    productManager.factory("createProductA");
    /*
        五、装饰者模式
    */
    //  为已有功能动态地添加更多功能的一种方式,把每个要装饰的功能放在单独的函数里,然后用该函数包装所要装饰的已有函数对象
    //  优点是把类(函数)的核心职责和装饰功能区分开了
    var tree = {};
    tree.decorate = function () { }
    tree.getDecorate = function (funcName) {
        tree[funcName].prototype = this;//指定当前方法的原型
        return new tree[funcName];
    }
    tree.Blue = function () {
        this.decorate = function () {
            this.Blue.prototype.decorate();//先执行原型的decorate 即:tree.decorate();
        }
    }
    tree.Red = function () {
        this.decorate = function () {
            this.Red.prototype.decorate();//先执行原型的decorate 即:tree.Bule.decorate();
        }
    }
    tree = tree.getDecorate("Bule");//将Bule赋值给tree,父级原型tree.Decorate可用
    tree = tree.getDecorate("Red");//将Red赋值给tree,父级原型tree.Bule.Decorate可用
    tree.decorate();
    /*
        六、外观模式
    */
    //  把一些复杂操作封装起来,并创建一个简单的接口用于调用
    /*
        使用条件
        首先,设计阶段:三层架构之间建立外观Facade。
        其次,开发阶段:子系统越来越复杂,增加外观Facade可以提供一个简单的接口,减少他们之间的依赖。
        第三,老系统过于复杂,无法再进行修改,让新系统与外观facade交互。
    */
    var moduleEvent = {
        stop: function (e) {
            e.preventDefault();
            e.stopPropagation();
        }
    }
    /*
        七、代理模式
        1.远程代理,也就是为了一个对象在不同的地址空间提供局部代表,这样可以隐藏一个对象存在于不同地址空间的事实,就像web service里的代理类一样。
        2.虚拟代理,根据需要创建开销很大的对象,通过它来存放实例化需要很长时间的真实对象,比如浏览器的渲染的时候先显示问题,而图片可以慢慢显示(就是通过虚拟代理代替了真实的图片,此时虚拟代理保存了真实图片的路径和尺寸。
        3.安全代理,用来控制真实对象访问时的权限,一般用于对象应该有不同的访问权限。
        4.智能指引,只当调用真实的对象时,代理处理另外一些事情。例如C#里的垃圾回收,使用对象的时候会有引用次数,如果对象没有引用了,GC就可以回收它了
    */
    var girl = function (naem) { }
    var sneder = function () {
        this.send = function () { }
    }
    var proxy = function () {
        this.send = function () {
            (new sender()).send();
        }
    }
    /*
        八、观察者模式  -- 发布订阅模式
        多个观察者观察一个主题对象,主题对象发生变化,通知所有观察者
    */
    var pubsub = {};
    (function (q) {
        var topics = {},
            subUid = -1;
        //订阅方法
        q.subscribe = function (topic,func) {
            if (!topics[topic]) {
                topics[topic] = [];
            }
            var token = (++subUid).toString();
            topics[topic].push({
                token: koken,
                func: func
            });
            return token;
        }
        //取消订阅
        q.unSubscribe = function (token) {
            for (var m in topics) {
                if (topics[m]) {
                    for (var i = 0, j = topics[m].length; i < j;i++) {
                        if (topics[m].token==token) {
                            topics[m].splice(i, 1);
                            return token;
                        }
                    }
                }
            }
            return false;
        }
        //发布方法
        q.publish = function (topic,args) {
            if (!topics[topic]) {
                return false;
            }
            setTimeout(function () {
                var subscribers = topics[topic],
                    len = subscribers ? subscribers.length : 0;
                while (len--) {
                    subscribers[len].func(topic, args);
                }
            }, 0);
        }
    }(pubsub));
  • 相关阅读:
    C++ 多线程编程
    协程简介(coroutine)
    Yanhua Digimaster 3如何使用免焊适配器重置仪表板?
    Autel OTOFIX IM1 远程/在线技术支持指南
    Xhorse奥迪免焊适配器套装功能列表+常见问题
    如何通过 DDD 构建一辆汽车
    周末复习一波Linux,Linux常用命令总结,还有语法+案例
    Dubbo 基础知识
    GIT版本控制学习博客
    C++检测和定位内存泄漏
  • 原文地址:https://www.cnblogs.com/ruanyifeng/p/4699182.html
Copyright © 2011-2022 走看看