试图通过将其从视图移动到 js 文件来重用 javascript 代码答案

【问题标题】：trying to reuse javascript code by moving it from view to js file试图通过将其从视图移动到 js 文件来重用 javascript 代码
【发布时间】：2010-01-18 00:25:19
【问题描述】：

我有一堆代码在其中动态地在 javascript 中创建下拉框。为了预先准备下拉项目列表，我经常有类似于下面的代码，我从我的模型中“注入”到数据项数组中，所以我有 javascript 函数内的代码。

这很好用，只是我现在有类似的代码，我想跨文件重用，因为我不想复制和粘贴代码。问题是，通常我会将我的 javascript 代码移动到单独的 .js 文件中并将其导入到我的多个视图中，但在这种情况下，我不能因为代码在 .js 文件中不起作用。

关于如何避免在此处复制和粘贴解决方案的任何建议？

$(".dependencyAddButton").click(function() {

                var tblID = $(this).prev("table").attr("id");

                var lastRow = GetLastRow(tblID);

                var existingItems = GetExistingItems('#' + tblID);

                <%= myHTMLhelper.ShowArray(Model.AllApplications, "components", "componentIds") %>

【问题讨论】：

我根本不了解 ASP（也不了解 .NET），但基本原理与 LAMP（Linux/Apache/PHP）堆栈上的相同：您需要更改您的Web 服务器设置，以便 .js 文件由 ASP 解析，或者 - 更容易 - 让您的页面指向 .asp 文件（或任何您的扩展名）而不是 .js 文件。在这种情况下，您将能够在其中使用<% %>。如果您使用后者，您可能需要发送一个 content-type: text/javascript 标头以确保它在任何地方都能正常工作。
这段代码有什么作用：<%= myHTMLhelper.ShowArray(Model.AllApplications, "components", "componentIds") %>？
它生成一个javascript行； var 数组 = 新数组 {1,2,3,4}

标签： javascript jquery asp.net-mvc

【解决方案1】：

您要做的是从您的脚本创建一个 jQuery 插件，并将所有服务器端信息作为参数传递给插件。使用您的示例，您将在外部文件中定义以下插件：

jQuery.fn.dropdown = function(array) {
    var tableId = $(this).prev('table').attr('id');
    var lastRow = GetLastRow(tblId);
    var existingItems = GetExistingItems('#' + tblId);
    var dropDownItems = array;
    // DO STUFF WITH THE ARRAY
};

然后你会从你的视图中调用它：

$('.dependencyAddButton').dropdown(<%= myHTMLhelper.ShowArray(Model.AllApplications, "components", "componentIds") %>);

这是一种非常常见的技术，每当需要动态信息时都会用到它。它可能是 URL 或其他配置属性。

请注意，这是一个在我脑海中写下的 jQuery 插件。它不一定遵循当前编写插件的最佳实践；它甚至可能不起作用。它只是您可以用来处理您遇到的问题的技术的一个示例。请查看以下链接之一，了解有关编写 jQuery 插件的更多信息：

【讨论】：

【解决方案2】：

$(".dependencyAddButton").click(function() {
    var tblID = $(this).prev("table").attr("id");
    var lastRow = GetLastRow(tblID);
    var existingItems = GetExistingItems('#' + tblID);

这是静态代码。进入外部 .js 文件是一个不错的选择，该文件可以只获取一次，然后缓存。

<%= myHTMLhelper.ShowArray(Model.AllApplications, "components", "componentIds") %>

这不是静态代码，它是与页面相关的数据。进入外部 .js 文件并不是一个很好的选择。它可能会改变。在页面本身中保持内联要容易得多。

当然，如果您愿意，您可以将其踢出到外部文件：正如 Pekka 所说，通过 ASP 提供 .js，或者（更简单）只需将脚本标签指向 .aspx URL。但是你这样做有什么好处呢？它不会被缓存，所以这是额外的 HTTP 请求，具有相关的延迟。您可以通过手动管理缓存标头来解决这个问题，但是要正确完成这并不是那么简单，您甚至知道在过期之前应该缓存多长时间吗？

为了减少您端的重复，您当然可以将这种“每个页面使用的输出数据”代码放在服务器端的某种共享功能中，例如母版页或用户控件。

【讨论】：

感谢您的回复。所以我的问题是，如果您想将动态数据注入到 javascript 函数中，您是否必须将整个函数保留在视图中。我将如何分离“纯”javascript并让它仍然获取视图的动态数据
最简单的方法是编写一个全局变量，稍后在函数内部读取。如果你真的想的话，你可以使用命名空间或闭包来防止变量实际上是一个全局变量，但这或多或少是一样的。
但这不会是 javascript 回调到内联视图文件中的另一个 js 函数。 .这行得通吗？
如果你以正确的顺序运行它们，是的。我不确定ShowArray 实际在做什么，无论是写var components= [1, 2, 3]; 还是例如。打电话给setupAddButton([1, 2, 3]);。无论哪种方式都可以，但会改变必要的包含顺序。
显示数组只是生成 var components= [1, 2, 3]。代码看起来如何回调到内联数组函数

【解决方案3】：

我建议将脚本替换为等效的 JavaScript。由于您使用的是 jQuery，我会将这个简短的脚本变成一个 jQuery 插件。这很容易做到，基本上只是在您当前的代码周围添加一个包装器。然后你就可以做类似的事情了。

$(".dependencyAddButton").AddClick();

【讨论】：