jQuery插件学习

前言

 在很多项目里都看到过大神些的jQuery插件，我菜鸟一个，拿着别人的jQuery插件用起来真是方便，大神果然牛B。 后来有时间了，把大神的js代码学习了下，结构清晰、功能强大，由衷感叹真NB也。 小弟不才，但有一颗想成为大神的心。看了很多大神些的插件，小有心得。下午又偶然看到一个讲jQuery插件学习的文章，有所感。所以这里做个总结。

正文

 看到过精美的自定义弹框后，再也不想看到alert()了。 看到过优雅的滚动条后，再也不想看到原生的jQuery滚动条了。 。。。。。。 结论，眼里只有湖泊的安谧，就无法看到大海的波涛澎湃。

范例

 无图无真相，无代码无成长。见代码，没什么实用性，但是五脏俱全，绝对学习好例子。

//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)}.

总结

第一步：定义匿名立即执行函数第二步：定义操作对象，构造方法、原型第三部：定义插件，在插件中初始化操作对象，调用对象方法。