避免在 Content-Master 页面中出现多个 document.ready答案

【问题标题】：Avoid Multiple document.ready in Content-Master page避免在 Content-Master 页面中出现多个 document.ready
【发布时间】：2015-11-06 09:40:22
【问题描述】：

我有多个内容页面，它们又是从母版页面派生的，

每个内容页面在加载时都需要一些初始化事件，母版页也是如此。

目前我正在这样做

母版页

<script type="javascript"> 
$(document).ready({
// Initialize my master page events code
});
</script>
<asp:ContentPlaceHolder ID="cphSalesTrackerScripts" runat="server">
</asp:ContentPlaceHolder>

内容页面 1

 <asp:Content ID="cntBodyScripts" contentPlaceHolderID="cphSalesTrackerScripts" runat="server">
  <script type="javascript"> 
   $(document).ready({
   // Initialize my content page 1 events  code
});
</script>
</asp:Content>

内容页面 2

 <asp:Content ID="cntBodyScripts" contentPlaceHolderID="cphSalesTrackerScripts" runat="server">
  <script type="javascript"> 
   $(document).ready({
   // Initialize my content page 2 events  code
});
</script>
</asp:Content>

我正在学习最好的编码技术Here

它说

每页仅使用一个 Document Ready 处理程序。

那么如何管理每个内容页面的single ready...因为母版页和内容页面在浏览器中一起呈现，而我的场景有two ready handler

【问题讨论】：

标签： jquery asp.net coding-style

【解决方案1】：

将一个脚本放在一个 pre-footer 文件中并在所有页面上调用它，然后放置一个 document.ready 并将所有函数、自定义 js 内容移动到那里：

Jquery(document).ready(function() {
   // some code

   // other code
}

【讨论】：

【解决方案2】：

我看不出使用多个document.ready 有什么问题。但是，如果你只想拥有一个，你可以做两件事：

在母版页的<script> 标记内包含占位符。然后，在您的内容页面中，您必须只提供 JavaScript 代码，而不提供 <script> 标记
在主脚本中公开一个回调，并在内容页面中提供它。如果可用，请从主页调用它。

第二个想法是这样的：

在母版页中：

$(document).ready({
  // Initialize my master page events code

  // run the content page callback if available
  if (window.contentCallback) { contentCallback(); };
});

在内容页面中：

window.contentCallback = function() {
  // content page code to run on document.ready
};

请注意，我正在使用全局对象 window 在内容页和母版页之间共享它。这确实是一个非常糟糕的主意，但是使用 ASP.NET 就需要进行这种 hack。

但是，您可以通过至少在您自己的对象中包含回调来改进它，而不是用很多东西污染全局：

在母版页中：

window.MyApp = {}; // Create empty object

$(document).ready({
  // Initialize my master page events code

  // run the content page callback if available
  if (MyApp.contentCallback) { contentCallback(); };
});

在内容页面中：

MyApp.contentCallback = function() {
  // content page code to run on document.ready
};

【讨论】：

【解决方案3】：

在您的 MasterPage 中，

    <script src="/js/global.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="AdditionalScripts" runat="server" />

    <script type="text/javascript">
        $(document).ready(function () {
            initMain(window.jQuery, window); // Code in global.js
            initPage(window.jQuery, window);
        });
    </script>

在您的所有内容页面中：

<asp:Content runat="server" ContentPlaceHolderID="AdditionalScripts">
  <script src="/js/pageX.js" type="text/javascript"></script>    
</asp:Content>

最后在 pageX.js 中：

function initPage($, window) {
  // Init this Page
}

【讨论】：