1. 개방 분석
안녕하세요 여러분! 오늘의 일련의 기사는 주로 "JavaScript"를 기반으로 플러그인 개발을 개발하는 방법에 대해 이야기합니다. 나는 많은 사람들이 "플러그인"이라는 단어에 익숙하지 않다고 생각합니다.
어떤 사람들은 이것을 "구성 요소"또는 "구성 요소"라고 부를 수 있으며, 이는 중요하지 않습니다. 핵심은 디자인 방법과 포괄적 인 고려를하는 방법을 살펴 보는 것입니다. 이것은이 기사가 초점을 맞추는 개념입니다. 나는 모두가 옳다고 생각합니다
"jQuery 플러그인 방법"에 대한 확실한 이해가 있습니다. 우리는이 주제를 기반으로이를 함께 논의하고 마지막으로 우리의 능력을 지속적으로 향상시키기위한 관련 구현 계획을 제공 할 것입니다.
2. 플러그인 주제를 입력하십시오
일반적으로 jQuery 플러그인의 개발은 두 가지 유형으로 나뉩니다. 하나는 jQuery 네임 스페이스 아래에 매달려있는 글로벌 기능이며, 이는 정적 메소드라고도합니다.
또 다른 방법은 jQuery 객체 수준 방법, 즉 jQuery 프로토 타입에 매달려있는 방법이므로 선택기를 통해 얻은 jQuery 객체 인스턴스도 메소드를 공유 할 수 있습니다.
(1), 클래스 수준 플러그인 개발
클래스 수준 플러그인 개발에 대한 가장 직접적인 이해는 "jQuery"클래스에 클래스 메소드를 추가하는 것입니다.이 클래스는 정적 메소드를 추가하는 것으로 이해할 수 있습니다. 일반적인 예는 jQuery 네임 스페이스의 함수를 정의하는 함수 "$ .ajax ()"입니다. 클래스 수준 플러그인 개발 정보는 다음 형식으로 확장 할 수 있습니다.
1.1 글로벌 기능을 추가하면 다음과 같이 정의하고 코드를 확인하면됩니다.
코드 사본은 다음과 같습니다.
$ .hello = function () {
경고 ( "안녕하세요, 큰 곰!");
};
1.2 여러 글로벌 기능을 추가하여 다음과 같이 정의 할 수 있습니다.
코드 사본은 다음과 같습니다.
$ .Extend ({
안녕하세요 : 기능 (이름) {
// 코드를 여기에 넣으십시오
},
World : function () {
// 코드를 여기에 넣으십시오
}
});
설명 : "$ .extend (target, [object1], [objectn])"(이 메소드는 주로 둘 이상의 객체의 내용 (속성)을 첫 번째 객체에 병합하고 병합 된 첫 번째 객체를 반환하는 데 사용됩니다.
이 메소드에 하나의 매개 변수 대상이있는 경우 매개 변수는 jQuery의 네임 스페이스를 확장합니다. 즉, jQuery Global Object에서 정적 메소드로 매달려 있습니다).
(2), 객체 수준 플러그인 개발
객체 수준 플러그인 개발에는 두 가지 형태가 필요합니다.
2.1 프로토 타입으로 "$ .fn.extend ()"를 통해 관련 속성을 동적으로 마운트하십시오.
코드 사본은 다음과 같습니다.
(기능 ($) {
$ .fn.extend ({
pluginName : function (opts) {
// 코드를 여기에 넣으십시오
}
});
}) (jQuery);
2.2 프로토 타입 체인에 동적 속성을 직접 추가하십시오.
코드 사본은 다음과 같습니다.
(기능 ($) {
$ .fn.pluginName = function () {
// 코드를 여기에 넣으십시오
};
}) (jQuery);
설명하겠습니다 : 두 사람은 동등합니다. jQuery 플러그인의 경우 기본 기능이 잘 작동 할 수 있지만보다 복잡한 플러그인의 경우 다양한 방법과 개인 기능을 제공해야합니다.
다른 네임 스페이스를 사용하여 플러그인을위한 다양한 메소드를 제공 할 수 있지만 너무 많은 네임 스페이스를 추가하면 코드가 지저분 해지고 덜 강력 해집니다. 따라서 최상의 솔루션은 개인 기능과 방법을 적절하게 정의하는 것입니다.
따라서 위의 예에서와 같이 자체 이행 기능을 클로저와 결합하여 시뮬레이션 된 개인 플러그인 장치를 구현합니다.
(iii), 구현 프로세스를 볼 수있는 간단한 예를 들어 보자.
(1), "HTML"조각 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<div id = "bb">
<span> </span>
<div
스타일 = "마진-탑 : 10px;
마진 바닥 : 30px; "
> 8 </div>
</div>
(2) "data.json"의 정의는 다음과 같습니다.
코드 사본은 다음과 같습니다.
{
"텍스트": "안녕하세요, 빅 베어 {{bb}}!" ;
}
(3), "bb.js"코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
$ (function () {
$ ( "#bb"). bigbear ();
});
(기능 ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
reture this.each (function () {
var elem = $ (this);
elem.find ( "span"). 텍스트 (opts [ "title"]);
$ .get (opts [ "url"], function (data) {
elem.find ( "div"). 텍스트 (data [ "text"]);
});
});
};
$ .fn.bigbear.defaults = {
제목 : "이것은 간단한 테스트입니다",
URL : "data.json"
};
}) (jQuery);
실행 효과 :
요약하자 :
(1) "$ .fn.bigbear.defaults"는 플러그인의 기본 매개 변수 옵션을 제공합니다. 확장 성이 우수한 플러그인을 사용하면 사용자가 요구에 따라 매개 변수 옵션을 사용자 정의하고 플러그인의 동작을 제어 할 수 있으므로 복원 된 기본 옵션을 제공해야합니다. jQuery의 확장 방법을 통해 이러한 옵션을 설정할 수 있습니다.
(2), "return this.each () {...}"는 여러 요소를 가로 지르고 지글 지글 선택기 엔진을 사용하여 jQuery를 반환합니다. Sizzle은 기능에 대한 다중 요소 작업 (예 : 동일한 클래스 이름을 가진 요소)을 제공 할 수 있습니다. 이것은 jQuery의 몇 가지 우수한 기능 중 하나이며, 개발 중에 플러그인에 대한 멀티 요소 지원을 제공 할 준비가되지 않더라도 이에 대한 준비는 여전히 좋은 방법입니다. 또한 JQuery는 메소드 캐스케이드를 수행 할 수있는 좋은 기능을 가지고 있으며, 이는 체인 호출이라고도 할 수 있으므로이 기능을 파괴하지 않아야하며 항상 메소드에서 요소를 반환해서는 안됩니다.
(iv), 최종 요약
(1) JQuery는 개발 플러그인을위한 두 가지 방법, 즉 JQuery.fn.extend (Object); jQuery 객체에 메소드를 추가하십시오.
jQuery.extend (객체); jQuery 클래스 자체를 확장하기 위해 클래스에 새로운 방법을 추가합니다.
(2) 모든 코드를 폐쇄에 넣습니다 (즉각적인 실행 함수). 현재 폐쇄는 개인 범위와 동일합니다. 외부는 내부 정보에 액세스 할 수 없으며 글로벌 변수의 오염이 없습니다. 공식 개발 사양에 대해 설명합니다. a) 글로벌 의존성을 피하십시오. b) 타사 피해를 피하십시오. c) jQuery 운영자 '$'및 'jQuery'와 호환됩니다.
(3) 플러그인의 기본 매개 변수 옵션을 제공합니다. 확장 성이 우수한 플러그인을 사용하면 사용자가 요구에 따라 매개 변수 옵션을 사용자 정의하고 플러그인의 동작을 제어 할 수 있습니다. 따라서 복원 된 기본 옵션을 제공해야합니다. jQuery의 확장 방법을 통해 이러한 옵션을 설정할 수 있습니다
(4), 여러 요소를 반복하고 지글 지글 선택기 엔진을 사용하여 jQuery를 반환하는 Sizzle은 기능에 대한 다중 요소 작업 (예 : 동일한 클래스 이름을 가진 요소)을 제공 할 수 있습니다. 이것은 jQuery의 몇 가지 우수한 기능 중 하나이며, 개발 과정에서 플러그인에 대한 멀티 요소 지원을 제공 할 준비가되지 않았더라도 이에 대한 준비는 여전히 우수한 관행입니다. 또한 JQuery는 메소드 캐스케이드를 수행 할 수있는 좋은 기능을 가지고 있으며, 이는 체인 호출이라고도 할 수 있으므로이 기능을 파괴하지 않아야하며 항상 메소드에서 요소를 반환해서는 안됩니다.
(5) 메인 루프 외부에 일회성 코드를 배치하는 것이 중요하지만 종종 무시됩니다. 간단히 말해서, 플러그인 함수를 호출 할 때마다 인스턴스화하는 대신 한 번만 인스턴스화 해야하는 기본값의 코드가있는 경우이 코드를 플러그인 메소드 외부에 놓아야합니다.
(6) 학습 후에는 생각해 봅시다. 이 플러그인의 프로젝트 기술 선택 및 교체 인 경우, "jQuery"메커니즘에 의존하면 이전에 쓴 플러그인은 사용되지 않습니다 (jQuery가 사용되지 않는다고 가정). 그것을 리팩터링하는 방법?
내일의 기사는이 문제에 대해 이야기하고 플러그인의 주요 논리를 리팩터링 할 것이므로 계속 지켜봐 주시기 바랍니다. . .