综述:在开发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.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 );