Javascript 在asp.net项目中管理常用jquery脚本文件_Javascript_Jquery_Asp.net_Webforms

Javascript 在asp.net项目中管理常用jquery脚本文件

javascript jquery asp.net

Javascript 在asp.net项目中管理常用jquery脚本文件,javascript,jquery,asp.net,webforms,Javascript,Jquery,Asp.net,Webforms,我正在寻找在asp.net项目中使用javascript/jQuery代码片段的最佳实践。我知道最好将所有脚本放在一个单独的文件中，而不是内联。那很好。可以很容易地将这些脚本函数移动到一个公共文件中（可能是两个不同的文件，以平衡加载单个大文件的性能）但是在document.Ready的每一页上都有一些jQuery的东西需要处理。如何将其移动到公共.js文件？我想避免每页一个脚本，因为它太多了例如，假设Page1需要在加载时操作几个单选按钮，并内联以下脚本。（仅供说明） $（文档）.read

我正在寻找在asp.net项目中使用

javascript/jQuery

代码片段的最佳实践。我知道最好将所有脚本放在一个单独的文件中，而不是内联。那很好。可以很容易地将这些脚本函数移动到一个公共文件中（可能是两个不同的文件，以平衡加载单个大文件的性能）

但是在

document.Ready

的每一页上都有一些

jQuery

的东西需要处理。如何将其移动到公共

.js

文件？我想避免每页一个脚本，因为它太多了

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


$（文档）.ready（函数（）{
//复选框
如果（真）
调用function1（）；
});

与第2页相同，但对于某些其他情况，调用不同的函数

function2

我可以将function1和function2移动到一个公共的

.js

文件中，但是

文档就绪部分如何。应该保持在线吗？我这样认为是因为，否则我不确定common.js
如何区分不同页面的document.ready

那么它是否违背了不使用内联javascript
的目的呢？如果有人能对此有所启发，我们将不胜感激
我做了一些研究，但可能是因为不正确的关键字，到目前为止，我还没有找到任何相同的好信息。在下面的评论中，低调的JavaScript似乎很有前途。
有很多方法可以解决这个问题，要么使用JavaScript框架，将您的网站视为“Webapp”（和流行的应用程序之一），要么使用您自己的自定义脚本来实现这一点——在每个加载的页面上调用适当的JavaScript
基本上，能够处理它的自定义脚本必须使用（伪）“名称空间”来分隔模块/页面代码部分
假设您有两个假设页面，Home
和Browse
，简化的代码示例可能如下所示：
HTML:
<body data-page="Home">

var MyApp = {}; // global namespace

$(document).ready(function()
     {
     var pageName = $('body').data('page');

     if (pageName && MyApp[pageName] && MyApp[pageName].Ready)
          MyApp[pageName].Ready();
     });

MyApp.Home = MyApp.Home || {}; // 'Home' namespace

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

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
     }

Home.js:
<body data-page="Home">

var MyApp = {}; // global namespace

$(document).ready(function()
     {
     var pageName = $('body').data('page');

     if (pageName && MyApp[pageName] && MyApp[pageName].Ready)
          MyApp[pageName].Ready();
     });

MyApp.Home = MyApp.Home || {}; // 'Home' namespace

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

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
     }

Browse.js:
<body data-page="Home">

var MyApp = {}; // global namespace

$(document).ready(function()
     {
     var pageName = $('body').data('page');

     if (pageName && MyApp[pageName] && MyApp[pageName].Ready)
          MyApp[pageName].Ready();
     });

MyApp.Home = MyApp.Home || {}; // 'Home' namespace

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

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，有时您的控制器
名称可能适合作为限定页面名称，因此您可以在Layout.cshtml
中自动设置它（如果您有）：

@RenderBody（）
您只需在每页上创建单独的js文件，并将其包含在相关页面中即可。对于共享脚本代码，有一个公共js文件。以你为例：
<div data-fancy-trick="trick-3">...</div>

common.js
第1.js页
第2.js页
页面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>
...

。。。
...
我认为不值得把所有内容都塞进一个文件中，并用条件语句将它们分开，只是为了避免在相应的文件中添加引用
如果您有可以在2、3或更多页面上调用的代码，那么我们可以选择将它们放在公共文件中。但是，如果要在单个页面上调用它，那么我们必须只在相应的页面上编写代码。这也会增加声明当前页面上不会调用的函数的开销
当您使用公共js文件时，就不必担心$（document.ready（）事件，您可以在公共文件中使用单个就绪事件，并使用条件语句分隔代码。
您应该使用数据-*
属性指定HTML中应该存在哪些行为。

然后，您可以使用一段通用的Javascript代码来读取这些属性并应用行为
例如：
<div data-fancy-trick="trick-3">...</div>

有关此技术的实际示例，请参阅。
考虑AMD（异步模块定义）设计模式的使用。将JavaScript代码放入模块中，并在每个页面上使用您真正需要的代码。例如，我做得很好，我一直在成功地使用它。如果你有一个更大的项目，你可以把你的模块分割成名称空间。这种方法将保持良好的代码可维护性和可靠性。您只需将“starter”javascript文件放在每个页面上，并仅加载每个页面需要使用的模块
 新版本的脚本管理器将把所有内容组合成一个脚本块。从理论上讲，它减少了往返次数，运行速度更快。实际上，您可能会得到几个几乎相同的大型脚本，每个页面都需要自己的一个脚本块。如果你做了一个永远不会改变url的网站页面，那么这就是你要做的
在ASP.Net上使用jquery时，我提出了这些最佳实践
在第一个脚本管理器上方的母版页中加载Jquery。Jquery现在可以在每个页面上使用。浏览器将只获取一次并缓存它
如果带宽是一个问题，请使用jquery加载程序，如googleload或
Document.load始终位于页面底部，以确保所需的所有内容都已加载
解决此问题的一种常见方法是让您的通用脚本包含一个每页脚本元素：
<!-- 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>


//让main.JS中有一个onDomReady JS对象
//它以每页为基础定义document.ready逻辑
$（document）.ready（onDomReady.shoppingCart）；
好问题，我一直在处理同样的事情。
以下是我一直在做的事情：
让您的$（document）.ready（）调用不同的init函数（如果存在），其中每个.js文件都有自己的init，它可以添加事件侦听器并加载函数、处理css等。。每个.js文件被分成不同的功能部分...
<script src='scripts/ready.js'></script>
<script src='scripts/menuNav.js'></script>
...

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