jQuery_jquery 사용에 영향을 미치는 14가지 측면

다행히도 사람들은 일반적으로 선택할 수 있는 플러그인이 다양합니다. 하지만 하나만 사용하더라도 사용할 가치가 있는지 알아보세요. 코드 베이스에 잘못된 코드를 도입하지 마십시오.

플러그인이 필요합니까?

가장 먼저 플러그인이 필요한지 파악하는 것입니다. 필요하지 않은 경우 파일 크기와 시간을 모두 절약할 수 있습니다.

　1. 직접 쓰는 게 낫나요?

기능이 아주 간단하다면 직접 작성해 보세요. jQuery용 플러그인은 다양한 기능을 번들로 제공하는 경우가 많으며 이는 과도할 수 있습니다. 이 경우에는 간단한 함수를 직접 작성하는 것이 더 의미가 있는 경우가 많습니다. 물론, 관련된 작업량에 대한 어느 정도의 척도가 있습니다.

예를 들어 더 고급 기능이 필요한 경우 jQuery UI의 아코디언이 좋은 선택입니다. 하지만 패널을 열고 닫기만 하면 됩니다. 웹사이트에서 아직 jQuery UI를 사용하고 있지 않다면 jQuery의 SlideToggle() 또는 animate()를 고려해 보세요.

　2. 이미 비슷한 플러그인을 사용하고 계시나요?

플러그인이 필요한 모든 것을 해결하지 못한다는 사실을 깨닫고 이를 보완할 다른 플러그인을 찾는 것은 매우 유혹적입니다. 그러나 동일한 애플리케이션에 두 개의 유사한 플러그인을 포함시키는 것은 확실히 JavaScript를 비대하게 만듭니다. 귀하의 모든 요구 사항을 충족하는 플러그인을 찾을 수 있습니까? 그렇지 않다면 필요한 모든 것을 포함하도록 이러한 플러그인 중 하나를 확장할 수 있습니까? 마찬가지로, 플러그인 확장 여부를 결정할 때 개발 시간과 이점을 비교해보세요.

예를 들어 jQuery의 라이트박스는 갤러리에 팝업 사진을 표시하는 좋은 방법이고, simpleModal은 사용자에게 모달 정보를 표시하는 좋은 방법입니다. 그런데 왜 귀하의 웹사이트에서는 두 가지 방법을 모두 사용합니까? 두 가지 요구 사항을 모두 충족하도록 하나를 쉽게 확장할 수 있습니다. 더 나은 방법은 Colorbox와 같이 모든 것을 포괄하는 플러그인을 찾는 것입니다.

　3.자바스크립트가 필요하신가요?

JavaScript가 필요하지 않은 경우도 있습니다. hover 및 CSS3 Transitios 기능과 같은 CSS 의사 선택기는 JavaScript 솔루션보다 훨씬 빠르게 다양한 동적 효과를 처리할 수 있습니다. 또한 많은 플러그인은 스타일만 제공하므로 마크업과 CSS를 사용하는 것이 더 좋을 것 같습니다.

동적 콘텐츠를 표시하고 조건부 프롬프트가 필요한 경우 jQuery Tooltip이 필수적입니다. 그러나 몇 군데에만 힌트가 필요한 경우 순수 CSS를 사용하는 것이 더 좋습니다(이 예 참조). 정적 프롬프트의 경우 한 단계 더 나아가 CSS3 전환을 사용하여 애니메이션을 적용할 수 있지만 애니메이션은 특정 브라우저에서만 작동한다는 점을 잊지 마세요.

플러그인을 검토할 때 일련의 경고 표시는 플러그인의 품질이 좋지 않음을 나타냅니다. 여기에서는 JavaScript부터 CSS, 마크업까지 플러그인의 모든 측면을 살펴보겠습니다. 플러그인을 배포하는 방법도 고려할 것입니다. 플러그인에 있는 모든 경고는 해당 플러그인을 고려 대상에서 제외합니다. 선택할 수 있는 플러그인이 여러 개 있을 만큼 운이 좋다면 다음 주의 사항을 참고하여 선택 범위를 좁힐 수 있습니다. 하지만 선택지가 하나뿐이라고 하더라도 경고가 너무 많이 나타나면 포기하는 것이 좋습니다. 두통을 미리 줄일 수 있습니다.

　4. 이상한 옵션이나 매개변수 구문

jQuery를 사용할 때 개발 엔지니어는 함수가 매개변수를 어떻게 받아들이는지 걱정합니다. 플러그인 개발자가 특수 구문을 사용하는 경우 jQuery 또는 JavaScript 프로그래밍 경험이 많지 않다고 생각하는 것이 합리적입니다.

일부 플러그인은 jQuery 객체를 매개변수로 허용하지만 객체 연결을 허용하지 않습니다. 예를 들어 $('a').myPlugin(); 대신 $.myPlugin( $('a') ); 이것은 큰 경고입니다.

코드:

$('.my-selector').myPlugin({
opt1 : 75,
opt2 : 'asdf'
});
 
$('.my-selector').myPlugin({
opt1 : 75,
opt2 : 'asdf'
});
 
$.myPlugin({
opt1 : 75,
opt2 : 'asdf'
}, $('.my-selector'));
 
$.myPlugin({
opt1 : 75,
opt2 : 'asdf'
}, $('.my-selector'));

​5. 문서가 거의 없거나 전혀 없습니다

문서가 없으면 플러그인을 사용하기가 매우 어렵습니다. 질문에 대한 답변을 찾을 때 가장 먼저 떠오르는 곳이기 때문입니다. 파일은 다양한 형식으로 제공되며 적절한 문서화가 가장 좋지만 좋은 코드 주석도 마찬가지로 좋을 수 있습니다. 문서가 없거나 블로그에 올릴 간단한 예인 경우 다른 옵션을 고려해 볼 수 있습니다. 좋은 문서는 플러그인 작성자가 당신과 같은 사용자에게 관심을 갖고 있음을 보여줍니다. 또한 다른 플러그인을 조사했으며 좋은 문서의 가치를 알고 있음을 보여줍니다.

　6. 부진한 지원 기록

지원이 부족하다는 것은 문제가 발견되었을 때 도움을 받기 어렵다는 것을 의미합니다. 더욱 우려스러운 점은 플러그인이 한동안 업데이트되지 않았음을 나타냅니다. 오픈 소스 소프트웨어의 한 가지 이점은 많은 관심을 끌고 디버깅 및 개선에 도움이 된다는 것입니다. 작성자가 이 사람들에 대해 언급하지 않으면 플러그인이 업데이트되지 않습니다.

고려하고 있던 플러그인이 마지막으로 업데이트된 때는 언제였나요? 마지막으로 메시지에 답한 게 언제였나요? 모든 플러그인이 jQuery 플러그인 웹사이트처럼 강력한 지원 시스템을 가질 필요는 없습니다. 업데이트되지 않는 플러그인에 주의하세요.

이력 기술 지원 기록이 있고 작성자가 버그에 대응하거나 요구 사항을 강화하는 것은 녹색 신호입니다. 지원 포럼이 있다는 것은 플러그인이 잘 지원된다는 것을 의미합니다. 작성자가 아니더라도 적어도 문제 해결에 도움이 되는 포럼이 있습니다.

　7. 압축버전 없음

아주 사소한 경고이기는 하지만, 플러그인 작성자가 소스 코드의 축소된 버전을 제공하지 않는다면 성능에 별로 관심을 기울이지 않는 것일 수 있습니다. 물론 압축을 직접 수행할 수도 있지만 이 경고는 시간 낭비가 아닙니다. 플러그인에 더 심각한 성능 문제가 있을 수 있다는 힌트입니다.

반면에 압축, 팩, gzip 버전을 다운로드용으로 제공한다는 것은 신호입니다.

　8. 이상한 마크업이 필요합니다

플러그인에 마크업이 필요한 경우 마크업 품질이 높아야 합니다. 의미론적 의미에 부합해야 하며 충분히 유연해야 합니다. 열악한 프런트엔드 기술 외에도 이상한 마크업으로 인해 통합이 더욱 어려워질 수도 있습니다. 좋은 플러그인은 사용하는 거의 모든 마크업을 다룰 수 있습니다. 나쁜 플러그인을 사용하는 것은 어려운 일과 같습니다.

엄격한 마크업이 필요한 경우도 있으므로 일정 범위 내에서 사용을 허용해야 합니다. 기본적으로 기능이 구체적일수록 마크업도 더 구체적으로 요구됩니다. 완전히 유연한 마크업은 자연스러운 드롭인 jQuery 옵션에서 통합하는 것이 가장 쉽습니다.

　9. CSS의 남용

많은 jQuery 플러그인에는 CSS가 포함되어 있으며 CSS의 품질은 JavaScript와 동일합니다. CSS가 너무 많으면 확실히 나쁜 징조입니다. 그러나 "끝나는 것"은 플러그인의 목적에 따라 다릅니다. 라이트박스나 UI 플러그인과 같은 디스플레이 중심 플러그인에는 단순한 애니메이션 기반 플러그인보다 더 많은 CSS가 필요합니다. 좋은 CSS 스타일을 사용하면 테마 스타일에 맞게 프로그램을 더 쉽게 수정할 수 있습니다.

　10. 누구도 사용하지 않습니다

jQuery 사용자의 수는 엄청나며 가장 괜찮은 플러그인에는 "50 jQuery [빈칸 채우기]"라도 그들이 작성한 내용이 있을 것입니다. 예를 들어 간단한 Google 검색 플러그인을 만들었는데 검색 결과가 거의 나오지 않는 경우 플러그인이 완전히 새로운 것이거나 플러그인 작성을 전문으로 하는 엔지니어를 찾는 경우를 제외하고는 다른 옵션을 고려하는 것이 좋습니다. 그것을 수정합니다.

　11. 사용 및 관찰

플러그인을 테스트하는 가장 좋은 방법은 간단히 서버에서 실행하고 결과를 확인하는 것입니다. 첫째, 일부 규칙을 위반합니까? JavaScript 코드 조각을 꼭 살펴보세요. 플러그인에 스타일 시트가 포함된 경우 각 페이지에서 레이아웃 및 스타일 오류를 찾아보세요.

게다가 이 플러그인의 효과는 어떤가요? 속도가 느리거나 페이지 로드가 지연되는 경우 다른 플러그인을 고려해보세요.

　12. 성과 평가에는 JSPerf를 사용하세요

플러그인 프레젠테이션을 한 단계 더 발전시키고 JSPerf로 테스트해 보세요. 벤치마킹은 일련의 작업을 여러 번 실행하고 평균 실행 시간을 반환합니다. JSPerf는 플러그인 실행 속도를 쉽게 테스트할 수 있는 방법을 제공합니다. 이는 거의 동일한 두 개의 플러그인을 선택하는 중요한 방법입니다.

　13. 크로스 브라우저 테스트

플러그인에 CSS가 많은 경우 지원하려는 모든 브라우저에서 스타일을 테스트하세요. CSS는 외부 스타일시트와 내부 JavaScript 모두에서 나올 수 있다는 점을 기억하세요.

플러그인에 CSS가 없더라도 모든 브라우저에서 JavaScript 오류를 확인하세요(적어도 지원하는 IE의 가장 초기 버전에서는). jQuery의 핵심은 이미 대부분의 브라우저 간 문제를 처리하고 있지만 플러그인은 어느 정도 순수 JavaScript를 사용하는 경향이 있어 이전 브라우저의 규칙을 깨는 경향이 있습니다.

　14. 단위 테스트

마지막으로 추가적인 크로스 브라우저 테스트, 즉 단위 테스트를 고려해보세요. 단위 테스트는 모든 브라우저나 플랫폼을 지원하는 구성 요소 플러그인을 테스트하는 간단한 방법입니다. 플러그인 작성자가 다운로드 패키지에 단위 테스트를 포함했다면 플러그인이 모든 크로스 브라우저와 플랫폼에서 작동할 것이라고 확신할 수 있습니다. 불행하게도 단위 테스트 데이터를 포함하는 플러그인은 거의 없지만 그렇다고 QUnit 플러그인을 사용하여 자체 단위 테스트를 수행할 수 없다는 의미는 아닙니다.

최소한의 설정으로 플러그인의 메소드가 예상한 결과를 반환하는지 테스트하세요. 하나의 테스트가 실패하는 한 이 플러그인에 시간을 낭비하지 마십시오. 대부분의 경우 단위 테스트를 수행하는 것은 약간의 시간 낭비이지만 QUnit은 플러그인의 품질을 결정하는 데 도움을 줄 수 있습니다.

결론

jQuery 플러그인의 품질을 평가할 때는 먼저 코드 품질을 평가하세요. JavaScript는 최적화되어 있고 오류가 없나요? CSS가 조정되고 유효합니까? 마크업 이름 지정이 의미 있고 유연합니까? 이러한 질문은 모두 가장 중요한 질문으로 귀결됩니다. 이 플러그인은 사용하기 쉬운가요?

jQuery의 핵심은 최적화되고 오류가 검사되며 핵심 팀 구성원뿐만 아니라 전체 jQuery 커뮤니티에서도 지원됩니다. jQuery 플러그인을 동일한 표준으로 유지하는 것은 불공평하지만 최소한 동일한 검토 표준이 있어야 합니다.