包括來自外部.js文件的對象

我一直在尋找這個答案的好幾個小時，並且儘管關於如何在項目中包含文件有許多主題（這裏也在Stack Overflow中），但我還沒有找到解決我的問題。包括來自外部.js文件的對象

我正在從事一個項目，我想從一個時間，從許多不同的文件（我不想包括文件本身，只有他們的內容）包括一個單一的對象。所有文件中的所有對象都具有相同的名稱，只有內容不同。

重要的是，我不會在頁面的頭部獲得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. 
}

現在，當我點擊菜單項的頁面名稱功能被觸發，我發送的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 = ' --||-- '; 
}

任何幫助將不勝感激，

莫爾

來源

2013-10-22 Molle

你有沒有看看迪朗達爾和RequireJS？ –

我在想我應該可以直接用JS做。如果可能的話，我寧願不使用JQuery或其他類型的JS。有了JS所能做的所有事情，這也應該是可能的。 – Molle

這絕對是可能的，但爲什麼重新發明輪子？ –

使用下面的函數，你可以下載外部js文件以ajax方式執行並執行文件的內容。但請注意，外部文件將在全局範圍內評估，並且不建議使用eval。該功能是從this問題中採用的。

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對象的ReturnedVal屬性將包含您之後的對象。

用法示例：

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

看到它在行動上this fiddle

來源

2013-10-23 04:26:39

包括來自外部.js文件的對象

回答

相關問題