jQuery插件开发代码

Posted 2020-06-17

方法和原理在这篇博文中非常详细易懂 http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

下面整理下基本知识点和基本的代码段：

 

jQuery插件开发方式主要有三种：

1. 通过$.extend()来扩展jQuery
2. 通过$.fn 向jQuery添加新的方法
3. 通过$.widget()应用jQuery UI的部件工厂方式创建

 

extend()的作用和用法

extend()中可以传入一个或多个对象，依次往前覆盖，最终第一个对象会添加到jQuery自身，直接看代码：

$.extend({
    sayHello: function(name) {
        console.log(‘Hello,‘ + (name ? name : ‘Dude‘) + ‘!‘);
    }
})
$.sayHello(); //调用
$.sayHello(‘Wayou‘); //带参调用

extend()会在第二种方法中用来传入参数

 

一个基本的插件编写方式

js:

$.fn.pig = function(options){
    var defaults = {
        ‘color‘ : ‘red‘,
        ‘fontsize‘ : ‘12px‘
    };
    var settings = $.extend({}, defaults, options);
    this.css({
        ‘color‘: settings.color,
        ‘font-size‘: settings.fontsize
    });


    return this.each(function(){
        $(this).append(‘ ‘ + $(this).attr(‘href‘));
    })
}

html:

<ul>
    <li>
        <a href="http://www.baidu.com/">百度</a>
    </li>
    <li>
        <a href="http://www.google.com/">谷歌</a>
    </li>
    <li>
        <a href="http://www.360.com/">360</a>
    </li>
</ul>
<p>我是PPP</p>
<script type="text/javascript">
$(function() {
    $(‘a‘).pig({
        ‘color‘: ‘#2c9929‘
    });
})
</script>

上面的代码，已经可以让使用者传入对象或不传对象，能编写出健壮而灵活的插件了。

但是，当插件内容复杂时，代码面临组织问题，可以用面向对象的思维来做：

 

面向对象的插件开发

js定义对象后调用，然后包裹自调用匿名函数防止污染全局变量

(function() {
    //定义Beautifier的构造函数
    var Beautifier = function(ele, opt) {
            this.$element = ele,
                this.defaults = {
                    ‘color‘: ‘red‘,
                    ‘fontSize‘: ‘12px‘,
                    ‘textDecoration‘: ‘none‘
                },
                this.options = $.extend({}, this.defaults, opt)
        }
        //定义Beautifier的方法
    Beautifier.prototype = {
            beautify: function() {
                return this.$element.css({
                    ‘color‘: this.options.color,
                    ‘fontSize‘: this.options.fontSize,
                    ‘textDecoration‘: this.options.textDecoration
                });
            }
        }
        //在插件中使用Beautifier对象
    $.fn.pig = function(options) {
        //创建Beautifier的实体
        var beautifier = new Beautifier(this, options);
        //调用其方法
        return beautifier.beautify();
    }
})();

html不变

<ul>
    <li>
        <a href="http://www.baidu.com/">百度</a>
    </li>
    <li>
        <a href="http://www.google.com/">谷歌</a>
    </li>
    <li>
        <a href="http://www.360.com/">360</a>
    </li>
</ul>
<p>我是PPP</p>
<script type="text/javascript">
$(function() {
    $(‘a‘).pig({
        ‘color‘: ‘#2c9929‘
    });
})
</script>

目前为止似乎接近完美了。

 

如果再考虑到一些潜在的问题，那么balabalabala，最后是这个样子：

;(function($, window, document,undefined) {
    //定义Beautifier的构造函数
    var Beautifier = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            ‘color‘: ‘red‘,
            ‘fontSize‘: ‘12px‘,
            ‘textDecoration‘: ‘none‘
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定义Beautifier的方法
    Beautifier.prototype = {
        beautify: function() {
            return this.$element.css({
                ‘color‘: this.options.color,
                ‘fontSize‘: this.options.fontSize,
                ‘textDecoration‘: this.options.textDecoration
            });
        }
    }
    //在插件中使用Beautifier对象
    $.fn.myPlugin = function(options) {
        //创建Beautifier的实体
        var beautifier = new Beautifier(this, options);
        //调用其方法
        return beautifier.beautify();
    }
})(jQuery, window, document);

 

开始写一个自己的jQuery插件吧，发布jQuery插件到github的详细步骤这里也有：http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html