Декларирование объект из области видимости

Question

У меня есть эта функция:

function createElement() { 
    var element1 = document.createElement("div"); 
    element1.id = "el1"; 
    //... 
} 

проблема заключается в том, что когда я создаю еще одну функцию, скажем editElement(), я не могу получить доступ к element1 внутри новой функции, как это выходит за рамки.

Я мог бы объявить element1 за пределами этих функций, но тогда проблема в том, что element1 все время объявляется. Но мне может понадобиться создать элемент только во фракции случаев, только когда пользователь нажимает кнопку и вызывается creadeElement(). Я хочу сохранить системные ресурсы и позвонить document.createElement("div") только тогда, когда мне это действительно нужно, но мне также нужно получить к нему доступ из нескольких функций. Есть ли способ сделать это?

Answer 1

вы можете просто присвоить свой новый элемент окна, так что доступны в глобальном масштабе

function createElement() { 
    window.element1 = document.createElement("div"); //Meke new element global. 
    element1.id = "el1"; 
} 

function useElement() { 
    //now you can use element1 directly. as it is inside the global scope. 
} 

Answer 2

Вместо этого, сделать что-то вроде этого:

var element1 = null; 
function createElement() { 
    element1 = document.createElement("div"); 
    element1.id = "el1"; 
    //... 
} 

function useElement() { 
    if(!element1)createElement() 
    //... 
} 

Это сделает элемент доступен за пределами функции createElement, но не будет создавать элемент до тех пор, пока не нужно.

Answer 3

Вы можете использовать объект:

var elementHandler = { 
    createElement: function() { 
     this.element1 = document.createElement("div"); 
     this.element1.id = "el1"; 
     // ... 
    }, 
    editElement: function() { 
     // Use this.element1 here... 
    } 
}; 

Вы называете createElement и editElement как это:

elementHandler.createElement(); 
elementHandler.editElement(); 

(Или вы можете просто назвать их create и edit, как нет необходимости повторять слово «элемент» повсюду ...)

Если вы подключаете их к событию, обязательно называйте их такими что elementHandler является this в вызове:

// Using an anonymous function 
someElement.addEventListener("click", function() { 
    elementHandler.createElement(); 
}, false); 

// Or using ES5's `bind` 
someElement.addEventListener("click", elementHandler.createElement.bind(elementHandler), false); 

// *NOT* like this: 
someElement.addEventListener("click", elementHandler.createElement, false);