Основы функционального объекта. Как выйти за рамки простых контейнеров?

Question

На верх у меня вроде светлый, с другой стороны я бешеный с ADD. Если у меня есть простой пример, который соответствует тому, что я уже понимаю, я понимаю. Я надеюсь, что кто-то здесь может помочь мне получить это.

У меня есть страница, которая с интервалом опрашивает сервер, обрабатывает данные, сохраняет их в объекте и отображает в div. Он использует глобальные переменные и выводит в div, определенный в моем html. Мне нужно поместить его в объект, чтобы я мог создавать несколько экземпляров, нацеленных на разные серверы, и отдельно управлять их данными.

Мой код в основном структурирован так ...

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-полному уму лучше понять, что я на самом деле пытаюсь сделать.

Как всегда ... Любая помощь - это помощь.

Спасибо

Пропускаем

UPDATE: Я уже получил это ...

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

Это div, созданный в коде, и ссылка, которую можно вернуть. Вставьте это в функцию, она работает.

ОБНОВЛЕНИЕ СНОВА: У меня есть перетаскиваемые всплывающие окна, созданные и управляемые как объекты с одной функцией-прототипом. Вот скрипка . Это моя первая скрипка! Всплывающие окна имеют ключевое значение для моего проекта, и из того, что я узнал, функциональность данных станет проще.

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. Он предоставляет идентификатор id и заглушку URL. Если у вас есть другие параметры, которые различаются в зависимости от div, поместите их в карту.

Затем вызовите getRecent() один раз для каждого объекта карты. Внутри функции вы можете развернуть объект карты и получить его параметры.

Вы также хотите установить этот интервал в цикле, используя ту же параметризацию. Я сам предпочел бы использовать setTimeout (), но это только я.

Вам необходимо предоставить функцию loadResource(), которая принимает URL (строку) и возвращает HTML, доступный по этому URL.

---

Это решает проблему модульности, но это не «объектный» или основанный на классе подход к проблеме. Я не уверен, почему вы захотите такую ​​простую задачу. Вот взломать объект, который делает то, что вы хотите:

(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. Вы можете вызвать отмену (), чтобы остановить обновление. Я думаю, вы могли бы добавить больше функций, чтобы расширить его возможности.

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 в первом посте. Я достаточно умен, чтобы знать, какими могут быть сложные объекты, и когда я ищу примеры и объяснения, они раскрывают определенные слои тех сложностей, которые заставляют мой ум просто плавать. Трудно углубиться в простые правила, с которых вы начинаете на первом этаже. Каков охват этого? Конечно, когда-нибудь я это выясню, но простая истина в том, что ты должен ссылаться на «это».

Спасибо

Хотелось бы, чтобы у меня было что предложить.

Пропустить