jQuery插件学习
2016-01-27 18:09
609 查看
前言
在很多项目里都看到过大神些的jQuery插件,我菜鸟一个,拿着别人的jQuery插件用起来真是方便,大神果然牛B。 后来有时间了,把大神的js代码学习了下,结构清晰、功能强大,由衷感叹真NB也。 小弟不才,但有一颗想成为大神的心。看了很多大神些的插件,小有心得。下午又偶然看到一个讲jQuery插件学习的文章,有所感。所以这里做个总结。
[b]正文[/b]
看到过精美的自定义弹框后,再也不想看到alert()了。 看到过优雅的滚动条后,再也不想看到原生的jQuery滚动条了。 。。。。。。 结论,眼里只有湖泊的安谧,就无法看到大海的波涛澎湃。
[b]范例[/b]
无图无真相,无代码无成长。见代码,没什么实用性,但是五脏俱全,绝对学习好例子。
//jQuery插件学习 ;(function($,window,document,undefined){ //定义Beautyfier的构造函数 var Beautyfier = function(ele,opt){ this.$element = ele; this.defaults = { 'color' : 'black', 'fontSize' : '12px', 'fontFamily' : 'arial', 'background' : '', 'margin' : '0px', 'padding' : '0px', 'textalign' : 'center', 'width':'', 'height':'' }; //扩展Beautifier的属性 this.options = $.extend(true,{},this.defaults,opt) ; }; //给Beautyfier添加方法 Beautyfier.prototype = { beautiful : function(){ return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'background' : this.options.background, 'text-align' : this.options.textalign, 'width' : this.options.width, 'height' : this.options.height }); } }; //插件使用Beautyfier对象 $.fn.myPluin = function(opts){ var beautyfier = new Beautyfier(this,opts); return beautyfier.beautiful(); }; })(jQuery,window,document); var options = { 'color' : 'gray', 'background' : '#fff', 'text-align' : 'center', 'height':'10px' }; $('p').myPluin(options);
开头加分号的作用,防止它前面的代码没有用分号结尾导致解析错误。 (function(){})(),这行是定义了一个匿名函数,并且在加载的时候立即执行,这样我们就可以直接调用插件了。 (function($,window,document,undefined){})(jQuery,window,document),这里直接把jQuery、window、document系统变量作为传参,是为了防止其他人改变了这些系统变量而我们再去调用它就会出问题。undefiend并没有传入,而是直接作为参数,这样匿名函数内部就可以直接拿这个来使用。据说当初的设计者有深意,哈,暂时未体会到。。。 整个代码结构就是,定义了一个Beautyfier构造函数,传一个jQuery对象和CSS列表,通过传入的CSS列表扩展默认CSS,改变jQuery对象的样式,方法:$.fn.extend({},defaults,opt)。后面给Beautyfier的原型增加了一个beautiful方法,作用是改变jQuery对象样式,方法Beautyfier.prototype={beautiful:function(){}}。最后定义自己的插件,在插件中初始化Beautyfier对象,调用Beautyfier对象的beautiful方法,$.fn.myPlulin=function(opts){Beautyfier对象;return Beautifier对象.beautiful(opts)}.
[b]总结[/b]
第一步:定义匿名立即执行函数 第二步:定义操作对象,构造方法、原型 第三部:定义插件,在插件中初始化操作对象,调用对象方法。
相关文章推荐
- jQuery动态绑定
- jQuery DOM 操作(基本操作、内部插入、外部插入、包裹操作)
- jquery中的过滤操作详细解析
- jquery中remove()与detach()的区别
- jquery.validate remote 和 自定义验证方法
- .net中JS、Jquery前后台互动总结
- JQuery插件datatables相关api
- jquery easyui动态校验,easyui动态验证
- jQuery.validator 自定义验证
- JQuery方法扩展
- 简易jQuery对话框组件、弹窗插件
- jQuery修改操作css属性实现方法
- jQuery 实现模块的复制和删除
- jQuery+css实现的时钟效果(兼容各浏览器)
- jQuery将字符串转换成json
- jQuery实现的分子运动小球碰撞效果
- jQuery实现放大镜效果
- jQuery $.each用法
- jQuery自动加载更多程序
- jQuery实现在线文档