Организация javascript / jQuery для нескольких веб-страниц - PullRequest
Новая
       1

Организация javascript / jQuery для нескольких веб-страниц

0 голосов
/ 12 марта 2012

Чтобы быть организованным, я хотел бы сохранить весь javascript для своего сайта в одном файле: 

scripts.js

Однако некоторые из моих сценариев используются только на некоторых страницах, другие сценариииспользуется только на других страницах.

В моей функции готовности документов это выглядит так: 

function home_page() {
  // image rotator with "global" variables I only need on the home page
}

$('#form')... // jQuery form validation on another page

Проблема в том, что я получаю JavaScript для выполнения на страницах, это даже ненеобходимо.Я знаю, что есть лучший способ организовать это, но я не уверен, с чего начать ...

Ответы [ 4 ]

2 голосов
/ 12 марта 2012

Единственное, что вы можете сделать, это использовать классы для тега <html> или <body>, чтобы установить тип каждой страницы. Код JavaScript может затем использовать довольно дешевые .is() тесты, прежде чем принимать решение о применении групп поведения. 

if ($('body').is('.catalog-page')) {
  // ... apply behaviors needed only by "catalog" pages ...
}

Даже в IE6 и 7 даже несколько десятков подобных тестов не вызовут проблем с производительностью.

1 голос
/ 12 марта 2012

Я обычно делаю что-то вроде этого или какой-то вариант (маленький псевдокод ниже): 

var site = {
    home: {
       init: function() {
           var self=this; //for some reference later, used quite often
           $('somebutton').on('click', do_some_other_function);
           var externalFile=self.myAjax('http://google.com');
       },
       myAjax: function(url) {
           return $.getJSON(url);
       }
    },
    about: {
       init: function() {
           var self=this;
           $('aboutElement').fadeIn(300, function() {
               self.popup('This is all about me!');
           });
       },
       popup: function(msg) {
           alert(msg);
       }
    }
};
$(function() {
    switch($('body').attr('class')) {
       case 'home':
          site.home.init(); 
       break;
       case 'about':
          site.about.init();
       break;
       default: 
          site.error.init(); //or just home etc. depends on the site
    }
});
1 голос
/ 12 марта 2012

Вы можете использовать для каждой литералы объекта страницы, чтобы получить разные области видимости. 

​var home = {

    other: function() {

    },

    init: function() {

    }
};

var about = {

    sendButton: function(e) {

    },        

    other: function() {

    },

    init: function() {

    }
}

var pagesToLoad = [home, about];
pagesToLoad.foreach(function(page) {
   page.init();
});​
1 голос
/ 12 марта 2012

У меня обычно есть функция init(), которая выглядит примерно так: 

function init() {

    if($('#someElement').length>1) {
         runSomeInitFunction()
    }
    ... more of the same for other elements ...

}

По сути, просто проверьте, существует ли элемент на странице, если он есть, запустите собственную функцию инициализации, если нет, пропустите его.

Все JS-коды кэшируются браузером после загрузки первой страницы, так что нет смысла разбивать ваш JS-файл на отдельные части страницы. Это просто делает его техническим кошмаром.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...