JavaScript 设计模式读书笔记(六)——门面模式

pubdreamcc 发布于2019-08-19 14:44 / 2251人阅读

摘要：简单的门面模式实例事件绑定函数门面模式的作用是将复杂的接口进行包装，变成一个便于使用的接口。还是以事件相关为例，事件绑定中还有两个常用的分别是和。

门面模式是什么，与其我去用笨拙的语言去解释，不如看下面这张图，曾经在网上很火的一张图片，说的是一位儿子为他的爸妈设置的电脑桌面。

有了这些起好名字的快捷方式，身为电脑盲的爸妈就不需要去了解何为浏览器，何为播放器了，照着指示点就是了。这些快捷方式相当于在用户和计算机程序之间架起了一座桥梁，不需要每个用户都像电影里的黑客一样敲着一行行的代码才能使用计算机的功能。这就是门面模式的意义——把复杂的功能（接口）经过包装，让用户（开发者）能间接地，比较简单地去使用（调用）它们，简化使用（开发）的难度。

简单的门面模式实例——事件绑定函数

门面模式的作用是将复杂的接口进行包装，变成一个便于使用的接口。在很多的JavaScript库中都能找到门面模式的应用，例如jQuery，我们在用jQuery进行事件绑定的时候，简单的调用bind()，on()等方法就可以了，并不用对不同浏览器的兼容性问题进行处理，兼容性的处理在jQuery内部已经完成，就是通过门面的思想。

我们就以事件绑定为例，来展现一下门面模式是什么：

// 实现一个通用的，跨多种浏览器的时间绑定函数
function addEvent(el, type, fn) {
  if (window.addEventListener) {
    el.addEventListener(type, fn, false);
  } else if (window.attachEvent) {
    el.attachEvent("on" + type, fn);
  } else {
    el["on" + type] = fn;
  }
}

通过能力检测，对浏览器支持的API进行判断，自动调用有效的事件绑定API来绑定时间。开发者在绑定时间的时候，就不需要写冗长的判断代码，直接专注于业务就好，这是门面模式带来的最直接的便利。

这里门面模式的作用是处理浏览器的兼容性，门面模式的另一个作用是对多个函数进行组合管理。

还是以事件相关API为例，事件绑定中还有两个常用的API分别是event.stopPropagation()和event.preventDefault()。这两个API在IE浏览器中是不兼容的，在IE中它们分别对应的是event.cancelBubble = true和event.returnValue = false。通过门面模式我们的目标是：
没有蛀牙~~~
以及：

+---------------+      +------------+      +--------------+      +-----------+
|stopPropagation|      |cancelBubble|      |preventDefault|      |returnValue|
+---------------+      +------------+      +--------------+      +-----------+
        |                    |                    |                        |
        +--------------------+                    +------------------------+
                   ↓                                          ↓
           +---------------+                           +--------------+
           |stopPropagation|                           |preventDefault|
           +---------------+                           +--------------+
                   |                wrapped in                 |
                   +-------------------------------------------+
                                        ↓
                          +-----------------------------+
                          |          ╭ stopPropagation |
                          | stopEvent                   |
                          |          ╰ preventDefault  |
                          +-----------------------------+

通过代码事件就是这样：

var eventUtil = {
  stopPropagation: function(ev) {
    if (ev.stopPropagation) {
      ev.stopPropagation();
    } else {
      ev.cancelBubble = true;
    }
  },
  preventDefault: function(ev) {
    if (ev.preventDefault) {
      ev.preventDefault();
    } else {
      ev.returnValue = false;
    }
  },
  stopEvent: function(ev) {
    eventUtil.stopPropagation(ev);
    eventUtil.preventDefault(ev);
  }
}

这样，在事件绑定函数中，如果需要取消冒泡和默认事件的话，直接调用eventUtil.stopEvent(ev)即可，该方法将所需的子方法进行了包装，也处理了兼容性问题。

门面模式在模块中的应用

结合以前说过的对象创建模式，门面模式可以应用在模块之中，通过对私用方法的包装提供简化的公用方法，开发者维护模块时只需修改私用方法就可以调整公用方法的实现。

var orange = (function() {
  // 私用方法包装对象
  var _privateMethod = {
    orangeValue: 10,
    getValue: function() {
      console.log(this.orangeValue);
    },
    setValue: function(value) {
      this.orangeValue = value;
    }
  }

  // 返回公用方法
  return {
    setOrangeValue: function(value) {
      _privateMethod.setValue(value);
      _privateMethod.getValue();
    }
  }
})();

门面模式能提供编写方式的灵活性，通过对底层子方法的封装，既简化了代码又降低了对底层系统的耦合。在大型系统工具库的使用中有重要的意义。但在实际项目中还是要考虑代码量的轻便性，如果业务只需要一些小粒度的方法的话，就没有必要使用包装了很多无用方法的门面函数了，这需要开发者灵活判断。

GPU云服务器云服务器设计模式学习笔记 head-first设计模式笔记读书笔记编程思想读书笔记

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

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

JavaScript 设计模式读书笔记(七)——适配器模式

摘要：与门面模式的联系本文要说的适配器模式和上一篇门面模式在思想上有相似之处，所以放在一起说。我们以中的一个为例，说说实际应用中的适配器模式的使用方法。而如果实现层的问题不大，要解决一部分适配问题的话，适配器模式就是很好的选择了。与门面模式的联系本文要说的适配器模式和上一篇门面模式在思想上有相似之处，所以放在一起说。它们都对类的接口进行了一些改变。门面模式是把相似的或是完成相关任务的接...

AZmake 2019-08-19 14:46 评论0 收藏0
《Java应用架构设计:模块化模式与OSGi》读书笔记

摘要：本书概括以软件系统为例，重点讲解了应用架构中的物理设计问题，即如何将软件系统拆分为模块化系统。容器独立模块不依赖于具体容器，采用轻量级容器，如独立部署模块可独立部署可用性模式发布接口暴露外部配置使用独立的配置文件用于不同的上下文。本文为读书笔记，对书中内容进行重点概括，并将书中的模块化结合微服务、Java9 Jigsaw谈谈理解。本书概括以Java软件系统为例，重点讲解了应用架构...

seanHai 2019-08-16 10:56 评论0 收藏0
Effective JavaScript读书笔记（一）

摘要：如果为假值，不传或者传入，函数都会返回但是，传入这个值是完全有可能的，所以这种判断形势是不正确的或者使用来判断也可以原始类型优于封装类型对象拥有六个原始值基本类型布尔值，数字，字符串，，和对象。作为一个前端新人，多读书读好书，夯实基础是十分重要的，正如盖楼房一样，底层稳固了，才能越垒越高。从开始学习到现在，基础的读了红宝书《JavaScript高级程序设计》，犀牛书《JavaScri...

zhoutao 2019-08-21 17:35 评论0 收藏0
《javascript高级程序设计》第六章读书笔记之 javascript对象的几种创建方式

摘要：三种使用构造函数创建对象的方法和的作用都是在某个特殊对象的作用域中调用函数。这种方式还支持向构造函数传递参数。叫法上把函数叫做构造函数，其他无区别适用情境可以在特殊的情况下用来为对象创建构造函数。一、工厂模式工厂模式：使用字面量和object构造函数会有很多重复代码，在此基础上改进showImg(https://segmentfault.com/img/bVbmKxb?w=456&...

xiaotianyi 2019-08-23 14:31 评论0 收藏0
《javascript高级程序设计》第六章读书笔记之 javascript继承的6种方法

摘要：继承的是超类型中构造函数中的属性，如上继承了属性，但没有继承原型中的方法。上述造成的结果是子类型实例中有两组超类型的构造函数中定义的属性，一组在子类型的实例中，一组在子类型实例的原型中。 ECMAScript只支持实现继承，主要依靠原型链来实现。与实现继承对应的是接口继承，由于script中函数没有签名，所以无法实现接口继承。一、原型链基本思想：利用原型让一个引用类型继承另一个引用...

孙吉亮 2019-08-23 14:38 评论0 收藏0