Javascript通過代碼添加js庫

我試圖將我的長JavaScript代碼分割成不同的庫。Javascript通過代碼添加js庫

我試圖寫一個包裝腳本，將加載我所有的庫：

//this file loads all the scripts to the page  
$(document).ready(function(){ 
    var fileName = getCurrentFileName(); 
    loadScript("scripts/pico/popups.js"); 
    loadScript("scripts/pico/effects.js"); 
    loadScript("scripts/pico/pico.js"); 
    loadScript("scripts/pico/facebook.js"); 
    if (fileName != null) 
     loadScript("script/pico/" + fileName + ".js"); 
});  
/** 
    * Load a script to the body element 
    * @param name the name of script file.js 
    */ 
function loadScript(name){ 
    // Adding the script tag to the body 
    var body = document.getElementsByTagName('body')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = name; 
    // Fire the loading 
    body.appendChild(script); 
}  
/** 
    * Get the current HTML file name 
    * @returns {*} the name of the file or null 
    */ 
function getCurrentFileName(){ 
    try { 
     var fileName; 
     fileName = document.location.pathname.match(/[^\/]+$/)[0]; 
     return fileName.split('.')[0]; 
    } 
    catch (e){ 
     return null; 
    } 
}

，但我認爲facebook.js裝載pico.js之前完成加載 - 這些都是從微微功能。 js裏面的facebook.js ..

我怎樣才能確保圖書館將按照我輸入的順序加載？

來源

2014-01-22 Asaf Nevo

您需要使用onreadystatechange處理程序來確保它們按所需順序加載。 –

http://stackoverflow.com/a/21246366/1959948 – Dalorzo

http://code.google.com/p/minify/根據需要合併，縮小和緩存JavaScript和CSS文件以加快頁面加載速度。 – MrUpsidown

你可能會需要使用onreadystatechange的處理程序，以確保他們在需要的順序加載。

//this file loads all the scripts to the page 

$(document).ready(function() { 
    var fileName = getCurrentFileName(); 
    loadScript("scripts/pico/popups.js"); 
    loadScript("scripts/pico/effects.js"); 
    loadScript("scripts/pico/pico.js",function(){ 
     loadScript("scripts/pico/facebook.js"); 
     if (fileName != null) loadScript("script/pico/" + fileName + ".js"); 
    }); 
}); 

/** 
* Load a script to the body element 
* @param name the name of script file.js 
*/ 
function loadScript(name,callback) { 
    // Adding the script tag to the body 
    var body = document.getElementsByTagName('body')[0]; 
    var script = document.createElement('script'); 
    script.onreadystatechange = function(){ 
     if (script.readyState === "complete" && $.isFunction(callback)) { 
      callback(); 
     } 
    } 
    script.type = 'text/javascript'; 
    script.src = name; 
    // Fire the loading 
    body.appendChild(script); 
}

由於jQuery已經包含在內，所以更容易。

//this file loads all the scripts to the page 

var fileName = getCurrentFileName(); 
$.getScript("scripts/pico/popups.js"); 
$.getScript("scripts/pico/effects.js"); 
$.getScript("scripts/pico/pico.js",function(){ 
    $.getScript("scripts/pico/facebook.js"); 
    if (fileName != null) $.getScript("script/pico/" + fileName + ".js"); 
});

來源

2014-01-22 21:07:55

你在找什麼叫做「依賴管理」。這個問題有幾種解決方案。

一大一是RequireJS：http://requirejs.org/docs/start.html

參見：

來源

2014-01-22 20:55:28 willoller

你有沒有考慮使用requirejs

http://www.joezimjs.com/javascript/lazy-loading-javascript-with-requirejs/

下面是示例版本：

您可以下載需要here。
將樣品基於該文件夾結構：

公共
- 的index.html
- 腳本
  - app.js
  - LIB
    
    **的jquery-1.10.2.js
    
    ** require.js

3。從代碼：

HTML

<!DOCTYPE html><html> 
<head><title>Sample Test</title> 
<script src="scripts/lib/require.js"></script> <!-- downloaded from link provide above--> 
<script src="scripts/app.js"></script></head> 
<body><h1>My Sample Project</h1><div id="someDiv"></div></body></html>

應用程序配置app.js

requirejs.config({ 
    baseUrl: 'scripts', 

    paths: { 
     app: 'app', 
     jquery: 'lib/jquery-1.10.2' //your libraries/modules definitions 
    } 
}); 

// Start the main app logic. loading jquery module 
require(['jquery'], function ($) { 
     $(document).on('ready',function(){ 
      $('#someDiv').html('Hello World'); 
     }); 
});

來源

2014-01-22 21:04:18 Dalorzo

當然有一些選項可以使用JQUERY http://api.jquery.com/jQuery.getScript/ – Dalorzo

Javascript通過代碼添加js庫

回答

相關問題