asp.net-mvc - 在 ASP.Net MVC 中，您如何创建将 javascript 和 css 放在它们应该去的地方的小部件？

Question

我正在尝试在 ASP.Net MVC 中创建一个可重用的小部件。这是一个将 2 个日期连接成一个字符串的小部件。该小部件包含 3 个文件:Widget.cshtml、Widget.css 和 Widget.js 以及对多个 jquery 库的依赖项。

小工具.cshtml

<h2>Create a date range</h2>

<div>
    <label for="startDate">Start:</label>
    <input id="startDate" class="date" name="startDate" type="text" />
</div>

<div>
    <label for="endDate">End:</label>
    <input id="endDate" class="date" name="endDate" type="text" />
</div>

<p id="output"></p>

<button id="createDateRange">Create</button>

小部件.css

label { color: #555;}

小部件.js

$(function () {
    $(".date").datepicker();

    $("#createDateRange").click(function () {
        var start = $("#startDate").val();
        var end = $("#endDate").val();
        $("#output").html(start + " to " + end);
    });
});

我想让这个小部件可以在我的 MVC 页面中重用。我想出了几个选项，包括:

创建 HTML 助手

渲染部分

渲染 Action

从小部件文件中删除所有 css 和 javascript 依赖项。手动复制并粘贴到我在正确位置使用它的每个 View 中。

当我想起 Steve Souders 的网站性能规则时，我正准备使用一个助手:

规则 5:将样式表放在顶部

规则 6:将脚本放在底部

选项 1)、2) 和 3) 看起来都是好主意，但它们都编写内联代码并违反性能规则。选项 4) 允许我手动将 javascript 和 css 文件放在它们所属的位置，但复制粘贴容易出错。一个潜在的想法是编写一个脚手架，将所有东西放在它所属的地方，但现在看来工作太多了。

做小部件并仍然遵循性能规则 5 和 6 的最佳(希望是简单的)方法是什么？

Answer 1

更改您的小部件以使用不显眼的 javascript 技术，以便可以扫描整个 DOM 以查找小部件的实例。依靠类而不是 ID。

使用像 Chirpy 这样的工具将所有 CSS 文件和 Javascript 文件打包到一个库文件(一个 .js 和一个 .css)中，您可以将其附加到母版页/布局的顶部和底部(分别)。

使用 HTML Helper 生成小部件 HTML。如果您愿意，HTML 帮助程序可以呈现部分 View 以将 HTML View 代码保存在 View 文件中。因为您使用的是不显眼的 javascript，所以无需生成任何内联脚本。只需让小部件的 javascript 代码扫描 DOM 中的小部件实例即可。

第1步
原始示例已经使用了一些不显眼的 javascript 技术，但是这里是如何进一步扩展该模式的方法，如 this jsfiddle 中所示。 .
小工具.cshtml

<div class="date-range-widget">
    <h2>Create a date range</h2>
    
    <div>
        <label for="startDate">Start:</label>
        <input id="startDate" class="date start-date" name="startDate" type="text" />
    </div>
    
    <div>
        <label for="endDate">End:</label>
        <input id="endDate" class="date end-date" name="endDate" type="text" />
    </div>
    
    <p class="output"></p>
    
    <button class="create-date-range">Create</button>
</div>

小部件.js

$(function () {
    // This line could probably be done generally, regardless of whether you're
    // in the widget.
    $("input.date").datepicker();

    $("div.date-range-widget").each(function(){
        var $t = $(this);
        var startBox = $t.find("input.start-date");
        var endBox = $t.find("input.end-date");
        var output = $t.find("p.output");
        $t.find("button.create-date-range").click(function () {
            output.html(startBox.val() + " to " + endBox.val());
        });
    });    
});

请注意您现在如何在页面上显示此小部件的多个实例，并使用不同的 id和 name值，并且它们将相互独立运作。
当没有 data-range-widget 时，javascript 仍然会搜索 DOM，找不到任何，然后继续。但是，与为不同的 javascript 文件进行单独的往返相比，此操作的成本通常非常轻。将 CSS 和 javascript 保存在单独的静态文件中，这样浏览器就可以缓存这些文件，这意味着它平均通过网络拉取的数据更少(因为从一个请求到下一个请求只有 HTML 更改)。
第2步
我个人认为将我的 javascript 和 CSS 合并到一个文件中是值得的，因此浏览器只需为给定的页面加载提取一个 javascript 和一个 css 文件(并且这两个文件都将在第一个页面加载后缓存)。如果您有一个仅在某些页面上使用的非常大的 javascript 文件，您可能希望将其分开并仅在某些页面上加载它。
无论如何，您的 javascript 应该以这样一种方式编写，即您可以立即加载您网站上的所有 javascript 文件，而不会相互影响。
第 3 步
应该是不言自明的。