外观模式在前端中的应用

/**
 * 外观模式的精髓在于对接口进行二次封装，隐藏其内部的复杂度
 * 比如跨浏览器兼容性的封装
 */
var addMyEvent = function(el, ev, fn) {
  if (el.addEventListener) {
    //存在 DOM2 级方法，则使用并传入事件类型、事件处理程序函数和第3个参数 false（表示冒泡阶段）
    el.addEventListener(ev, fn, false)
  } else if (el.attachEvent) {
    // 为兼容 IE8 及更早浏览器，注意事件类型必须加上"on"前缀
    el.attachEvent('on' + ev, fn)
  } else {
    el['on' + ev] = fn //其他方法都无效，默认采用 DOM0 级方法，使用方括号语法将属性名指定为事件处理程序
  }
}

/**
 * 再看一个例子，外观模式和模块化的结合
 * 隐藏内部实现
 */
var module = (function() {
  var _private = {
    i: 5,
    get: function() {
      console.log('current value:' + this.i)
    },
    set: function(val) {
      this.i = val
    },
    run: function() {
      console.log('running')
    },
    jump: function() {
      console.log('jumping')
    }
  }
  return {
    facade: function(args) {
      _private.set(args.val)
      _private.get()
      if (args.run) _private.run()
    }
  }
})()

/**
 * 开发者只需要调用 module.facade( {run: true, val: 10} )
 * 调用后会触发模块当中私有方法，实现对数值的改写
 * 我们并不需要明白 module 内部实现，只需要关心其封装即可
 */
module.facade({ run: true, val: 10 }) // current value: 10 and running
qiuhongbingo / blog

外观模式在前端中的应用 #25
