오늘날, jquery 는 웹 개발에 거의 없어서는 안 된다. 심지어 20 10 버전부터 vs 신기는 Jquery 와 ui 를 웹 프로젝트에 내장했습니다. Jquery 사용의 이점에 관해서는 여기서는 군말을 하지 않고, 사용한 사람은 모두 알고 있다. 오늘 jquery 의 플러그인 메커니즘에 대해 살펴보겠습니다. Jquery 에는 수천 개의 타사 플러그인이 있습니다. 때때로 우리는 그것을 jquery 와 결합하기 위해 독립적인 함수를 쓴다. Jquery 를 사용하여 체인에서 호출할 수 있습니다. 이렇게 하면 jquery 를 확장하고 플러그인을 작성할 수 있습니다. 예를 들어, 다음은 Jquery 객체를 간단히 확장하는 데모입니다.
//sample: jquery 객체를 확장하는 메서드로, bold () 는 굵은 글꼴로 사용됩니다.
(함수 ($) {
$ .fn.extend ({"bold": function () {///< 요약>
///굵게
///< /요약 >
This.css ({fontweight: "bold"}) 를 반환합니다.
}
});
}) (jquery);
통화 모드:
이것은 매우 간단한 확장입니다. 다음으로 위의 코드를 단계별로 분석해 보겠습니다.
첫째, jquery 의 플러그인 메커니즘
사용자가 플러그인을 쉽게 만들 수 있도록 jquery 는 jQuery.extend () 및 jQuery.fn.extend () 메서드를 제공합니다.
육오사팔팔 +0. JQuery.extend () 메서드에는 오버로드가 있습니다.
JQuery.extend(object), JQuery 클래스 자체를 확장하는 매개 변수, 즉 jQuery 클래스/네임스페이스에 새 함수를 추가하거나 정적 메서드를 호출하는 매개 변수입니다. 예를 들어, jQuery 에 내장된 Ajax 메서드는 jQuery.ajax () 에 의해 호출되며 클래스 이름 정적 메서드를 호출하는 방식과 비슷합니다. 메소드 이름 "을 참조하십시오. JQuery.extend(object) 의 예를 하나 더 쓰겠습니다.
//extendjquery.extend ({"minvalue": function (a, b) {//
///두 값을 비교하고 최소값을 반환합니다.
///< /요약 >
& ltb 를 반환합니까? 갑: 을;
}, "maxValue": 함수 (a, b) {///< 요약>
///두 값을 비교하고 최대값을 반환합니다.
///< /요약 >
Return a>b? 갑: 을;
}
}); //호출
Var I =100; J =101; Var min_v = $. MinValue(i, j); // min_v 는 100 과 같습니다.
Var max_v = $. 최대 값 (I, j); // max_v 는 10 1 과 같습니다.
오버로드 버전: jquery.extend ([deep], target, object 1,? [오브젝트])
하나 이상의 다른 객체로 객체를 확장하고 확장된 객체를 반환합니다.
Target 이 지정되지 않은 경우 jQuery 네임스페이스 자체가 확장됩니다. 이렇게 하면 플러그인 작성자가 jQuery 에 새 메서드를 추가할 수 있습니다.
첫 번째 매개 변수가 true 로 설정되면 jQuery 는 전체 복사본을 반환하고 발견된 모든 객체를 재귀적으로 복사합니다. 그렇지 않으면 복사본이 원본 오브젝트와 구조를 공유합니다.
정의되지 않은 속성은 복사되지 않지만 객체 프로토타입에서 상속된 속성은 복사됩니다.
매개 변수
깊이: 선택 사항. True 로 설정하면 재귀적으로 병합됩니다.
목표:? 수정할 객체입니다.
Object 1: 첫 번째 오브젝트에 병합할 오브젝트입니다.
ObjectN: 선택 사항. 첫 번째 객체에 병합할 객체.
예제 1:
설정 및 옵션을 통합하고 설정을 수정 및 반환합니다.
Var settings = {validate: false, limit: 5, name: "foo"}; -응?
Var options = {validate: true, name:" bar "}；; -응?
JQuery.extend (설정, 선택);
결과:
Settings == {validate: true, limit: 5, name: "bar"}
예 2:
기본값을 수정하지 않고 기본값과 옵션을 병합합니다.
Var empty = {}；; -응?
Var defaults = {validate: false, limit: 5, name: "foo"}; -응?
Var options = {validate: true, name:" bar "}；; -응?
Var settings = jQuery.extend (비어 있음, 기본값, 선택);
결과:
Settings == {validate: true, limit: 5, name: "bar"}?
Empty == {validate: true, limit: 5, name: "bar"}
이 오버로드 방법은 일반적으로 플러그인을 작성할 때 사용자 정의 플러그인 매개변수로 플러그인의 기본 매개변수를 덮어쓰는 데 사용됩니다.
JQuery.fn.extend(object) 는 JQuery 요소 집합을 확장하여 새 메서드 (일반적으로 플러그인 제작에 사용됨) 를 제공합니다.
우선, fn 이 무엇인지 봅시다. JQuery 코드를 보면 발견하기 어렵지 않다.
JQuery.fn = jQuery.prototype = {
Init: 함수 (선택기, 컨텍스트) {.....};
}
원래 jQuery.fn = jQuery.prototype 은 jQuery 객체의 프로토타입이었습니다. 그런 다음 jQuery.fn.extend () 메서드는 jQuery 객체를 확장하는 프로토타입 메서드입니다. 프로토타입에서 메서드를 확장하는 것은 객체에 "멤버 메서드" 를 추가하는 것과 같고 클래스의 "멤버 메서드" 는 클래스의 객체에서만 호출할 수 있다는 것을 알고 있으므로 jQuery.fn.extend(object) 확장 메서드를 사용합니다. 이 멤버 함수는 jQuery 클래스의 인스턴스에서 사용할 수 있습니다. JQuery.fn.extend(object) 와 jQuery.extend(object) 메서드를 구분해야 합니다.
둘째, 익명 함수/클로저 자체 실행
1. 자체 실행 익명 함수란 무엇입니까?
(function {//code })()；) ();
2. 질문 why (why(function {//code })()；) (); 실행 가능, 함수 {//code} (); 그러나 오류를 보고합니까?
분석
(1). 우선 차이점을 명확히 해야 합니다:? (function {// code}) 는 표현식이고 function {// code} 는 함수 선언입니다.
(2). 둘째, js' 사전 컴파일' 의 특징:? Js 는 사전 컴파일 단계에서 함수 선언을 해석하지만 테이블은 무시합니다.
(3). js 가 function () {//code} (); 함수 () {//code} 는 사전 컴파일 단계에서 이미 해석되었기 때문에 js 는 함수 () {//code} 를 건너뛰고 (); , 오류를 보고합니다.
Js 실행 대상 (function {// code}) (); (function {// code}) 는 표현식이므로 js 는 반환 값을 해석합니다. 반환 값이 함수이므로 (); 그것은 있을 것이다.
또한 함수를 표현식으로 변환하는 방법은 그룹 연산자 () 에 의존하지 않아도 됩니다. void 연산자, ~ 연산자,! 교환원.
예를 들면 다음과 같습니다.
Bootstrap 프레임워크의 플러그인 작성:
! 함수 ($) {
//뭐 좀 해봐
} (jquery);
그리고
(함수 ($) {
//뭐 좀 해봐
}) (jquery); 이것은 같은 일이다.
익명 함수의 가장 큰 목적은 JavaScript 언어의 특징 중 하나인 클로저를 만드는 것입니다. 또한 네임스페이스를 구축하여 전역 변수 사용을 줄일 수 있습니다.
예를 들면 다음과 같습니다.
Var a =1;
(함수 () () {
Var a =100;
}) ();
경계 (a); //꺼내기 1
더 많은 클로저와 익명 함수를 볼 수 있습니까? 자바스크립트의 익명 함수와 자체 실행? 이 문장.
셋째, JQuery 플러그인을 단계적으로 패키지화합니다.
다음으로 강조 표시된 jqury 플러그인을 작성해 보겠습니다.
1. 플러그인 "오염" 을 방지하기 위해 폐쇄 구역을 설정합니다
//클로저는 네임 스페이스 (함수 ($) (
}) (window.jquery);
2.jQuery.fn.extend(object) 는 jQuery 메소드를 확장하여 플러그인을 만듭니다.
//클로저는 네임 스페이스 (함수 ($) (
$ .fn.extend ({"highlight": function (options) {//뭐 좀 해}
});
}) (window.jquery);
플러그인 기능을 구현하기 위해 플러그인 기본 매개 변수를 제공하십시오.
//클로저는 네임 스페이스 (함수 ($) (
$ .fn.extend ({"highlight": function (옵션) {varopts = $. Extend({}, defaluts, options); //플러그인의 기본 매개 변수를 jQuery.extend 로 재정의합니다.
This.each(function () {? //이것은 jQuery 개체입니다.
//컬렉션에서 highlight () 플러그인을 호출하면 강조 표시할 모든 DOM 을 순회합니다.
Var $ this = $ (this); //현재 DOM 의 jQuery 개체를 가져옵니다. 여기서 은 현재 루프의 DOM 입니다.
//매개변수에 따라 DOM 의 스타일을 설정합니다.
$this.css({
배경 색상: opts.background,
색상: opts. 전경
});
});
}
}); //기본 매개변수
Var defaluts = {
전경: "빨강",
배경: 노란색
}
}) (window.jquery);
이 시점에서 강조 표시된 플러그인의 기본 기능이 이미 있습니다. 호출 코드는 다음과 같습니다.
$(function () {
$ ("p") 입니다. 강조 표시 (); //사용자 정의 강조 표시 플러그인 호출});
여기는 직접 호출만 할 수 있고 연쇄호출은 할 수 없다. 우리는 jQuey 를 chain 에서 호출할 수 있다는 것을 알고 있습니다. 즉, jQuery 객체에서 다음과 같은 여러 메서드를 호출할 수 있습니다.
$ ('# ID') 입니다. CSS ({margin top:' 100px'}). AddAttr ("제목", "테스트"); -응?
그러나 위의 플러그인은 이렇게 호출할 수 없습니다. 예: $ ("p"). () 를 강조 표시합니다. Css ({margintop:'100px'}); //사용자 정의 플러그인을 사용하여 함수를 완성한 후 jQuery 개체를 반환하지 않았기 때문에 CSS 메서드를 찾을 수 없다고 보고합니다. 다음으로 jQuery 객체를 반환하여 플러그인도 체인 호출을 지원할 수 있도록 합니다. (실제로 매우 간단합니다. 플러그인 코드를 실행할 때 jQuery 객체를 반환하는 것은 위의 코드와 다르지 않습니다. ) 을 참조하십시오