7 jQuery 모범 사례_jquery

풍부한 웹 애플리케이션의 수가 증가하고 빠른 대화형 응답에 대한 사용자의 높은 기대로 인해 개발자는 일부 반복 작업을 빠르고 효율적으로 완료하기 위해 JavaScript 라이브러리를 사용하기 시작했습니다. 가장 인기 있는 JavaScript 라이브러리 중 하나는 jQuery입니다. 그러나 jQuery의 수많은 애플리케이션은 또 다른 질문을 불러일으켰습니다. JavaScript 라이브러리를 사용할 때 모범 사례는 무엇이며 나쁜 사례는 무엇입니까?

배경

이 기사에서는 JavaScript 코드를 작성, 디버깅 및 검토할 때 (적어도 제 생각에는) 몇 가지 모범 사례를 소개하겠습니다. 실제로 저는 가장 일반적인 시나리오 중 7개를 선택했습니다.

1. CDN 및 해당 대체 주소 사용(fallback)

CDN은 Content Delivery Network의 약자로 JavaScript 파일을 캐시하는 서버입니다. CDN을 사용한 후 애플리케이션은 새 사용자가 요청을 시작할 때마다 서버에서 라이브러리 파일을 다시 로드하는 대신 CDN 캐시를 사용할 수 있습니다. Google, Microsoft 및 JQuery는 모두 CDN 서비스를 제공합니다.

네트워크가 항상 100% 안정적이지 않고 어떤 이유로든 서버가 다운될 수 있다는 점을 감안할 때 이러한 상황이 발생하더라도 애플리케이션이 계속 정상적으로 실행될 수 있는지 확인해야 합니다. 이때 대체 주소를 사용해야 합니다. 애플리케이션이 캐시 라이브러리를 찾을 수 없으면 대체하여 서버 파일을 사용합니다.

Google CDN은 다음과 같습니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>

Microsoft CDN은 다음과 같습니다.

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"> </script>

URL 프로토콜을 http로 지정하지 않고 //를 사용했다는 점에 유의해야 합니다. 이는 CDN 서버가 http, https를 지원하기 때문입니다. SSL 인증을 받은 웹사이트라면 수정 없이 정상적으로 파일을 로딩할 수 있습니다.

또한 앞서 말씀드린 것처럼 CDN 서버에 문제가 있을 경우를 대비한 대체 주소도 필요합니다.

<script>Window.JQuery || document.write(&lsquo;<script src=&rdquo;script/localsourceforjquery&rdquo;></script>&rsquo;)

물론 Require를 사용하여 필요한 jQuery를 구성할 수도 있지만 이것이 좋다고 생각합니다.

2. DOM 상호작용 제한

JavaScript로 DOM 트리를 조작하면 성능 비용이 발생합니다. jQuery도 마찬가지다. 따라서 DOM과의 상호작용을 최소화하도록 노력하세요. 내 동료가 데이터 표시 속도를 향상시키는 것을 도왔을 때 그가 루프 내에서 선택기를 사용하는 것을 보았습니다. 이것은 성능 킬러입니다! 그가 쓴 글은 다음과 같습니다.

containerDiv = $("#contentDiv");
for(var d =0; d < TotalActions; d++)
{
 containerDiv.append("<div><span class='brilliantRunner'>" + d + "</span></div>");
}

무엇이 문제인가요? 얼핏 보면 아무 문제가 없습니다. 그리고 동료들도 이 코드가 실행하기에 매우 재미있다고 말했습니다! 정말 화가 났어요! TotalActions가 50 미만이면 문제가 발견되지 않지만 25,000에 도달하면 속도가 많이 느려집니다. 그 이유는 (Google을 통해서도 찾았습니다) DOM 상호 작용이 루프에 위치하기 때문입니다.

이 기능의 경우(많은 시도 실패 후) 루프의 직접적인 DOM 상호 작용을 배열의 푸시 작업으로 대체한 다음 빈 문자열을 구분 기호로 사용하여 배열을 결합했습니다. 결과적으로 프로그램은 확실히 더 매끄럽고 효율적이 되었습니다.

var myContent=[];
for(var d = 0; d < TotalActions; d++)
{
 myContent.push("<div><span class='brilliantRunner'>" + d + "</span></div>");
}
containerDiv.html(myContent.join(""));

3. 캐시

jQuery의 가장 중요하고 독특한 점은 선택기와 DOM 트리에서 HTML 요소를 찾는 방법입니다. 그러나 일부 개발자는 $("#divid")와 같이 동일한 함수에서 동일한 선택기를 여러 번 호출하는 경우를 여러 번 보았습니다. jQuery는 요소를 매우 빠르게 선택하지만 매번 동일한 요소를 찾지는 마세요. 따라서 다음과 같이 요소를 캐시할 수 있습니다.

var $divId = $("#divId")

그런 다음 다음 코드에서 $divId를 사용할 수 있습니다.

아래 코드의 경우:

var thefunction = function()
{
 $("#mydiv").ToggleClass("zclass");
 $("#mydiv").fadeOut(800);
}

var thefunction2 = function()
{
 $("#mydiv").addAttr("name");
 $("#mydiv").fadeIn(400);
}

다음과 같이 수정하고 체인 구문을 사용하여 더욱 아름답게 만들 수 있습니다.

var mydiv =$("#mydiv");
var thefunction = function()
{
 mydiv.ToggleClass("zclass").fadeOut(800);
}

var thefunction2 = function()
{
 mydiv.addAttr("name").fadeIn(400);
}

하지만 매번 모든 것을 캐시할 필요는 없습니다. 아래 예를 살펴보세요.

$("#link").click(function()
{
  $(this).addClass("gored");
}

在这里，我既没有用 $(“#link”)，或者将其缓存起来，而是使用的$(this)。因为在这个例子中，我操作的对象就是这个链接本身。

4、find 和 filter

最近，在使用find()来获取jQuery对象结合的时候，我产生了一些困惑。然后我发现，这个操作可以替换为用filter()方法来实现。理解这两者的区别非常重要：

find: 将会从选定的元素开始，一直向下查找DOM树

filter: 是在jQuery集合当中查找
5、end()

当在jQuery集合中进行链式操作的时候，我有时候需要回到父对象去进行一些操作。比如你正在一个表格的第二行应用CSS，然后希望回到表格对象，对其添加一些样式。在你对行应用完样式之后，只要使用end()方法，你就会自动回到表格对象，然后随意的对其添加样式吧！

（译者注：find()、filter()和end()原文是大写，其实应该是小写）

6、对象字面量

当你通过链式语法来操作元素的CSS属性的时候，你可以使用对象字面量方式来提升性能。比如这段代码：

$("#myimg").attr("src", "thepath").attr("alt", "the alt text");

变成下面这样之后，不仅避免了操作DOM元素，而且还不用多次调用相关的设置方法：

$("#myimg").attr({"src": "thepath", "alt": "the alt text"});

7、善用CSS类

尽可能使用CSS类而不要写内联CSS代码。我想这一点就不需要举例说明了吧。

希望这篇文章能够帮助你编写更好的jQuery应用程序，真正的帮助到大家。