Question

function Observer() {
    this.fns = [];
}

Observer.prototype = {
    subscribe : function(fn) {
        this.fns.push(fn);
    },

    unsubscribe : function(fn) {
        this.fns = this.fns.filter(
            function(el) {
                if ( el !== fn ) {
                    return el;
                }
            }
        );
    },

    fire : function(o, thisObj) {
        var scope = thisObj || window;
        this.fns.forEach(
            function(el) {
                el.call(scope, o);
            }
        );
    }
};


var fn = function() {};

var o = new Observer;
o.subscribe(fn);
o.fire('here is my data');
o.unsubscribe(fn);

我无法理解这背后的整个概念。我想在我的项目中实现这个模式。我有一个视图，表单提交，它调用WebService并返回响应。

如果我必须在我的项目中实现这个，这是一个简单的请求和响应......我将如何使用它？我知道你在发生变化时通知你的观察者...让我接受我的API请求并得到回复...现在我希望它通过可观察的模式通知我的观点

Answer 1

Observer似乎是一个使用var o = new Observer();调用的构造函数，然后o将是一个引用一堆函数的对象。您可以通过subscribe将功能添加到列表中。并通过unsubscribe

将其从列表中删除

然后，它的全部内容都是“fire”方法，它将遍历函数列表，然后逐个调用每个函数。 "observer pattern"似乎与单身模式非常相似

您熟悉JavaScript中的“watch”方法吗？它是一种通过Firefox支持的方法，可以在任何对象上使用。

document.myform.myfield.watch('value', function (v) {
    alert(v);
    return v;
})

然后，只要对象的值发生变化，就会调用watch函数。所以基本上观察者模式背后的概念是你想要以跨浏览器的方式基本模拟Firefox的监视方法

将对一堆函数或对象的引用抛弃到订阅的list.then中，Observer.fire在每个被监视的对象或函数上调用回调方法。 这样，如果用户执行某种操作（例如点击），那么整个功能列表将通过回调函数进行更新

我希望这会有所帮助。

Answer 2

如果你只想做一个简单的请求，那么在jQuery中（例如使用$.ajax(...)或$.get(...)）看起来像这样：

var requestUrl = "text.html";

// Callback is defined here
var viewCallback = function(data) {
   // this will be called when the request is done
   console.log('view is notified');
   console.log('data looks like this:');
   console.log(data);

   // you could chain method calls to other callbacks here if you'd like
};

// Request is done here
$.ajax({
  url: requestUrl,
}).done(viewCallback);

大多数时候，你只想在做一个上面足够代码的请求时做一件事。使用诸如jQuery或mootools之类的javascript库将使用XMLHttpRequest对象抽象出奇怪的东西。

但是，如果您想要做更高级的事情，我建议您查看执行此类操作的库，例如Radio.js。

在JavaScript中使用Observable模式

2 个答案: