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

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

您可能感兴趣的文章：
[设计模式][面板模式][Javascript]
php模板引擎有哪些
DIV CSS网页模板开发初始化CSS的好处
深入php设计模式实例详解
帝国cms常见问题收集
php设计模式是什么，该如何理解
python常用的几种设计模式是什么
ThinkPad 11e：电源计划设置为飞行模式，无法看到可用的无线网络
用 Smarty 分离 PHP 应用程序中的形式与功能
PHP设计模式概述