【问题标题】:How to properly load resources in a website made mostly with ajax?如何在主要使用 ajax 制作的网站中正确加载资源?
【发布时间】:2012-02-06 14:22:30
【问题描述】:

是在我的基本布局/模板视图中加载ALL我的资源,还是直接在我在 ajax 中加载的局部视图中更好?

示例:

_布局:

[...]

    <head>
        <script src="file.js"></script>
        <link href="file.css"></link >
    </head>

[...]

_布局:

[...]

    <head>
    </head>

[...]

partialView(稍后在 AJAX 中加载):

<div>
    <script src="file.js"></script>
    <link href="file.css"></link > 
</div>

【问题讨论】:

    标签: html model-view-controller resources


    【解决方案1】:

    您通常会做的是将一些脚本资源推送到 viewbag 上的列表中,然后让您的模板通过该列表并为您生成脚本包含。

    部分:

    @{
        ViewBag.ScriptIncludes = ViewBag.ScriptIncludes ?? new List<string>();
        ViewBag.ScriptIncludes.add("script1.js");
    }
    

    在布局中(_Layout.cshtml)

    @if (ViewBag.ScriptIncludes != null)
    {
        foreach (string url in ViewBag.ScriptIncludes)
        {
            <script src="@url" type="text/javascript"></script>
        }
    }
    

    在正常情况下,这允许您将脚本与部分相关联,这非常好,如果您只是在页面加载时刷新页面上存在的部分,这是一个好主意。

    脚本应预加载在页面上。您不应该通过 ajax 获取脚本资源并将其注入页面来重新加载脚本。理想情况下,您也不会通过 ajax 获得 html,但有些人认为这是可以接受的。您只想将 html 注入页面而不是更多脚本。如果您在分部视图内的项目上有事件处理程序,请考虑将事件处理程序附加到容器而不是单独的元素。

    但是,鉴于您可能会重新加载任何视图,我认为您最好将脚本包含在头中。这将确保您以后不会发现任何冲突的脚本。您的网站本质上是一个应用程序,初始加载时会花费用户少量开销,但不需要刷新。

    【讨论】:

    • 问题是我所有的网站都在 AJAX 中。几乎可以加载任何视图。
    • 如果您要重新加载所有内容,那么 ajax 的意义何在?如果您在此之前在页面上预加载了 所有 资源,那么这可能是有意义的。您必须非常小心 JavaScript 状态。最好对您的站点进行编码,以便所有脚本都包含在头部中(更好的是单个 js 文件),这样您就知道在某处没有冲突的状态。也尽量不要打破后退按钮;)
    • 我可能应该提到动态脚本加载还不错,但是您需要一种更结构化的机制,而不是仅仅获取包含一些脚本的局部视图。您将更倾向于获取每个页面的 json 数据并将其呈现在客户端上,并异步加载 javascript 模块。
    • 我并不是说我会重新加载所有内容(至少,不是在同一时间......)而且我不会破坏后退按钮,因为我使用的是主干.js 进行路由!
    【解决方案2】:

    我认为这取决于您的上下文。假设您想要拥有所有页面(视图)所需的资源,如果您将它们放在布局中会更好。同样,如果您有一个非常特定于视图的资源,您可以将它们加载到视图中。
    并确保您使用 URL 助手来获取资源的 url。否则部署后会有问题。

    【讨论】:

    • 如果我加载具有脚本“y”的视图“x”并多次加载(覆盖旧的),这不是很糟糕吗?
    • 是的,它很糟糕。如果它与多个视图相关,则需要从模板中加载它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-09-19
    • 2021-09-20
    • 2019-03-03
    • 1970-01-01
    相关资源
    最近更新 更多