Jump to content
  • 0

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


cyklop77
 Share

Question

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

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


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

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

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

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0

cyklop77,

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

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

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

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

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

Edited by sigma77
Link to comment
Share on other sites

  • 0
  On 12/28/2011 at 9:48 PM, cyklop77 said:

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

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

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

Link to comment
Share on other sites

  • 0

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


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 непонятно

Link to comment
Share on other sites

  • 0

Отсюда:

}(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 by troll
  • Like 1
Link to comment
Share on other sites

  • 0

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 на элементе. Абсолютно справедливый комментарий. В качесте аргумента функции будет передан порядковый номер этой «ссылки» в документе.
}

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

  • Like 1
Link to comment
Share on other sites

  • 0
  On 1/11/2012 at 5:02 PM, Veseloff said:

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

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

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

Link to comment
Share on other sites

  • 0
  On 1/12/2012 at 6:58 AM, Great Rash said:

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

Edited by Svatov
Link to comment
Share on other sites

  • 0
  On 1/12/2012 at 11:35 AM, Odrin said:

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0
  On 1/12/2012 at 12:12 PM, Veseloff said:

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

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

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

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

Edited by Odrin
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0
  On 1/12/2012 at 1:05 PM, Great Rash said:

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

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

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

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

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

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

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

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy