• JS 设计模式


    1、单例模式:产生一个类的唯一实例

    例如:我们在页面中添加遮罩层,每次只能有一个遮罩层存在,因此为单例模式。

    在创建遮罩层之前判断是否已经存在,若没有存在,则创建。

    这里使用闭包,将是mask变量封装在createMask内。

    var createMask=function(){
         var mask;
         return function(){
                return mask||mask=document.body.appendChild(document.createElement('div'));
          }
    }()

    2、工厂模式:产生多个相似的实例

    这里使用的是 var x = Parent()而不是 var x = new Parent();因为后者会可能出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用这种模式。

        var lev=function(){  
           return "play";  
        };  
        function Parent(){  
               var  Child = new Object();   //在内部构造对象并返回
               Child.name="xiaoming";  
               Child.age="20";  
               Child.lev=lev;  
             return Child;  
        };  
          
        var  x = Parent();  
        alert(x.name);  
        alert(x.lev()); 

    3、观察者模式:

    观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 我们平时接触的dom事件. 就是js和dom之间实现的一种观察者模式。它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。(使用回调函数实现)

    观察者模式可以很好的实现2个模块之间的解耦。

    例如实现自定义事件,使用的就是观察者模式。

    详细的内容可见博客:http://www.cnblogs.com/telnetzhang/p/5817033.html 

    4、代理模式

     代理模式的定义是把对一个对象的访问, 交给另一个代理对象来操作。

    我们来举一个简单的例子,假如dudu要送酸奶小妹玫瑰花,却不知道她的联系方式或者不好意思,想委托大叔去送这些玫瑰,那大叔就是个代理那我们如何来做呢?

    // 先声明美女对象
    var girl = function (name) {
        this.name = name;
    };
    
    // 这是dudu
    var dudu = function (girl) {
        this.girl = girl;
        this.sendGift = function (gift) {
            alert("Hi " + girl.name + ", dudu送你一个礼物:" + gift);
        }
    };
    
    // 大叔是代理
    var proxyTom = function (girl) {
        this.girl = girl;
        this.sendGift = function (gift) {
            (new dudu(girl)).sendGift(gift); // 替dudu送花咯
        }
    };

    调用方式就非常简单了:

    var proxy = new proxyTom(new girl("酸奶小妹"));
    proxy.sendGift("999朵玫瑰");

    实际的编程中, 因为性能问题使用代理模式的机会是非常多的。比如频繁的访问dom节点, 频繁的请求远程资源. 可以把操作先存到一个缓冲区, 然后自己选择真正的触发时机。

  • 相关阅读:
    H: Dave的组合数组(二分法)
    G: Dave的时空迷阵(next数组)
    计蒜客 X的平方根(二分法)
    最短路径四种方法
    POJ 2001 Shortest Prefixes(字典树活用)
    HDU 1671 Phone List (qsort字符串排序与strncmp的使用 /字典树)
    快速排序原理
    抓捕盗窃犯
    Hash函数
    Monkey King(左偏树 可并堆)
  • 原文地址:https://www.cnblogs.com/telnetzhang/p/5878229.html
Copyright © 2020-2023  润新知