jQuery 플러그인 개발에 대한 자세한 소개

머리말

jQuery 플러그인 개발에는 두 가지 유형이 있습니다.

1. jQuery에 정적 메소드 추가

2. jQuery 메서드 추가

jQuery에 정적 메서드 추가

1. 새 전역 함수 직접 추가

jQuery.foo = function() {
alert('This is a test. This is only a test.');
}

2. jQuery.extend(object)

jQuery.extend({
foo: function() {
alert('This is a test. This is only a test.');
},
bar: function(param) {
alert('This function takes a parameter, which is "' + param +'".');
}
});

를 사용하세요. 전역적으로 구성된 일부 플러그인의 경우 플러그인에서 호출할 수 있으므로

을 호출하지 않고도 플러그인 자바스크립트를 직접 참조할 수 있습니다. 🎜> 프로토타입 추가 방법

플러그인 개발에서 가장 일반적으로 사용되는 방법

가장 간단한 형식

(function($){       
    $.fn.pluginName = function() {     
         // code    
    };     
})(jQuery);

Context

플러그인 기능의 즉각적인 효과 도메인에서 this 키워드는 플러그인을 호출하는 jQuery 객체를 가리키며 이를 $

(function($){
    $.fn.pluginName = function() {      
        // 没有必要再写$(this)，因为"this"就是jQuery对象             
    };          
})(jQuery);

체인 호출 유지

체인콜을 유지하기 위해 플러그인에서 이를 반환해주세요.

기본 매개변수 설정 및 노출

(function($){
    $.fn.pluginName = function(options) {    
        var opts = $.extend({}, $.fn.hilight.defaults, options);      
    };  

    $.fn.pluginName.defaults = {    
        foo: 'bar'   
    };                      
})(jQuery);

이 방법으로 사용자는 매개변수를 전달하거나 $.fn.pluginName.defaults를 수정하여 기본 매개변수를 수정할 수 있습니다

일부 공개 기능 노출

(function($){
    $.fn.pluginName = function(options) {    
        var opts = $.extend({}, $.fn.pluginName.defaults, options);      
    };  

    $.fn.pluginName.defaults = {    
        foo: 'bar'   
    };  

    $.fn.pluginName.foo = function() {    
        return 'bar';    
    };                  
})(jQuery);

사용자가 공개 함수를 호출하고 수정할 수 있도록 합니다.

더 안전한 클로저 작성 방법

;(function($,window,document,undefined){
    $.fn.pluginName = function() {     
         // code    
    };
})(jQuery,window,document);

플러그인의 이전 코드에서 ";"가 없어 발생하는 오류를 방지하기 위한 것입니다. window, document 등의 시스템 변수는 플러그인 내부에 로컬 참조가 있어 액세스 속도를 향상시키는 동시에 이러한 변수를 내부적으로 압축할 수도 있습니다. 실수로 정의되지 않은 파일을 수정하여 플러그인 버그를 일으키는 일이 없도록 하세요.

더보기

다음은 한 네티즌 블로그에서 발췌

(function () {   
    var Plugin,
        privateMethod;  //插件的私有方法
     
    /**
     * 这里是一个自运行的单例模式。
     * 
     */
    Plugin = (function () {
 
        /**
         * 插件实例化部分，初始化时调用的代码可以放这里
         */
        function Plugin(element, options) {
            //将插件的默认参数及用户定义的参数合并到一个新的obj里
            this.settings = $.extend({}, $.fn.plugin.defaults, options);
            //将dom jquery对象赋值给插件，方便后续调用
            this.$element = $(element);
             
        }
 
        /**
         * 插件的公共方法，相当于接口函数，用于给外部调用
         */
        Plugin.prototype.doSomething = function () {
            /**
             * 方法内容
             */
        };
         
        return Plugin;
 
    })();
 
    /**
     * 插件的私有方法
     */
    privateMethod = function () {
     
    };
 
    /**
     * 这里是关键
     * 定义一个插件 plugin
     */
    $.fn.plugin = function (options) {
        var instance;
        instance = this.data('plugin');
        /**
         *判断插件是否已经实例化过，如果已经实例化了则直接返回该实例化对象
         */
        if (!instance) {
            return this.each(function () {
                //将实例化后的插件缓存在dom结构里（内存里）
                return $(this).data('plugin', new Plugin(this, options));
            });
        }
        if (options === true) return instance;
        /**
         * 优雅处： 如果插件的参数是一个字符串，则 调用 插件的 字符串方法。
         * 如 $('#id').plugin('doSomething') 则实际调用的是 $('#id).plugin.doSomething();
         * doSomething是刚才定义的接口。
         * 这种方法 在 juqery ui 的插件里 很常见。
         */
        if ($.type(options) === 'string') instance[options]();
        return this;
    };
     
    /**
     * 插件的默认值
     */
    $.fn.plugin.defaults = {
        property1: 'value',
        property2: 'value'
    };
 
    /**
     * 优雅处： 通过data-xxx 的方式 实例化插件。
     * 这样的话 在页面上就不需要显示调用了。
     */
    $(function () {
        return new Plugin($('[data-plugin]'));
    });   
}).call(this);

위 내용은 jQuery 플러그인 개발에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!