管理项目中 asp.net 常见的 jQuery 脚本文件

managing common jquery script files in asp.net project

本文关键字：jQuery 脚本 文件 常见 net 项目 asp 管理      更新时间：2023-09-26

我正在寻找在 asp.net 项目中使用javascript/jQuery片段的最佳实践。我知道最好将所有脚本放在一个单独的文件中，而不是内联。很好。 将这些脚本函数移动到一个公共文件中很容易（可能是几个不同的文件，以平衡为小函数加载单个大文件的性能）。

但是有一些jQuery的事情需要在每页上document.Ready发生。如何将其移动到通用.js文件？我想避免每页一个脚本，因为它太多了。

例如，假设 Page1 需要在加载时操作几个单选按钮，并且具有以下内联脚本。（仅供说明）

<script>
$(document).ready(function() {
 //check checkboxes
  if(true)
   call function1();
});
</script>

与Page2相同，但对于其他一些条件，调用不同的函数function2。

我可以将函数 1 和函数 2 移动到一个通用的.js文件中，但document ready部分怎么样。这应该保持内联吗？我假设是这样，因为否则我不确定common.js将如何区分不同页面的document.ready。

那么它是否违背了没有内联javascript的目的？如果有人能对此有所了解，我们将不胜感激。

我

做了一些研究，但可能是由于关键字不正确，到目前为止，我还没有找到任何相同的好信息。在下面的评论中，不引人注目的JavaScript似乎很有前途。

您应该使用 data-* 属性指定 HTML 中应存在的行为。
然后，您可以使用单个通用的 Javascript 代码段来读取这些属性并应用行为。

例如：

<div data-fancy-trick="trick-3">...</div>

在JS文件中，你可以写一些类似的东西

$('[data-fancy-trick]'.each(function() { 
    var trickName = $(this).data('fancy-trick');
    switch (trickName) {
        ...
    }
});

有关此技术的真实示例，请查看 Bootstrap 的 Javascript 组件。

您可以简单地在每个页面中使用单独的js文件，并将它们包含在相关页面中。对于共享脚本代码，有一个通用的 js 文件。按照您的示例：

常见.js 

var myCommonVar = {};
function myCommonFunction(...){
   ...
}

页1.js

$(document).ready(function() {
 ...
 function1();
 ...
});

页2.js

$(document).ready(function() {
 ...
 function2();
 ...
});

页1.html

...
<script src='/js/common/js'></script>
<script src='/js/page1.js'></script>
...

页2.html

...
<script src='/js/common/js'></script>
<script src='/js/page2.js'></script>
...

考虑AMD（异步模块定义）设计模式的使用。把你的JavaScript代码放到模块中，在每个页面上只使用你真正需要的代码。例如requirejs做得很好，我一直在成功地使用它。如果你有一个更大的项目，你可以将模块拆分为命名空间。这种方法将保持出色的代码可维护性，并且可靠。您只需将"starter"javascript文件放在每个页面上，然后仅加载每个页面需要使用的必需模块。

有很多方法可以解决这个问题，要么使用JavaScript框架，旨在将您的网站视为"Webapp"（流行的Angular和Ember），要么使用您自己的自定义脚本来做到这一点 - 为每个加载的页面调用适当的JavaScript。

基本上，能够处理它的自定义脚本必须使用（伪）"命名空间"来分隔模块/页面代码部分。

假设

你有 2 个假设页面，Home 和 Browse，简化代码示例可能如下所示：

.HTML：

<body data-page="Home">

全球.js：

var MyApp = {}; // global namespace
$(document).ready(function()
     {
     var pageName = $('body').data('page');
     if (pageName && MyApp[pageName] && MyApp[pageName].Ready)
          MyApp[pageName].Ready();
     });

首页.js：

MyApp.Home = MyApp.Home || {}; // 'Home' namespace
MyApp.Home.Ready = function()
     {
     // here comes your 'Home' document.ready()
     };

浏览.js：

MyApp.Browse = MyApp.Browse || {}; // 'Browse' namespace
MyApp.Browse.Ready = function()
     {
     // here comes your 'Browse' document.ready()
     };
MyApp.Browse.AnotherUtilFunc = function()
     {
     // you could have the rest of your page-specific functions as well
     }

此外，由于您 ASP.NET 使用的是 MVC，有时您的Controller名称可能适合作为限定页面名称，您可以在Layout.cshtml中自动设置它（如果有）：

<html>
      <head>
      </head>
      <body data-page="@ViewContext.RouteData.Values["Controller"].ToString()">
           @RenderBody()
      </body>
</html>
我认为不

值得将所有内容塞在一个文件中并用条件语句将它们分开，只是为了避免在相应的文件上添加引用。

如果您有可以在 2,3 或更多页面上调用的代码，那么我们可以选择将它们放在一个通用文件中。但是，如果要在单个页面上调用它，那么我们必须仅在相应的页面上编写代码。这也会增加声明不会在当前页面上调用的函数的开销

而当你使用common js文件时，你就不用担心$(document).ready();事件了，你可以在common文件中使用单个ready事件，并使用条件语句来分隔代码。

新版本的脚本管理器会将所有内容合并到脚本的一个blob中。 从理论上讲，它减少了往返次数，运行速度更快。 实际上，您最终可能会得到几个几乎相同的大型脚本，并且每个页面都需要自己的脚本 blob。 如果您制作其中一个永远不会更改 url 网站页面，那么这就是要走的路。

当我使用 jquery 处理 ASP.Net 时，我想出了这些最佳实践

  1. 在第一个脚本管理器上方的母版页中加载 Jquery。 Jquery现在在每个页面上都可用。 浏览器只会获取一次并缓存它。
  2. 如果带宽是一个问题，请使用jquery加载器，如googleload或MS内容交付网络
  3. Document.load 始终位于页面底部，以保证所需的所有内容都已加载。

从我多年没有更新的博客...Google Load with ASP.Net

解决此问题的一种常见方法是让通用脚本后跟每页脚本元素：

<!-- In 'shoppingcart.html' -->
<script src="main.js"></script>
<script>
    // Let there be a onDomReady JS object inside main.js
    // that defines the document.ready logic on a per-page basis
    $(document).ready(onDomReady.shoppingCart);
</script>

很好的问题，我一直在处理同样的事情。这是我一直在做的事情：

让你的 $（document）.ready（） 调用不同的 init 函数（如果存在的话），其中每个.js文件都有自己的 init，它添加事件侦听器和加载函数，弄乱 css 等。每个.js文件都分为不同的功能部分。

这样，您就可以准备好一个调用所有初始值设定项的文档。因此，每个页面都将包含它所需的.js功能。通过这种方式，您可以区分出不同之处。

前任：

准备就绪.js：

$(document).ready(function(){
if (typeof menuNavInit == 'function'){
     menuNavInit();
}
if (typeof menuNavDifferentInit == 'function'){
     menuNavDifferentInit();
}
//other .js functionality
});

菜单导航.js

function menuNavInit(){
     $("#menu").on('click', menuNavClick)
}
function menuNavClick(){
//do something
}

菜单导航不同.js

function menuNavDifferentInit(){
     $("#menu").on('click', menuNavDifferentClick)
}
function menuNavDifferentClick(){
//do something else
}

页1.html

...
<script src='scripts/ready.js'></script>
<script src='scripts/menuNav.js'></script>
...

页2.html

...
<script src='scripts/ready.js'></script>
<script src='scripts/menuNavDifferent.js'></script>
...
相关文章：