仅在特定页面上执行 js 的最佳方式答案

【问题标题】：Best way to execute js only on specific page仅在特定页面上执行 js 的最佳方式
【发布时间】：2012-03-23 14:46:23
【问题描述】：

我想知道仅在特定页面上执行 java 脚本代码的最佳方法是什么。

假设我们有一个基于模板的网站，为内容设置重写规则，jquery 可用，它基本上看起来像这样：

  <!DOCTYPE html>
  <html>
   <head>
    <script src="script.js"></script>
   </head>
   <body>
    ...
    include $content;
    ..
   </body>
</html>

内容“信息”包含一个按钮，我们希望在点击时发生某些事情，当您将鼠标悬停在文本字段时，内容“警报”应该给我们一条消息。

什么是触发这些操作的最佳方法，而不会因为找不到对象而发生错误？

选项一：使用window.location.pathname

 $(document).ready(function() {
      if (window.location.pathname == '/info.php') {
          $("#button1").click(function(){
            //do something
          })
      }else if(window.location.pathname == '/alert.php'){
           $("#mytextfield").hover(){
             alert('message');
           }
    }

选项二：检查元素是否存在

$(document).ready(function() {
  if ($("#button1").length > 0) {
      $("#button1").click(function(){
        //do something
      })
  }else if ($("#mytextfield").length > 0){
       $("#mytextfield").hover(){
         alert('message');
       }
}

选项三：在加载的模板中包含脚本

//stands for itself

有没有更好的解决方案？还是我必须接受这些解决方案之一？

感谢您的经验、使用情况或与此主题相关的任何链接。

//编辑：

我可能选择了一个不好的例子，实际的代码应该是这样的：

    mCanvas = $("#jsonCanvas");
    mMyPicture = new myPicture (mCanvas);

myPicture 构造函数在哪里获取画布元素的上下文，如果 mCanvas 未定义，则会引发错误。

【问题讨论】：

一个好主意是只在需要它的页面上包含 javascript，并且$(document).ready 可能在一个页面上被多次调用，所以你应该在这里安全。
如果您使用 jQuery，则无需在分配事件处理程序之前检查元素是否存在：$("someselector").click(...) 会将点击处理程序应用于 零个或多个匹配“someselector”的元素 - 如果没有匹配，它不会给出错误。
@IanBishop ：这是选项三 :) - >使用模板加载 js @nnnnnn ：查看我的编辑，但你是对的，关于“仅”点击操作
考虑例如，您有 3 个这些“条件”包含。页面 A 使用 1,2。页面 B 使用 1。页面 C 仅使用 3。选项 1 给您留下一堆条件，检查您所在的页面以及要调用的函数。选项 2 给您留下了不同的条件来检查应该运行哪些脚本。此外，如果您的身份有冲突 - 您就有麻烦了。如果您说，提交表单的附加验证 - 您可以有两个 ID 为“提交”的按钮。但其中只有一个需要额外的验证。
另一种常见的方法是在 html 或 body 标签中添加类名。

标签： javascript jquery html performance

【解决方案1】：

为你的body标签设置class属性。

<body class="PageType">

然后在你的脚本中..

$(function(){
  if($('body').is('.PageType')){
    //add dynamic script tag  using createElement()
    OR
    //call specific functions
  }
});

【讨论】：

我认为将类名添加到每个页面是很好的做法。对于 js 和 css 来说都是如此
在有人重命名类之前不是一个坏主意
很好的答案，但hasClass() 的性能比is() 好得多。如果您要通过多个条件来确定您在现有的众多页面中的哪个页面，我建议您切换您正在使用的功能。
这样一个简洁的答案。帮了我很多忙。
也可以使用data 属性。我更喜欢将data-* 用于将在 JS 中使用的选择器，这样我就知道元素以某种方式与 JS 交互。将data-page 属性添加到正文，然后只需检查document.body.getAttribute('data-page') == 'pagetype'。准备好运行它。

【解决方案2】：

我会使用 switch 语句和一个变量。（我正在使用 jQuery！）

var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname

switch(windowLoc){      
  case "/info.php":
    //code here
    break;
  case "/alert.php":
    //code here
    break;
}

//use windowLoc as necessary elsewhere

这将允许您根据您所在的页面更改“按钮”的功能。如果我正确理解了您的问题；这就是我要做的。另外，如果我提供了大量的 javascript，我会简单地添加一个新的 JS 文件。

var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname

switch(windowLoc){      
  case "/info.php":
    var infoJS = document.createElement('script');
    infoJS.type = 'text/javascript';
    infoJS.src = 'location/to/my/info_file.js';
    $('body').append(infoJs);
    break;
  case "/alert.php":
    var alertJS = document.createElement('script');
    alertJS.type = 'text/javascript';
    alertJS.src = 'location/to/my/alert_file.js';
    $('body').append(alertJs);
    break;
}

希望这会有所帮助 -

干杯。

【讨论】：

因为您使用的是 jquery。 jQuery.getScript() 有用
重新加载 js 文件的好方法。 :)

【解决方案3】：

与检查 URL 路径略有不同的方法：您可以将特定于页面的事件处理程序分组到一个函数中，然后在每个包含中，有一个将调用这些函数的 domready。

例如：在script.js 中，您有两个功能（在 domready 之外），即。 onPage1Load() 和 onPage2Load()。

在您的page1.php 中，您有一个$(document).ready(onPage1Load) 以此类推其他页面。这将确保未注册意外事件处理程序。

【讨论】：

我认为这是写东西最简单的方法，而且易于阅读和调试。我认为选项一就像前端控制器一样不错，但可能会导致混乱。另外，当有别名会很困难时。如果有一个框架可以以某种方式自动化它，那可能会起作用......页面类的方法似乎也是个好主意。
最适合我的是有一个仅在该页面上调用该函数的内联脚本。

【解决方案4】：

你也可以使用 vanilla javascript 来做同样的事情

console.log(window.location.href);
const host = "http://127.0.0.1:5500/";
// JAVASCRIPT FOR INDEX PAGE 
if (window.location.href == host + 'index.html') {
    console.log("this is index page");
}

// JAVASCRIPT FOR ORDER PAGE 
if (window.location.href == host + 'order.html') {
    console.log("this is order page");
}

【讨论】：

【解决方案5】：

您可以使用 Require js（RequireJS 是一个 JavaScript 文件和模块加载器）并仅在需要时加载脚本。链接是http://requirejs.org/，我知道使用 require js 不是那么容易。

【讨论】：