聲明對象超出範圍

我有這樣的功能：聲明對象超出範圍

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

的問題是，當我創建另一個功能，讓說editElement()，我不能從新的功能中訪問element1，因爲它是超出範圍。

我可以在這些函數之外聲明element1，但問題是element1一直被聲明。但是，我可能需要僅在部分案例中創建元素，只有當用戶按下按鈕並調用creadeElement()時纔可以。我只想保存系統資源，並只在需要時調用document.createElement("div")，但我也需要從多個函數中訪問它。有沒有辦法做到這一點？

來源

2013-10-02 JonnyRobbie

這是不好的做法，動態添加到DOM這樣的，它是不好的設計 – theBigChalk

@theBigChalk你能詳細說明嗎？經常進行DOM操作，包括添加元素。 –

@theBigChalk：你在說什麼？爲什麼這會是不好的做法？ –

您可以將新的元素簡單地分配到窗口，它在全球範圍內都有效

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. 
}

來源

2013-10-02 20:34:23

相反，做這樣的事情：

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

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

這將使可用的createElement功能外的元素，但直到它的需要不會創建元素。

來源

2013-10-02 20:15:53

沒想到，謝謝 – JonnyRobbie

您可以使用對象：

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);

來源

2013-10-02 20:16:56

聲明對象超出範圍

回答

相關問題