Проэлектроника

Мой блог

Пишу, что хочу ...

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that has been used in the blog.
  • Bloggers
    Bloggers Search for your favorite blogger from this site.
  • Team Blogs
    Team Blogs Find your favorite team blogs here.
  • Login

Визуальные ошибки (ошибки невнимательности).

Posted by on in JavaScript
  • Font size: Larger Smaller
  • Hits: 1355
  • 0 Comments
  • Subscribe to this entry
  • Print

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

В основном все эти ошибки часто допускаю я при написании кода в принципе в любых условиях (спешу или нет). Хотя казалось бы, они ведь мне известны и стоит обращать внимание, но увы не всегда это выходит.

Порядок пунктов не означает частость повторения.

1) Аргументы (псевдо массив arguments у функций) в неправильном порядке:

;(function () {
	'use strict';

	function make_some_stuff (jquery, bootstrap, backbone, angular, mootools) {
		// Здесь обычно мы пишем уже обращение к аргументам в нашей функции
		// И обычно пишем не отдавая себе отчет в том, что могли перепутать аргументы при вызове функции
		// И это влечет за собой тщательную отладку
	}

	// множество кода, или лоадер необходимых нам библиотек
	// или определение этих библиотек

	make_some_stuff($, back, boot, ang, moot);
})();

2) Описки:

;(function () {
	'use strict';

	var $ = window.jQiery;

	$('#footer').hide();
	$('#header').snow();

	$('ul li:eq(0)').insetAfter('ul li:eq(2)');
})();

С первого раза можно не сразу обнаружить, что в коде который написан выше допущено аж 3 ошибки:

var $ = window.jQiery; // Ошибка в букве "i", на её месте должна стоять "u"
// ...
$('#header').snow(); // Ошибка в букве "n", на её месте должна стоять буква "h"
// ...
$('ul li:eq(0)').insetAfter('ul li:eq(2)'); // Пропущена буква "r" в слове "insert"

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

Ещё интересный момент в том, что многие статические анализаторы кода, типа JSLint или JSHint могут не обнаружить данных ошибок. Т.к. могут не знать о методах библиотек к которым вы обращаетесь.

3) Ошибки в обращении с методами:

$('.df-active').removeClass('.df-active'); // Библиотека ожидает обращение без точки, вот так - .removeClass('df-active');

Моя любимая описка или ошибка, которую я очень часто повторяю. Казалось бы очень просто запомнить, но очень часто бывает, когда мы храним класс в буфере (ctrl + c) и потом просто вставляем в тех местах где мы к нему обращаемся. Так чаще всего и допускается эта ошибка.

4) Всё тот же jQuery. Затерянная скобка:

$('li:not([class*="df-col")') // Просто забыли закрыть "]"

Я этой ошибке даже дал название "Затерянная скобка", т.к. это настолько глупая, частая но и в тоже время настолько опасная ошибка. Данный кусочек выдран из реального кода, который я писал буквально на днях. Да после написания при проверке я обнаружил ошибку но совсем не сразу. Дело в том, что данная конструкция в принципе нормально сделает выборку, и вернет коллекцию элементов. Но если не заметить тот факт, что мы забыли поставить скобку, то это совершенно не та выборка, что нам нужно. Также при очень большом функционале и на больших кол-вах элементов это просто можно не заметить о чём потом можно очень сильно пожалеть.

5) Невнимательность с CSS:

overflow: visible; // Ожидаем visibility: visible;

Данная ошибка из рода "Ну почему не работает ведь я всё правильно написал ?". Очень часто такое можно допустить и не заметить, т.к. при отладке в браузере оно не будет подсвечивать это как ошибку или там не писаться в примененных правилах. Это наверное даже больше логическая ошибка, чем невнимательность.

6) Быстро но не везде:

var friuts = ['Mango', 'Apple', 'Banana']; // Ну, а должно быть fruits

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

Update 28.03.2013
7) onlick:

В принципе в названии уже понятно, в чем ошибка, но вот иногда очень много времени требуется, что бы отследить этот недочет. Дело в том, что любой DOM элемент может в принципе в себя записать любое свойство, т.к. всё в javascript является объектом. Также и с неизвестным свойством:

DOMElement.onlick = function () {
    // do some stuff
}

Недавно на поиск этой штуки ушло около часа.

------

Пока всё, позже буду ещё дополнять запись.

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

Blog posted from Dnipropetrovs'k, Dnipropetrovsk Oblast, Ukraine View larger map
0

Comments

  • No comments made yet. Be the first to submit a comment

Leave your comment

Guest Воскресенье, 24 Сентябрь 2017
Joomla 2.5