3

JavaScript 设计模式汇总

 3 years ago
source link: https://blog.skrskrskrskr.com/article/JavaScript%20%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E6%B1%87%E6%80%BB/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

单例模式算是最简单的一种设计模式,也是 JavaScript 中特别常见一种设计模式。比如创建一个对象var o = {},当对象 o 作为一个全局变量共享时,可以算作一种单例模式。单例模式的核心是确保只有一个实例,并提供全局访问。
实际应用中,对话框等全局唯一的UI组件,会使用到单例模式。以 Dialog 组件为例,我通常会为一个 Dialog 类写一个 getInstance() 的静态方法。代码如下:

var getInstance = function() {
var _instance;
return function() {
if (!_instance) {
_instance = new Dialog();
}
return _instance;
}
}

其实就是利用了闭包,将创建的实例缓存了起来,这样保证同一个页面只会存在一个 Dialog 实例。

发布-订阅模式

发布-订阅模式,又称观察者模式。它定义了对象间一种一对多的关系。JavaScript中发布-订阅模式可以说无处不在。比如最常见的事件机制,就是一种发布-订阅模式。下面,我们来实现一个简单的事件机制。

var Event = (function(){
var list = {};
var listen = function(type, fn) {
if (!list[type]) {
list[type] = [];
}
list[type].push(fn);
}
var trigger = function() {
var type = Array.prototype.shift.call(arguments);
var fns = list[type];
if (!fns || !fns.length) {
return false;
}
for (var i = 0; i < fns.length; i++) {
fns[i].apply(this, arguments);
}
}
var remove = function(type, fn) {
var fns = list[type];
if (!fns || !fns.length) {
return false;
}
fns.forEach(function(_fn, i) {
if (_fn == fn) {
fns.splice(i, 1);
}
})
}
return {
listen: listen,
trigger: trigger,
remove: remove
}
})();

Event.listen('click', function(data) {
console.log('you clicked: ' + data);
})
Event.trigger('click', 'hahaha');



About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK