YepNope - 等到加载的依赖 [英] YepNope - Waiting until dependencies loaded

问题描述

在一个ASP.NET母版，我使用YepNope无条件地和异步加载的jQuery（从谷歌CDN，与当地备用）和一些脚本，这些脚本是在网站中的所有页面中使用。在母版我有结束标记之前创建的ContentPlaceHolder（以下加载那些已在所有页面中使用的脚本YepNope），这是用于单个页面上使用的脚本。在jQuery应提供每站点中它不应该被单独对那些有使用它具体脚本页面加载页面上。

我的问题是，我不能使用回调或功能齐全在jQuery是加载yepnope脚本，因为这是对母版，这些都是它仅用于或添加该网页的个别网页中的脚本，但我需要能够延缓个人网页中的脚本执行，直到yepnope（出现上面的网页中的脚本）完成加载它们使用的任何依赖关系（如jQuery的）。

我能想到的两个选项 -

1使页面外部文件和负载所用的脚本，使用语法 -

  yepnope（'/ URL /到/你/的script.js'）;
 

或

  yepnope（{载：/url/to/your/script.js'}）;
 

我不知道我喜欢这个主意，因为它引入了JavaScript的几行是不会被任何其他页面上使用一个额外的HTTP请求。​​

2 - 加载的jQuery又在另一个yepnope测试对象块，具有功能齐全结束了网页脚本（调用不完整的测试似乎立即执行功能，previous脚本加载之前）并依托以下 -

  

我请求一个文件两次，它只是装载一次？通过流行
  需求，yepnope 1.5+我们增加了脚本具有以下特征：
  已经要求不是当被要求他们重新执行
  第二次。当你正在处理这少可以帮助
  复杂的服务器端模板系统和所有你真正关心的是
  您所有的依赖关系是可用的。

在我可以presumably加载的jQuery从谷歌CDN，它基于上述实际上不会加载两次相同的版本，然后从完整的函数调用匿名函数加载页面的脚本的页面该yepnope测试对象。<​​/ p>

在加方，这将意味着该页面不再依赖于jQuery的从母版被加载，但是消极的将是（即使假设YepNope不会加载脚本现在的两倍），我们将装载的多个版本jQuery的应在母版的版本，而不在未来的页面相同的情况发生改变。从一个维修点，我不觉得这是个好主意，尤其是在假设（我觉得你应该总是）另一个开发将是一个进行更改。

这也似乎并不特别优雅。

在平衡，我几乎肯定会使用第一个选项，但我想知道是否有延迟或直到异步加载完毕推迟在页面上脚本的方法，这不能做的YepNope测试对象的一部分装载的资源。

如何其他开发商处理这个问题？

解决方案

我想出了这个作为一个解决方案是我比较喜欢。

在母版YepNope测试对象增加code -

 完成：功能（）{
                如果（window.pageFunctions == NULL和放大器;！＆安培; typeof运算（window.pageFunctions）===功能）{
                    window.pageFunctions（）;
                }
            }
 

如果我想添加任何JavaScript code或功能依赖于在母版加载依赖我只是将它们包装在一个名为pageFunctions像这样的功能 -

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    功能pageFunctions（）{
        $（文件）。就绪（函数（）{
            ...
        }）;
    }
＆LT; / SCRIPT＆GT;
 

我在其他（可能更好）的解决方案仍然有兴趣，所以我要离开开了几天的问题。

我也对这个AP preciate意见作为解决方案。

In a ASP.NET Masterpage I am using YepNope to unconditionally and asynchronously load jQuery (from the Google CDN, with local fallback) and some scripts which are used on all pages in the site. In the MasterPage I have created a ContentPlaceHolder before the closing body tag (and below the YepNope script that loads those used on all pages) which is used for scripts used on individual page. As jQuery should be available on every page in the site it should not be loaded individually on those pages where there are specific scripts that use it.

The problem I have is that I can't use the callback or complete functions in the yepnope script where jQuery is loaded, as this is on the MasterPage and these are individual page scripts which are only used or added on that page, yet I need to be able to delay the execution of the individual page scripts until yepnope (which appears above the page scripts) has finished loading any dependencies (such as jQuery) used in them.

I can think of two options-

1- Make the script used on the page an external file and load that using the syntax -

yepnope('/url/to/your/script.js'); 

or

yepnope({ load: '/url/to/your/script.js' });

I'm not sure I like this idea as it introduces an extra HTTP request for a few lines of javascript which isn't going to be used on any other page.

2- Load jQuery again in another yepnope test object block, with the complete function wrapping up the page scripts (calling complete without a test seems to execute the function immediately, before the previous scripts are loaded) and relying on the following-

I am requesting a file twice and it's only loading once? By popular demand, in yepnope 1.5+ we added the feature that scripts that have already been requested not be re-executed when they are requested a second time. This can be helpful when you are dealing with less complex serverside templating system and all you really care about is that all of your dependencies are available.

In the page I could presumably load the same version of jQuery from the Google CDN, which based on the above would not actually be loaded twice, and then load the page scripts in an anonymous function called from the complete function of the yepnope test object.

On the plus side this would mean that the page is no longer dependent on jQuery being loaded from the MasterPage, but a negative would be that (even assuming YepNope does not load the script twice now) we would be loading multiple versions of jQuery should the version in the MasterPage be changed without the same happening in the page in the future. From a maintenance point of view I don't feel this is a good idea, especially on the assumption (which I feel you should always make) that another developer would be the one making the changes.

It also does not seem especially elegant.

On balance I will almost certainly use the first option but I would like to know if there is a way to delay or defer scripts on a page until asynchronous loading is completed, and this cannot be done as part of the YepNope test object loading the resources.

How do other developers approach this problem?

解决方案

I have come up with this as a solution I rather like.

In the MasterPage YepNope test object add the code-

complete: function() {
                if (window.pageFunctions !== null && typeof (window.pageFunctions) === "function") {
                    window.pageFunctions();
                }
            }

If I want to add any JavaScript code or functions that rely on the dependencies loaded in the MasterPage I just wrap them in a function named "pageFunctions" like so-

<script type="text/javascript">
    function pageFunctions() {
        $(document).ready(function () {
            ...
        });
    }
</script>

I'm still interested in other (possibly better) solutions so I'm going to leave the question open for a couple of days.

I'd also appreciate comments on this as a solution.

这篇关于YepNope - 等到加载的依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！