包括来自外部.js文件的对象

Including objects from external .js files

本文关键字：文件 对象 js 外部 包括      更新时间：2023-09-26

几天来我一直在寻找这个答案，尽管有很多关于如何在项目中包含文件的主题（也在堆栈溢出），但我还没有找到我的问题的解决方案。

我

正在处理一个项目，我想一次包含来自许多不同文件的一个对象（我不想包含文件本身，只包含它们的内容）。所有文件中的所有对象都具有相同的名称，只是内容不同。

重要的是，我不要在页面的头部部分获得 SCRIPT 标签，因为文件中的所有内容都将具有相同的名称。无论如何，没有一个文件将具有函数，只有一个对象，一次需要加载一个，然后在加载下一个元素时丢弃。

这些对象将保存将在页面上显示的数据，并且它们将通过"onclick"事件从菜单中调用。

function setMenu()   //   The menu is being build.
{
    var html = '';
    html += '<table border="0">';
    for (var i = 0; i<menu.pages.length; i++)    
    {
        html += '<tr class="menuPunkt"><td width="5"></td><td onclick="pageName(this)">'+ menu.pages[i] +'</td><td width="5"></td></tr>';
    }
    //   menu is a global object containing elements such as an array with
    //   all the pages that needs to be shown and styling for the menu.
    html += '</table>';
    document.getElementById("menu").innerHTML = html;
    style.setMenu();   //   The menu is being positioned and styled.
}

现在，当我单击菜单项时，将触发 pageName 函数，并且我也将 HTML 元素发送到该函数，在这里我希望将外部文件中的内容加载到局部变量中并用于在页面上显示内容。

我想要的答案是"如何将外部 obj 加载到我需要的函数中？（它可能是一个外部文件，但仅限于不包括在项目主部分中的范围内）。我仍在从我自己的本地库加载文件。

function pageName(elm)   // The element that I clicked is elm.
{
    var page = info.innerHTML;    // I need only the innerHTML from the element.
    var file = 'sites/' + page + '.js';   // The file to be loaded is created.
    var obj = ??      // Here I somehow want the object from the external file to be loaded.
// Before doing stuff the the obj.
    style.content();
}

外部文件中的内容可能如下所示：

// The src for the external page: 'sites/page.js'
var obj = new Object()
{
    obj.innerHTML = 'Text to be shown';
    obj.style = 'Not important for problem at hand';
    obj.otherStuff = ' --||-- ';
}

任何帮助将不胜感激，

莫尔

使用以下函数，您可以以 ajax 方式下载外部 js 文件并执行文件的内容。但请注意，外部文件将在全局范围内进行评估，不建议使用 eval。该函数是根据这个问题采用的。

function strapJS(jsUrl) {
    var jsReq = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    if (jsReq === null) {
        console.log("Error: XMLHttpRequest could not be initiated.");
    }
    jsReq.onload = function () {
        try {
            eval(jsReq.responseText);
        } catch (e) {
            console.log("Error: The script file contains errors." + e);
        }
    };
    try {
        jsReq.open("GET", jsUrl, true);
        jsReq.send(null);
    } catch (e) {
        console.log("Error: Cannot retrieving data." + e);
    }
}

JSFiddle here

编辑： 1

经过一些重构，我想出了这个：

function StrapJs(scriptStr, jsObjName) {
    var self = this;
    self.ScriptStr = scriptStr;
    self.ReturnedVal = null;
    function _init() {
        eval(self.ScriptStr);
        self.ReturnedVal = eval(jsObjName);
    }
    _init();
}

然后，您可以按照所需的任何方式获取脚本字符串，只需实例化一个新的 StrapJs 对象，其中包含要在脚本字符串中返回的脚本字符串和对象名称。然后，StrapJs 对象的 ReturnVal 属性将包含您所追求的对象。

用法示例：

var extJS = "var obj = " +
    "{ " +
    "    innerHTML : 'Text to be shown', " +
    "    style : 'Not important for problem at hand', " +
    "    otherStuff : ' --||-- ' " +
    "}; ";
var extJS2 = "var obj = " +
    "{ " +
    "    innerHTML : 'Text to be shown 2', " +
    "    style : 'Not important for problem at hand 2', " +
    "    otherStuff : ' --||-- 2' " +
    "}; ";
var strapJS = new StrapJs(extJS, 'obj');
var strapJS2 = new StrapJs(extJS2, 'obj');
console.log(strapJS.ReturnedVal.innerHTML);
console.log(strapJS2.ReturnedVal.innerHTML);

看到它在这个小提琴上的行动

相关文章：