jQuery插件扩展

jQuery写插件核心方法

核心方法两个：
$.extend(object) 为jQuery添加一个静态方法$.fn.extend(object) 为jQuery实例添加一个方法

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

$.fn.extend({
    fun2:function(){
    //console.log()
    }
});
//Usage
$(this).fun2();

区分$(function(){...}) 和(function($){})(jQuery)

第一个是表示DOMReady执行里面的方法，也就是我们通过使用jQuery所必须加的那个方法。

$(function(){
    //jQuery code here
})

而第二个写法是定义了一个匿名函数，并且传入jQuery作为参数，在jQuery插件开发中很重要，定义了插件的私有作用域！
我自己写的插件就是这样定义的：

(function(jQuery,WebUploader){
    var $=jQuery;
    $.fn.createUpload=createUpload;
})(jQuery,WebUploader);

开发jQuery插件的标准结构

1.定义作用域：定义一个jQuery插件，首先把这个插件的代码放在一个不受外界干扰的地方。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。
其实也就是IIFE立即执行函数，同时也是一个闭包，你会发现，我们把私有作用域中的createUpload方法添加到了$.fn上

//step01 定义插件的私有作用域
(function ($) {

})(jQuery);

2 . 扩展这个插件，当定义好整个作用域后，就是为这个jQuery实例添加一个扩展方法。

(function(jQuery){
    var $=jQuery;
    $.fn.createUpload=function(options){
    };
})(jQuery);

我们当然可以在调用这个方法的时候传入一些参数，配置这个方法。这就是一个最简单的jQuery插件。

Usage

如果这个插件是为jQuery实例定义的，那么使用方法如下：

$('#domName').createUpload(options);

如果你设置为静态方法：

$.createUpload(options);

插件应该有默认值

插件应该是有比较灵活的属性，同时也应该有默认值。所以我们一般会在插件定义时设定一些默认值
同时为了灵活我们应该使用变量，用户传入了自己的设置参数的时候就应该使用用户的设置值：

 function initUploader(options){
        if(!isObject(options)){
                console.log("error! it is not an object!");
                return ;
        }
        else if(!WebUploader.Uploader.support()){
            var error="上传组件不支持你的浏览器！请使用Chrome!";
            alert(error);
            return ;
        }
        else{
            //render the html first!
            render(options); //render the html dom
            //common setting
            var settings={
                    method:'POST',
                    // swf文件路径
                    swf:swf,
                    // 文件接收服务端。
                    server:options.serverPath,
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    fileSizeLimit:options.fileSizeLimit||536870912,  //默认500MB 单位Byte 
                    pick: '#'+picker, // picker id 
                    chunked:true,
                    chunkRetry:options.chunkRetry||3,
                    chunkSize:options.chunkSize||102400  //单位 Byte
            };
            if(options.type==='img'){
                settings['auto'] = true;
                settings['accept']={
                    title:imgTitle,
                    extensions:extendsion,
                    mimeTypes:'image/*'
                };
            }else if(options.type==='file'){
                settings['resize']=false;
            }
            var uploader=WebUploader.create(settings);
        }
        return uploader;
    }

我们可以看到我们实际是使用用户传入的option参数来配置我们的参数。
还有一种方法：

(function ($) {
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };

    $.fn.createUpload= function (options) {

        var options = $.extend(defaults, options);
    }
})(jQuery);

使用$.extend(defaults,options); 表示options取覆盖defaults的值，并把值赋给新定义的options了。
这个也是如果用户定义了属性就覆盖，未定义就覆盖。

让插件支持jQuery选择器

如果有必要你应该让你的插件支持jQuery选择器

(function(jQuery){
    var defaults={
    };
    var $=jQuery;
    $.fn.createUpload=function(options){
        //合并用户自定义属性，默认属性
        var options=$.extend(defaults,options);

        this.each(function(){
        });
    };

})(jQuery);

所以就是this.each 这个方法。
那么插件就可以使用这个方法遍历执行选择到的所有元素。

关于$.extend 和 $.fn.extend

实际上，fn只是对jQuery.prototype的一个引用。
但其实

jQuery.extend=jQuery.fn.extend=function(){
//..
}

所以它其实是指向同一个方法的不同引用而已。
即jQuery.extend 对jQuery本身的属性和方法进行了扩展
jQuery.fn.extend 对jQuery.fn的属性和方法进行了扩展

但是为什么jQuery.fn和jQuery.的效果不同？

其实是因为$.extend调用的时候，this是指向jQuery对象的，所以扩展在jQuery对象上。 而$.fn.extend调用的时候this是指向fn对象，所以扩展的是jQuery.prototype对象

支持链式调用

其实就是最后return this！

(function(jQuery){
    var defaults={
    };
    var $=jQuery;
    $.fn.createUpload=function(options){
        //合并用户自定义属性，默认属性
        var options=$.extend(defaults,options);

        //支持链式调用
        return this.each(function(){
        });

    };

})(jQuery);

用法

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

插件中定义方法

(function(jQuery){
    var defaults={
    };
    var $=jQuery;
        //文本节点，兼容性的处理. IE innerText   FF没有innerText
    function textContent(element,value){
        var content=element.textContent; //检测textContent是否有定义
        if(value==undefined){ //没有传递value 返回当前文本
            if(content!==undefined) return content;
            else return element.innerText;
        }
        else{
            if(content!==undefined) element.textContent=value;
            else element.innerText=value;
        }

    }
    $.fn.createUpload=function(options){
        //合并用户自定义属性，默认属性
        var options=$.extend(defaults,options);

        this.each(function(){
        });
    };

})(jQuery);

直接写在私有作用域里面即可，在插件里面定义的方法，外界不能直接调用。这些方法都是在内部被使用。 如果你希望外界能够访问你这个方法。你就要挂载到
$.extend上作为静态方法 或者 $.fn.extend作为实例方法