2014-01-20 59 views
4

我有一个有趣的概念,我正在研究和浏览,通过各种关于自动加载JavaScript的堆栈问题。我不想使用第三方工具,除了表单jQuery,所以我认为我会自己扮演角色。我的理念是:自动加载Javascript

var scripts = { 
    'name' : 'path/to/script_dir/' // Load all scripts in this file. 
} 

requireScripts(scripts); // Requires all scripts 
// Call your classes, methods, objects and so on .... 

requireScript()功能会的工作是这样的:

function requireScript(hash){ 
    $.each(hash, function(key, value)){ 
     $.ajax({ 
      url: value, 
      dataType: "script", 
      async: false, 
      error: function() { 
       throw new Error("Could not load script " + script); 
      } 

     }); 
    }); 
} 

注:以上只是一个概念,我不认为它会奏效。

上面的代码可以让你加载SPECIFIC脚本。所以实质上你的散列键值是'name' : 'path/to/specific/script'。这个拥有的问题是你的哈希会得到相当大的....

我遇到的另一个问题是如果我简化这个“php梨命名标准”,所以,如趋势似乎是 - 我们会创建一个类,并且将它的位置来命名:

var some_folder_name_class = function(){}

会由自动为翻译:some/folder/name/class.js再装下去。

总结并达到我的观点有两种方法加载JavaScript文件我正在通过滚动我自己的“require”方法来查看。一个是通过上面实现的散列思想加载一个javascript文件的目录。 (这是如何散列将通过将不得不被踩到所提供的代码示例进行更改和固定....我不认为它的工作原理,甚至加载一个文件)

OR

有你只是这样做:

new some_class_name()并且有一个全局函数侦听这个新单词,根据类的名字找到你试图调用的文件并加载它,这个你永远不用担心 - 只要你关注“梨命名标准”在类和文件夹结构中,您的js文件将被加载。

可以采取哪一种办法?还是我梦想成真?

我看到了很多的框架做的require('/path/to/script')一堆如果我能角色我自己的自动加载的,只允许我要么加载的JS文件的目录,甚至有它的地方一个类的实例之前侦听new然后我可以让我的生活变得更轻松。

回答

2

你有没有考虑使用requirejs,可能是延迟加载。

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

下面是示例版本:

  1. 您可以下载here

  2. 将样品基于该文件夹结构:

    公共

    • 的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'); 
     }); 
}); 
+0

请注意(http://stackoverflow.com/questions/how-to-answer):*“[为链接提供上下文]始终欢迎链接到潜在解决方案,但请在链接上添加上下文,以便您其他用户将会了解它是什么以及它为什么在那里。总是引用重要链接中最相关的部分,以防目标站点无法访问或永久脱机。“* –

2

jQuery的唯一的选择

如果您正在寻找仅限jQuery的解决方案,请查看jQuery.getScript()。这将是处理您的问题的脚本加载部分的好选择。然后,你可以写一个非常小的包装它周围像你上面写的加载所有脚本出头:如果你有兴趣在这种方法中,read this article由大卫·沃尔什更多信息

var loadScripts = function(scripts) { 
    $.each(scripts, function(name, path) { 
    jQuery.getScript("/root/path/" + path + ".js"); 
    }) 
} 

其他大图书馆

我强烈建议考虑看看当前批处理脚本加载库。我认为你会惊喜于那里的东西。此外,他们还带来了良好的社区支持和文档。 RequireJS似乎是领跑者,但大卫沃尔什在curl.jsLABjs上有很棒的文章。