js/jq правила записи

[cyklop77]

долгое время не получается разобраться с правилами записи кода в js/jq. читал разные книжки, смотрел видеоуроки.

даже простейшая запись

(function($){
        $.fn.my = function() {
        };
})(jQuery);

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

навеняка у многих были подобные проблемы. как решали?

[sigma77]

cyklop77,

api.jquery.com - это что касается jquery.

Там же множество и других материалов. Да и вообще в сети полно на эту тему.

или эффективнее будет продолжать читать книжки и смотреть видео?

Эффективнее будет начать уже писать код.

п.с. А поповоду цепочек - читать и читать основы js до полного просветления.

Edited December 28, 2011 by sigma77

[cyklop77]

это да. но с другой стороны бросаться фигачить код не разобравшись что к чему - не самое удачное решение

[sigma77]

это да. но с другой стороны бросаться фигачить код не разобравшись что к чему - не самое удачное решение

Без практики - это тупиковый путь.

Вначале, естественно, код будет далек от идеала. Да и не надо брать сразу сложные задачи.

[cyklop77]

на хабре нашел статью, в которой есть пример такого кода:

var elem = document.getElementsByTagName('a');
for (var n = 0, l = elem.length; n < l; n++ ) {
    elem[n].onclick = function(x) {
        return function() {
            alert(x);
            return false;
        }
    }(n); //Создаем функцию, сразу же её вызываем она возвращает нам порядковый номер элемента в alert при событии click на элементе.
}

объясните пожалуйста откуда берется значение переменной x.

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

[troll]

Отсюда:

}(n); //Создаем функцию, сразу же её вызываем она возвращает нам порядковый номер элемента в alert при событии click на элементе.

В функцию передается не x, а n.

Посмотрите, например, на такой код (надеюсь, будет понятно, что он делает, если нет - почитайте здесь):

var n = 1,
    f = function(x) {
      return x;
};

var m = f(n);

Можно его чуть-чуть модифицировать, вызвав функцию сразу же после объявления:

var n = 1,
    m = function(x) {
      return x;
}(n);

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

Edited January 11, 2012 by troll

[Veseloff]

Javascript это такой хитрый язык. Давайте по порядку что да как. Начнём вот с этого примера

function(x) {
  alert(x);      
}

Создаётся анонимная функция. Аргументом функции является некая переменная x. Суть функции как видно — выводить в алерт аргумент. Теперь следующий пример.

function foo(x) {
  alert(x);      
}
foo('bar');

Тут мы определили функцию foo и вызвали её, передав аргументом строку «bar». Выведет алерт с текстом «bar». Ещё пример.

var foo=function(x) {
  alert(x);      
}
foo('bar');

Результат такой же. В переменной foo у нас определена функция. Если это понятно, то подойдём к окончательному моменту

function(x) {
  alert(x);      
}('bar');

Тут мы объявили функцию и тут же её вызвали с аргументом «bar». Выведет алерт с текстом «bar».

Теперь рассмотрим ваш пример

var elem = document.getElementsByTagName('a'); // Получили массив элементов a. То есть весь массив «ссылок» в документе. Так как это — массив, то нумерация элементов с 0 до n, где n+1 — количество «ссылок» на странице.
for (var n = 0, l = elem.length; n < l; n++ ) // Пройдёмся по каждому из этих элементов по очереди от первого до последнего по порядку.
{
    elem[n].onclick = function(x){ // Повесим на онклик вот такую функцию
        return function() {
            alert(x);
            return false;
        }
    }(n); //Создаем функцию, сразу же её вызываем она возвращает нам порядковый номер элемента в alert при событии click на элементе. Абсолютно справедливый комментарий. В качесте аргумента функции будет передан порядковый номер этой «ссылки» в документе.
}

Стало понятнее?

[cyklop77]

да, теперь многое прояснилось. спасибо всем

[troll]

function(x) {
  alert(x);      
}('bar');

Тут мы объявили функцию и тут же её вызвали с аргументом «bar». Выведет алерт с текстом «bar».

Так ничего не выведет, может только ошибку в консоль)

[Veseloff]

А, да, конечно, скобки потерял, дурья башка. Ну переутомился к вечеру — бывает, чо Конечно же вот так:

(function(x) {
  alert(x);      
})('bar');

[Great Rash]

Писал как-то мини-статейку.

[Svatov]

Писал как-то мини-статейку.

Это нечто Спасибо, экономит на самом деле уйму времени, сам было засел ковырять его...много чего было непонятного..пока нашел все, а тут все готовое) Спасибо за работу!

Edited January 12, 2012 by Svatov

[Odrin]

немного оффтоп, но все же... Заинтересовала запись:

for (var n = 0, l = elem.length; n < l; n++ ) {}

Это будет работать быстрее чем это?

for (var n = 0; n < elem.length; n++ ) {}

Или это все дело вкуса?

[Veseloff]

немного оффтоп, но все же... Заинтересовала запись:

for (var n = 0, l = elem.length; n < l; n++ ) {}

Это будет работать быстрее чем это?

for (var n = 0; n < elem.length; n++ ) {}

Или это все дело вкуса?

А вдруг в течение работы цикла количество элементов поменяется?

[Odrin]

А вдруг в течение работы цикла количество элементов поменяется?

Ну тогда нужно использовать именно второй вариант.

for (var n = 0; n < elem.length; n++ ) {}

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

Edited January 12, 2012 by Odrin

[Great Rash]

for (var n = 0, l = elem.length; n < l; n++ ) {}

Такая запись быстрее если верить программистам студии Лебедева. Пруф (раздел "циклы").

[troll]

Google JS Style Guide с ними солидарен:

Node lists are often implemented as node iterators with a filter. This means that getting a property like length is O(n), and iterating over the list by re-checking the length will be O(n^2).

var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
  doSomething(paragraphs[i]);
}

It is better to do this instead:

var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
  doSomething(paragraph);
}

This works well for all collections and arrays as long as the array does not contain things that are treated as boolean false.

[s0rr0w]

for (var n = 0, l = elem.length; n < l; n++ ) {}

Такая запись быстрее если верить программистам студии Лебедева. Пруф (раздел "циклы").

Тут даже бенчмарки запускать не надо, чтобы это понять.

var n = 0, l = elem.length - выполняется один раз

n < l - сравнение двух примитивных значений

n < elem.length - постоянное вычисление длины массива, а потом уже сравнение примитивных значений

Разница очевидна