[设计模式][面板模式][Javascript]

yexiaobai 发布于2019-08-21 10:18 / 2359人阅读

摘要：对于客户来说只需要知道面板层，而不需要知道被面板层包装的子系统，从而降低耦合。职责是从中获取接口，调用对应的服务。在层，其实也做了一个的设计，它把各个模块看做是子系统，然后进行封装出需要的角色提供的的面板实现调用参考

  The Facade Pattern is an object that provide a simplified interface to a larger body of code, such as a class library. A Facade can

  + make a software library easier to use, understand and test, since the facade has convenient methods for common tasks

  + make the library more readable, for the same reason;

  + reduce dependencies of outside code on the inner working of a library, since most code uses the facade, thus allowing more flexibility in developing the system

  + wrap a poorly designed collection of APIs with a single well-designed API

  From http://en.wikipedia.org/wiki/Facade_pattern

定义

外观模式的目标是为子系统提供一个一致的"界面"，定义了一个高层的接口，这个接口使得这一子系统更加容易使用

客户如果直接使用子系统，需要对子系统“知道”的更多，“知道”本身就增加了耦合
在子系统上抽象出一个面板层，面板层是对子系统爆出路的接口的包装。对于客户来说只需要知道面板层，而不需要知道被面板层包装的子系统，从而降低耦合。
如果有一天更换子系统，同样的只要抽象出一致的面板层，对客户来说调用没有发生变化。

需求

对于智能手机的开发，新兴起一种Hybrid开发，在手机App中嵌入web，通过javascript与手机底层的通信，来实现web本身不能实现的功能

native层需要暴露出一组公共的接口，web层通过调用这些接口达到同样的工作目标

类图

工作中的实际案例，所以对Hybrid这里的设计掺杂了桥接模式和面板模式两种，另外还有些移动端Hybrid的知识补充。

关于Hybrid的知识，另外有文档补充，简单说一下，Hybrid核心的URL Scheme，关于URL Scheme可以参考这篇文章，很犀利：http://xujiwei.com/blog/2011/09/ios-app-custom-url-scheme-design/

对于URL Scheme的支持，Android从4.4开始，IOS开始的版本较早，未考证。可以把url schem看做是暴露出来的API，把native底层看做是一个子系统，所以需要构建UrlSchemeFacade来封装子系统露出来的接口。

HybridBridge职责是从UrlSchemeFacade中获取接口，调用对应的服务。
在Native层，其实也做了一个Facade的设计，它把各个模块看做是子系统，然后进行封装出需要的URL Scheme

角色

UrlSchemeFacade (Facade): Native提供的Url Scheme的面板

实现

var prototype = require("prototype");

var UrlSchemeFacade = prototype.Class.create({

  nativeInterfaceMap: {
    "geo.locate": "ctrip://wireless/geo/locate",
    "device.info": "ctrip://wireless/device/info"
  },

  getUrlScheme: function(key) {
    return this.nativeInterfaceMap[key];
  }

});

UrlSchemeFacade.API = {
  "GEOLOCATE":"geo.locate",
  "DEVICEINFO": "device.info"
}

var HybridBridge = prototype.Class.create({

  initialize: function(facade) {
    this.urlSchemeFacade = facade;
  },

  request: function(api) {
    var url = this.urlSchemeFacade.getUrlScheme(api);
    console.log(url);

    // @todo 调用url scheme
    // window.location.replace = url;
  }

});

var Main = function () {
  var urlSchemeFacade = new UrlSchemeFacade();
  var hybridBridge = new HybridBridge(urlSchemeFacade);

  hybridBridge.request(UrlSchemeFacade.API.GEOLOCATE);
}

Main();

参考

http://baike.baidu.com/view/1151448.htm

http://www.cnblogs.com/kid-li/archive/2006/07/10/446904.html

http://en.wikipedia.org/wiki/Facade_pattern

GPU云服务器云服务器面板模式 javascript设计模式 javascript命令模式 javascript严格模式

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

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

高性能JavaScript（文档）

摘要：最近在全力整理高性能的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。最近在全力整理《高性能JavaScript》的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。前端开发文档高性能JavaScript 第1章：加载和执行脚本位置阻止脚本无阻塞的脚本延迟的脚本动态脚本元素 XMLHTTPRequest脚本注入推荐的无阻塞模式...

RayKr 2019-08-22 18:32 评论0 收藏0
在 Chrome 中 JavaScript 数组到底占用了多少内存？

摘要：原文译者因为我原作者的代码使用的很大的内存，所以我看了一下字符串对象数字和数组分别占用了多少内存。位是字节，但是每个数字平均占用了字节。同样，将每个空数组的大小显示为字节，每个空对象的大小为字节。另外，并不是所有的数组在内部都是相同的。原文：How much memory do JavaScript arrays take up in Chrome?译者：justjavac 因为我（...

Ajian 2019-08-20 18:04 评论0 收藏0
一个前端程序猿的Sublime Text3的自我修养

摘要：效果如下配置方法参考下的配置方法完美支持提供了比默认更好的语法高亮，而且他完美支持。语法高亮默认安装的对的支持让人抓狂，帧动画别开玩笑了你只会看到一片白色的纯文本一样的代码。事实上不光，我建议用完全替代原来的来完成语法高亮。文章转载自本人的博客《三省吾身丶丶》点击查看喜欢的话请疯狂的推荐吧！ ^_^ 本文章会在本人有插件或者设置更新时，进行不定时更新偷懒了，图片地址直接设置的博客...

KunMinX 2019-08-22 10:59 评论0 收藏0
Visual Studio Code前端开发使用之旅

摘要：更好的断点控制启用禁用重新启用可以在调试视图中的断点区域设置。编辑器边距中的断点一般用红色的实心圆表示。前端开发必备插件功能性插件匹配标签，关闭对应的标签。这可以使得团队内的书写更为规范且具有一致性。 Visual Studio Code是个现下比较流行的编辑器，启动非常快，完全可以用来代替其他文本文件编辑工具。又可以用来做开发，支持各种语言，相比其他IDE，轻量级完全可配置还集成Gi...

stormjun 2019-08-21 18:46 评论0 收藏0
如何更愉快地使用rem —— 别说你懂CSS相对单位

摘要：值得注意的是，这个设置对使用或其他绝对单位定义的字号大小无效。事实上，提供了一个在和间的相对单位折中解决方案，而且更易于使用。图使用相对单位和继承字号的面板下面是模板，加到你的页面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其...

Snailclimb 2019-08-30 15:54 评论0 收藏0