jquery 插件开发备注

2010年10月28日添加:

最近有人问我在插件里的this是什么,在这里说下,那个this就是JQ对象,还有可能会疑惑的一个语句,如下:

$.fn.xheditor=function(){
    this.each(function(i,d){

　　　　 //this 这里的this则是当前操作的JS对象 就是d参数 alert(d=this); is true
        alert(i);
        alert(d);
    });
}

很多人看了很郁闷,这里的each到底在什么情况下执行啊,呵呵,其实那个this=$("你的选择器"),知道什么意思了吧.呵呵.这样的插件在有选择的情况下就执行,当没有选择到有东西的时候不执行,可以避免选不到东西有执行带来的错误问题,我个人感觉挺好的,但是常常忘记用,呵呵~

还有(function($){})($)的问题,看我另一篇文章啦.http://www.cnblogs.com/liushannet/archive/2010/10/28/1863941.html 详细描述了

//---------------------------------------------------------------

下面是对默认选项设置问题:(转的)

settings = $.extend({}, $.fn.fancybox.defaults, settings);

上面的代码target是一个空对象, 将默认设置defaults作为第一个对象, 将用户传入的设置setting合并到default上, setting上有的属性以setting为准. setting没有传入的属性则使用default的默认值. 然后将合并的结果复制给target并作为函数返回值返回.

看一个完整的示例:

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

结果:

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

target参数要传递一个空对象是因为target的值最后将被改变.比如:

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

上面的代码将defaults作为target参数, 虽然最后settings的结果一样, 但是defaults的值被改变了! 而插件中的默认值应该都是固定!

//---------------------------------------------------------------

以下旧内容:

以前针对DOM元素的插件(即$.fn.)存临时数据都加在当前元素上建个特殊的属性来存,(JQ内部直接也搞这样的)

今天发现其实JQ自己早就有对这个临时数据的存储方法:

$("dom").data(“mydata”,"this is data");

还有就是插件开发的时候我们经常要给插件添加方法,其实就用JS内部添加方法的方法即可

this.myfn=function(){}

下面给上一个显示部分文字的插件的源码:

(类似CSS的text-overflow,但本插件你需要提供显示几个字,用于精确控制显示数量)

/**
 * demo: 
 * 1.$("#limittext").limittext(); 
 * 2.$("#limittext").limittext({"limit":1}); 
 * 3.$("#limittext").limittext({"limit":1,"fill":"(部分隐藏)","fillid":"aaa"}); 
 * 4.$("#limittext").limittext({"limit":1,"fill":"(部分隐藏)","fillid":"aaa"}).limit(10); 

 * 5.$("#limittext").limittext({"limit":1,"fill":"(部分隐藏)","fillid":"aaa"}).limit('all'); 
 * @param {Object} opt
 * @author Lonely

 * @link http://liushan.net
 */
jQuery.fn.extend({
  limittext:function(opt){
  	opt=$.extend({
		"limit":30,
		"fill":"...",
		"fillid":null
	},opt);
	var $this=$(this);
	var body=$(this).data('body');
	if(body==null){
		body=$this.html();
		$(this).data('body',body);
	}
	this.limit=function(limit){
		if(body.length<=limit||limit=='all')
			var showbody=body;
		else{
			if(opt.fillid==null)
				var showbody=body.substring(0,limit)+opt.fill;
			else
				var showbody=body.substring(0,limit)+"<span id='"+opt.fillid+"'>"+opt.fill+"<span>";
		}
		$(this).html(showbody);
	}
	this.limit(opt.limit);
	return this;
  }
});