听飞狐聊JavaScript设计模式系列08

saucxs 发布于2019-08-21 10:48 / 2074人阅读

摘要：本回内容介绍上一回聊到工厂模式，略抽象。官方说法，门面模式是指提供一个统一的接口去访问多个子系统的多个不同的接口，为子系统中的一组接口提供一个统一的高层接口。使得子系统更容易使用。

本回内容介绍

上一回聊到工厂模式，略抽象。
介一回，咱聊门面模式就比较容易了，门面模式也叫外观模式(facade)。
官方说法，门面模式是指提供一个统一的接口去访问多个子系统的多个不同的接口，为子系统中的一组接口提供一个统一的高层接口。使得子系统更容易使用。
说白了，就是解耦类的接口。初次听到这词儿的童鞋看到代码后估计会有亲切感，开始咯：

1. 门面模式

随便想个玩意儿吧，比如一个考勤系统，一个哥们儿上班打卡，就简单模拟实现下，敲代码咯：

// 定义一个接口，还记得吧，不记得就看第五回
var PersonInterface = new Interface("PersonInterface",["getInfo"]);

// 这里简单点，就定义一个人的类
var Person = function(name){
    this.name = name;
    this.getInfo = function(){
        return "名字:"+this.name;
    }

    // 验证实现接口
    Interface.ensureImplements(this,PersonInterface);
}

// 定义考勤系统接口
var AttendSystemInterface = new Interface("attendSystemInterface",["records"]);
// 考勤系统
var AttendSystem = function(){
    this.attendTime = new Date().toLocaleString();
    this.records = function(){
        return "签到时间:"+this.attendTime;
    }
    // 验证实现接口
    Interface.ensureImplements(this,AttendSystemInterface);
}


// 这里就是个简单的门面客户端，怎么实现都在这完成
function facade(person,attendSystem){
    var res = person.getInfo()+"------"+attendSystem.records();
    alert(res);
}

// 简单的测试一下
var fox = new Person("飞狐");
var as = new AttendSystem();
facade(fox,as);    //名字:飞狐------签到时间:2015/11/18 下午18:08:08

这就是简单门面模式的模拟了，比较好理解，很多网上的资料都用JS的DOM2事件例子来讲的门面模式，走走过场来一个好了，看下一个例子，走你...

2. 门面模式之DOM2事件

在DOM2级事件中的两个方法（注：W3C，IE8及之前的浏览器不支持）：
addEventListener(),removeEventListener()
所有DOM 节点中都包含这两个方法，并且都接受3个参数：事件名，函数，冒泡或捕获的布尔值（true 表示捕获，false 表示冒泡）；
在IE中实现了类似的方法：attachEvent() 和 detachEvent()，这两个方法接受相同的参数：事件名称和函数。

var EventUtil = {
    // 添加事件
    addHandler: function(el,type,fn){
        if(el.addEventListener){
            // W3C
            el.addEventListener(type,fn,false);
        }else if(el.attachEvent){
            // IE
            el.attachEvent("on"+type,fn);
        }else{
            el["on"+type] = fn;
        }
    },
    // 移除事件
    removeHandler: function(el,type,fn){
        if(el.removeEventListener){
            // W3C
            el.removeEventListener(type,fn,false);
        }else if(el.detachEvent){
            // IE
            el.detachEvent("on"+type,fn);
        }else{
            el["on"+type] = fn;
        }
    },
    /*
     * 获取事件，这里注意一下IE方式( window.event )获取事件对象，
     * 但是在Firefox中会报错，提示：window.event is undefined，
     * 说明Firefox不支持IE方式获取事件对象而是以句柄的第一个参数传入的
     */ 
    getEvent:function(event){
        return event?event:window.event;
    },
    /*
     * 获取事件作用的元素
     * IE:有srcElement属性，没有target属性。
     * firefox:有target属性，没有srcElement属性。
     */ 
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    // 取消事件的默认动作
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{    // IE阻止默认行为
            event.returnValue = false;
        }
    },
    // 取消冒泡
    stopPropagation:function(event){
        // W3C的取消冒泡
        if(event.stopPropagation){
            event.stopPropagation();
        }else{    // IE的取消冒泡
            event.cancelBubble = true;
        }
    }

};

document.write("");
var btn = document.getElementById("btn");
EventUtil.addHandler(btn,"click",function(){
    alert("Are you ok!");
});

这个例子特简单吧，是否有似曾相识的感觉，是的，这是模拟高程3上事件的例子，这里对事件封装得很简单，而在IE中还有这几个区别：
IE 不支持捕获，只支持冒泡；
IE 添加事件不能屏蔽重复的函数；
IE 中的 this 指向的是 window 而不是 DOM 对象；
IE 无法接受 event 对象，但使用了 attachEvent()却可以，只是有区别；
我们这里只是聊门面模式，简单的模拟，JS的事件系统有很多可以细细品味的地方，以后聊到ExtJS事件系统源码的时候还会详细的刨根问底，好像又扯多了...

又到装逼时候了。双11的价格挺诱人吧，我是没忍住买了一个本本，尼玛同款电脑，天猫比京东便宜860块吖~~

这一回聊的内容少，难度很小，比较好理解。
下面的内容很简单，聊一下JS的事件委托...

JS事件委托

高程3上对事件委托的描述是，事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。接着刚刚封装的事件例子，继续写：


  飞狐
  帅狐
  飞狐就是帅

// 获取id
function $(id){
    return document.getElementById(id);
}
var oUl = $("ul");
var oLi = oUl.getElementsByTagName("li");

// 不用事件委托，就得循环每个子li，分别绑定事件
for(var i=0,len=oLi.length;i
这个是拿书上的例子来改的，目的是为了让大家更方便的理解，可以看出事件委托占用内存少，读取速度快，性能更高。
这一回，主要聊了门面模式，DOM2级事件，事件委托，难度比较小~~
下一回，聊聊代理模式，也比较简单。
客观看完点个赞，推荐推荐呗，嘿嘿~~

注：此系飞狐原创，转载请注明出处

云服务器专线服务 javascript专题系列 javascript深入系列飞狐 javascript设计模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86224.html

听飞狐聊JavaScript设计模式系列11

摘要：桥接模式之特权函数特权函数，用一些具有特权的方法作为桥梁以便访问私有空间，可以回忆一下之前的系列。连续自然数分组，计算最多组的个数将至这个连续自然数分成组使每组相加的值相等。个数组中数字最多的一组有个此时的和为。本回内容介绍上一回，聊了适配器模式，图片预加载，介一回，聊桥接模式（Bridge），跟之前一样，难度比较小，桥接模式将抽象部分与它的实现部分分离，通过桥接模式联系彼此，同时...

wanglu1209 2019-08-19 17:12 评论0 收藏0
听飞狐聊JavaScript设计模式系列15

摘要：介一回，聊策略模式，策略模式定义了一系列的算法，并将每一个算法封装起来，而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化。下一回，聊一聊的享元模式。本回内容介绍上一回，聊了聊链式编程，模拟了jQuery和underscore.js,并写了一个遍历多维数组的函数。介一回，聊策略模式（Strategy），策略模式定义了一系列的算法，并将每一个算法封装起来，而且使它们...

guyan0319 2019-08-22 11:00 评论0 收藏0
听飞狐聊JavaScript设计模式系列06

本回内容介绍上一回聊到JS中模拟接口，装饰者模式，掺元类，分析了backbone的继承源码，感觉还好吧！介一回，偶们来聊一下在JS单例模式(singleton)，单例模式其实运用很广泛，比如：jquery，AngularJS，underscore吖虾米的都是单例模式，来吧，直接开始咯： 1. 单例模式保证一个类只有一个实例，从全局命名空间里提供一个唯一的访问点来访问该对象。其实之前写过的对象...

hiYoHoo 2019-08-21 10:45 评论0 收藏0
听飞狐聊JavaScript设计模式系列02

摘要：本回内容介绍上一回聊到数据类型，简单的过了一遍，包括个数组新特性等，这一回来聊聊对象，结合数组来实战一些例子，在做题中成长，记忆会更深刻，来吧，开始咯创建实例的方式有两种使用操作符后跟构造函数飞狐使用对象字面量表示法飞狐也可以飞狐这种写法与本回内容介绍上一回聊到JS数据类型，简单的过了一遍，包括9个数组新特性等，这一回来聊聊Object对象，结合数组来实战一些例子，在做题中成长，记...

tangr206 2019-08-21 10:44 评论0 收藏0
听飞狐聊JavaScript设计模式系列10

摘要：本回内容介绍上一回，聊了代理模式，虚拟代理，图片懒加载，介一回，也比较容易，适配器模式，用一个新的接口对现有类的接口进行包装，处理类与的不匹配。这一回，主要聊了适配器模式，图片预加载，主要还是理解下一回，聊一聊桥接模式，顺便做一做计算题。本回内容介绍上一回，聊了代理模式，虚拟代理，图片懒加载，介一回，也比较容易，适配器模式（Adapter），用一个新的接口对现有类的接口进行包装，处...

yexiaobai 2019-08-19 17:12 评论0 收藏0