AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JQuery Plugin 开发

2017-10-22 1089
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

学习 JQuery 插件开发之后, 可以将自己平时常用的功能封装成插件, 便于在不同的项目之间使用.

JQuery 官网上的 插件开发教程就很不错, 简单易懂.

参考网址:

  1. http://learn.jquery.com/plugins/basic-plugin-creation/
  2. http://learn.jquery.com/plugins/advanced-plugin-concepts/

 

本文就是基于官网上的教程整理的, 也加入了自己实验的一些示例。

 

1. 插件编写相关函数

jquery 中有2个重要的API是和插件编写相关的.

  1. jQuery.extend(object)    即 $.extend(object)
  2. jQuery.fn.extend(object) 即 $.fn.extend(object)

 

这2个API都是为了将自己编写的功能以插件的形式加入到 jquery 中.

但是含义上是有区别的.

 

1.1 $.extend(object)

这个函数是用来扩展 jQuery 本身, 也就是扩展 "$" 的.

示例如下:

<!DOCTYPE HTML>
<html>
    <head>
        <title>jquery plugin test</title>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript">
          $(function(){
              
              $("#btn-extend").click(function(){
                  $.extend({
                      test: function(a) { alert(a); },
                  });
              });

              $("#btn-test").click(function(){
                  if ($.test)
                      $.test("test");
                  else
                      alert("不存在 $.test 方法!");
              });
          });
        </script>
    </head>
    <body>
        <button id="btn-test">测试 $.test() </button>
        <button id="btn-extend">扩展 $ 本身 </button>
    </body>
</html>

 

首先点击 [btn-test] 按钮, 提示没有 test 方法, 然后点击 [btn-extend] 按钮, 扩展 $ 本身.

再次点击 [btn-test] 按钮, 执行扩展的 $.test() 函数.

 

1.2 $.fn.extend(object)

这个函数用来为 jQuery 对象提供新的方法.

所谓 jQuery 对象, 最常见的我们平时通过jQuery选择器获取的对象, 比如: $("#id"), $(".class") 等等.

<!DOCTYPE HTML>
<html>
    <head>
        <title>jquery plugin test</title>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript">
          $(function(){
              
              $("#btn-extend").click(function(){
                  $.fn.extend({
                      test: function(a) { alert(a); },
                  });
              });

              $("#btn-test").click(function(){
                  if ($(this).test)
                      $(this).test($(this).attr("id"));
                  else
                      alert("不存在 test 方法!");
              });
          });
        </script>
    </head>
    <body>
        <button id="btn-test">测试 $(this).test() </button>
        <button id="btn-extend">扩展 jQuery($) 对象 </button>
        
    </body>
</html>

首先点击 [btn-test] 按钮, 提示没有 test 方法, 然后点击 [btn-extend] 按钮, 扩展 $ 对象.

再次点击 [btn-test] 按钮, 执行扩展的 $.fn.test() 函数.

 

编写 jQuery 插件之前, 一定要弄懂 "$ 本身" 和 "$ 对象" 的区别. ($ 就是 jQuery)

也就是弄懂 $.extend 和 $.fn.extend 之间的区别.

 

2. UI相关的插件

一般来说, 纯UI相关的插件很少, 都是UI和功能一起配合使用的, 比如 jQuery UI 库.

下面的示例主要为了说明如何使用 jQuery 插件, 所以只和UI相关.

 

2.1 示例1 : 统一设置颜色

示例 HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <title>jquery plugin test</title>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript" src="js/jquery-plugin.js"></script>
        <script type="text/javascript">
          $(function(){
              $("#btn-plugin").click(function(){
                  $(".smalldiv").toggle_back();
              });
          });

        </script>
        <style type="text/css" media="screen">
            
          .bigdiv {
            width: 500px;
            height:100px;
          }

          .smalldiv {
              width: 50px;
              height: 50px;
              background-color: green;
              float:left;
          }
        </style>
    </head>
    <body>
        <button id="btn-plugin">执行插件</button>
        <div class="bigdiv">
            <div class="smalldiv red">
                1
            </div>
            <div class="smalldiv green">
                2
            </div>
            <div class="smalldiv red">
                3
            </div>
            <div class="smalldiv green">
                4
            </div>
            <div class="smalldiv red">
                5
            </div>
            <div class="smalldiv green">
                6
            </div>
            <div class="smalldiv red">
                7
            </div>
            <div class="smalldiv green">
                8
            </div>
            <div class="smalldiv red">
                9
            </div>
            <div class="smalldiv green">
                10
            </div>
        </div>
        
    </body>
</html>

 

示例 jQuery 插件:

/* jquery plugin for test
 * filename: jquery-plugin.js
 */

// 下面的格式也是 jQuery 插件的常用写法
(function ($) {
    $.fn.toggle_back = function() {
        if (this.css("background-color") == "rgb(255, 0, 0)")
            this.css("background-color", "green");
        else
            this.css("background-color", "red");
    };
}(jQuery));

通过点击 html 页面上的按钮, 可以切换所有 smalldiv 的背景色.

 

2.2 示例2 : 分别设置颜色

这个例子比上面那个略微复杂一些, 上面的示例1 是对所有 smalldiv 统一设置背景色, 不够灵活.

这个示例通过 jQuery 的 $.fn.each 函数根据每个 smalldiv 的 class 分别设置背景色.

(HTML部分的代码和示例1 一样)

/* jquery plugin for test
 * filename: jquery-plugin.js
 */

// 下面的格式也是 jQuery 插件的常用写法
(function ($) {
    $.fn.toggle_back = function() {
        this.each(function() {
            var div = $(this);
            if (div.hasClass("red")) {
                div.removeClass("red");
                div.addClass("green");
                div.css("background-color", "green");
            }
            else {
                div.removeClass("green");
                div.addClass("red");
                div.css("background-color", "red");
            }
        });
        return this;
    };
}(jQuery));

 

这里需要注意2个地方:

1. 代码中 this 的含义

this.each(function() {

这里的 this 是jQuery 对象, 也就是通过 $("#id"), $(".class") 之类的选择器获取的对象.

*注意* 这个 this 的位置是在 $.fn.toggle_back 的主函数体中.

 

var div = $(this);

这里的 this 是 DOM 对象, 所以通过 $(this) 才能变成 jQuery 对象.

至于为什么 each 中的this就是各个 DOM 对象, 那是因为 each 的实现中将 jQuery 对象转换为了 DOM 对象.

 

2. 插件代码最后的 return this;

这里之所以要 return this; 是为了实现 jQuery 的链式表达式. 也就是 return this; 之后, 可以接着调用其他 jQuery 函数.

比如 $(".class").toggle_back().css("color", "red");

上面的示例2中 $("#btn-plugin").click 函数可以改为如下:

$("#btn-plugin").click(function(){
     $(".smalldiv").toggle_back().css("color", "red");
});

 

3. 功能型插件

下面通过一个 日期转换 的例子, 说明功能型插件的写法.

HTML 部分:

<!DOCTYPE HTML>
<html>
    <head>
        <title>jquery plugin test</title>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript" src="js/jquery-plugin.js"></script>
        <script type="text/javascript">
          $(function(){
              $("#btn-plugin").click(function(){
                  $("h2").dt_format(new Date());
              });
          });

        </script>
    </head>
    <body>
        <button id="btn-plugin">显示格式化的时间</button>
        <hr />
        <h1>当前时间:</h1>
        <h2 class="date">nothing</h2>
        <h2 class="time">nothing</h2>
        <h2 class="datetime">nothing</h2>
    </body>
</html>

 

插件 js 只是简单的转换了一时间格式, 仅仅为了演示:

/* jquery plugin for test
 * filename: jquery-plugin.js
 */

(function ($) {

    $.fn.dt_format = function(dt) {
        this.each(function(){
            var elem = $(this);
            if (elem.hasClass("date"))
                elem.text($.fn.dt_format.date(dt));
            if (elem.hasClass("time"))
                elem.text($.fn.dt_format.time(dt));
            if (elem.hasClass("datetime"))
                elem.text($.fn.dt_format.datetime(dt));
        });
        return this;
    };

    $.fn.dt_format.date = function(dt) {
        var year = dt.getFullYear();
        var month = dt.getMonth() + 1;
        var day = dt.getDate();
        return year + "年/" + month + "月/" + day + "日";
    };

    $.fn.dt_format.time = function(dt) {
        var hour = dt.getHours();
        var minute = dt.getMinutes();
        var second = dt.getSeconds();
        return hour + "时:" + minute + "分:" + second + "秒";
    };

    $.fn.dt_format.datetime = function(dt) {
        return $.fn.dt_format.date(dt) + " " + $.fn.dt_format.time(dt);        
    };
}(jQuery));

点击HTML页面上的按钮, 分别转换出不同的时间格式并显示在页面上.

 

4. 插件的默认参数

上面的插件需要一个参数, 如果调用插件时没有带参数, 则导致js错误.

为了更好的用户体验, 下面给插件加入默认参数(也就是当前时间).

新的 plugin js如下:

/* jquery plugin for test
 * filename: jquery-plugin.js
 */

(function ($) {

    $.fn.dt_format = function(options) {

        // 将用户的options 和 默认参数defaults 合并, 如有重复, 优先使用 options
        // 这里的 $.extend 的第一个参数是空的对象, 原因后面解释
        var settings = $.extend({}, $.fn.dt_format.defaults, options);
        
        this.each(function(){
            var elem = $(this);
            if (elem.hasClass("date"))
                elem.text($.fn.dt_format.date(settings.dt));
            if (elem.hasClass("time"))
                elem.text($.fn.dt_format.time(settings.dt));
            if (elem.hasClass("datetime"))
                elem.text($.fn.dt_format.datetime(settings.dt));
        });
        return this;
    };

    // 这里提供默认参数
    $.fn.dt_format.defaults = {
        dt: new Date(),
    };

    $.fn.dt_format.date = function(dt) {
        var year = dt.getFullYear();
        var month = dt.getMonth() + 1;
        var day = dt.getDate();
        return year + "年/" + month + "月/" + day + "日";
    };

    $.fn.dt_format.time = function(dt) {
        var hour = dt.getHours();
        var minute = dt.getMinutes();
        var second = dt.getSeconds();
        return hour + "时:" + minute + "分:" + second + "秒";
    };

    $.fn.dt_format.datetime = function(dt) {
        return $.fn.dt_format.date(dt) + " " + $.fn.dt_format.time(dt);        
    };
}(jQuery));

 

HTML中调用插件时可以不用参数了

$(function(){
    $("#btn-plugin").click(function(){
        $("h2").dt_format(); // 这里可以不输入参数, 使用默认参数.
    });
});

 

补充: 合并参数时, 使用了 $.extend, 这个方法的作用是将所有参数 合并成一个大的json对象, 有相同的key时, 后面的参数覆盖前面的参数.

$.extend 的第一个参数是 {}, 之所以这样, 是因为合并后, 会破坏第一个参数, 所以不能将 defaults 放在第一个.

说明示例如下: (用chrome的console窗口可以看到输出结果)

<!DOCTYPE HTML>
<html>
    <head>
        <title>jquery plugin test</title>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript">
          $(function(){
              var defaults = { "id": 1, "name": "test"};
              var options = { "sex": "man", "name": "test2" };
              console.log("合并前, 各个参数如下:");
              console.log(defaults);
              console.log(options);
              console.log("合并后, 各个参数如下:");
              $.extend(defaults, options);
              console.log(defaults); // 这里可以发现 defaults中的内容是 defaults和options合并后的结果
              console.log(options);
          });

        </script>
    </head>
    <body>
    </body>
</html>

 

5. 插件中的公有及私有函数

虽然 javascript 不是纯粹的面向对象的语言, 但是通过其强大的闭包功能, 也能构造出类似其他面向对象语言的公有/私有函数.

*功能型插件* 中的示例中3个函数 $.fn.dt_format.date, $.fn.dt_format.time, $.fn.dt_format.datetime 都是公有函数, 可以被插件使用者所覆盖.

比如, 将上面示例的HTML改为如下: (覆盖了插件中的 $.fn.dt_format.datetime 方法)

<!DOCTYPE HTML>
<html>
    <head>
        <title>jquery plugin test</title>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript" src="js/jquery-plugin.js"></script>
        <script type="text/javascript">
          $(function(){
              $("#btn-plugin").click(function(){
                  $("h2").dt_format();
              });
          });

          $.fn.dt_format.datetime = function(dt) {
              alert("覆盖公有函数");
          };
        </script>
    </head>
    <body>
        <button id="btn-plugin">显示格式化的时间</button>
        <hr />
        <h1>当前时间:</h1>
        <h2 class="date">nothing</h2>
        <h2 class="time">nothing</h2>
        <h2 class="datetime">nothing</h2>
    </body>
</html>

 

如果不想公开方法, 改变那3个函数定义方法即可:

/* jquery plugin for test
 * filename: jquery-plugin.js
 */

(function ($) {

    $.fn.dt_format = function(options) {

        var settings = $.extend({}, $.fn.dt_format.defaults, options);
        
        this.each(function(){
            var elem = $(this);
            if (elem.hasClass("date"))
                elem.text(date(settings.dt));
            if (elem.hasClass("time"))
                elem.text(time(settings.dt));
            if (elem.hasClass("datetime"))
                elem.text(datetime(settings.dt));
        });
        return this;
    };

    $.fn.dt_format.defaults = {
        dt: new Date(),
    };

    var date = function(dt) {
        var year = dt.getFullYear();
        var month = dt.getMonth() + 1;
        var day = dt.getDate();
        return year + "年/" + month + "月/" + day + "日";
    };

    var time = function(dt) {
        var hour = dt.getHours();
        var minute = dt.getMinutes();
        var second = dt.getSeconds();
        return hour + "时:" + minute + "分:" + second + "秒";
    };

    var datetime = function(dt) {
        return date(dt) + " " + time(dt);        
    };
}(jQuery));

这样, 插件使用者就不能覆盖 date, time, datetime 方法了.

 

6. 插件编写的注意点

是从 jQuery 官方网站的插件教程中总结出来的:

  1. 不要自定义语法
  2. 不要写死元素的id或者class, 将其以 options 的形式开放出来
  3. 提供 callback



本文转自wang_yb博客园博客，原文链接：http://www.cnblogs.com/wang_yb/p/4103137.html，如需转载请自行联系原作者

文章标签：
JavaScript
前端开发
Web App开发
UED
API
数据格式
JSON
关键词：
jQuery开发
jQuery Plugin
zting科技
目录
相关文章
qq_734449600
|
关系型数据库 MySQL Docker
利用docker 开发 信息系统，python + mysql + flask + jquery
利用docker 开发 信息系统，python + mysql + flask + jquery
qq_734449600
113 2
hnrk7epeorhrk
|
6月前
|
设计模式 JavaScript 前端开发
必知的技术知识：jQuery插件开发精品教程，让你的jQuery提升一个台阶
必知的技术知识：jQuery插件开发精品教程，让你的jQuery提升一个台阶
hnrk7epeorhrk
70 1
今天是几号
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
今天是几号
54 5
土木林森
|
7月前
|
前端开发 JavaScript PHP
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先，讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着，展示了如何使用jQuery的`$.get()`、`$.post()`和`$.ajax()`方法发送GET和POST请求，以及如何控制请求细节。在PHP端，讨论了接收和响应Ajax请求的方法，包括处理数据、设置响应类型和错误处理。结合jQuery与PHP，开发者能实现高效、无缝的异步数据传输，提升Web应用的用户体验。
土木林森
133 1
前端迷
|
JavaScript
jQuery插件开发
jQuery插件开发
前端迷
78 0
答神~
|
7月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
答神~
66 0
net936
|
JavaScript 搜索推荐 Windows
基于jquery开发的Windows 12网页版
基于jquery开发的Windows 12网页版
net936
147 0
基于jquery开发的Windows 12网页版
net936
|
Web App开发 设计模式 JavaScript
基于html+jquery开发的科学计算器（课程作业）
基于html和jquery开发的科学计算器，该科学计算器可进行乘方、开方、指数、对数、三角函数、统计等方面的运算，又称函数计算器。 科学型带有所有普通的函数，所有的函数都分布在键盘上以致于你可以不用通过菜单列表来使用它们。
net936
60 0
net936
|
XML JSON JavaScript
基于jquery+html开发的json格式校验工具
JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。
net936
85 0
fly丶知秋
|
JavaScript
10个 jQuery 代码片段，可以帮你快速开发。
10个 jQuery 代码片段，可以帮你快速开发。
fly丶知秋
83 0

热门文章

最新文章

  • 1
    jquery.cookie中的操作
  • 2
    jquery tmpl
  • 3
    jquery datepicker
  • 4
    JQuery利用sort对DOM元素进行排序
  • 5
    jQuery从html代码中获取对应标签的写法
  • 6
    jquery 遍历dom元素
  • 7
    jQuery on()，live()，trigger()
  • 8
    MVC3.0 采用Jquery实现局部刷新
  • 9
    jquery的load加载js页面到指定div中
  • 10
    JQuery操作一个表格简单示例
  • 1
    jquery获取子元素的一些方法
    39
  • 2
    jquery选择器有哪些
    36
  • 3
    jquery的一些方法
    57
  • 4
    【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
    267
  • 5
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    97
  • 6
    【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
    237
  • 7
    【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同？
    146
  • 8
    【Web 前端】jQuery 库中的 $() 是什么？
    375
  • 9
    jquery获取子元素的一些方法
    63
  • 10
    JQuery的定义
    59

    • 相关课程

    更多
  • jQuery开发教程
  • Vue.js 入门与实战
  • 前端开发CSS基础
  • Node.js 入门教程文档
  • Vue.js完全自学手册图文教程
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器

    • 相关电子书

    更多
  • 23-Vue.js在前端...1506518547.pdf
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
  • CSS基础教程
  • 搭建Node.js编程环境
    • 下一篇
    DataWorks