开发jQuery插件方法总结

综述：在开发tip小组件的时候的思考，对核心点进行总结，加深理解

1.核心知识点总结

$.extend()用于给$类添加方法，另一个用于给jquery对象添加方法，就是通过$获取到的对象

 var defaultAttr={
        opacity:0.9,
        content:'',
        size:'medium',
        position:'bottom',
        theme:'dark',
        trigger:'hover',
        animation: 'none',
        confirm: false,
        sure: '确定',
        cancel: '取消',
        finalMessage: '',
        finalMessageDuration:1000,
        childrenElement:"",
        onSure:function(){},
        onCancel:function(){}
    };
  //给jQuery对象，逐个添加该方法
	$.fn.opsTipUtil=function(options){
		this.each(function(){
			options = $.extend({},defaultAttr,options);    
           //将默认的配置项和外界传入的配置项进行合并，外部的大于内部的
			var tooltip = new OpsTipUtil($(this),options); 
            //$(this)=触发tip的元素，option=配置的内容
			tooltip.activate();
		});
	};

2.其他工作

上边已经将怎样扩展一个jQuery方法的核心功能进行展示，下面就构造函数OpsTipUtil()进行简单介绍

	function OpsTipUtil(element, options){
		this.boundElement = element;  //当前需要触发tip的元素
		this.options = options; //tip配置内容
	}
	OpsTipUtil.prototype={
	    //显示tip
		show: function(){
			//页面上，一次只能显示一个tip,在开启前，先关闭其他的
			$('ins.tipOfOps').hide();
			this.tooltip.css('display', 'block');
		},
        //隐藏tip
		hide: function(){
			this.tooltip.hide();
		}
   }

这是一个核心demo，如果要添加别的方法，直接在原型上添加即可。

3.关于使用$.extend()对两个对象进行去除的应用

var test={
	   aa:1,
       bb:2,
       ff:0
    };
var test2={
      cc:3,
      dd:4,
      ff:66
    };
	  //test2会覆盖test中定义的对象属性
	console.log($.extend({},test,test2));  //1  2   3  4  66

4.jquery核心代码的主要组成部分

(function(win) {
	var jQuery = function() {
		return new jQuery.fn.init(arguments);
	};
	//
	jQuery.fn = jQuery.prototype = {
		init : function() {
		}
	};
	jQuery.fn.init.prototype = jQuery.fn;
	//
	win.jQuery = jQuery;
})(window);

5.jquery扩展的两个十分重要的函数？添加静态方法和动态方法（自定义插件）

jQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend();

jQuery.extend();·

jQuery.fn

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {//….
//……
};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。

jQuery便是一个封装得非常好的类，比如我们用 语句　$(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object)

为jQuery类添加类方法，可以理解为添加静态方法。如：

//code from http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html
jQuery
.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5

Objectj Query.extend( target, object1, [objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象

var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery
.extend(settings
, options);
 
结果：
settings == { validate: true, limit: 5, name: "bar" }

jQuery.fn.extend(object);

对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
});       
$("#input1").alertWhileClick(); // 页面上为：    

$("#input1")　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，这 是很重要的，在jQuery.js中到处体现这一点

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的 prototype里去，这样的话就是插件机制了。

(function( $ ){
$.fn.tooltip = function( options ) {
};
//等价于
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );