jQuery 플러그인 시작

제목: JQuery 플러그인을 정의하지 않습니다.
안내
일부 WEB 개발자들은 JQuery 라이브러리를 인용한 다음에 웹 페이지에 ("#"), ("#"), ("."),몇 년 썼는데 남들한테 JQuery가 너무 익숙하다고.나도 일찍이 이런 사람이었다. 회사의 기술 교류가 한 번이 되어서야 나는 비로소 자신에 대한 생각을 바꾸었다.
2. JQuery 지식 보급
지식 1: JQuery로 플러그인을 작성할 때 가장 핵심적인 방법은 다음과 같습니다.

$.extend(object)는 JQuery에 정적 메서드를 추가하는 것으로 이해할 수 있습니다.

$.fn.extend(object)는 JQuery 인스턴스에 메서드를 추가하는 것으로 이해할 수 있습니다.

기본 정의 및 호출:

// $.extend      
$.extend({
    fun1: function () { 
        alert("     "); 
    }
});
$.fun1();

// $.fn.extend      
$.fn.extend({
    fun2: function () {
        alert("    2"); 
    }
});
$(this).fun2();
//    
$.fn.fun3 = function () {
    alert("     "); 
}
$(this).fun3();

지식 2: jQuery(function(){});와(function($) (jQuery);의 차이점:

jQuery(function () { });
//   
$(document).ready(function () { });
(function ($) { })(jQuery);
//   
var fn = function ($) { };
fn(jQuery);

jQuery(function () { });는 어떤 DOM 요소가 불러온 후 실행하는 방법의 코드입니다.(function ($) { })(jQuery); 는 익명 함수를 정의했는데, 그 중에서 jQuery는 이 익명 함수의 실참을 대표한다.일반적으로 JQuery 플러그인 개발에 사용되며 플러그인의 개인 영역을 정의하는 역할을 합니다.
3: JQuery 플러그인 표준 구조 개발
1. 역할 영역 정의: JQuery 플러그인을 정의하려면 먼저 이 플러그인의 코드를 외부의 방해를 받지 않는 곳에 두어야 한다.전문적으로 말하자면 이 플러그인에 개인 역할 영역을 정의하는 것이다.외부 코드는 플러그인 내부의 코드에 직접 접근할 수 없습니다.플러그인 내부의 코드는 전역 변수를 오염시키지 않습니다.일정한 작용에서 플러그인과 운행 환경의 의존을 풀었다.이렇게 많이 말했는데, 플러그인의 개인 역할 영역을 어떻게 정의해야 합니까?

//step01   JQuery    
(function ($) {

})(jQuery);

이 작용역을 얕보지 마라. c#가 클래스를 정의하는class 키워드처럼 중요하다.
2. JQuery를 위한 플러그인 확장: JQuery의 역할 영역을 정의한 후 가장 핵심적이고 가장 절실한 단계는 이 JQuery의 실례에 확장 방법을 추가하는 것이다.우선 이 Jqury 플러그인에 easySlider라는 방법을 명명합니다. 이 플러그인을 호출할 때 옵션스를 통해 이 플러그인에 파라미터를 전달할 수 있습니다.구체적인 정의 방법은 다음과 같다.

//step01   JQuery    
(function ($) {
    //step02          
    $.fn.easySlider = function (options) {
        
    }
})(jQuery);

지금까지 사실 가장 간단한 JQuery 플러그인 하나가 완성되었다.호출할 때 돼요.

$("#domName").easySlider({})

$(".domName").easySlider({})

더 많은 방식으로 이 플러그인을 호출합니다.

3. 기본값 설정: JQuery 플러그인을 정의하는 것과 같이 정의합니다.net 컨트롤.완벽한 플러그인은 비교적 유연한 속성이 있어야 한다.이 코드를 살펴보겠습니다.

。

TextBox 컨트롤에는 Width와 Height 속성이 있으며, 사용자가 TextBox를 사용할 때 컨트롤의 Height와 Width를 자유롭게 설정할 수도 있고, 컨트롤 자체에 기본값이 있기 때문에 값을 설정하지 않을 수도 있다.그러면 JQuery 플러그인을 개발할 때 사용자가 속성을 지정하지 않았을 때 기본값이 있어야 합니다. JQuery에서는 두 단계로 나눌 수 있습니다. 다음 코드인 step03-a, step03-b를 보십시오.

//step01   JQuery    
(function ($) {
    //step03-a         
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02          
    $.fn.easySlider = function (options) {
        //step03-b          ，    
        var options = $.extend(defaults, options);
    }
})(jQuery);

프로그램을 하는 사람들은 모두 혁신을 좋아한다. 양명을 바꾸든지, 줄을 바꾸든지.기본 속성을 var defaults = {}로 표시할 때 JQuery 플러그인을 쓸 때 남다르다고 생각해서 var default01 ={}, var default02 ={}로 기본 속성을 나타낸다.그리고 기본 속성명은 다양해져서 점점 나빠진다.따라서 JQuery 플러그인을 쓸 때 기본 속성을 정의할 때defaults 변수로 기본 속성을 표시하는 것이 더 읽기 좋은 코드입니다.
누군가가 이 코드를 보았다. var options = $.extend(defaults, options) 눈살을 찌푸리며 이해하지 못한다는 뜻이다.먼저 다음 코드를 살펴보겠습니다.

var obj01 = { 
    name: "   ：Sam Xiao", 
    age: 29, 
    girlfriend: { 
        name: "Yang", 
        age: 29
    } 
}
var obj02 = { 
    name: "   ：XiaoJian", 
    girlfriend: { 
        name: "YY"
    } 
};

var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);
var d = $.extend(true,{}, obj01, obj02);

코드를 개발 환경에 복사하여 각각 a, b, c, d의 값을 보면 var options = $.extend(defaults, options)의 의미를 알 수 있다.options가defaults의 값을 덮어쓰고 options에 값을 부여했음을 나타냅니다.플러그인 환경에서 사용자가 설정한 값을 표시하고 플러그인의 기본값을 덮어씁니다.사용자가 기본값의 속성을 설정하지 않으면 플러그인의 기본값을 유지합니다.
4. JQuery 선택기 지원: JQuery 선택기, JQuery의 우수한 기능입니다. 만약에 우리의 플러그인이 JQuery 선택기를 지원하지 않는다고 쓰면 적지 않은 유감입니다.JQuery 플러그인을 사용하여 여러 선택기를 지원할 수 있는 경우 코드는 다음과 같이 정의해야 합니다.

//step01   JQuery    
(function ($) {
    //step03-a         
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02          
    $.fn.easySlider = function (options) {
        //step03-b          ，    
        var options = $.extend(defaults, options);
        //step4   JQuery   
        this.each(function () {

        });
    }
})(jQuery);

5. JQuery를 지원하는 링크 호출: 위의 코드는 완벽해 보이지만 사실은 완벽하지 않다.지금까지 링크 호출이 지원되지 않았습니다.링크 호출 효과에 도달하기 위해서는 순환하는 모든 요소return을

//step01   JQuery    
(function ($) {
    //step03-a         
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02          
    $.fn.easySlider = function (options) {
        //step03-b          ，    
        var options = $.extend(defaults, options);
        //step4   JQuery   
        //step5       
        return this.each(function () {

        });
    }
})(jQuery);

이런 정의만이 링크 호출을 지원할 수 있습니다.예를 들어 다음과 같은 호출을 지원합니다.

$(".div")
    .easySlider({
        prevId:"",prevText:""
    })
    .css({ 
        "border-width": "1", 
        "border-color": "red", 
        "border-bottom-style": "dotted" 
    });

6. 플러그인 안의 방법: 흔히 하나의 플러그인의 기능을 실현하려면 대량의 코드가 필요하다. 수백 줄, 수천 줄, 심지어 수만 줄에 달할 수 있다.우리는 이 코드를 구조화하려면function의 도움을 빌려야 한다.첫 번째 부분에서 말했듯이 플러그인에 정의된 방법은 외부에서 직접 호출할 수 없고 내가 플러그인에 정의한 방법도 외부 환경을 오염시키지 않았다.이제 플러그인에 어떤 방법을 정의할지 시도해 봅시다.

//step01   JQuery    
(function ($) {
    //step03-a         
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step06-a         
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }

    //step02          
    $.fn.easySlider = function (options) {
        //step03-b          ，    
        var options = $.extend(defaults, options);
        //step4   JQuery   
        //step5       
        return this.each(function () {
            //step06-b         
            showLink(this);
        });
    }
})(jQuery);

단계 step06-a: 플러그인에 showLink () 라는 방법을 정의합니다.이 방법은 플러그인 외에는 직접 호출할 수 없다. 약간 C#류의 개인적인 방법과 같아서 플러그인 내부의 사용만 만족시킬 수 있다.단계 step06-b는 플러그인 내부를 어떻게 호출하는지 보여 줍니다.
넷째: 총결산
개발은 표준이 형성되기만 하면 다른 사람의 코드를 읽는 데 그리 힘들지 않다.짱인 것 같으면 올라가서 JQuery 플러그인 개발의 기준을 더 많이 알 수 있도록 도와주세요.
전재정리:http://www.cnblogs.com