10 советов по улучшению вашего jQuery

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

Улучшение jQuery сделает ваш сайт более быстрым и сделает схожие вещи, которые помогут вам выделиться. Это может включать скрипт jQuery или код через коды Google и тому подобное. Как я уже сказал, лучше всего улучшить или отредактировать плагин или синтаксис jQuery, которые будут использоваться вашим сайтом, чтобы сделать его более заметным.

У меня есть список из десяти советов по улучшению вашего jQuery.

1. Ярлык для события «Готово»

Вы устали печатать это?

$(document).ready(function (){
		// your code
	});

Ну, вы можете сделать ярлык для него, попробуйте это:

 $(function (){
		// your code
	});

2. Проверка элемента

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

 if ($('#myDiv).length) {
		// your code
	}

3. Правильно переименуйте ваш объект jQuery при использовании другого фреймворка

Используйте функцию jQuery noconflict (), чтобы получить контроль над $ back и позволить себе установить собственное имя переменной.

 var $j = jQuery.noConflict();
	$j('#myDiv').hide();

4. Сжатие ваших jQuery-скриптов

Большой проект, вероятно, также подразумевает много использования плагинов jQuery. Но имейте в виду, что это может замедлить вашу страницу, поэтому вам следует сжать все ваши jQuery с помощью Packer от Dean Edwards. Это веб-компрессор javascript.

5. Минимизируйте манипуляцию DOM

Операции вставки DOM, такие как .prepend () .append () .wrap () и .after () действительно замедляют процесс. Вы могли бы делать коды быстрее; все, что вам нужно сделать, это создать список с помощью конкатенации, а затем один раз использовать функцию, чтобы добавить их в список, который не упорядочен, как .html (), гораздо быстрее.

Пример:

 var myList = $('#myList');

	for (i=0; i<1000; i++){
		myList.append('This is list item ' + i);
	}
	That example is relatively slow, but if you build the list item as a string and use the html method to do the insertion. You might want to try the following instead:
	Example:
	var myList = $('.myList');
	var myListItems = '';

	for (i = 0; i This is list item ' + i + '';
	}

	myList.html(myListItems);

Это заставило бы страницу загружаться быстрее!

6. Дайте контекст для ваших селекторов

Обычно, если вы используете селектор типа $ (‘. MyDiv’), DOM определенно будет проходить, что зависит от того, какая страница может быть дорогой.
Выполнение выбора заставит jQuery принять второй параметр.
JQuery (выражение, контекст)
Поместив контекст в один селектор, вы бы дали этому селектору элемент для начала, чтобы он не проходил через весь DOM.

Перед:

 var selectedItem = $('#listItem' + i);

После:

 var selectedItem = $('#listItem' + i, $('.myList'));

 slideDown: function(speed,callback){
		return this.animate({height: "show"}, speed, callback);
	},

	fadeIn: function(speed, callback){
		return this.animate({opacity: "show"}, speed, callback);
	}

 $('#myList li').mouseover(function() {
		$(this).animate({"height": 100}, "slow");
	});

 $('#myBox').mouseover(function() {
		$(this).animate({ "width": 200 }, "slow");
		$(this).animate({"height": 200}, "slow");
	});

 $('#myBox').mouseover(function() {
		$(this).animate({ "width": 200, "height": 200 }, "slow");
	});

 $.extend($.expr[':'], {
		over100pixels: function(a) {
			return $(a).height() > 100;
		}
	});

 $('.box:over100pixels').click(function() {
		alert('The element you clicked is over 100 pixels high');
	});

 $('#forms').load('content/headerForms.html', function() {
		// Code here runs once the content has loaded
		// Put all your event handlers etc. here.
	});