Лучший способ выполнить js только на определенной странице

Мне было интересно, что было бы лучшим способом выполнить код java- script только на определенных страницах.

Предположим, что у нас есть веб-сайт на основе шаблонов, переписываем правило для набора ist, а jquery доступно и в основном выглядит следующим образом:

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

Содержимое "информация" содержит кнопку, мы хотим, чтобы что-то произошло в клике, содержимое "alert" должно указывать в качестве сообщения, когда вы наводите текстовое поле.

Каков наилучший способ запуска этих действий, не запускаясь в ошибку, потому что объект не найден?

Вариант один: использование 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');
       }
}

Вариант три: включить script в загруженный шаблон

//stands for itself

Это лучшее решение? Или мне нужно ладить с одним из этих решений?

Ваш опыт, использование или любые ссылки, связанные с этой темой, оценены.

//EDIT:

Возможно, я выбрал плохой пример, фактический код будет примерно таким:

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

где конструктор myPicture получает контекст элемента canvas и выдает ошибку, если mCanvas undefined.

Ответы

Ответ 1

Немного другой подход, чем проверка URL-адреса: вы можете группировать обработчики событий, специфичных для страницы, в одной функции, а затем в каждом include, иметь domready, который будет вызывать эти функции.

Например: в script.js у вас есть две функции (за пределами domready), а именно. onPage1Load() и onPage2Load().

В page1.php у вас есть $(document).ready(onPage1Load) и т.д. для других страниц. Это позволит убедиться, что незапланированные обработчики событий не зарегистрированы.

Ответ 2

Установите атрибут class в свой тег тела.

<body class="PageType">

И затем в script..

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

Ответ 3

Я бы использовал оператор 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

Это позволит вам изменить то, что "button" на основе страницы, на которой вы находитесь. Если я правильно понял ваш вопрос; это то, что я сделал бы. Кроме того, если бы я обслуживал большое количество 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;
}

Надеюсь, что это поможет -

Приветствия.

Ответ 4

Вы можете использовать Require js (RequireJS - это файл JavaScript и загрузчик модуля) и загружать script, если они нужны только. Ссылка http://requirejs.org/, я знаю, что использование js не так просто.