为复杂子系统提供一个更高层次的统一接口,只能通过该接口访问子系统,这种模式称为外观模式。
如果多个功能的计算或逻辑很复杂,并且相对独立,就可以通过外观模式来封装这些功能,简化底层操作方法。
比如利息的计算问题,需要工作人员具有深厚的业务水平,但如果开发出一套系统来,只要输入金额,就可以计算出利息,这种场景就非常适合使用外观模式。
例子:
//外观模式 var A = { three_M: function (money) { return money * 0.023 * (3 / 12); }, six_M: function (money) { return money * 0.025 * (6 / 12); }, one_Y: function (money) { return money * 0.027 * (1 / 12); }, } //测试 console.log(A.three_M(10000)); //输出 57.5
通过这个小型系统,计算利息变得简单。
除此之外,在 JavaScript 中,也会将外观模式用于处理浏览器的兼容性问题。
比如 IE9 以下不支持绑定事件的 addEventListener 方法,需要使用 attachEvent。
例子:
<button>绑定事件</button> <script> //封装工具类 var EventUtil = { addHandler: function(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent('on' + type, handler); } else { element['on' + type] = handler; } }, }; //调用工具类 var btn = document.getElementsByTagName("button")[0]; EventUtil.addHandler(btn, "click", function() { alert("成功") }); </script>
外观模式有一个致命的缺点就是:一旦发现有问题,唯一能做的就是修改外观模式的代码,这种修改风险非常大,因此需要慎之又慎。