声明对象超出范围

我有这样的功能：声明对象超出范围

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

声明对象超出范围

回答

相关问题