правильная последовательность функций при кодировании в js

Question

Я использую jquery и очень расстроен тем, как пишу свой код. Я начал кодировать в JS и Jquery несколько месяцев назад, и мой код выглядел так:

$(document).ready(function(){

$(function(){// a function that applies a plugin to an element});

$(function(){// another function that applies a plugin to an element});

$(function(){// and another function that applies a plugin to an element});

$(function(){// yet another function that applies a plugin to an element});
});

$(function(){//functions applied to certain elements that does not require to be initially loaded})

В основном то, что я делал раньше, было помещено в $ (document) .ready

и вот как я сейчас кодирую

function a(){//a function that applies plugin to an element}

function b() {// another function}

$(document.ready(function(){a(); b();});

$(function(){//functions applied to certain elements that does not require to be initially loaded})

небольшое улучшение, но я не удовлетворен. Что если я хочу вызвать определенные функции только для определенной страницы? Есть ли способы сделать это? и мне очень противно, что мой $ (документ) становится действительно огромным, когда я использую много плагинов.

Как вы пишете свои функции в jquery?

Answer 1

Я бы посоветовал, по крайней мере, использовать пространство имен, чтобы вы не загрязняли глобальное пространство имен. Например:

var myNameSpace = {
a: function(){//a function that applies plugin to an element},
b: function() {// another function}
};

$(document).ready(function() {

myNameSpace.a();

});

Основным преимуществом является то, что вы можете разделить свой код на логические единицы работы, которые ориентированы на конкретные задачи. Это существенно упростит организацию кода.

Ребекка Мерфи написала замечательную статью на эту тему, которую вы можете прочитать здесь: http://bit.ly/6og36U

Вы также можете разделить свой JS на их собственные уникальные файлы и написать процедуру для использования метода getScript () jQuery для загрузки необходимых файлов по требованию (http://docs.jquery.com/Ajax/jQuery.getScript).). Ключом будет определение зависимостей в вашем и загрузите файл .js в соответствующее время.

Answer 2

Я рекомендую иметь один файл Javascript для всего сайта. Этот файл должен содержать только функции:

function a() { ... }
function b() { ... }

Причина в том, что с одним файлом он кэшируется один раз (если все сделано правильно) и все. И затем, используя встроенный JS на каждой странице, я помещаю:

$(function() {
  a();
  b();
});

Я действительно не нашел необходимости иметь несколько ready() звонков.

Причина этого - эффективность. Вы не хотите выполнять ненужный Javascript, и поэтому внешний JS-файл фактически ничего не делает, кроме как включает функции, которые вы можете вызвать. Тогда каждая страница вызывает только то, что ей нужно. Кроме того, вы можете легко найти его, просто взглянув на одно место (страницу).

Answer 3

Я думаю, что есть два способа достичь этого:

A: разбить JavaScript на несколько файлов. (Один библиотечный файл и каждый со специфичным для стороны кодом, который также вызывает функцию ready.)

B: создайте один файл со всем JavaScript, а затем какой-нибудь встроенный файл JavaScript, например:

var tasksToRun = [ function_a, function_b,...]

В вашей библиотеке JavaScript вы проверяете глобальную переменную и выполняете каждую функцию, указанную в массиве.

Answer 4

Вы можете попытаться разделить свои функции на несколько файлов и включить только те, которые необходимы для каждой страницы. В каждом файле будет отдельный $(document).ready(function(){ ... });

Answer 5

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

Примерно так:

(function($) {
    function a() {
       // stuff
    }
    function b() {
       // stuff
    }
    // ...
    $(function() {
        // invoke dom ready setup methods here
    });
})(jQuery);

Это дает бонус, позволяющий использовать мой код на других страницах, которые могут использовать прототип или другие библиотеки js (в большом веб-приложении со многими разработчиками, такими как тот, над которым я работаю, важно поддерживать чистоту пространства имен). *

У меня обычно только один ready вызов на файл. Этот вызов отвечает за настройку всех связанных вещей в этом файле. Это позволяет каждому файлу сортировки действовать как «библиотека»: разработчики, которые хотят использовать функциональность, просто должны включить ее на страницу и добавить соответствующую разметку, и функциональность будет настроена самостоятельно.

Я признаю, что скопировал этот макет из того, как построено несколько плагинов jQuery.

Мне нравится предложение Cletus об одном файле, но только когда приложение не слишком большое. Его становится сложно поддерживать, если в одном файле слишком много вещей.