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，以及可以返回的引用。把它粘在一个函数中，它可以工作。

再次更新：我已经创建了可拖动的弹出窗口并将其作为具有一个原型函数的对象进行操作。这是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` - 我认为它不会起作用，但也许你已经正确设置它并且不想费心插入所有代码。

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

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

您还希望使用相同的参数化在循环内设置该间隔。我自己更喜欢使用setTimeout（），但那只是我。

您需要提供接受URL（字符串）的loadResource()函数，并返回该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（）来停止更新。我想你可以添加更多功能来扩展它的功能。

Answer 2

好的，弄清楚我需要什么。这很直接。

首先忽略window.onload，该对象被定义为一个函数，当您实例化一个新对象时，它会运行该函数。在功能中进行设置。

其次，对于您希望使对象本地化的全局变量，只需在对象中将它们定义为this.variable_name;即可。这些变量在整个对象及其成员函数中都是可见的。

第三，将您的成员函数定义为object.prototype.function = function(){};

第四，对于我的情况，对象函数应该return this;这允许常规程序流使用点表示法检查对象的变量。

这是我正在寻找的答案。它需要我的非功能性示例代码，并将其重新打包为对象......

function ServerObject(url){
  // global to the object
  this.server_url = url;
  this.data = new Object();
  this.since_record_id;
  this.interval_id;

  // do the onload functions
  this.getRecent();

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

  // do other stuff to setup the object

  return this;
}

// define the getRecent function
ServerObject.prototype.getRecent = function(){
  // do getRecent(); stuff
  // reference object variables as this.variable;
}

// same for pollForNew();
ServerObject.prototype.pollForNew = function(){  
  // do pollForNew(); stuff here.
  // reference object variables as this.variable;
}

然后在你的程序流程中你会做类似的事情......

var server = new ServerObject("http://some.net/address");
server.variable = newValue; // access object variables

我在第一篇文章中提到了ADD。我很聪明地知道复杂的物体是多么复杂，当我寻找实例和解释时，它们暴露了那些让我的思绪游泳的复杂性的某些层面。很难深入了解让您从一楼开始的简单规则。 “这个”的范围是什么？当然，有一天我会想到这一点，但简单的事实是，你必须引用'this'。

由于

我希望我能提供更多。

跳过

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

2 个答案: