15

我正在寻找一些关于保存我的 JavaScript (jQuery) 函数的最佳方式的建议。

我正在 MVC/razor 中开发，因此有一个布局页面。我在这里包含了我的 jQuery 库和一个外部 JavaScript 文件，因此它在每个页面中都可用。

这工作得很好，但我现在非常清楚我正在向每个页面添加近 300 行 JS 的事实，其中可能有一半用于这些页面中的任何一个。

一个函数不在外部文件中，而是位于 HTML 中，因为我需要使用我的剃刀代码中设置的变量。

我对这种安排有几个问题：

  • 使用 razor 设置的变量时，将 JS 放在 HTML 中通常可以接受吗？似乎没有一种将变量传递到外部 js 文件的干净方法
  • 我是否应该将我的函数拆分为单独的 JS 文件，并只包含站点中每个页面所需的内容？
  • 如果我要将它们拆分为多个文件，那将如何与 jQuery 一起使用(document).ready？如果要使用我包含的所有 JavaScript，我是否需要使用它？

我敢肯定，这将更多的是一个意见问题，而不是一个黑白的答案，但我想在继续之前考虑我所有的选择。尽管它可以正常工作，但我不禁觉得有更好/更清洁的方法。

4

2 回答 2

12

请记住，一旦用户登陆您的主页并加载 javascript 文件，它将被缓存在他们的浏览器中，因此后续页面将不会再次下载 Javascript。

我肯定会将 js 分开，您可以在每个页面上都有一个片段来初始化该特定视图所需的 JS。在需要运行 JS 的视图中放入类似下面的内容

$(document).ready(function() {
    mysite.mypage();
});

然后可以在外部JS文件中定义函数mysite.mypage()。300 行并不是世界末日，我会说担心优化可能还为时过早。

您总是可以考虑缩小该 JS 文件以减小大小。一个快速简便的方法是在这里：

http://www.minifyjavascript.com/

于 2012-12-19T14:45:56.200 回答
3

你听说过 require.js 吗？http://requirejs.org/ 我觉得它真的很有用。

它是一个模块加载器，因此您可以将所有 JS 代码拆分为单独的文件，并仅在每个页面上加载您需要的文件。

我不知道将变量传递给外部 JS 文件，我认为它不可能/“正确”的方式。

你可以把每个外部的JS文件做成一个接受和返回参数的函数。然后在你需要使用的页面中： - 包含文件依赖 - 调用函数

这就是我所做的，似乎是你的第二个建议。

对于 $(document.ready) 问题，这完全取决于您。您不必使用它，但它对某些事情很有用，请查看此概述： http ://docs.jquery.com/Tutorials:Introducing_ $(document).ready()

于 2012-12-19T14:57:27.433 回答