最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

JS设计模式之Facade(外观)模式

XAMPP下载 admin 810浏览 0评论
 概念
Facade模式为更大的代码提供了一个方便的高层次接口,能够隐藏其底层的真是复杂性。
可以把它想成是简化API来展示给其他开发人员。

优缺点
优点

简化接口
使用者与代码解耦
易于使用
缺点

存在隐性成本,性能相对差一些
应用
栗子1

jquery框架中的$(el),对外提供一个简单接口,实现各种元素的选取,用户不必手动调用框架内部的各种方法,使用简单,下面提供了简化了的jq DOM选取的实现。

jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor ‘enhanced’
return new jQuery.fn.init( selector, context, rootjQuery );
};

jQuery.fn = jQuery.prototype = {
init: function( selector, context, rootjQuery ) {
var match, elem;

// HANDLE: $(“”), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}

// Handle HTML strings
if ( typeof selector === “string” ) {

} else if ( selector.nodeType ) {

} else if ( jQuery.isFunction( selector ) ) {

}

return jQuery.makeArray( selector, this );
//将一个 HTMLElements 集合转换成对应的数组对内和merge相同可以操作类数组
}
}
.css()同理

栗子2

这个例子是外观模式和模块模式的组合,对外提供一个更加简单的facade接口。

let 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, value: 10});

转载请注明:XAMPP中文组官网 » JS设计模式之Facade(外观)模式

您必须 登录 才能发表评论!