Jquery插件开发基础篇

最新推荐文章于 2024-06-22 14:28:34 发布

neil89

最新推荐文章于 2024-06-22 14:28:34 发布

阅读量486

点赞数

分类专栏： web前端文章标签： jquery插件

本文链接：https://blog.csdn.net/neil89/article/details/53521105

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

目标：学习开发一个完整的jquery插件
掌握要点：闭包、公有方法、私有方法、默认参数、参数合并；

学习之前，首先看下面一个实例，实例很简单，实现将当前时间用一个h标签显示出来，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h2>当前时间</h2>
<h2 class="date">nothing</h2>
<script>
    var dt=new Date();
    var year=dt.getFullYear();
    var month=dt.getMonth();
    var day=dt.getDay();
    var dt_format=year+"年"+month+"月"+day+"日";
    $(".date").text(dt_format);
</script>
</body>
</html>

上面的实例很简单，思路就是new一个时间对象，然后把年、月、日取出来重，显示在h标签。我们就通过这个小例子，实现一个jquery插件的完整开发流程。

步骤分：1、闭包；2、主体方法构成；3、实现链式调用；4、实现公有方法；5、实现私有方法；6、实现默认参数；7、参数合并；8、方法实现；

1、闭包

闭包的作为主要有1、避免全局依赖；2、结构免遭第三方破坏；3、实现封装……可以看出闭包作用是挺多的，下面看下闭包结构：

(function ($) {
    /*do something*/
})(jQuery);

上面就是一个闭包的结构，这里用$作为形参供内部使用，不会受到闭包外部影响，这里括号里的jQuery作为实参传入。

2、主体方法构成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h2>当前时间</h2>
<h2 class="date">nothing</h2>
<script>
    (function ($) {

        $.dt_format = function () {
            /*这是类级别写法*/
        };

        $.fn.dt_format = function () {
            /*这是对象级别写法*/
        }

    })(jQuery);
</script>
</body>
</html>

从上面的例子中可以看到，主体方法可以有两种方式，但两种方式有区别。第一种为类级别写法，第二种为对象级别写法，两种方式在外面调用也是不一样的。这里，我们需要第二种方式，编写对象级别的插件。

3、实现链式调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h2>当前时间</h2>
<h2 class="date">nothing</h2>
<script>
    (function ($) {
        $.fn.dt_format = function () {
            /*这是对象级别写法*/
            this.each(function () {
                /*do something*/
            });
            return this;
        }
    })(jQuery);
</script>
</body>
</html>

添加以上结构，实现链式调用，例如$.dt_format().addClass("color","red");

4、实现公有或者私有方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h2>当前时间</h2>
<h2 class="date">nothing</h2>
<script>
    (function ($) {
        /*这里是主体方法*/
        $.fn.dt_format = function () {
            /*这是对象级别写法*/
            this.each(function () {
                /*do something*/
            });
            return this;
        };
        /*这里是公有方法*/
        $.fn.date=function (dt) {
            var year = dt.getFullYear();
            var month = dt.getMonth();
            var day = dt.getDay();
            return year + "年/" + month + "月/" + day + "日";
        };
        /*这里是私有方法*/
        var _date=function (dt) {
            var year = dt.getFullYear();
            var month = dt.getMonth();
            var day = dt.getDay();
            return year + "年/" + month + "月/" + day + "日";
        }
    })(jQuery);
</script>
</body>
</html>

上面同样是date方法，但两者是有区别的，前者可以在插件之外调用，能够被外面的方法覆盖，后者为内部私有方法，不可以被外面的方法覆盖与重写。

6、实现默认参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h2>当前时间</h2>
<h2 class="date">nothing</h2>
<script>
    (function ($) {
        /*这里是主体方法*/
        $.fn.dt_format = function () {
            /*这是对象级别写法*/
            this.each(function () {
                /*do something*/
            });
            return this;
        };
        /*这里是默认参数*/
        $.fn.defaults={
            dt:new Date(),
            data:{},
        };
        /*这里是私有方法*/
       	var _date = function (dt) {
            var year = dt.getFullYear();
            var month = dt.getMonth();
            var day = dt.getDay();
            return year + "年/" + month + "月/" + day + "日";
        } })(jQuery);</script></body></html>



默认参数提供插件在初始化时所需要的数据，下面还将实现外部参数与默认参数的融合。

7、实现参数合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h2>当前时间</h2>
<h2 class="date">nothing</h2>
<script>
    (function ($) {
        /*这里是主体方法*/
        $.fn.dt_format = function (options) {
            var setting = $.extend({}, $.fn.defaults, options);
            /*这是对象级别写法*/
            this.each(function () {
                /*do something*/
            });
            return this;
        };
        /*这里是默认参数*/
        $.fn.defaults = {
            dt: new Date(),
            data: {},
        };
        /*这里是私有方法*/
        var _date = function (dt) {
            var year = dt.getFullYear();
            var month = dt.getMonth();
            var day = dt.getDay();
            return year + "年/" + month + "月/" + day + "日";
        }
    })(jQuery);
</script>
</body>
</html>

上面通过$.extend()这个方法来实现内部与外部参数的合并，定义了一个私有变量setting来接收这个合并后的集合。

8、方法实现

现在，按照思路，我们来实现这个方法，将转换格式的时间显示到h标签上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h2>当前时间</h2>
<h2 class="date">nothing</h2>
<script>
    (function ($) {
        /*这里是主体方法*/
        $.fn.dt_format = function (options) {
            var setting = $.extend({}, $.fn.defaults, options);
            /*这是对象级别写法*/
            this.each(function () {
                /*这里将dom对象转成jquery对象，通过element接收*/
                var element=$(this);
                if(element.hasClass("date"))
                    element.text(_date(setting.dt));
                else
                    element.text("this is not time label");

            });
            return this;
        };
        /*这里是默认参数*/
        $.fn.defaults = {
            dt: new Date(),
            data: {},
        };
        /*这里是私有方法*/
        var _date = function (dt) {
            var year = dt.getFullYear();
            var month = dt.getMonth();
            var day = dt.getDay();
            return year + "年/" + month + "月/" + day + "日";
        }
    })(jQuery);
</script>
</body>
</html>

这样，一个基于jquery的插件就已经写好，利用$("h2").dt_format(new Date());或者$(".date").dt_format(new Date());直接调用即可。