动态包含Javascript和依赖关系 [英] Dynamically Included Javascript and Dependencies

问题描述

所以，作为一种锻炼自己，我正在写一个小异步脚本加载工具（想想require.js，head.js，yepnope.js），并已跨越了一个难题的一点点运行。一，基本的语法是这样的：

 使用（型号/ SomeModel功能（）{
  //回调时，所有依赖加载
}）;
 

现在，我想知道，当这个调用时，我什么文件，我可以用一个Ajax调用做到这一点，这样我可以标记内容加载后的标志，但在此之前我把它给EVAL标志，所有使用电话将是一个特定的文件，然后取消设置的eval后旗（我知道的eval是邪恶的，但在这种情况下，它的JavaScript摆在首位，而不是JSON，所以它不是邪恶）。我是pretty相信这会得到我需要什么，但是我想preFER有几个原因，一个脚本标签来做到这一点：

1. 这是语义上更正确


2. 更容易找到调试脚本（唯一的文件名是容易得多匿名脚本块和调试程序语句来翻阅）


3. 跨域请求。我知道我可以尝试使用XDomainRequest，但大多数服务器都不会被建立在这一点，我想在CDN的引用外部脚本的能力。

我试过的东西，几乎得到了我所需要的东西。我一直使用被称为每次列表。当脚本荷载之一，我采取任何那些使用引用，并将其纳入为刚刚加载的文件正确的对象，疏通全局列表。这实际上似乎在Firefox和Chrome正常的工作，但在IE中失败，因为负载事件似乎在奇怪的时间响铃（一个jQuery参考吞食为另一种类型的引用，并最终显示出它作为一个依赖）。我想我可以锁定到互动的readyState，但它似乎并没有发生过。

所以，现在我来问，如果有人在这里有什么想法。如果你们愿意，我可以张贴code，但它仍然非常混乱，可能难以阅读。

编辑：其他用途

  //抗锯齿和多个依赖
using.alias（ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js，jQuery的）;使用（[jQuery的，型号/ SomeModel]，函数（）{
  双方jQuery和SomeModel已经被加载并运行后，//应该运行
}）;// CSS和条件（使用一些不存在的变量在这里）
using.css（{SRC：IEFix，有条件的：浏览器===MSIE＆放大器;＆安培;版本＆LT; 9}）;
//应包括IEFix.css文件，如果浏览器IE8是等于或低于
 

和阐述更多关于我的回答如下，认为这是文件中的（和以前考虑jQuery的别名是仍然存在）：

 使用（[jQuery的，B]，函数（）{
  的console.log（这应该是最后的（包括jQuery的和B加载后））;
  的console.log（typeof运算（$））;
}）;
 

那么这将是A：

 使用（C，函数（）{
  的console.log（这应该是第二个）;
}）;
 

最后，C：

 的console.log（这应该是第一）;
 

输出应该是：

 这应该是第一
这应该是第二
这应该是最后的（包括jQuery的和B加载后）
[对象对象]
 

解决方案

称道的是，你正在服用这样一个教育项目。

然而，你将无法把它关闭挺你想这样做的方式。

好消息是：

• 不需要知道哪些文件你在


• 没有必要惹的eval。

您确实有你需要在那里的一切：A 函数参考 A 回调，如果你愿意

一个粗略的P code为你的使用功能将是：

 函数中使用（模块，回调）{  VAR loadedModules = []
  //这将是一个Ajax调用加载的东西，几种不同的方式来做到这一点..
  loadedModules [0] =加载模块（模块[0]）;
  loadedModules [1] =加载模块（模块[1]）;  //太好了，现在我们拥有所有的模块
  //空='为价值this`
  callback.apply（NULL，loadedModules）;
}
 

So, as a sort of exercise for myself, I'm writing a little async script loader utility (think require.js, head.js, yepnope.js), and have run across a little bit of a conundrum. First, the basic syntax is like this:

using("Models/SomeModel", function() {
  //callback when all dependencies loaded
});

Now, I want to know, when this call is made, what file I'm in. I could do it with an ajax call, so that I can mark a flag after the content loads, but before I eval it to mark that all using calls are going to be for a specific file, then unset the flag immediately after the eval (I know eval is evil, but in this case it's javascript in the first place, not json, so it's not AS evil). I'm pretty sure this would get what I need, however I would prefer to do this with a script tag for a few reasons:

1. It's semantically more correct
2. Easier to find scripts for debugging (unique file names are much easier to look through than anonymous script blocks and debugger statements)
3. Cross-domain requests. I know I could try to use XDomainRequest, but most servers aren't going to be set up for that, and I want the ability to reference external scripts on CDN's.

I tried something that almost got me what I needed. I keep a list of every time using is called. When one of the scripts loads, I take any of those using references and incorporate them into the correct object for the file that just loaded, and clear the global list. This actually seems to work alright in Firefox and Chrome, but fails in IE because the load events seem to go off at weird times (a jQuery reference swallowed a reference to another type and ended up showing it as a dependency). I thought I could latch on to the "interactive" readystate, but it doesn't appear to ever happen.

So now I come asking if anybody here has any thoughts on this. If y'all want, I can post the code, but it's still very messy and probably hard to read.

Edit: Additional usages

//aliasing and multiple dependencies
using.alias("ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", "jQuery");

using(["jQuery", "Models/SomeModel"], function() {
  //should run after both jQuery and SomeModel have been loaded and run
});

//css and conditionals (using some non-existant variables here)
using.css({ src: "IEFix", conditionally: browser === "MSIE" && version < 9 });
//should include the IEFix.css file if the browser is IE8 or below

and to expound more on my response below, consider this to be file A (and consider the jquery alias from before to be there still):

using(["jQuery", "B"], function() {
  console.log("This should be last (after both jQuery and B have loaded)");
  console.log(typeof($));
});

Then this would be B:

using("C", function() {
  console.log("This should be second");
});

And finally, C:

console.log("This should be first");

The output should be:

This should be first
This should be second
This should be last (after both jQuery and B have loaded)
[Object Object]

解决方案

Commendable that you are taking on such an educational project.

However, you won't be able to pull it off quite the way you want to do it.

The good news is:

• No need to know what file you are in
• No need to mess with eval.

You actually have everything you need right there: A function reference. A callback, if you will.

A rough P-code for your using function would be:

function using(modules, callback) {

  var loadedModules = []
  // This will be an ajax call to load things, several different ways to do it..
  loadedModules[0] = loadModule(modules[0]);
  loadedModules[1] = loadModule(modules[1]);

  // Great, now we have all the modules
  // null = value for `this`
  callback.apply(null,   loadedModules);
}

这篇关于动态包含Javascript和依赖关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！