javascript - 功能对象基础知识。如何超越简单的容器？

Question

好的一面是我还算乐观，坏的一面是我被 ADD 搞得筋疲力尽。如果我有一个简单的例子，它符合我已经理解的内容，我就明白了。我希望这里有人可以帮助我得到它。

我有一个页面，它会每隔一段时间轮询服务器、处理数据、将数据存储在一个对象中，然后将其显示在一个 div 中。它使用全局变量，并输出到我的 html 中定义的 div。我必须将它放入一个对象中，这样我才能创建多个实例，指向不同的服务器，并分别管理它们的数据。

我的代码基本上是这样构造的......

HTML...

<div id="server_output" class="data_div"></div>

JavaScript...

// globals
var server_url = "http://some.net/address?client=Some+Client";
var data = new Object();
var since_record_id;
var interval_id;

// window onload
window.onload(){

  getRecent();

  interval_id = setInterval(function(){
    pollForNew();
  }, 300000);
}

function getRecent(){
  var url = server_url + '&recent=20';
  // do stuff that relies on globals
  // and literal reference to "server_output" div.
}

function pollForNew(){
  var url = server_url + '&since_record_id=' + since_record_id;
  // again dealing with globals and "server_output".
}

我将如何将其格式化为一个对象，并将全局变量定义为属性和成员函数(？)最好是在创建时构建自己的输出 div，并返回对它的引用。所以我可以做类似...

dataOne = new MyDataDiv('http://address/?client');
dataOne.style.left = "30px";

dataTwo = new MyDataDiv('http://different/?client');
dataTwo.style.left = "500px";

我的代码实际上比这复杂得多，但我想如果我能理解这一点，我就可以将它应用到我已有的代码中。如果有什么我要求的是不可能的，请告诉我。我打算解决这个问题，并且会。只需输入问题就可以帮助我的 ADD 困惑头脑更好地处理我实际想要做的事情。

一如既往...任何帮助都是帮助。

谢谢

跳过

更新: 我已经得到了这个...

$("body").prepend("<div>text</div>");
this.test = document.body.firstChild;
this.test.style.backgroundColor = "blue";

那是在代码中创建的一个 div，以及一个可以返回的引用。把它放在一个函数中，它起作用了。

再次更新: 我已经创建了可拖动的弹出窗口并将其作为具有一个原型(prototype)函数的对象进行操作。这是 fiddle .那是我的第一把 fiddle !弹出窗口是我项目的关键，据我所知，数据功能将变得很容易。

Answer 1

这非常接近:

// globals
var pairs = {
    { div : 'div1', url : 'http://some.net/address?client=Some+Client' } ,
    { div : 'div2', url : 'http://some.net/otheraddress?client=Some+Client' } ,
};

var since_record_id; //?? not sure what this is
var intervals = [];

// window onload
window.onload(){  // I don't think this is gonna work

    for(var i; i<pairs.length; i++) {
        getRecent(pairs[i]);
        intervals.push(setInterval(function(){
            pollForNew(map[i]);
        }, 300000));
    }
}

function getRecent(map){
    var url = map.url + '&recent=20';
    // do stuff here to retrieve the resource
    var content = loadResoucrce(url);  // must define this
    var elt = document.getElementById(map.div);
    elt.innerHTML = content;
}

function pollForNew(map){
    var url = map.url + '&since_record_id=' + since_record_id;
    var content = loadResoucrce(url); // returns an html fragment
    var elt = document.getElementById(map.div);
    elt.innerHTML = content;
}

而 html 显然需要两个 div:

<div id='div1' class='data_div'></div>
<div id='div2' class='data_div'></div>

您的“window.onload”——我认为这行不通，但也许您已正确设置它并且不想费心输入所有代码。

关于我建议的代码 - 它在全局范围内定义了一个数组，一个对象数组。每个对象都是一张 map ，如果您愿意，也可以是一本字典。这些是每个 div 的参数。它提供 div id 和 url stub 。如果您有其他参数根据 div 而变化，请将它们放在 map 中。

然后，为每个 map 对象调用一次 getRecent()。在函数内部，您可以打开 map 对象并获取其参数。

您还想在循环内设置该间隔，使用相同的参数化。我自己更愿意使用 setTimeout()，但那只是我。

您需要提供 loadResource() 函数，该函数接受 URL(字符串)并返回该 URL 可用的 HTML。

---

这解决了模块化问题，但它不是“一个对象”或基于类的方法来解决问题。我不确定您为什么想要一个完成如此简单任务的人。这是一个可以执行您想要的操作的对象:

(function() {

    var getRecent = function(url, div){
        url = url + '&recent=20';
        // do stuff here to retrieve the resource
        var content = loadResoucrce(url);  // must define this
        var elt = document.getElementById(div);
        elt.innerHTML = content;
    }

    var pollForNew =  function(url, div){
        url = url + '&since_record_id=' + since_record_id;
        var content = loadResoucrce(url); // returns an html fragment
        var elt = document.getElementById(div);
        elt.innerHTML = content;
    }

    UpdatingDataDiv = function(map) {
        if (! (this instanceof arguments.callee) ) {
            var error = new Error("you must use new to instantiate this class");
            error.source = "UpdatingDataDiv";
            throw error;
        }

        this.url = map.url;
        this.div = map.div;
        this.interval = map.interval || 30000; // default 30s
        var self = this;

        getRecent(this.url, this.div);

        this.intervalId = setInterval(function(){
            pollForNew(self.url, self.div);
        }, this.interval);
    };

    UpdatingDataDiv.prototype.cancel = function() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
            this.intervalId = null;
        }
    }

})();

var d1= new UpdatingDataDiv('div1','http://some.net/address?client=Some+Client');
var d2= new UpdatingDataDiv('div2','http://some.net/otheraddress?client=Some+Client');
   ...
 d1.cancel();

但是您可以使用 d1 和 d2 做很多事情。您可以调用 cancel() 来停止更新。我想您可以添加更多功能来扩展其功能。