Доступ к элементам JavaScript из пользовательского объекта

Question

Это, должно быть, очень глупый вопрос, но я просто не могу заставить его работать.

Я создаю свой собственный UIKit для iOS. (Веб-сайт, который позволит iPhone-подобные интерфейсы).

Но я пытаюсь создать библиотеку JavaScript, которую можно использовать для изменения нескольких элементов документа. Например, установите пользовательский цвет фона при загрузке документа.

Я пытаюсь сделать это с помощью объектно-ориентированного JavaScript. Как это:

var UI = new Interface();
UI.setBackground("#000");

Как мне этого достичь? (Таким образом, пользовательский объект «UI» и (пример), как изменить цвет фона документа, ВНУТРИ объекта.)

Answer 1

Как и код Silverstrike, но вы можете передать целевой объект в конструкторе интерфейса, чтобы не было проблем в будущем.

function Interface(target) {
    target = target || document.body;
    this.setBackground = function (color) {
        target.style.background = color || 'white';
    };
}

Хорошо, теперь вы можете сделать это:

var UI = new Interface(document.body);
UI.setBackground("#000");

или даже в некоторых случаях, когда вы применяете интерфейс в global scope! ТОЛЬКО!:

var UI = new Interface(this.body);
UI.setBackground("#000");

Также будет работать так:

var UI = new Interface();
UI.setBackground("#000");

Answer 2

Вы можете сохранить ссылку на DOM внутри объекта JS и переписать ее при необходимости.

function Interface() {
    this.setBackground = function (color) {
        this.pointTo.style.background = color;
    };
    this.pointTo = document.body;
}

Вы можете инициализировать это следующим образом:

var UI = new Interface();
UI.pointTo = document.getElementById('some_id');
UI.setBackground("#000");
// Set another style, on a different element
UI.pointTo = document.getElementById('some_other_id');
UI.setBackground("#FFF");

Это простая реализация, которая должна быть разумнее, но она должна выполнять свою работу.

Edit: Сделали ошибку в оригинальной публикации и исправили ошибочный код. Также сделал пример: http://jsfiddle.net/HpW3E/

Answer 3

Вот очень простой подход

// define the object
var Interface = function () {

    var interface = document.getElementById("interface"); // just an example

    // your new methods
    this.setBackground = function (color) {
        interface.style.backgroundColor = color;
    }

    // rest of your code
}

теперь вы можете использовать его

var UI = new Interface();
UI.setBackground("#000");