javascript - 防止 Adob​​e Edge preload.js 文件加载 jquery

Question

首先我必须说我不是专业的程序员，而是边做边学的设计师。所以恐怕我需要尽可能简单的解释。 我在特定脚本的帮助下使用 Edge animate 作为网站的一部分(Andrew Trice，参见此处:http://www.tricedesigns.com/2012/07/12/using-adobe-edge-animations-as-components/)。我还成功地在我的 libs 文件夹中仅存储了 1 个 Edge preload.js 文件。在其中我在最后引入了一个变量，以便能够一个接一个地加载 Edge 动画。代码:

function setupAnimationView( template ) { 

var $workPage = $("#workPage")

$workPage.empty();
window.AdobeEdge = undefined;
AdobeEdge = undefined;

var viewModel = { workChart: workChart };

var html = Mustache.to_html(template, viewModel)
$workPage.append( html );

//detect if edge is loaded yet
var edgeDetectionFunction = function() {

    if ( AdobeEdge && AdobeEdge.compositions != undefined ) {
        //put a delay here
        var hasComposition = false;

        if ( AdobeEdge.compositions ) {
            //loop to see if the composition is actually loaded
            for ( var key in AdobeEdge.compositionDefns ) {
                hasComposition = true;
                break;
            }
        }

        if ( hasComposition ) {
            setTimeout( function() { 
                $(window).trigger( "animationReady" ); }, 100 );    
            return;

        }
    }
    else if ( AdobeEdge ) {
        window.onDocLoaded();
    }
    setTimeout( edgeDetectionFunction, 100 );
}
edgeDetectionFunction();

修改后的 Adob​​e Edge preload.js:

...

   requiresSVG=false;

doDelayLoad=false;
htFallbacks={
};

aLoader = [
{ load: "libs/jquery-1.10.2.min.js"},
{ load: "libs/jquery.easing.1.3.js"},
{ load: "libs/jquery.rotate.js"},
{ load: "libs/edge.1.0.0.min.js"},
    {test: !hasJSON, yep:"libs/json2_min.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edge.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edgeActions.js"}];

loadResources(aLoader, doDelayLoad);

preContent={dom:[
]}
;//simpleContent

dlContent={dom: [
]}
;//simpleContent

//updated paths for loader
//added this so it can be invoked later
window.onDocLoaded = onDocLoaded;

})( "animation_content");

到目前为止，感谢 Andrew，一切都工作得很好，除了我在我的开发者工具 (Safari) 中看到我的代码导致每次加载基本的 js 文件，如 jquery-1.10.2.min.js 一遍又一遍新的动画开始运行，这些文件加起来是无穷无尽的……我想这不是一件好事。 我什至理解为什么(至少我相信)所以我在预加载结束时删除了 aLoader 对象中的相应行。 (当然它们是在我的索引页面的脚本标签中加载的)

aLoader = [
{ load: "libs/jquery-1.10.2.min.js"}, // deleted this one
{ load: "libs/jquery.easing.1.3.js"}, // deleted this one
{ load: "libs/jquery.rotate.js"}, // deleted this one
{ load: "libs/edge.1.0.0.min.js"}, // deleted this one
    {test: !hasJSON, yep:"libs/json2_min.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edge.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edgeActions.js"}];

因为我不明白为什么需要多次加载它们。然而，这样做之后只有第一个动画运行，第二个不再运行。但为什么？我在浏览器中查看并看到 jquery-1.10.2.min.js 在页面中，那么为什么 Edge 文件不能(或似乎不能)使用它了？其他的也一样(旋转等)。 我还试图从上面的函数中抑制这两行:

window.AdobeEdge = undefined;
AdobeEdge = undefined;

虽然没有任何结果。 避免重新加载那些基本需要的 .js 文件的技巧在哪里？有任何想法吗？非常感谢你的建议 加拉瓦尼

@杰米

编辑: 所以，你好杰米!我对您的解决方案非常好奇，以至于我放弃了其他所有东西并尝试了它。遗憾的是，在我试图在此编辑上方的行中尽可能准确地解释的情况下，它不起作用。 为了避免这里的任何误解，我按照您的说明更改了代码(顺便说一句，非常好的解释!):

edgePreload.js(在我的版本中，它没有添加文件名，位于我的“lib”文件夹中，在安德鲁的方法之后每个新动画都会访问该文件夹 - 见上文!):

window.AdobeEdge = window.AdobeEdge || {};
window.AdobeEdge.$_ = $;
// Include yepnope
if(!AdobeEdge.yepnope) {…

然后进一步:

$(function() { // your insert opening function

(function(compId){

var htFallbacks; …

…
window.onDocLoaded = onDocLoaded;

})( "animation_content");

}); // your insert closure

我的 index.html 包含以下脚本(以及其他脚本):

<script src="libs/jquery-1.11.0.min.js"></script>
<script src="libs/jquery.easing.1.3.js"></script>
<script src="libs/jquery.rotate.js"></script>
<script src="libs/edge.1.0.0.min.js"></script>
<script src="libs/mustache.js"></script>
<script src="libs/mustacheHelper.js"></script>

我喜欢将其托管在我的服务器上。 (避免出现不受我控制的版本更新带来的各种麻烦)

现在我敢于并希望能够从我的 aLoader 箭头中取消那些东西，如下所示:

aLoader = [
// { load: "libs/jquery-1.11.0.min.js"},
// { load: "libs/jquery.easing.1.3.js"},
// { load: "libs/jquery.rotate.js"},
// { load: "libs/edge.1.0.0.min.js"},
    {test: !hasJSON, yep:"libs/json2_min.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edge.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edgeActions.js"}];     

但是 id t 不起作用(明显是因为缺少边码而抛出各种错误)。 当我再次替换 aLoader 中的所有内容时，至少它可以正常工作而不会显示有关新插入行的错误。但是我没有结果。然而，太酷了! 我错过了什么？您真的彻底检查了我在上面最初几行中所做的事情吗？

我很想听听您的想法! 到目前为止，感谢您的兴趣并愿意分享您对这种复杂边缘 Material 的了解(讨论不多 - 我猜有充分的理由 - 在堆栈溢出中)。

Answer 1

我一直遇到确切的问题，你现在可能已经解决了，但希望它能帮助其他人。

1) 确保通过在发布设置中选择“HTML”并发布到一个干净的文件夹来获取文件。

2) 使用美化工具(例如 http://jsbeautifier.org/ )制作 [filename]_edgePreload.js文件可读。

3) 添加这一行 window.AdobeEdge.$_ = $;就在顶线下方 window.AdobeEdge = window.AdobeEdge || {};

4) 找到这一行 (function(compId) { (这是加载方法的开始)并用 $(function() { 包装整个方法(此处和页面底部之间的所有内容)和 });

5) 在 aLoader 中数组，删除指定如何加载 edge 和 jquery 的前两个条目。

6) 将边缘库(当前为 https://animate.adobe.com/runtime/4.0.1/edge.4.0.1.min.js )与 jQuery 一起添加到站点的头部。

---

不要觉得这很困惑，Adobe Edge 输出代码是由长腿白菜编写的。每个人都为此而苦苦挣扎:)