码迷，mamicode.com
首页 > Web开发 > 详细

jQuery插件的点点滴滴

时间：2015-06-16 22:45:29      阅读：194      评论：0      收藏：0      [点我收藏+]

标签：

　说起jQuery插件，很多人的脑海种已经有了一定的雏形，仿佛感觉仅仅就是那样子，事实呢？当你看了Bootstrap.js,品读了slidesjs，观摩了jquery.cycle2.js,不禁发现，原来插件的世界千变万化，细微之处总是不容易让人发觉，世界那么大，那么我们就一起去看看它到底长什么样子？

　　工欲善其事必先利其器，如果你对于jQuery插件运用熟练的话，那么对已$.extend,你一定要去了解！，下面我们就先对$.extend来个剖析！先看看你对于$.extend的几种形式！

　　一、$.extend的用法

1 $.extend(dest,src1,src2,src3...)
2 $.extend({},src1,src2,src3...)    
3 $.extend({name：function(){}})    
4 $.fn.extend({name:function(){}})    
5 $.extend({net:{}})    
6 $.extend({boolean,dest,src1,src2,src3...})

　　

　　$.extend(dest,src1,src2,src3...) 

　　将src1,src2,src3...合并到dest中,请记住合并时，后面同名的属性会覆盖掉前面的属性，对于前面没有的属性，难就进行合并，如下：　

<script type="text/javascript">
    $(function() {
        var obj = {
                name: "yyh",
                age: 26
            },
            obj1 = {
                name: "yyh1",
                age: 27
            },
            obj2 = {
                name: "yyh2",
                age: 27,
                address:"chitu"
            }
        var mergeObj = $.extend(obj,obj1,obj2);
        console.log(mergeObj)//{name: "yyh2", age: 27, address: "chitu"}
    })
</script>

　　$.extend({},src1,src2,src3...) 

　　这个和上面的是一样的，不同只是把dest={}，把src1,src2,src3合并到一个空对象中，原理同上，不在赘述！

　　

 

　　$.extend({name：function(){}}) 

　　看到这个东西，你可以这么认为，这是相当于$.extend(dest,src1) 中省略了dest后变成了$.extend(src1)，这样子就相当于将该src合并到调用extend方法的对象中去，也就是将src合并到jquery的全局对象中去！举个例子，我们给jquery全局对象拓展一个是否支持CSS3的方法supportCSS3:

 1 <script type="text/javascript">
 2     $(function() {
 3         $.extend({
 4             supportCSS3: function() {
 5                 var body, i, style, transition, vendor;
 6                 body = document.body || document.documentElement;
 7                 style = body.style;
 8                 transition = "transition";
 9                 vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
10                 transition = transition.charAt(0).toUpperCase() + transition.substr(1);
11                 i = 0;
12                 while (i < vendor.length) {
13                     if (typeof style[vendor[i] + transition] === "string") {
14                         return vendor[i];
15                     }
16                     i++;
17                 }
18                 return false;
19             }
20         })
21         if($.supportCSS3){
22             alert("该浏览器支持css33");
23         }
24     })
25     </script>

 　　所以像$.get,$post,$.ajax就是jquery全局对象的方法！

 　　

　　$.fn.extend({name:function(){}})

　　和上面的$.extend相比，如果对于js的原型对象有了解，你肯定可以知道$.fn=jQuery.prototype,也就是说这种方式是把方法拓展到jquery对象的实例中，同样来个例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo1</title>
 6     <script src="http://libs.baidu.com/jquery/1.10.0/jquery.js"></script>
 7 </head>
 8 <body>
 9     <button id="btn1">点击</button>
10     <script type="text/javascript">
11     $(function() {
12         $.fn.extend({
13             say: function() {
14                 alert("我是丑男孩");
15                 return this;//为什么加this，jquery的链式写法，你懂的！
16             }
17         });
18         $("#btn1").on("click",function(){
19             $(this).say().hide();
20         })
21 
22     })
23     </script>
24 </body>
25 </html>

　　

　　$.extend({net:{}})

　　顾名思义，这个事在全局对象中扩展一个net命名空间，理解方式可以$.extend({name：function(){}}) 相似的。作用是干嘛？很简单假设团队有多个人，你担心推展到全局对象中会产生冲突，那么就自己独立建一个属于自己的空间，这样妈妈就在也不用担心儿子程序和别人冲突了！来个例子(如何来读取拓展的属性)：

 1 <script type="text/javascript">
 2     $(function() {
 3         $.extend({
 4             yyh: {
 5                 age: 26,
 6                 address: "chitu",
 7                 supportCSS3: function() {
 8                     var body, i, style, transition, vendor;
 9                     body = document.body || document.documentElement;
10                     style = body.style;
11                     transition = "transition";
12                     vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
13                     transition = transition.charAt(0).toUpperCase() + transition.substr(1);
14                     i = 0;
15                     while (i < vendor.length) {
16                         if (typeof style[vendor[i] + transition] === "string") {
17                             return vendor[i];
18                         }
19                         i++;
20                     }
21                     return false;
22                 }
23 
24             }
25         });
26         //读取对应的属性
27         if($.yyh.supportCSS3){
28             alert("浏览器支持css3");
29         }
30         console.log($.yyh.age);
31         console.log($.yyh.address);
32     })
33     </script>

 

　　$.extend(boolean,dest,src1,src2,src3...)

　　这中方式，通过boolean，来决定是否深度拷贝！这种方式想必你在很多场合也见过了,boolean默认的是false，可以省略！至于为什么这样做呢？来个例子就豁然开朗了！

 1 <script type="text/javascript">
 2     $(function() {
 3         var obj = {
 4                 name:{
 5                     nickname:"丑男孩",//外号
 6                     truename:"yyh",//真是姓名
 7                 },
 8                 age: 26
 9             },
10             obj1 = {
11                 name:{
12                     nickname:"小男孩",//外号
13                     truename:"yyh1",//真是姓名
14                 },
15                 age:25
16             },
17             obj2 = {
18                 name:{
19                     nickname:"老男孩",//外号
20                     username:"uglyboy"
21                 },
22                 age: 27
23             }
24         var mergeObj1 = $.extend(true,obj,obj1,obj2);
25         //mergeObj1={name:{nickname: "老男孩",truename: "yyh1",username: "uglyboy",age: 27}}
26         var mergeObj2 = $.extend(false,obj,obj1,obj2);
27         //mergeObj2={name:{nickname: "老男孩",username: "uglyboy",age: 27}}
28     })
29     </script>

　　

　　看完上面的例子的时候，你就知道如果false的时候，后面添加的对象的obj2中没有属性truename，合并后对象就不会有truename这个属性，所以写插件的时候会在里面看到如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo1</title>
 6     <script src="http://libs.baidu.com/jquery/1.10.0/jquery.js"></script>
 7 </head>
 8 
 9 <body>
10     <script type="text/javascript">
11     ;(function($){
12         $.fn.Plugin=function(options){
13             //如果defaults是下面的形式，这里大可以不加boolean
14             var defaults={
15                 property1:"value1",
16                 property2:"value2",
17                 property3:"value3",
18                 method1:function(){},
19                 method2:function(){},
20             };
21             var opt=$.extend(defaults,options);
22         }
23     })(jQuery)
24 
25     ;(function($){
26         $.fn.Plugin=function(options){
27             //如果defaults是下面的形式，亲，记得加上boolean，不然传递参数可麻烦了！
28             var defaults={
29                 property1:{
30                     property11:"value11",
31                     property12:"value12",
32                 },
33                 property2:{
34                     property21:"value21",
35                     property22:"value22",
36                 },
37                 property3:{
38                     property31:"value31",
39                     property32:"value32",
40                 },
41                 method1:function(){},
42                 method2:function(){},
43             };
44             
45             var opt=$.extend(true,defaults,options);
46         }
47     })(jQuery)
48 
49     </script>
50 </body>
51 
52 </html>

 

　　二、jquery插件的几种形式

　　1、传统的插件写法，defaut没有暴露出来供外部调用(这个应该我们写插件很常用的一种方式),下面是单个实例的时候

 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <style type="text/css">
    .undis {
        display: none;
    }
    
    .tab-parent {
        width: 400px;
        margin: 50px auto;
        border: 1px solid #e5e5e5;
    }
    
    .tab-hd {
        height: 45px;
    }
    
    .tab-hd li {
        padding: 15px 0;
        width: 200px;
        text-align: center;
        float: left;
        border-bottom: 1px solid #e5e5e5;
    }
    
    .tab-hd li.oncurr {
        border-color: #f60;
        color: #f60;
        font-weight: bold;
    }
    
    .tab-bd {
        padding: 20px;
        min-height: 250px;
    }
    </style>
</head>

<body>
    <div class="tab-parent" id="J_tab-parent">
        <ul class="tab-hd">
            <li class="tab-hd-item oncurr">选项卡1</li>
            <li class="tab-hd-item">选项卡2</li>
        </ul>
        <div class="tab-bd">
            <div class="tab-bd-item">选项卡1对应的内容</div>
            <div class="tab-bd-item undis">选项卡2对应的内容</div>
        </div>
    </div>
    <script type="text/javascript">
    (function($) {
        $.fn.Tab = function(options) {
            var defaults = {
                hdClass: ‘.tab-hd-item‘,
                bdClass: ‘.tab-bd-item‘
            };
            var opts = $.extend(defaults, options),
                $hdItems=this.find(opts.hdClass),
                $bdItems=this.find(opts.bdClass);
            $hdItems.each(function(index, el) {
                var $this=$(this);
                $this.on("click",function(){
                    $this.addClass(‘oncurr‘).siblings().removeClass(‘oncurr‘);
                    $bdItems.eq(index).show().siblings().hide();
                })
            }); 
　　　　　　//如果想要支持链式写法,在这里请添加return this;  
        }
    })(jQuery);
    $(function() {
        $("#J_tab-parent").Tab();
    })
    </script>
</body>
</html>

 

　　多个实例的时候

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <style type="text/css">
    .undis {
        display: none;
    }
    
    .tab-parent {
        width: 400px;
        margin: 50px auto;
        border: 1px solid #e5e5e5;
    }
    
    .tab-hd {
        height: 45px;
    }
    
    .tab-hd li {
        padding: 15px 0;
        width: 200px;
        text-align: center;
        float: left;
        border-bottom: 1px solid #e5e5e5;
    }
    
    .tab-hd li.oncurr {
        border-color: #f60;
        color: #f60;
        font-weight: bold;
    }
    
    .tab-bd {
        padding: 20px;
        min-height: 250px;
    }
    </style>
</head>

<body>
    <div class="tab-parent" id="J_tab-parent">
        <ul class="tab-hd">
            <li class="tab-hd-item oncurr">选项卡1</li>
            <li class="tab-hd-item">选项卡2</li>
        </ul>
        <div class="tab-bd">
            <div class="tab-bd-item">选项卡1对应的内容</div>
            <div class="tab-bd-item undis">选项卡2对应的内容</div>
        </div>
    </div>

    <div class="tab-parent" id="J_tab-parent">
        <ul class="tab-hd">
            <li class="tab-hd-item oncurr">选项卡1</li>
            <li class="tab-hd-item">选项卡2</li>
        </ul>
        <div class="tab-bd">
            <div class="tab-bd-item">选项卡1对应的内容</div>
            <div class="tab-bd-item undis">选项卡2对应的内容</div>
        </div>
    </div>
    <script type="text/javascript">
    (function($) {
        $.fn.Tab = function(options) {
            var defaults = {
                hdClass: ‘.tab-hd-item‘,
                bdClass: ‘.tab-bd-item‘
            };
            var opts = $.extend(defaults, options);
            return this.each(function(index, el) {
                var $hdItems=$(this).find(opts.hdClass),
                    $bdItems=$(this).find(opts.bdClass);
                    $hdItems.each(function(index, el) {
                        var $this=$(this);
                        $this.on("click",function(){
                            $this.addClass(‘oncurr‘).siblings().removeClass(‘oncurr‘);
                            $bdItems.eq(index).show().siblings().hide();
                        })
                    });  
            });
                
            
        }
    })(jQuery);
    $(function() {
        $(".tab-parent").Tab();
    })
    </script>
</body>
</html>

　　

　　2、default写成$.fn.default暴露出来供外部调用(这种方式的插件写法是很经常遇到的,比如jquery.cycle2.js),这个时候你应该会联想到$.fn.format在插件中的用法，这样的好处是可以让用户自定义自己的操作行为，而不用每次实例的时候都去传递同样的阐述，如下的例子：

 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <style type="text/css">
    .undis {
        display: none;
    }
    
    .tab-parent {
        width: 400px;
        margin: 50px auto;
        border: 1px solid #e5e5e5;
    }
    
    .tab-hd {
        height: 45px;
    }
    
    .tab-hd li {
        padding: 15px 0;
        width: 200px;
        text-align: center;
        float: left;
        border-bottom: 1px solid #e5e5e5;
    }
    
    .tab-hd li.oncurr {
        border-color: #f60;
        color: #f60;
        font-weight: bold;
    }
    
    .tab-bd {
        padding: 20px;
        min-height: 250px;
    }
    </style>
</head>

<body>
    <div class="tab-parent" id="J_tab-parent">
        <ul class="tab-hd">
            <li class="tab-hd-item-1 oncurr">选项卡1</li>
            <li class="tab-hd-item-1">选项卡2</li>
        </ul>
        <div class="tab-bd">
            <div class="tab-bd-item-1">选项卡1对应的内容</div>
            <div class="tab-bd-item-1 undis">选项卡2对应的内容</div>
        </div>
    </div>
    <script type="text/javascript">
    (function($) {
        $.fn.Tab = function(options) {
            var opts = $.extend($.fn.Tab.defaults, options);
            return this.each(function(index, el) {
                var $hdItems = $(this).find(opts.hdClass),
                    $bdItems = $(this).find(opts.bdClass);
                $hdItems.each(function(index, el) {
                    var $this = $(this);
                    $this.on("click", function() {
                        $(this).html($.fn.Tab.format($(this).text()));
                        $this.addClass(‘oncurr‘).siblings().removeClass(‘oncurr‘);
                        $bdItems.eq(index).show().siblings().hide();
                    })
                });
            });
        }
        $.fn.Tab.defaults = {
            hdClass: ‘.tab-hd-item‘,
            bdClass: ‘.tab-bd-item‘
        };
        $.fn.Tab.format = function(txt) {
            return ‘<strong>‘ + txt + ‘</strong>‘;
        };
    })(jQuery);
    $(function() {
        $.fn.Tab.defaults = {
            hdClass: ‘.tab-hd-item-1‘,
            bdClass: ‘.tab-bd-item-1‘
        };
        $(".tab-parent").Tab();
    })
    </script>
</body>

</html>

 

　　3、通过data的方式来实现jquery插件的写法(参考bootstrap.js,slidesjs)　　

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <style type="text/css">
    .undis {
        display: none;
    }
    
    .tab-parent {
        width: 400px;
        margin: 50px auto;
        border: 1px solid #e5e5e5;
    }
    
    .tab-hd {
        height: 45px;
    }
    
    .tab-hd li {
        padding: 15px 0;
        width: 200px;
        text-align: center;
        float: left;
        border-bottom: 1px solid #e5e5e5;
    }
    
    .tab-hd li.oncurr {
        border-color: #f60;
        color: #f60;
        font-weight: bold;
    }
    
    .tab-bd {
        padding: 20px;
        min-height: 250px;
    }
    </style>
</head>

<body>
    <div class="tab-parent" id="J_tab-parent">
        <ul class="tab-hd">
            <li class="tab-hd-item oncurr">选项卡1</li>
            <li class="tab-hd-item">选项卡2</li>
        </ul>
        <div class="tab-bd">
            <div class="tab-bd-item">选项卡1对应的内容</div>
            <div class="tab-bd-item undis">选项卡2对应的内容</div>
        </div>
    </div>
    <script type="text/javascript">
    ;(function($, window, document, undefined) {
        var pluginName = ‘Tab‘,
            defaults = {
                hdClass: ‘.tab-hd-item‘,
                bdClass: ‘.tab-bd-item‘
            };

        function Plugin(element, options) {
            this.element = element;
            this.options = $.extend({}, defaults, options);
            this._defaults = defaults;
            this._name = pluginName;
            this.init();
        }
        Plugin.prototype.init = function() {
            this.$hdItems = $(this.element).find(".tab-hd-item");
            this.$bdItems = $(this.element).find(this.options.bdClass);
            var _this = this;
            this.$hdItems.each(function(index, el) {
                var $this = $(this);
                $this.on("click", function() {
                    $this.addClass(‘oncurr‘).siblings().removeClass(‘oncurr‘);
                    _this.$bdItems.eq(index).show().siblings().hide();
                })
            });
        }
        $.fn[pluginName] = function(options) {
            return this.each(function() {
                if (!$.data(this, ‘plugin_‘ + pluginName)) {
                    return $.data(this, ‘plugin_‘ + pluginName, new Plugin(this, options));
                }
            })
        }

    })(jQuery, window, document);

    $(function() {
        $("#J_tab-parent").Tab()
    })
    </script>
</body>

</html>

 　　基本的插件形式就这这三种，当然我们依然可以找到其他的方式的插件，比如私有方法的放置，还有像bootstrap.js的框架的细微的变形，万变不离其中，只要了解基本的方法，其他的都可以依葫芦画瓢！

 

jQuery插件的点点滴滴

标签：

原文地址：http://www.cnblogs.com/ip128/p/4572337.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！