jQuery插件开发

Posted 2021-11-25 yinchh

jQuery插件有两种写法

• $.extend(myMethod:function(){}) 类似于给jQuery添加静态方法
• $.fn.myMethod=function(){} 应用于DOM元素上的方法，一般jQuery都是使用这个方法

本文介绍$.fn.myMethod=function(){}这种方式
直接上一个例子，这个例子是对页面上所有的超链接应用样式

        ; (function ($, window, document, undefined) {
            $.fn.beautifulHyperlink = function (options) {
                var defaults = { 'color': 'red', 'fontSize': '15px' };
                var settings = $.extend({}, defaults, options);

                return this.each(function () {
                    $(this).css({ 'color': settings.color, 'fontSize': settings.fontSize });
                });
                //this.css({ 'color': settings.color, 'fontSize': settings.fontSize });
            }
        })(jQuery, window, document)
        
        //调用方法
        $(function () {
            $('a').beautifulHyperlink({ 'color': 'yellow' });
        });

关键点如下：

1. 插件最前面添加;，作用是防止其他js代码结束没有;，导致js错误
   
2. 关于插件参数：options是用于传入的，defaults是默认值，settings是合并后最终参数值；$.extend({}, defaults, options)中的{}作用是保证default不被改变，饭后后续用到defaults中的原始值
   
3. return的作用是保证链式编程
   
4. this.each的作用是可以对每个dom元素单独处理，这里的例子可以不用this.each
   
5. (function ($, window, document, undefined)和(jQuery, window, document)的作用是防止变量污染，保证插件中使用的局部变量；值的注意的是undefined没有传值进去，恰恰刚好传进去的undefined就是undefined，这是一个巧合

最后贴一下终极优化方案，面向对象的思想

        ; (function ($, window, document, undefined) {
            var Beautifier = function (eles, opts) {
                this.$elements = eles;
                this.options = opts;
                this.defaults = { 'color': 'red', 'fontSize': '15px' };
                this.settings = $.extend({}, this.defaults, this.options);
            }
            Beautifier.prototype = {
                beautify: function () {
                    var thisObj = this; //指向当前对象Beautifier，否则下面settings引用不到，因为each中的this是被遍历对象中当前值的dom对象
                    return this.$elements.each(function () {
                        $(this).css({ 'color': thisObj.settings.color, 'fontSize': thisObj.settings.fontSize });
                    });
                    //return this.$elements.css({ 'color': this.settings.color, 'fontSize': this.settings.fontSize });
                }
            };

            $.fn.beautifulHyperlinkEx = function (options) {
                var beautifier = new Beautifier(this, options);
                beautifier.beautify();
            }
        })(jQuery, window, document)