javascript - 声明对象超出范围

Question

我有这个功能：

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

问题是当我创建另一个函数时，比如说editElement()，我无法element1从新函数中访问，因为它超出了范围。

我可以element1在这些函数之外声明，但问题是它element1一直被声明。但是我可能只需要在少数情况下创建元素，只有当用户按下按钮creadeElement()并被调用时。我想节省系统资源，document.createElement("div")只在真正需要时调用，但我还需要从多个函数中访问它。有没有办法做到这一点？

Answer 1

相反，请执行以下操作：

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

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

这将使元素在 createElement 函数之外可用，但在需要之前不会创建元素。

Answer 2

您可以使用一个对象：

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

Answer 3

您可以简单地将新元素分配给 window 以便它在全局范围内可用

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