スキルを向上させるための 14 の jQuery のヒント、リマインダー、ベスト プラクティス

jQuery の悪い点が 1 つあるとすれば、入門レベルが信じられないほど低いため、JavaScript について何も知らない人を惹きつけてしまう傾向があるということです。さて、一方で、これは素晴らしいことです。しかしその一方で、率直に言ってうんざりするほど悪いコードが生成される可能性もあります (その一部は私自身が書いたものです!)。 でも大丈夫、おばあちゃんが息を呑むほどひどいコーディングは通過儀礼です。重要なのは山を乗り越えることです。それが今日のチュートリアルで説明することです。

＃＃＃＃１。

メソッドは jQuery オブジェクトを返します

---

ほとんどのメソッドは jQuery オブジェクトを返すことに留意することが重要です。これは非常に便利で、頻繁に使用する機能をリンクできます。 リーリー jQuery オブジェクトが常に返されることがわかっているため、これを使用して冗長なコードを削除できる場合があります。たとえば、次のコードを考えてみましょう:

リーリー

someDiv

要素の位置を「キャッシュ」する理由は、その要素の DOM をトラバースする必要がある回数を 1 回だけに制限するためです。

上記のコードはまったく問題ありませんが、2 行を 1 行に簡単にマージして同じ結果を得ることができます。 リーリー

この方法では、引き続き

someDiv

要素を非表示にしますが、ご存知のとおり、このメソッドは jQuery オブジェクトも返します。このオブジェクトは、

someDiv

変数を通じて参照されます。 ＃＃＃＃２。 検索セレクター

セレクターがとんでもなく悪いものでない限り、jQuery は可能な限りセレクターを最適化するため、通常はセレクターについてあまり心配する必要はありません。ただし、そうは言っても、スクリプトのパフォーマンスをわずかに向上させる改善がいくつかあります。

---

そのような解決策の 1 つは、可能な場合は find() メソッドを使用することです。重要なのは、必要がない場合に jQuery に Sizzle エンジンの使用を強制しないことです。もちろん、これが不可能な場合もありますが、それは問題ありませんが、追加のオーバーヘッドが必要ない場合は、探さないでください。

リーリー

最新のブラウザーは

QuerySelectorAll をサポートしているため、jQuery を必要とせずに CSS のようなセレクターを渡すことができます。 jQuery自体もこの機能をチェックします。

ただし、古いブラウザ (IE6/IE7 など) はサポートを提供していません。これは当然のことです。これは、これらのより複雑なセレクターが jQuery の完全な Sizzle エンジンをトリガーすることを意味します。これは優れていますが、より多くのオーバーヘッドが発生します。

Sizzle は、私には決して理解できないかもしれない素晴らしいコードの集まりです。ただし、一文で表すと、まずセレクターを、セレクターの各コンポーネントで構成される「配列」に変換します。

リーリー

次に、右から左に正規表現を使用して各項目の解読を開始します。これは、セレクターの右端の部分ができるだけ具体的である必要があることも意味します (例:

id

やタグ名)。

可能であれば結論:

セレクターをシンプルにする

find()

メソッドを使用します。こうすることで、Sizzle を使用する代わりにブラウザーのネイティブ機能を引き続き使用できます。

• Sizzle を使用する場合は、可能な限りセレクターの右端の部分を最適化してください。
• ＃＃＃ コンテクスト？ セレクターにコンテキストを追加することもできます。例:
リーリー
• このコードは、
someElements

クラス (

someContainer

の子) を使用して、jQuery 内のすべての要素のコレクションをラップするように jQuery に指示します。コンテキストの使用は DOM トラバーサルを制限する便利な方法ですが、jQuery はバックグラウンドで代わりに

find

メソッドを使用します。

リーリー ＃＃＃証明する＃＃＃ リーリー ＃＃＃＃３。 悪用しないでください$(これ) さまざまな DOM プロパティと機能を理解していないと、jQuery オブジェクトを不必要に悪用してしまいがちです。例えば：＃＃＃ リーリー

jQuery オブジェクトに必要なのはアンカー タグの

id

プロパティにアクセスすることだけである場合、これは無駄です。 「生の」JavaScript にこだわるほうがよいでしょう。

---

リーリー

jQuery を介して常にアクセスする必要がある 3 つのプロパティ、「src」、「href」、「style」があることに注意してください。これらの属性には、古いバージョンの IE では getAttribute が必要です。

＃＃＃証明する＃＃＃ リーリー

複数の jQuery オブジェクト

さらに悪いのは、DOM を繰り返しクエリして複数の jQuery オブジェクトを作成するプロセスです。 リーリー このコードがいかに非効率であるかが理解できたでしょうか。そうでなくても大丈夫です。私たちは皆学んでいます。答えは、リンクを実装するか、

#elem

の場所を「キャッシュ」することです。

リーリー ＃＃＃＃４． jQueryの略称

Ready

メソッド

jQuery を使用して、ドキュメントがいつアクションを開始できるかをリッスンするのは非常に簡単です。

リーリー

ただし、おそらく、別の、より混乱を招くラッパー関数に遭遇したことがあるでしょう。

$(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。

---

感谢您的阅读！

以上がスキルを向上させるための 14 の jQuery のヒント、リマインダー、ベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。