jQuery插件开发代码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery插件开发代码相关的知识,希望对你有一定的参考价值。

方法和原理在这篇博文中非常详细易懂 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

以上是关于jQuery插件开发代码的主要内容,如果未能解决你的问题,请参考以下文章

VSCode插件开发全攻略代码片段设置自定义欢迎页

高效Web开发的10个jQuery代码片段

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段

几条jQuery代码片段助力Web开发效率提升

web前端开发JQuery常用实例代码片段(50个)