jQuery插件开发之实例插件模板说明

1 Reply

1、所谓的jQuery插件事实上就是jQuery的扩展方法，分为两种：类方法与实例方法；对于有过面向对象编程的人来讲是不是非常熟悉？！

2、类方法扩展很简单，即扩展类似$.post()这种方法，直接使用$调用，那么扩展方法可以直接写成$.xxx = function(){}即可；类方法全局调用；

3、实例方法，即必须是$(‘someone’).xxxx()形式的调用，这种方法如何扩展呢？因为还不知道扩展给哪个实例，所以在扩展方法是拿不到该实例。其实jQuery有个属性叫fn，所有的实例方法都挂在该属性下面，官方给出了扩展实例方法的标准模板，可能一眼看过来有点蒙，下面我通过几个版本的演变来解释该“标准模板”是如何得来的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// 1.0、最简单版本
$.fn.xxx = function(){
    // 实现代码...
}
// 1.1、兼顾参数与选择器集合
$.fn.xxx = function(options){
    this.each(function(){
        // 实现代码...
    });
}
 
// 1.2、增加初始参数或默认值
$.fn.xxx = function(options){
    let defaults = {
 
    }
    options = $.extend(defaults, options);
    this.each(function(){
 
    });
}
 
// 1.3、更加严谨写法，使用匿名函数包裹并执行
(function(){
    $.fn.xxx = function(options){
        let defaults = {
 
        }
        options = $.extend(defaults, options);
        this.each(function(){
 
        });
    }
})();
 
// 1.4、完善优化jQuery对象本身的影响
(function($){
    $.fn.xxx = function(options){
        let defaults = {
 
        }
        options = $.extend(defaults, options);
        this.each(function(){
 
        });
    }
})(jQuery);

One thought on “jQuery插件开发之实例插件模板说明”

  1. Sian Post author

    假如现在要实现一个功能，表格的奇数背景色为#eee，偶数行背景色为#ccc，当前行(悬停时)背景色为#999，封装该样式方法
    演示效果地址：http://www.yusian.com/jquery/plugin/jquery.html

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    (function($){
    $.fn.table = function(options){
        let defaults = {
            oddRow:'oddRow',    // 奇数行样式
            evenRow:'evenRow',  // 偶数行样式
            currRow:'currRow'   // 当前行样式(鼠标悬浮)
        }
        options = $.extend(defaults, options);
        this.each(function(){
            let _this = $(this);
            _this.find('tr:odd').addClass(options.oddRow);
            _this.find('tr:even').addClass(options.evenRow);
            _this.find('tr').hover(function(){
                $(this).addClass(options.currRow);
            },function(){
                $(this).removeClass(options.currRow);
            });
        });
    }
})(jQuery);
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery.js"></script>
    <script src="jquery-table-1.0.js"></script>
    <title>Document</title>
    <style>
        table{
            width: 100%;
            border-collapse: collapse;
        }
        th,td{
            border:1px solid #999;
            height: 30px;
            text-align: center;
        }
        .odd-row{
            background: #eee;
        }
        .even-row{
            background: #ccc;
        }
        .curr-row{
            background: #999;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>身高</th>
            <th>体重</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>Jack</td>
            <td>171cm</td>
            <td>70Kg</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Rose</td>
            <td>161cm</td>
            <td>48Kg</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Jim</td>
            <td>180cm</td>
            <td>75Kg</td>
            <td>22</td>
        </tr>
        <tr>
            <td>Lucy</td>
            <td>168cm</td>
            <td>54Kg</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Lily</td>
            <td>167cm</td>
            <td>53Kg</td>
            <td>20</td>
        </tr>
    </table>
 
    <script>
        $('table').table({
            oddRow:'odd-row',
            evenRow:'even-row',
            currRow:'curr-row'
        });
    </script>
</body>
</html>
    ↓

Leave a Reply