Как я могу объединить мои файлы JavaScript и при этом мои обратные вызовы ждут состояния готовности?

У меня есть много функций и обработчиков событий, которые разбиты по нескольким файлам JavaScript, которые включены на разных страницах моего сайта.

Из соображений производительности я хочу объединить все эти файлы в один файл, который является глобальным для всего сайта.

Проблема в том, что у меня будут вызываться обработчики событий для элементов, которые не обязательно существуют, и с одинаковыми именами функций.

Это пример типичного файла JavaScript...

$(document).ready(function(){
    $('#blah').keypress(function(e){
        if (e.which == 13) {
            checkMap();
            return false;
        }
    });
});

function checkMap() {
    // code
}

function loadMap() {
    // code
}

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

Мои мысли, я мог бы переписать это так:

(function($) {
    $.homepage = {
        checkMap: function(){
            // code
        },
        loadMap: function(){
            //code  
        }
    };
})(jQuery);

И затем на странице, которая требует этого, я мог бы вызвать $.homepage.checkMap() и т.д.

Но тогда как мне объявить обработчики событий, такие как document.ready не содержащие его в своей собственной функции?

Ответ 1

Я думаю, что все, что вам нужно, это пространство имен для вашего приложения. Пространство имен - это простой объект JSON, который может выглядеть следующим образом:

var myApp = {
    homepage : {
      showHeader : function(){},
      hideHeader : function(){},
      animationDelay : 3400,
      start : function(){} // the function that start the entire homepage logic
    },
    about : {
    .... 
    }
}

Вы можете разбить его на большее количество файлов:

MyApp будет содержать объект myApp = {}, возможно, с некоторыми полезными утилитами, такими как object.create или что у вас есть.
Домашняя страница .js будет содержать myApp.homepage = {...} со всеми методами вашей домашней страницы.
Список можно продолжать и продолжать с остальными страницами.

Подумайте об этом как о пакетах. Вам не нужно использовать $в качестве основного объекта.

 <script src="myapp.js"></script>
 <script src="homepage.js"></script>
 <-....->
 <script>
   myApp.homepage.start();
 </script>

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

При сжатии с помощью YUI вы должны иметь:

<script src="scripts.min.js"></script>
<script>
    myApp.homepage.start();
 </script>

Ответ 2

Прежде всего: в зависимости от того, сколько у вас кода, вы должны подумать, что если обслуживание всего вашего кода в одном файле действительно хорошая идея. Это нормально для сохранения http-запросов, но если вы загружаете огромный кусок кода, из которого вы используете 5% на одной странице, вам может быть лучше, если эти файлы js будут разделены (особенно в мобильных средах!). Помните, что вы можете позволить браузеру кешировать эти файлы. В зависимости от того, как часто изменяется ваш код и насколько изменяется исходный код, вы можете отделить свой код от стабильной функциональности ядра и дополнительных пакетов .js для специальных целей. Таким образом, вы можете быть лучше с трафиком и поддержкой.

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

Наконец, вы можете предотвратить вызов ненужных обработчиков событий с помощью:

Представляем какой-то тип pagetype, который поможет вам выбрать вызов только необходимых функций.

или

проверка наличия определенных элементов, таких как if( $("specialelement").length > 0 ){ callhandlers}

чтобы ускорить работу JS, вы можете использовать компилятор Google Closure. Он минимизирует и оптимизирует ваш код.

Ответ 3

Вот презентация о том, как они это делают в Yahoo (YUI): http://www.youtube.com/watch?v=HifKkERVtVs

Ответ 4

Просто, чтобы убедиться, что я правильно понял вас, у вас есть один файл js со всем кодом, но вы все равно должны контролировать, что выполняется на определенной странице?

Если это так, то вас может заинтересовать Terrific JS framework. Это позволяет применять функциональность javascript к модулю. Модуль представляет собой компонент на вашей веб-странице, например, навигацию, заголовок, конвертер валют. Потрясающий JS сканирует dom и выполняет js для найденных модулей, поэтому вам не нужно беспокоиться о выполнении. Потрясающий JS требует, чтобы соглашения об именах OOCSS идентифицировали модули. Это не быстрое решение вашей проблемы, но это поможет, если вы захотите потратить время. Вот еще несколько ссылок, которые могут вам пригодиться:

Привет, мир Пример: http://jsfiddle.net/brunschgi/uzjSM/

Blogpost при использовании: http://thomas.junghans.co.za/blog/2011/10/14/using-terrificjs-in-your-website/

Ответ 5

Я бы использовал что-то вроде компрессора YUI, чтобы объединить все файлы в один файл min.js, который был уменьшен. Если вы ищете производительность, как слияние, так и минифининг - это путь. http://developer.yahoo.com/yui/compressor/

Пример: Входные файлы Javascript: jquery.js, ads.js support.js

запустите yui с jquery.js, ads.js, support.js вывести его в min.js

Выходные файлы Javascript: min.js

затем используйте min.js в вашем html-коде.

Ответ 6

Взгляните на этого парня веб-сайт и связанный презентация. Веб-сайт DESIGNED поможет вам выбрать структуру.