论坛首页 Web前端技术论坛

jQuery插件开发全解析

浏览 317173 次
该帖已经被评为良好帖
作者 正文
   发表时间:2010-03-30  
受教,感谢!交流下看法。

1.类级别的插件
忘记了在那里看过,增加全局函数是,jQuery.foo = function(){}的方式与jQuery.extend的方式稍有不同(具体是什么忘记了。。。),但是建议用后者。

2.对象级别的插件
其实和类级别的插入实质是一样的,只是外面用匿名函数包裹了一下,使得里面的变量作用域独立起来不与外部的变量冲突。看不懂的童鞋们建议先去了解下javascript的匿名函数。

3.插件小看法
其实类级别啊,对象级别啊,个人觉得这样的说法不妥,应该叫类方式和对象方式。这两种加入插件的实质是大致一样的,只是手法不同,应该是对象形式的更好。建议JQ插件应该都采用jQuery.extend被匿名函数包裹的方式。

4.jQuery命名空间解释
如果你的插件函数名叫yourplugin,想让JQ的选择器能够使用你的插件函数,就把你的函数放到jQuery的命名空间,定义插件就用jQuery.fn.extend,使用时就可以是这样$('div').children().yourplugin()或者$().yourplugin();如果不需要,定义插件就用jQuery.extend,使用时就只能是$.yourplugin()。放不放 jQuery命名空间,自己选择,应该主要是根据你插件函数的用途。
1 请登录后投票
   发表时间:2010-03-30  
用jQuery.extend的话就是扩展,直接jQuery.foo=function(){}就是重写了
0 请登录后投票
   发表时间:2010-03-30  
yvonxiao 写道
用jQuery.extend的话就是扩展,直接jQuery.foo=function(){}就是重写了

jQuery.extend扩展 和 jQuery.foo=function(){}重写 ,都是write+的工作方式,有存在的同名函数则替换,没有同名函数则新加,扩展或者重写以后,可以再多次扩展或重写,其实质是无区别的。唯一的小区别。。。好像是用extend更友好?忘记了。。。


这个帖子让我受益不少,接着交流下看法。

5.接受options参数以控制插件的行为
刚看了options参数的相关介绍,做了下试验,差不多领会了。
options参数方式,函数的输入变量就变成了一个option,然后用这一句:$.extend(defaults, options); 来把输入的变量替换到内置的变量中。函数的定义方式也是有两种:extend扩展和jQuery.yourfun重写;也同样可以选择是否添加到 jQuery命名空间。
var opts = $.extend({}, $.fn.hilight.defaults, options); 可以简写为$.extend($.fn.hilight.defaults, options);
1 请登录后投票
   发表时间:2010-09-10  
楼主翻译自下面的文章,还是下面的文章翻译自楼主的文章?
http://www.learningjquery.com/2007/10/a-plugin-development-pattern

作为插件的开发,看其他人的总结不失是一种方式。看完后,并不是所有的开发模式都得到你的肯定。我刚开始做插件开发时,也不知道如何下手,就搜索到这篇英文文章。可是看完这篇后,我几乎否定了这篇文章里 70% 的思想。

当然,我只是站在个人的角度来说而已,也许其他人会赞同这篇文章的思想。

要想开发出公(暴露给客户端的方法)私(插件内部调用的方法)分明,易用的插件,首先要了解透 javascript 的核心:原型(prototype)。其次,你是基于 jQuery 进行开发,那么你就必须对 jQuery 框架结构有着非常清晰的认识。

一句话:在任何代码片段里出现的 this,你心里必须清楚它到底代表的是什么
0 请登录后投票
   发表时间:2010-09-24  
很不错,希望可以举一些更深入的例子。。
0 请登录后投票
   发表时间:2010-10-25  
我有个问题,谁能帮助解答一下.
我昨天动手利用 这种方式做一个改进.结果发现
如果用这样的方式定义属性
$.fn.attr={};

那么我生成了3个对象,每次生成的时候都对attr进行修改.
最后我debug发现,3个对象的attr全部变成了第3次修改的值,前两个对象修改的值没有保留在对象里..
很是郁闷.....
所以想问一下,如果一个对象要保留它自己的属性值,应该如何声明??
我目前是做这样的方法.
(function($,undefined)
{
  this.attr1;
  this.attr2;
  $.fn.plugin=function(options){
    //初始化
    this.attr1=0;
    this.attr2=1;
    //下面的程序里可以修改attr1,attr2,则在对象中,可以保存下来.
...................
    }
  }
)(jquery);

0 请登录后投票
   发表时间:2010-11-02  
看完了这个文章,还是不错的了,刚学jquery,对他有了新的一个了解
努力啊!群主附上个pdf的精神,必须强烈推荐
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics