14 conseils, rappels et bonnes pratiques jQuery pour améliorer vos compétences

S'il y a une mauvaise chose à propos de jQuery, c'est qu'il est si incroyablement bas pour démarrer qu'il a tendance à attirer des personnes qui ne connaissent rien à JavaScript. D’un côté, c’est génial. Cependant, d’un autre côté, cela peut aussi conduire à du code, franchement, dégoûtant (dont certains que j’ai écrit moi-même !).

Mais ce n'est pas grave ; coder si horriblement mauvais que cela ferait haleter votre grand-mère est un rite de passage. La clé est de franchir la montagne, et c'est ce dont nous allons parler dans le tutoriel d'aujourd'hui.

---

1. La méthode renvoie un objet jQuery

Il est important de se rappeler que la plupart des méthodes renvoient des objets jQuery. Ceci est très utile et permet de relier des fonctionnalités que nous utilisons fréquemment.

$someDiv
  .attr('class', 'someClass')
  .hide()
  .html('new stuff');

Sachant que les objets jQuery sont toujours renvoyés, on peut parfois utiliser cela pour supprimer le code redondant. Par exemple, considérons le code suivant :

var someDiv = $('#someDiv');
someDiv.hide();

La raison pour laquelle nous « mettons en cache » la position d'un élément someDiv est de limiter le nombre de fois que nous devons parcourir le DOM de cet élément à une seule fois.

Le code ci-dessus est parfaitement correct, cependant, vous pouvez facilement fusionner les deux lignes en une seule tout en obtenant le même résultat.

var someDiv = $('#someDiv').hide();

De cette façon, nous masquons toujours l'élément someDiv 元素，但正如我们所知，该方法也返回 jQuery 对象——然后通过 someDiv, mais comme nous le savons, la méthode renvoie également un objet jQuery - qui est ensuite référencé via la variable

.

---

2.

Trouver un sélecteur

Tant que vos sélecteurs ne sont pas ridiculement mauvais, jQuery les optimisera autant que possible et vous n'aurez généralement pas trop à vous en soucier. Cependant, cela dit, vous pouvez apporter certaines améliorations qui amélioreront légèrement les performances de votre script.

find() Une de ces solutions consiste à utiliser la méthode

lorsque cela est possible. La clé n'est pas de forcer jQuery à utiliser son moteur Sizzle si vous n'y êtes pas obligé. Bien sûr, cela n'est parfois pas possible - et ce n'est pas grave, cependant, si vous n'avez pas besoin de frais supplémentaires, ne le cherchez pas.

// Fine in modern browsers, though Sizzle does begin "running"
$('#someDiv p.someClass').hide();

// Better for all browsers, and Sizzle never inits.
$('#someDiv').find('p.someClass').hide();

QuerySelectorAll Les derniers navigateurs modernes prennent en charge

, ce qui vous permet de transmettre des sélecteurs de type CSS sans avoir besoin de jQuery. jQuery lui-même vérifie également cette fonction.

Cependant, les anciens navigateurs (c'est-à-dire IE6/IE7) ne fournissent pas de support, ce qui est compréhensible. Cela signifie que ces sélecteurs plus complexes déclenchent le moteur Sizzle complet de jQuery, qui, bien que génial, entraîne plus de frais généraux.

Sizzle est un tas de code génial que je ne comprendrai peut-être jamais. Cependant, en une phrase, il transforme d'abord votre sélecteur en un « tableau » composé de chaque composant du sélecteur.

// Rough idea of how it works
 ['#someDiv, 'p'];

idEnsuite, de droite à gauche, commencez à déchiffrer chaque élément à l'aide d'expressions régulières. Cela signifie également que la partie la plus à droite du sélecteur doit être aussi spécifique que possible - par exemple,

ou le nom de la balise.

En résumé, si possible :

Gardez les sélecteurs simples
• find() Utilisez la méthode
. De cette façon, nous pouvons continuer à utiliser les fonctionnalités natives du navigateur au lieu d'utiliser Sizzle.
Lorsque vous utilisez Sizzle, optimisez autant que possible la partie la plus à droite du sélecteur.

Contexte ?

Vous pouvez également ajouter du contexte au sélecteur, par exemple :

$('.someElements', '#someContainer').hide();

someElements 类（它们是 someContainer 的子级）包装所有元素的集合。使用上下文是限制 DOM 遍历的一种有用方法，但在幕后，jQuery 使用 findCe code demande à jQuery d'utiliser la méthode

dans jQuery à la place.

$('#someContainer')
  .find('.someElements')
  .hide();

Preuve

---

// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
   return jQuery( context ).find( selector );
}

3. $(this)N'abusez pas

Sans comprendre les différentes propriétés et capacités du DOM, il est facile d'abuser inutilement des objets jQuery. Par exemple :

$('#someAnchor').click(function() {
	// Bleh
	alert( $(this).attr('id') );
});

idSi notre seul besoin de l'objet jQuery est d'accéder à la propriété

de la balise d'ancrage, alors c'est du gaspillage. Il est préférable de s'en tenir au JavaScript "brut".

$('#someAnchor').click(function() {
	alert( this.id );
});

getAttributeVeuillez noter qu'il existe trois propriétés auxquelles il faut toujours accéder via jQuery : "src", "href" et "style". Ces propriétés doivent être utilisées dans les anciennes versions d'IE

.

Preuve

// jQuery Source
var rspecialurl = /href|src|style/;
// ... 
var special = rspecialurl.test( name );
// ...
var attr = !jQuery.support.hrefNormalized && notxml && special ?
	// Some attributes require a special call on IE
	elem.getAttribute( name, 2 ) :
	elem.getAttribute( name );

Plusieurs objets jQuery

Pire encore est le processus d'interrogation répétée du DOM et de création de plusieurs objets jQuery.

	$('#elem').hide();
	$('#elem').html('bla');
	$('#elem').otherStuff();

#elem J'espère que vous avez réalisé à quel point ce code est inefficace. Sinon, ce n'est pas grave ; nous apprenons tous. La réponse est soit d'implémenter des liens, soit de « mettre en cache » l'emplacement de

.

---

	// This works better
	$('#elem')
	  .hide()
	  .html('bla')
	  .otherStuff();

	// Or this, if you prefer for some reason.
	var elem = $('#elem');
	elem.hide();
	elem.html('bla');
	elem.otherStuff();

4. Readyabréviation jQuery

méthode

Il est très simple d'utiliser jQuery pour savoir quand un document est prêt à être utilisé.

$(document).ready(function() {
	// let's get up in heeya
});

Cependant, vous avez probablement rencontré des fonctions de wrapper différentes et plus déroutantes. 🎜

$(function() {
	// let's get up in heeya
});

尽管后者的可读性稍差，但上面的两个片段是相同的。不相信我？只需检查 jQuery 源代码即可。

// HANDLE: $(function)
// Shortcut for document ready
if ( jQuery.isFunction( selector ) ) {
	return rootjQuery.ready( selector );
}

rootjQuery 只是对根 jQuery(document) 的引用。当您将选择器传递给 jQuery 函数时，它将确定您传递的选择器类型：字符串、标记、id、函数等。如果传递了函数，jQuery 将调用其 ready() 方法，并将您的匿名函数作为选择器传递。

---

5。 保证代码安全

如果开发用于分发的代码，补偿任何可能的名称冲突始终很重要。如果在您的脚本之后导入的某些脚本也具有 $ 函数，会发生什么情况？坏东西！

答案是要么调用 jQuery 的 noConflict()，要么将代码存储在自调用匿名函数中，然后将 jQuery 传递给它。

方法一：无冲突

var j = jQuery.noConflict();
// Now, instead of $, we use j. 
j('#someDiv').hide();

// The line below will reference some other library's $ function.
$('someDiv').style.display = 'none';

请小心使用此方法，并在分发代码时尽量不要使用它。这真的会让脚本的用户感到困惑！ :)

方法二：传递jQuery

(function($) {
	// Within this function, $ will always refer to jQuery
})(jQuery);

底部的最后一个括号自动调用该函数 - function(){}()。然而，当我们调用该函数时，我们还传递了 jQuery，然后用 $ 表示。

方法3：通过Ready方法传递$

jQuery(document).ready(function($) {
 // $ refers to jQuery
});

// $ is either undefined, or refers to some other library's function.

---

6。 要聪明

请记住 - jQuery 只是 JavaScript。不要假设它有能力弥补你的错误编码。 :)

这意味着，正如我们必须优化 JavaScript for 语句等内容一样，jQuery 的 each 方法也是如此。我们为什么不呢？它只是一个辅助方法，然后在幕后创建 for 语句。

// jQuery's each method source
	each: function( object, callback, args ) {
		var name, i = 0,
			length = object.length,
			isObj = length === undefined || jQuery.isFunction(object);

		if ( args ) {
			if ( isObj ) {
				for ( name in object ) {
					if ( callback.apply( object[ name ], args ) === false ) {
						break;
					}
				}
			} else {
				for ( ; i < length; ) {
					if ( callback.apply( object[ i++ ], args ) === false ) {
						break;
					}
				}
			}

		// A special, fast, case for the most common use of each
		} else {
			if ( isObj ) {
				for ( name in object ) {
					if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
						break;
					}
				}
			} else {
				for ( var value = object[0];
					i < length && callback.call( value, i, value ) !== false; value = object[++i] ) {}
			}
		}

		return object;
	}

太糟糕了

someDivs.each(function() {
	$('#anotherDiv')[0].innerHTML += $(this).text();
});

1. 每次迭代搜索 anotherDiv
2. 获取innerHTML 属性两次
3. 创建一个新的 jQuery 对象，全部用于访问元素的文本。

更好

var someDivs = $('#container').find('.someDivs'),
      contents = [];

someDivs.each(function() {
	contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );

这样，在 each (for) 方法中，我们执行的唯一任务就是向数组添加一个新键...而不是查询 DOM，两次获取元素的 innerHTML 属性，等等

这篇技巧总体上更多地基于 JavaScript，而不是特定于 jQuery。 重点是要记住 jQuery 并不能弥补糟糕的编码。

文档片段

当我们这样做时，针对此类情况的另一种选择是使用文档片段。

var someUls = $('#container').find('.someUls'),
	frag = document.createDocumentFragment(),
	li;
	
someUls.each(function() {
	li = document.createElement('li');
	li.appendChild( document.createTextNode(this.innerHTML) );
	frag.appendChild(li);
});

$('#anotherUl')[0].appendChild( frag );

这里的关键是，有多种方法可以完成这样的简单任务，并且每种方法在浏览器之间都有自己的性能优势。您越坚持使用 jQuery 并学习 JavaScript，您可能还会发现您更频繁地引用 JavaScript 的本机属性和方法。如果是这样，那就太棒了！

jQuery 提供了令人惊叹的抽象级别，您应该利用它，但这并不意味着您被迫使用它的方法。例如，在上面的片段示例中，我们使用 jQuery 的 each 方法。如果您更喜欢使用 for 或 while 语句，那也没关系！

尽管如此，请记住 jQuery 团队已经对该库进行了大量优化。关于 jQuery 的 each() 与本机 for 语句的争论是愚蠢而琐碎的。如果您在项目中使用 jQuery，请使用它们的帮助器方法来节省时间。这就是他们存在的目的！ :)

---

7。 AJAX 方法

如果您现在才开始深入研究 jQuery，它为我们提供的各种 AJAX 方法可能会让人感到有点畏惧；尽管他们不需要。事实上，它们中的大多数只是简单的辅助方法，直接路由到 $.ajax。

• 获取
• getJSON
• 帖子
• ajax

作为示例，让我们回顾一下 getJSON，它允许我们获取 JSON。

$.getJSON('path/to/json', function(results) {
	// callback
	// results contains the returned data object
});

在幕后，该方法首先调用 $.get。

getJSON: function( url, data, callback ) {
	return jQuery.get(url, data, callback, "json");
}

$.get 然后编译传递的数据，并再次调用“master”（某种意义上的）$.ajax 方法。

get: function( url, data, callback, type ) {
	// shift arguments if data argument was omited
	if ( jQuery.isFunction( data ) ) {
		type = type || callback;
		callback = data;
		data = null;
	}

	return jQuery.ajax({
		type: "GET",
		url: url,
		data: data,
		success: callback,
		dataType: type
	});
}

最后，$.ajax 执行了大量工作，使我们能够在所有浏览器上成功发出异步请求！

这意味着您也可以直接使用 $.ajax 方法来处理您的所有 AJAX 请求。其他方法只是辅助方法，无论如何最终都会执行此操作。所以，如果你愿意的话，就可以去掉中间人。无论如何，这都不是一个重要的问题。

只是花花公子

$.getJSON('path/to/json', function(results) {
	// callback
	// results contains the returned data object
});

微观上更高效

$.ajax({
	type: 'GET',
	url : 'path/to/json',
	data : yourData,
	dataType : 'json',
	success : function( results ) {
		console.log('success');
	})
});

---

8。 访问本机属性和方法

现在您已经学习了一些 JavaScript，并且已经了解，例如，在锚标记上，您可以直接访问属性值：

var anchor = document.getElementById('someAnchor');
 //anchor.id
// anchor.href
// anchor.title
// .etc

唯一的问题是，当您使用 jQuery 引用 DOM 元素时，这似乎不起作用，对吗？当然不是。

不起作用

	// Fails
	var id = $('#someAnchor').id;

因此，如果您需要访问 href 属性（或任何其他本机属性或方法），您有多种选择。

// OPTION 1 - Use jQuery
var id = $('#someAnchor').attr('id');

// OPTION 2 - Access the DOM element
var id = $('#someAnchor')[0].id;

// OPTION 3 - Use jQuery's get method
var id = $('#someAnchor').get(0).id;

// OPTION 3b - Don't pass an index to get
anchorsArray = $('.someAnchors').get();
var thirdId = anchorsArray[2].id;

get 方法特别有用，因为它可以将 jQuery 集合转换为数组。

---

9。 使用 PHP 检测 AJAX 请求

当然，对于我们的绝大多数项目，我们不能仅仅依赖 JavaScript 来完成诸如验证或 AJAX 请求之类的事情。当 JavaScript 关闭时会发生什么？正是出于这个原因，一种常见的技术是检测 AJAX 请求是否是使用您选择的服务器端语言发出的。

jQuery 通过在 $.ajax 方法中设置标头，使这变得异常简单。

// Set header so the called script knows that it's an XMLHttpRequest
// Only send the header if it's not a remote XHR
if ( !remote ) {
	xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}

设置此标头后，我们现在可以使用 PHP（或任何其他语言）检查此标头，并进行相应操作。为此，我们检查 $_SERVER['HTTP_X_REQUESTED_WITH'] 的值。

包装器

function isXhr() {
  return $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
}

---

10。 jQuery 和 $

有没有想过为什么/如何可以互换使用 jQuery 和 $ ？要找到答案，请查看 jQuery 源代码，然后滚动到最底部。在那里，您会看到：

window.jQuery = window.$ = jQuery;

当然，整个 jQuery 脚本都包含在一个自执行函数中，这允许脚本尽可能地限制全局变量的数量。但这也意味着 jQuery 对象在包装匿名函数之外不可用。

为了解决这个问题，jQuery 被暴露给全局 window 对象，并且在此过程中，还会创建一个别名 - $ -。

---

11。 有条件地加载 jQuery

HTML5 Boilerplate 提供了一个漂亮的单行代码，如果由于某种奇怪的原因您选择的 CDN 出现故障，它将加载 jQuery 的本地副本。

<!-- Grab Google CDN jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>

“表述”上面的代码：如果 window.jQuery 未定义，则从 CDN 下载脚本时一定出现问题。在这种情况下，请继续到 && 运算符的右侧，并插入链接到本地​​版本 jQuery 的脚本。

---

12。 jQuery 过滤器

高级会员：下载此视频（必须登录）

订阅我们的 YouTube 页面以观看所有视频教程！

<script>
	$('p:first').data('info', 'value'); // populates $'s data object to have something to work with
	
	$.extend(
		jQuery.expr[":"], {
			block: function(elem) {
				return $(elem).css("display") === "block";
			},
			
			hasData : function(elem) {				
				return !$.isEmptyObject( $(elem).data() );
			}
		}
	);
	
	$("p:hasData").text("has data"); // grabs paras that have data attached
	$("p:block").text("are block level"); // grabs only paragraphs that have a display of "block"
</script>

注意：jQuery.expr[':'] 只是 jQuery.expr.filters 的别名。

---

13。 单一悬停功能

从 jQuery 1.4 开始，我们现在只能将单个函数传递给 hover 方法。以前，in 和 out 方法都是必需的。

之前

$('#someElement').hover(function() {
  // mouseover
}, function() {
 // mouseout
});

现在

$('#someElement').hover(function() {
  // the toggle() method can be used here, if applicable
});

请注意，这不是旧协议与新协议的比较。很多时候，您仍然需要将两个函数传递给 hover，这是完全可以接受的。但是，如果您只需要切换某些元素（或类似的元素），则传递单个匿名函数将节省一些字符左右！

---

14。 传递属性对象

从 jQuery 1.4 开始，我们现在可以传递一个对象作为 jQuery 函数的第二个参数。当我们需要向 DOM 中插入新元素时，这非常有用。例如：

之前

$('<a />')
  .attr({
    id : 'someId',
    className : 'someClass',
    href : 'somePath.html'
  });

之后

$('</a>', {
    id : 'someId',
    className : 'someClass',
    href : 'somePath.html'
});

这不仅可以节省一些字符，而且还可以使代码更加简洁。除了元素属性之外，我们甚至可以传递 jQuery 特定的属性和事件，例如 click 或 text。

---

感谢您的阅读！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!