Question

我正在构建一个Web控制面板。简短说明：如何将应用程序安装到服务器上，然后将所有应用程序内容传递到前端。

每个应用程序都使用Smarty进行布局，但也应该能够为动态内容定义样式和脚本（起始内容由php加载）。

php的后端仅提供了一系列这些应用程序，包括它们的名称，作者，版本，html内容，图标，css文件和js文件。所有这些都存储在js类中，并且最后使用jquery的getscript函数加载脚本。

这些脚本的问题在于让它们全部并排工作有点混乱。

假设我有一个带有多个标签的设置应用，javascript可能会在标签切换中包含以下内容：

var elems;
var divs;
function init() {
elems = document.getElementsByClassName("settings-item");
divs = document.getElementsByClassName("settings-item-content");
elems[0].classList.add("is-active");
divs[0].style.display = "block";

for(let i = 0; i < elems.length; i++) {
    elems[i].addEventListener("click", onItemClick);
}

}

function onItemClick(event) {
for(let i = 0; i < elems.length; i++) {
    elems[i].classList.remove("is-active");
}

event.target.classList.add("is-active");

let id = event.target.id + "-content";

for(let i = 0; i < divs.length; i++) {
    divs[i].style.display = "none";
    if(divs[i].id === id) {
        divs[i].style.display = "block";
    }
}



}

要在加载应用程序时执行此操作，请在脚本开头添加以下内容：

var identity = "Settings-Settings.js";
Hook.bind(identity + "-create", init);

-create钩子会在其他所有内容加载完毕后被调用，因此不会发生任何错误。

注销并重新登录时，由于变量已存在，它将引发错误。我这样做是解决了这个问题：

Hook.bind(identity + "-destroy", destroy);
function destroy() {
    identity = null;
    delete identity;
    elems = null;
    delete elems;
    divs = null;
    delete divs;

}

注销时删除应用程序时，-destroy挂钩被调用。

令人惊讶的是，这一切都很好。不幸的是，仍然存在来自不同类的脚本覆盖彼此变量的问题。如果我创建另一个具有类似结构的应用程序：

var identity = "Customers-Customers.js";

Hook.bind(identity + "-create", init);
Hook.bind(identity + "-destroy", destroy);

var elems;
var divs;

function init() {
    elems = document.getElementsByClassName("customer-item");
    divs = document.getElementsByClassName("customer-item-content");
    elems[0].classList.add("is-active");
    divs[0].style.display = "block";

    for(let i = 0; i < elems.length; i++) {
        elems[i].addEventListener("click", onItemClick);
    }

}

function destroy() {
    identity = null;
    delete identity;
    elems = null;
    delete elems;
    divs = null;
    delete divs;

}


function onItemClick(event) {
    for(let i = 0; i < elems.length; i++) {
        elems[i].classList.remove("is-active");
        alert(elems[i].id);
    }

    event.target.classList.add("is-active");

    let id = event.target.id + "-content";

    for(let i = 0; i < divs.length; i++) {
        divs[i].style.display = "none";
        if(divs[i].id === id) {
            divs[i].style.display = "block";
        }
    }



}

两个脚本都加载。但是，因为它们都定义了相同的变量，所以它们都无法正常工作。当您查看“客户”选项卡上删除了is-active的部分时，它将循环显示“设置”选项卡上的项目。

我可以重命名变量，但是如果最终用户希望安装自己的自定义构建的应用程序，这将给最终用户带来很大的不便。如果他们选择一个已经使用的变量名，它将破坏所有使用它的脚本。

这都是相当狡猾的东西，我想知道是否有更好的方法可以做到这一点，从而使所有脚本都不会相互干扰。这样，最终用户不必担心变量和函数的名称。

有什么想法吗？

寻找一种动态加载应用样式内容的Javascript的更好方法

0 个答案: