0

我对 RequireJS 有点问题。

我有一个 .NET 站点，其中包含多个控件，其中包含需要由 .NET 生成的参数的 JS 代码。我一直在尝试在我的网站中实现 RequireJS，但遇到了一个小问题。

我在页面顶部包含了引用 RequireJS 的脚本标记，以及该脚本标记中对 main.js 的引用。在我的 main.js 中，我有以下代码；

require.config({
    paths: {
        'jquery' : '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'
    }
});

然后我有一个应该显示 Flash 视频的 Web 控件。此 Web 控件包含以下代码；

require(['jquery'], function ($) {
    if (!eval('<%= FlashAvailable.ToString().ToLowerInvariant() %>')) {
        var url = '<%= FallbackImageUrl %>';
        if (!url) {
            $("#flashcontent").remove();
        }
        return;
    }

    var link = '<%= Page.ResolveUrl("~/Templates/AlloyTech/scripts/slideshow.swf") %>';
    var width = '<%= Width %>';
    var height = '<%= Height %>';

    var variables = { xml: '<%= ConfigXml %>' };
    var params = { wmode: 'transparent' };
    var attributes = { };

    swfobject.embedSWF(link, 'flashcontent', width, height, '10', false, variables, params, attributes);
});

这应该可以正常工作吧？但是，执行页面会导致两组错误。

 1. GET http://episerversite6/scripts/jquery.js 404 (Not Found)
 2. Uncaught Error: Script error http://requirejs.org/docs/errors.html#scripterror

为什么当我定义 jquery 的路径是“http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min”时它试图找到 jquery.js。我尝试为路径添加第二个参数，这是一个本地后备 jQuery 文件，这使得一切正常，但我仍然会在控制台中收到第一个错误。

其次，为什么我会收到脚本错误消息？我已经检查了我的代码几次，我似乎找不到任何问题。它与在 jQuery 有时间加载之前执行的代码有关吗？

所以我想我要问的是，将 RequireJS 与内联脚本一起使用的最佳方式是什么？我希望有人能帮帮忙。提前致谢。

4

2 回答 2

1

似乎我误解了 RequireJS 的工作原理以及相应地重写我的代码的需要。

所以我决定改为将所有 ASP.NET 生成的变量附加到它们作为 data-* 属性影响的元素中，并将所有 JavaScript 代码移动到单个文件中，然后在页面上运行的 main.js 脚本中引用这些文件加载。稍后加载脚本及其依赖项时会获取 data-* 属性值。

所以这就是我对我在最初的问题中提到的项目所做的，它实际上是一个名为 Alloytech 的 EPiServer CMS 演示项目。

Flash.ascx

<div id='flashcontent'  data-flash-available="<%= FlashAvailable.ToString(CultureInfo.InvariantCulture).ToLowerInvariant() %>"
                    data-fallback-image="<%= FallbackImageUrl %>"
                    data-flash-link="<%= Page.ResolveUrl("~/Templates/AlloyTech/scripts/slideshow.swf") %>"
                    data-flash-width="<%= Width %>"
                    data-flash-height="<%= Height %>"
                    data-flash-variables="<%= ConfigXml %>">
    <img src='<%= FallbackImageUrl %>' alt='<%= FallbackImageAlt %>' />
</div>

main.js

require.config({
    shim: {
        'swfobject' : {
            exports: 'swfobject'
        }
    },

    paths: {
        'jquery': ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min', '/Scripts/jquery-1.7.2.min'],
        'alloytech': '/templates/alloytech/scripts/alloytech',
        'mobile': '/templates/alloytech/scripts/mobile/mobile',
        'swfobject': '/Templates/AlloyTech/scripts/swfobject'
    }
});

define(['jquery', 'alloytech', 'mobile', 'swfobject'], function ($, A, M, swfobject) {
    $.fn.addFlash = function () {
        return this.each(function () {
            var el = $(this);
            var flashAvailable = el.data('flash-available'),
                fallbackImage = el.data('fallback-image'),
                flashLink = el.data('flash-link'),
                flashWidth = el.data('flash-width'),
                flashHeight = el.data('flash-height'),
                flashVariables = el.data('flash-variables');

            if (!eval(flashAvailable)) {
                var url = fallbackImage;
                if (!url) {
                    el.remove();
                }

                return;
            }

            var link = flashLink;
            var width = flashWidth;
            var height = flashHeight;

            var variables = { xml: flashVariables };
            var params = { wmode: 'transparent' };
            var attributes = {};

            swfobject.embedSWF(link, 'flashcontent', width, height, '10', false, variables, params, attributes);
        });
    };

    $(function () {
        $("#flashcontent").addFlash();
    });
});

我希望其他人会发现这很有用。

于 2012-08-07T15:15:51.947 回答
0

它在加载配置路径之前寻找所需的模块“jquery”。所以基本上什么 require.js 假设“jquery”是一个 javascript 文件并尝试在与“data-main”（在 HTML 标头中定义）相同的目录中查找它。

我不知道这种特殊情况的解决方案是什么，因为我正在打同样的仗，但这似乎与 jquery.js 创建者打算使用他们的插件的方式不同，从这个页面的内容来看：常见错误

于 2012-08-01T01:04:28.173 回答