jquery 如何自定义插件-原理讲解

插件（Plugin ）也称为扩展（Extension）, 是一种遵循一定规范的应用程序接口编写的程序。

jQuery 的易扩展性，吸引全球的开发者共同编写jQuery 插件。如果要获取第三方插件，可以从http://plugins.jquery.com中下载。也可以百度查找

我们重点讲的是如何自定义插件，我前端的部分页面封装成插件，达到重复利用的目的。

在封装插件前，先记住或者熟悉插件的基本要点很重要。

封装插件，首先要写出最基本的代码结构。下面的代码正是遵循了上面第5条、第7条原则

前面必须加分号；放在闭包函数中

;(function ($) {
    //这里放置代码，可以使用 $ 作为jquery的缩写别名

    
})(jQuery);

示例1:自定义插件，实现给指定的链接设置样式

;(function ($) {
    //这里放置代码，可以使用 $ 作为jquery的缩写别名
    $.fn.mylink = function () {
        return this.css({
            'color': '#f00',
            'text-decoration': 'none'
        });
    };
})(jQuery);

上面的代码遵循了：

第2条：所有的方法附加在jquery.fn对象上

第3条：在插件内部，this 指向的是当前通过选择器选定的对象

第5条：所有的方法或函数插件，都应以分号结尾，否则压缩的时候可能出现问题。为了更稳妥，甚至在插件的开产学研加分号。

扫描二维码关注公众号，回复： 8797402 查看本文章

第6条：插件应该返回一个jquery对象，以保证插件的可链式操作。

上面的代码写到一个文件中，文件名自定义，如：jquery.link.js

下面来引入一个js文件，并且应用自定义插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.link.js"></script>
    <script>
        $(function () {
            //指定所有的a 链接
            $('a').mylink();
            //或者 ，指定部分a链接
            //$('#site a').mylink();
        })
    </script>
</head>
<body>
<form>
<ul id="site">
    <li><a href="http://www.sohu.com">搜狐</a></li>
    <li><a href="http://www.sina.com.cn">新浪</a></li>
    <li><a href="http://www.baidu.com">百度</a></li>
</ul>
<ul id="other">
    <li><a href="http://www.taobao.com">淘宝</a></li>
    <li><a href="http://www.jd.com">京东</a></li>
</ul>
</form>
</body>
</html>

认真阅读上面的代码，首先要引入jquery.js，因为我们的自定义插件是依赖于jquery的

然后引入自定义插件所在的文件

最后调用自定义插件中的方法

上面的自定义插件，所有的链接的颜色是红色的（代码写死的），能否自己指定颜色呢，这就需要传递参数了

;(function ($) {
    //这里放置代码，可以使用 $ 作为jquery的缩写别名
    $.fn.mylink = function (options) {
        //定义默认值
        var defaults = {
            'color': '#f00',
            'text-text-decoration':'none'
        }

        //合并默认值和传过来的参数，重复的将被覆盖
        //一个好的做法是将一个新的空对象做为$.extend的第一个参数，
        // defaults和用户传递的参数对象紧随其后，
        // 这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。
        var settings = $.extend({},defaults,options);

        return this.css(settings);
    };

})(jQuery);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.link.js"></script>
    <script>
        $(function () {
            //指定所有的a 链接
            $('a').mylink({
                'color':'#0f0',
                'font-size':'20px'
            });
        })
    </script>
</head>
<body>
<form>
<ul id="site">
    <li><a href="http://www.sohu.com">搜狐</a></li>
    <li><a href="http://www.sina.com.cn">新浪</a></li>
    <li><a href="http://www.baidu.com">百度</a></li>
</ul>
<ul id="other">
    <li><a href="http://www.taobao.com">淘宝</a></li>
    <li><a href="http://www.jd.com">京东</a></li>
</ul>
</form>
</body>
</html>

对于链接的调用，可以任何合法的样式

李书明

发布了136 篇原创文章 · 获赞 43 · 访问量 2万+

私信关注

jquery 如何自定义插件-原理讲解

示例1:自定义插件，实现给指定的链接设置样式

猜你喜欢