jQuery插件开发总结

时间 2019-11-15

原文原文链接

jQuery插件开发两个底层方法

jQuery.extend([deep ], target [, object1 ] [, objectN ] )

将两个或更多对象的内容合并到第一个对象。javascript

deep 若是是true，合并成为递归（又叫作深拷贝）
target 一个对象，若是附加的对象被传递给这个方法将那么它将接收新的属性，若是它是惟一的参数则将扩展jQuery的命名空间，这对于插件开发者但愿向 jQuery 中添加新函数时是颇有用的。
object1 一个对象，它包含额外的属性合并到第一个参数
包含额外的属性合并到第一个参数

当咱们提供两个或多个对象给$.extend()，对象的全部属性都添加到目标对象（target参数）
目标对象（第一个参数）将被修改，而且将经过$.extend()返回。然而，若是咱们想保留原对象，咱们能够经过传递一个空对象做为目标对象：
var settings = $.extend({}, defaults, options);
在默认状况下，经过$.extend()合并操做是不递归的;css

var object1 = {apple: 0,banana: {weight: 52, price: 100},cherry: 97};
var object2 = {banana: {price: 200},durian: 100};
$.extend(object1, object2);
//{apple: 0, banana: {price:200}, cherry: 97, durian: 100}
$.extend(true, object1, object2);
//{apple: 0, banana: {weight: 52, price:200}, cherry: 97, durian: 100}

jQuery.fn.extend()

在jQuery源码中有jQuery.fn = jQuery.prototype = function(){……}即指向jQuery对象的原型链，对其它进行的扩展，做用在jQuery对象上面；java

总结jquery

jQuery.extend()可以建立全局函数或选择器，在实际开发中常使用jQuery.extend()方法做为插件方法传递系列选项结构的参数
jQuery.fn.extend()可以建立jQuery对象方法，通常用此方法来扩展jQuery的对象插件

jQuery插件开发通用框架

;(function($, window, document, undefined){
    //Plugin code here
})(jQuery, window, document);

使用分号是为了防止因前面的代码没有使用分号而致使插件函数不能正确解析
传入jQuery是为了确保在匿名函数中正确的使用jQuery对象，防止多库共存时$冲突
传入window、document并不是必须，只不过为了更快的访问window和document
传入undefined是为了防止undefined变量被更改，确保undefined的准确性数组

jQuery插件开发的3种形式

一、类级别开发(封装全局函数的插件)
类级别写法：架构

//方式1
;(function($, window, document, undefined){
    $.pluginName = function(){
        //Plugin implementation code here
    };  
})(jQuery, window, document);
//方式2 当全局函数较多时
;(function($, window, document, undefined){
    $.extend({
        pluginName = function(){
            //Plugin code here
        };  
    })
})(jQuery, window, document);

调用方法：$.pluginName();app

二、对象级别的插件开发
对象级别插件写法：框架

//方式1
;(function($, window, document, undefined){
    $.fn.pluginName = function(options) {
        return this.each(function() {  
        //this关键字表明了这个插件将要执行的jQuery对象
        //return this.each()使得插件可以造成链式调用
            var defaults = {
                //pro : value
            };
            var settings = $.extend({}, defaults, options);
            // plugin implementationcode here
        });
    }
})(jQuery, window, document);
//方式2
;(function($, window, document, undefined){
    $.fn.extend({
        pluginName : function(){
            return this.each(function(){
                // plugin code here
            });
        };
    })
})(jQuery, window, document);
//方式3 这种类型的插件架构容许您封装全部的方法在父包中，经过传递该方法的字符串名称和额外的此方法须要的参数来调用它们。
;(function($, window, document, undefined){
        // 在咱们插件容器内，创造一个公共变量来构建一个私有方法  
        var privateFunction = function() {  
            // code here  
        }  
        // 经过字面量创造一个对象，存储咱们须要的公有方法  
        var methods = {  
            // 在字面量对象中定义每一个单独的方法  
            init: function() {  
                // 为了更好的灵活性，对来自主函数，并进入每一个方法中的选择器其中的每一个单独的元素都执行代码  
                return this.each(function() {  
                    // 为每一个独立的元素建立一个jQuery对象  
                    var $this = $(this);  
                    // 建立一个默认设置对象  
                    var defaults = {  
                        propertyName: 'value',  
                        onSomeEvent: function() {}  
                    }  
           
                    // 使用extend方法从options和defaults对象中构造出一个settings对象  
                    var settings = $.extend({}, defaults, options);  
                    // 执行代码  
                    // 例如： privateFunction();  
                });  
            },  
            destroy: function() {  
                // 对选择器每一个元素都执行方法  
                return this.each(function() {  
                    // 执行代码  
                });  
            }  
        };  
        $.fn.pluginName = function() {  
            // 获取咱们的方法，遗憾的是，若是咱们用function(method){}来实现，这样会毁掉一切的  
            var method = arguments[0];  
            // 检验方法是否存在  
            if(methods[method]) {  
                // 若是方法存在，存储起来以便使用  
                // 注意：我这样作是为了等下更方便地使用each（）  
                method = methods[method];  
       
            // 若是方法不存在，检验对象是否为一个对象（JSON对象）或者method方法没有被传入  
            } else if( typeof(method) == 'object' || !method ) {  
       
                // 若是咱们传入的是一个对象参数，或者根本没有参数，init方法会被调用  
                method = methods.init;  
            } else {  
                // 若是方法不存在或者参数没传入，则报出错误。须要调用的方法没有被正确调用  
                $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );  
                return this;  
            }  
       
            // 调用咱们选中的方法  
            // 再一次注意咱们是如何将each（）从这里转移到每一个单独的方法上的  
            return method.call(this);  
        }  
})(jQuery, window, document);
//方式4 面向对象的插件开发 将原型和构造函数组合使用，使得经过构造函数建立的每一个实例都能继承相关属性与方法
;(function($, window, document, undefined){
    //定义Beautifier的构造函数
    var Beautifier = function(ele, opt) {
      this.$element = ele;
      this.defaults = {
        'color': 'red',
        'fontSize': '12px',
        'textDecoration':'none'
      };
      this.options = $.extend({}, this.defaults, opt);
    }
    //定义Beautifier的原型方法
    Beautifier.prototype = {
      beautify: function() {
        return this.$element.css({
          'color': this.options.color,
          'fontSize': this.options.fontSize,
          'textDecoration': this.options.textDecoration
        });
      }
    }
    //在插件中使用Beautifier对象
    $.fn.myPlugin = function(options) {
      //建立Beautifier的实体
      var beautifier = new Beautifier(this, options);
      //调用其方法
      return beautifier.beautify();
    }
})(jQuery, window, document);

调用方法：$.fn.pluginName();jquery插件

三、经过$.widget()应用jQuery UI的部件工厂方式建立
用来开发更高级jQuery部件的，该模式开发出来的部件带有不少jQuery内建的特性，好比插件的状态信息自动保存，各类关于插件的经常使用方法等函数

编写JQuery插件须要注意的地方：

插件的推荐命名方法为：jquery.[插件名].js
全部的对象方法都应当附加到JQuery.fn对象上面，而全部的全局函数都应当附加到JQuery对象自己上。
能够经过this.each() 来遍历全部的元素
在jQuery开发中，this关键词一般引用的是当前正在操做的DOM元素，但在当前的jQuery插件上下文中，this关键词引用的是当前jQuery实例自身，惟一的例外是在当前jQuery集合中遍历全部元素时，$.each循环体内的this引用的是这一轮遍历所暴露的DOM元素
全部方法或函数插件，都应当以分号结尾，不然压缩的时候可能会出现问题。为了更加保险写，能够在插件头部添加一个分号（；），以避免他们的不规范代码给插件带来影响。
插件应该返回一个JQuery对象，以便保证插件的可链式操做。