Компонетизация вызовов функций jQuery. Лучшие практики? - PullRequest
Новая
       15

Компонетизация вызовов функций jQuery. Лучшие практики?

2 голосов
/ 26 января 2010

Я создаю сайт, который будет состоять из компонентов.Компонент, определенный как определенный набор HTML, CSS и jQuery.Каждая страница сайта будет состоять из множества компонентов.

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

doThisThing();
doThatThing();

Допустим, у меня есть Компонент X. Я хочу вызывать функцию всякий раз, когда этот компонент появляется на отображаемой странице.,С точки зрения jQuery, что было бы идеальным способом справиться с этим?Некоторые параметры:

1) Всегда вызывать функцию независимо от того, находится компонент на странице или нет: 

$('.componentX').doYourThing()

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

2) Присоедините вызов к самому компоненту: 

<div id="componentX">my component</div>
<script>$('.componentX').doYourThing()</script>

Это хорошо, так какself содержит разметку и вызовы .js в одном компоненте.Недостатки?

3) Интегрировать нашу компонентную архитектуру с серверной системой, чтобы разрешить создание компонентов в блоке .js.Другими словами, он проверил бы, размещен ли компонент на шаблоне страницы, и, если это так, добавит вызовы функции js, от которых он зависит, в основной блок скрипта.

4) другие опции, которые мне следуетподумайте?

ОБНОВЛЕНИЕ:

Основываясь на ответе Кемпа, я подумал, что мне следует немного уточнить.Все наши функции jQuery будут упакованы в один большой сжатый файл .js, так что с точки зрения попаданий на сервер все одинаково.Меня больше интересует, как лучше всего обрабатывать все отдельные вызовы функций для каждого компонента на странице в контексте отдельных шаблонов страницы.

Например, компонент X может использоваться на 90% всех страниц.Таким образом, вызов функции jquery для остальных 10% страниц не выглядит большой проблемой.

Однако компонент Y может использоваться только на 5% всех страниц.Я, вероятно, не хочу вызывать функцию jquery на каждой странице как 95% времени, это было бы ненужным.

Еще один сценарий, который может еще больше усложнить ситуацию: компонент Z может быть использован один разна 100% всех страниц, но дважды на 5% страниц.

Ответы [ 4 ]

2 голосов
/ 27 января 2010

вы можете пойти на гибридное решение, скомпилировать и сжать ваш файл js и вызывать функции inline скажем, мы будем использовать 2 разные функции Вот пример: 

var DA = {
    animateStuff:function(element){
        $(element).animate({height:500},normal);
        $(element).doSomethingElse();
    },
    doAnotherStuff:function(element){
        $(element).doOtherThings();
    }
};

упакуйте свой js с jquery lib и загрузите его в раздел <head>. затем,

в html-части: 

<div id="componentX">my component</div>
<script>DA.animateStuff('#componentX');</script>

<div class="componentY">my component</div>
<script>DA.doAnotherStuff('.componentY');</script>

таким образом, ваш html будет чище, js файл будет чище, вы не будете ждать загрузки домена для вызова ваших функций. Как только тег <script> будет загружен, ваша функция будет работать. Вы можете передавать другим функциям столько функций, сколько хотите.

Например,

, вы можете позже изменить свою функцию DA.animateStuff на эту: 

animateStuff:function(element, desiredHeight){
                if(!desiredHeight){
                   var desiredHeight = 500
                }
            $(element).animate({ height: desiredHeight },normal);
            $(element).doSomethingElse();
        },

и вы можете изменить html следующим образом: 

<div id="componentX">my component</div>
<script>DA.animateStuff('#componentX',900);</script>

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

надеюсь, это было полезно. веселит

1 голос
/ 27 января 2010

В зависимости от размера проекта я бы выбрал вариант № 1 из-за его простоты или вариант № 3 из-за его правильности.

С # 1, если вы правильно настроите свои селекторы, влияние на производительность, вероятно, будет незначительным. Селекторы на основе идентификаторов являются лучшими (#elementid), затем element.classname (просто .classname довольно медленный по сравнению).

В # 3 каждый компонент должен знать, какой файл JS требуется для его функциональности. Когда компонент определен на странице, этот файл JS должен быть добавлен к <head> страницы. Без знания языка и инфраструктуры на стороне сервера (если таковые имеются) сложно сказать больше, но если компоненты каким-либо образом представлены через код на сервере, они должны иметь конструктор или подпрограмму инициализации, и в этом коде это где вы бы разместили логику для изменения <head> страницы или некоторой коллекции, из которой позже читаются, чтобы создать <head>.

страницы.

Мне не нравится # 2, потому что тогда у вас будет JavaScript по всей странице. Это кажется не идеальным.

0 голосов
/ 29 января 2010

Лично, хотя я знаю, что это грязная и, возможно, не идеальная практика, если вы беспокоитесь о накладных расходах, я бы пошел с измененным вариантом # 2.

Каждому из ваших компонентов также присвоен идентификатор, я полагаю? Если вы выполняете $ ('# componentX1'). DoSomething () каждый раз, когда вы выводите компонент, то у вас будут наименьшие накладные расходы, поскольку DOM не сканируется так близко, как при доступе к компонентам через имя класса. Смотри http://geekswithblogs.net/renso/archive/2009/07/14/jquery-selector-efficiencycost-impact.aspx.

Другая идея - я не уверен, как работает вся ваша система шаблонов, но, возможно, вы могли бы сохранить идентификатор каждого компонента X в глобальной переменной, а затем выполнить цикл и распечатать javascript .doSomething () в нижняя часть шаблона для каждого.

0 голосов
/ 26 января 2010

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

Вариант № 2 противоречит одному из основных принципов jQuery, который отделяет код javascript от разметки, поэтому я бы никогда не пошел по этому пути.

...