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库

回答

相关问题