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

Question

У меня есть множество функций и обработчиков событий, которые разбиты на несколько файлов 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, не содержа их в своей собственной функции?

Answer 1

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

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

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

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

или

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

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

Answer 2

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

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

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

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

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

 <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>

Answer 3

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

Answer 4

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

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

Hello World Пример: http://jsfiddle.net/brunschgi/uzjSM/

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