javascript - 页面上具有相同的小部件多次发生时间/变量冲突

Question

我创建了一个 JavaScript/jQuery 小部件，它需要能够多次嵌入页面中，每个页面都有不同的变量设置。目前，各种变量正在被最后加载的小部件覆盖。

这是用于示例目的的精简版本。

(function () {

    var scriptName = "my.widget.js";
    var TGW;
    var jqueryPath = "https://ajax.googleapis.com/yada_yada..."; 
    var scriptTag;
    var jScript;

    /******** Get reference to self (scriptTag) *********/
    var allScripts = document.getElementsByTagName('script');
    var targetScripts = [];
    for (var i in allScripts) {
        var name = allScripts[i].src
        if(name && name.indexOf(scriptName) > 0)
            targetScripts.push(allScripts[i]);
    }

    scriptTag = targetScripts[targetScripts.length - 1];

    /******** Set jQuery noConflict *********/
    if (window.TGW === undefined || window.TGW.fn.jquery !== jqueryVersion) {
        loadScript(jqueryPath, initTGW);
    } else {
        initTGW();
    }

    function initTGW() {
        TGW = window.jQuery.noConflict(true);
        main();
    }

    function main() {
        TGW(document).ready(function ($) {
            loadParams();
        });
    }

    function loadParams() {
        jScript = TGW(scriptTag);
        comments = jScript.data("comment");
    }

})();

以下是如何使用不同的评论数据属性设置将其两次添加到网页。

<script src='https://...my.widget.js' data-comment='yes'></script>
<script src='https://...my.widget.js' data-comment='no'></script>

通过上述内容，如果小部件中有一个假设的按钮显示变量 comments 的内容，则该变量将根据哪个小部件随机包含/显示"is"或“否”最后加载。

按下第一个小部件上的按钮时需要发生什么，它是否显示"is"。当按下第二个小部件上的按钮时，它显示“否”。

我认为这与 namespace 或其他东西有关，但我不太明白。我认为将整个小部件包装在作为匿名函数运行的 (function () { 中，这意味着所有变量都是独立的。

感谢任何帮助

Answer 1

在没有可靠的情况下document.currentScript ，您可以尝试替换您的 allScripts = ....; for() {...}像这样的东西:

var marker = 'data-r_e_a_d'; // something unique, that won't overwrite any data- attribs delivered in the HTML

var scriptTag = Array.prototype.slice.call(document.getElementsByTagName('script')).reduce(function(prev, current) {
    var tag = (!prev && !current.getAttribute(marker) && current.src && current.src.indexOf(scriptName) > 0) ? current : prev;
    if(tag === current) current.setAttribute(marker, true);//mark "self" as read
    return tag;
}, null);

它将提供最新的未读资格赛脚本 - 即“ self ”。

此过程将在您的小部件的脚本标记中留下标记属性。如果需要，可以在阅读最后一篇 <script> 后清理这些内容。 ，但将它们留在那里应该没有什么坏处。