zoukankan      html  css  js  c++  java
  • 编写jQuery插件的方法和注意点

                编写jQuery插件的方法和注意点

      插件的种类

        jQuery的插件主要分为3种类型。

        1. 封装对象方法的插件

           这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。

        2. 封装全局函数的插件 

           可以将独立的函数加到jQuery命名空间之下。如解决冲突用的jQuery.noConflict()方法,常用的jQuery.ajax()方法以及去除首位空间的jQuery.trim()方法等。

        3. 选择器插件

           个别情况下,会需要用到选择器插件。例如用:color(red)来选择所有红色字的元素之类的。

      插件的基本要点

        ①  jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JS库插件混淆。

        ②  所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上。

        ③  在插件内部,this指向的是当前通过选择器获取到的jQuery对象,而不像一遍的方法那样,例如:click()方法内部的this指向的是DOM元素。

        ④  可以通过this.each来遍历所有元素。

        ⑤  所有的方法或函数插件,都应当以分号结尾,否则压缩的时候可能出现问题,为了更稳妥些,甚至可以在插件头部先加一个分号,以免他人的不规范代码给插件带来影响。

        ⑥  插件应该返回一个jQuery对象,以保证插件的可链式操作。除非插件需要返回的是一些需要获取的两,如字符串或者数组等。

        ⑦  避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示,这样可以避免冲突。当然,也可以使用闭包技巧来回避这个问题,使插件内部使用$来作为jQuery的别名。

      jQuery插件的机制

        jQuery提供了两个扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法。前者用于扩展之前提到的3种类型插件中的第一种,后者用于扩展后两种插件。这两个方法都接受一个参数,类型为Object。Object对象的“名/值对”分别代表"函数或方法名/函数主体"。

        jQuery.extend()方法除了可以用于扩展jQuery对象之外,还有一个很强大的功能,就是用于扩展已有的Object对象。

        jQuery.extend()方法经常被用于设置插件方法的一系列默认参数,如:

    1 function foo(options) {
    2     options = jQuery.extend({
    3         name:  "bar",
    4         length: 5,
    5         dataType: "xml"    /* 默认参数*/
    6     }, options);     /*  options为传递的参数 */
    7 };

        在传递的参数options对象中设置了相应的值,那么就使用设置的值,否则使用默认值。

      编写jQuery插件

          1.封装jQuery对象方法的插件.

    1 ;(function($) {
    2     jQuery.fn.extend({  // $.fn.extend({
    3         "color": function(value) {
    4             return this.css("color", value);
    5         }
    6     });
    7 })(jQuery);

          2.封装全局函数的插件

            这类插件是在jQuery命名空间内部添加一个函数。利用jQuery.extend()方法直接对jQuery对象进行扩展。

     1 ;(function($) {
     2     $.extend({
     3         ltrim: function(text) {
     4             return (text || "").replace(/^s+/g, "");
     5         },
     6        rtrim: function(text) {
     7            return (text || "").replace(/s+$/g, "");
     8        }
     9     });
    10 })(jQuery);

            使用函数方式jQuery.ltrim("  test  "),jQuery.rtrim("   test    ");

          3.自定义选择器

            自定义选择器个人感觉使用会少一些。目前只需要了解下就可以了,感兴趣的可以查看《锋利jquery》7.6.5 编写jQuery插件

        最后,以上算是个人看书的笔记,浓缩知识点,提高学习的效率,查阅的便捷。

  • 相关阅读:
    WampServer Mysql配置
    Java实现 蓝桥杯VIP 算法提高 陶陶摘苹果2
    Java实现 蓝桥杯VIP 算法提高 陶陶摘苹果2
    Java实现 蓝桥杯VIP 算法提高 陶陶摘苹果2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 前10名
  • 原文地址:https://www.cnblogs.com/cleaverlove/p/6388339.html
Copyright © 2011-2022 走看看