[js插件開發教程]一步步開發一個可以定製配置的隔行變色小插件

隔行變色功能，不用js，直接用css偽類就可以做，這個實例可以作為js插件開發很好的入門級實例。本文實現的隔行變色包括以下功能： 1，支持2種常用結構共存( div元素和表格類型 ) 2，一個頁面內支持不同模塊隔行變色，分別管理 3，可以定製的配置有：奇/偶數行的背景顏色特定的模塊加上隔行變 ...

隔行變色功能，不用js，直接用css偽類就可以做，這個實例可以作為js插件開發很好的入門級實例。本文實現的隔行變色包括以下功能：

1，支持2種常用結構共存( div元素和表格類型 )

2，一個頁面內支持不同模塊隔行變色，分別管理

3，可以定製的配置有：

奇/偶數行的背景顏色

特定的模塊加上隔行變色

當前激活行的顏色

隔行變色的元素類型定製

{ 'activeClass' : 'active', 'evenClass' : 'even-color', 'oddClass' : 'odd-color', 'ele' : 'div', 'context' : document }; 4，可以擴展其他插件點擊run code按鈕預覽效果

<!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">
    <title>隔行變色插件開發 - by ghostwu</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            padding: 10px 30px;
            border: 1px solid #ccc;
        }

        .even-color {
            background: #ccc;
        }

        .odd-color {
            background: #eee;
        }

        .even-color2 {
            background: #000;
        }

        .odd-color2 {
            background: #666;
        }

        .current {
            background: yellow;
        }

        .active {
            background: #09f;
        }

        #box div,
        #box2 div {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
    </style>
    <script>
        (function () {
            /*
                隔行變色
                選項卡
                全選不選反選
            */
            var ghostwu = {};

            /***************隔行變色開始***************/
            ghostwu.BgColor = {
                Bg: function (option) {
                    return new ghostwu.BgColor.init(option);
                }
            };
            ghostwu.BgColor.init = function (option) {
                this.oldColor = null;
                this.opt = {
                    'activeClass': 'active',
                    'evenClass': 'even-color',
                    'oddClass': 'odd-color',
                    'ele': 'div',
                    'context': document
                }; //存儲預設配置
                for (var key in option) {
                    this.opt[key] = option[key];
                }
                if (this.opt.ele == 'div') {
                    var curCxt = this.opt.context;
                    if (typeof this.opt['context'] === 'string') {
                        curCxt = document.querySelector(this.opt['context']);
                    }
                    this.elements = curCxt.querySelectorAll(this.opt.ele);
                } else {
                    this.elements = this.opt.context.querySelectorAll(this.opt.ele + ' tr');
                    for (var i = 0; i < this.elements.length; i++) {
                        if (this.elements[i].children[0].nodeName.toLowerCase() == 'th') {
                            this.elements = [].slice.call(this.elements);
                            this.elements.splice(i, 1);
                        }
                    }
                }
            }
            ghostwu.BgColor.init.prototype.setBgColor = function () {
                for (var i = 0; i < this.elements.length; i++) {
                    if (i % 2 == 0) {
                        this.elements[i].className = this.opt['evenClass'];
                    } else {
                        this.elements[i].className = this.opt['oddClass'];
                    }
                }
            }
            ghostwu.BgColor.init.prototype.hover = function () {
                var that = this;
                for (var i = 0; i < this.elements.length; i++) {
                    this.elements[i].onmouseover = function () {
                        that.addBg(this);
                    };
                    this.elements[i].onmouseout = function () {
                        that.removeBg(this);
                    }
                }
            }
            ghostwu.BgColor.init.prototype.addBg = function (curObj) {
                this.oldColor = curObj.className;
                curObj.className = this.opt['activeClass'];
            }
            ghostwu.BgColor.init.prototype.removeBg = function (curObj) {
                curObj.className = this.oldColor;
            }
            /***************隔行變色結束***************/




            window.g = ghostwu;
        })();
    </script>
    <script>
        window.onload = function () {
            var oBg = g.BgColor.Bg({
                'activeClass': 'current',
                'ele': 'table'
            });
            oBg.setBgColor();
            oBg.hover();

            var oBg2 = g.BgColor.Bg({
                'activeClass': 'active',
                'ele': 'div',
                'context': '#box'
            });
            oBg2.setBgColor();
            oBg2.hover();

            var oBg3 = g.BgColor.Bg({
                'activeClass': 'current',
                'ele': 'div',
                'evenClass': 'even-color2',
                'oddClass': 'odd-color2',
                'context': '#box2'
            });
            oBg3.setBgColor();
            oBg3.hover();
        }
    </script>
</head>

<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <table>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三</td>
            <td>man</td>
            <td>20</td>
        </tr>
        <tr>
            <td>張三</td>
            <td>man</td>
            <td>20</td>
        </tr>
        <tr>
            <td>張三</td>
            <td>man</td>
            <td>20</td>
        </tr>
        <tr>
            <td>張三</td>
            <td>man</td>
            <td>20</td>
        </tr>
        <tr>
            <td>張三</td>
            <td>man</td>
            <td>20</td>
        </tr>
        <tr>
            <td>張三</td>
            <td>man</td>
            <td>20</td>
        </tr>
        <tr>
            <td>張三</td>
            <td>man</td>
            <td>20</td>
        </tr>
    </table>
</body>

</html>

我們要實現的是多個插件功能【選項卡，全選，不選，反選，輪播，彈窗，分頁等常用插件】，所以第一步，要做一個簡單的模塊架構，這裡，我採用的是字面量單例模式+命名空間

 1 (function(){
 2     /*
 3         隔行變色
 4         選項卡
 5         全選不選反選
 6     */
 7     var ghostwu = {};
 8     /***************隔行變色開始***************/
 9     ghostwu.BgColor = {
10     };
11     ghostwu.BgColor.init = function(){
12     }
13     ghostwu.BgColor.setBgColor = function(){
14     }
15     ghostwu.BgColor.hover = function(){
16     }
17     ghostwu.BgColor.addBg = function(){
18     }
19     ghostwu.BgColor.removeBg = function(){
20     }
21     /***************隔行變色結束***************/
22 
23     /***************選項卡開始***************/
24     ghostwu.Tab = {
25     };
26     ghostwu.Tab.init = function(){
27     }
28     ghostwu.Tab.bindEvent = function(){
29     }
30     ghostwu.BgColor.switchTab = function(){
31     }
32     /***************選項卡結束***************/
33 
34     window.g = ghostwu;
35 })();

一、首先定義一個一級的命名空間 ghostwu = {}，然後通過window對象暴露這個對象給外部使用

接下來開發的插件，只要加在我的一級命名空間中即可，如：

ghostwu.BgColor

ghostwu.Tab

ghostwu.Page

ghostwu.Module

........等等

插件的具體方法，在二級命名空間繼續增加，如：

ghostwu.BgColor.init

為隔行變色插件( BgColor ) 添加一個初始化方法( init )

二、實現一個不能定製配置的隔行變色功能

demo.js代碼

 1 var ghostwu = {};
 2     /***************隔行變色開始***************/
 3     ghostwu.BgColor = {
 4         oldColor : null
 5     };
 6     ghostwu.BgColor.init = function(){
 7         this.aDiv = document.querySelectorAll( "div" );
 8     }
 9     ghostwu.BgColor.setBgColor = function(){
10         for( var i = 0; i < this.aDiv.length; i++ ){
11             if ( i % 2 == 0  ){
12                 this.aDiv[i].className = 'even-color';
13             }else {
14                 this.aDiv[i].className = 'odd-color';
15             }
16         }
17     }
18     ghostwu.BgColor.hover = function(){
19         var that = this;
20         for( var i = 0 ; i < this.aDiv.length; i++ ){
21             this.aDiv[i].onmouseover = function(){
22                 that.addBg( this );
23             }
24             this.aDiv[i].onmouseout = function(){
25                 that.removeBg( this );
26             }
27         }
28     }
29     ghostwu.BgColor.addBg = function( curObj ){
30         this.oldColor = curObj.className;
31         curObj.className = 'active';
32     }
33     ghostwu.BgColor.removeBg = function( curObj ){
34         curObj.className = this.oldColor;
35     }
36     /***************隔行變色結束***************/

html頁面佈局代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>隔行變色 - by ghostwu</title>
 8     <style>
 9         div{
10             margin:10px;
11             padding:20px;
12             border:1px solid #ccc;
13         }
14         .even-color {
15             background:#ccc;
16         }
17         .odd-color {
18             background: #eee;
19         }
20         .active {
21             background:yellow;
22         }
23     </style>
24     <script src="./lib/demo.js"></script>
25     <script>
26         window.onload = function(){
27             var oBg = g.BgColor;
28             oBg.init();
29             oBg.setBgColor();
30             oBg.hover();
31         }
32     </script>
33 </head>
34 <body>
35     <div></div>
36     <div></div>
37     <div></div>
38     <div></div>
39     <div></div>
40     <div></div>    
41 </body>
42 </html>

至此，一個簡單的隔行變色功能就完成了，但是不能稱之為插件，因為這個功能現在是寫死的

三、把可能變化的部分抽象出來變成配置 可能變化的部分有： 1，元素，這裡我們的佈局是div，隔行變色也有可能是表格 2，class樣式，這裡是even-color,odd-color, active，我們要支持class定製接下來，我們添加一個json配置，設置一些預設配置，然後允許初始化的時候定製樣式名稱和元素

 1 var ghostwu = {};
 2     /***************隔行變色開始***************/
 3     ghostwu.BgColor = {
 4         oldColor : null,
 5         opt : {
 6             'activeClass' : 'active',
 7             'oddClass' : 'odd-color',
 8             'evenClass' : 'even-color',
 9             'ele' : 'div'
10         }
11     };
12     ghostwu.BgColor.init = function(){
13         this.elements = document.querySelectorAll( this.opt['ele'] );
14     }
15     ghostwu.BgColor.setBgColor = function(){
16         for( var i = 0; i < this.elements.length; i++ ){
17             if ( i % 2 == 0  ){
18                 this.elements[i].className = this.opt['evenClass'];
19             }else {
20                 this.elements[i].className = this.opt['oddClass'];
21             }
22         }
23     }
24     ghostwu.BgColor.hover = function(){
25         var that = this;
26         for( var i = 0 ; i < this.elements.length; i++ ){
27             this.elements[i].onmouseover = function(){
28                 that.addBg( this );
29             }
30             this.elements[i].onmouseout = function(){
31                 that.removeBg( this );
32             }
33         }
34     }
35     ghostwu.BgColor.addBg = function( curObj ){
36         this.oldColor = curObj.className;
37         curObj.className = this.opt['activeClass'];
38     }
39     ghostwu.BgColor.removeBg = function( curObj ){
40         curObj.className = this.oldColor;
41     }
42     /***************隔行變色結束***************/

經過修改之後，我們就可以通過 opt這個json 配置樣式和元素結構了，接下來，我們就得增加參數配置了

四、參數配置

只需要在demo.js代碼中，加入一個for迴圈，把參數的配置複製給opt即可

1 ghostwu.BgColor.init = function( option ){
2     for( var key in option ){
3         this.opt[key] = option[key];
4     }
5     this.elements = document.querySelectorAll( this.opt['ele'] );
6 }

html測試頁面修改如下：

 1 <style>
 2     div{
 3         margin:10px;
 4         padding:20px;
 5         border:1px solid #ccc;
 6     }
 7     .even-color2 {
 8         background:#000;
 9     }
10     .odd-color2 {
11         background: #666;
12     }
13     .current {
14         background:#08f;
15     }
16 </style>
17 <script src="./lib/demo.js"></script>
18 <script>
19     window.onload = function(){
20         var oBg = g.BgColor;
21         oBg.init({
22             'activeClass' : 'current',
23             'evenClass' : 'even-color2',
24             'oddClass' : 'odd-color2'
25         });
26         oBg.setBgColor();
27         oBg.hover();
28     }
29 </script>

五、完善元素的配置

在第四步中，class都可以定製了，但是ele還不能定製，這個ele就是控制隔行變色的結構

修改init函數如下：

 1 ghostwu.BgColor.init = function( option ){
 2     for( var key in option ){
 3         this.opt[key] = option[key];
 4     }
 5     if ( this.opt['ele'] == 'div' ) {
 6         this.elements = document.querySelectorAll( this.opt['ele'] );
 7     }else{
 8         this.elements = document.querySelectorAll( this.opt['ele'] + " tr" );
 9         this.elements = [].slice.call( this.elements );
10         for( var i = 0 ; i < this.elements.length; i++ ){
11             if ( this.elements[i].children[0].nodeName.toLowerCase() == 'th' ) {
12                 this.elements.splice( i, 1 );
13             }
14         }
15     }
16 }

測試頁面的代碼修改如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>隔行變色 - by ghostwu</title>
  9     <style>
 10         table {
 11             border-collapse: collapse;
 12             width: 100%;
 13         }
 14 
 15         th,
 16         td {
 17             padding: 10px 30px;
 18             border: 1px solid #ccc;
 19         }
 20         div {
 21             margin: 10px;
 22             padding: 20px;
 23             border: 1px solid #ccc;
 24         }
 25 
 26         .even-color2 {
 27             background: #000;
 28         }
 29 
 30         .odd-color2 {
 31             background: #666;
 32         }
 33 
 34         .current {
 35             background: #08f;
 36         }
 37     </style>
 38     <script src="./lib/demo.js"></script>
 39     <script>
 40         window.onload = function () {
 41             var oBg = g.BgColor;
 42             oBg.init({
 43                 'activeClass': 'current',
 44                 'evenClass': 'even-color2',
 45                 'oddClass': 'odd-color2'
 46             });
 47             oBg.setBgColor();
 48             oBg.hover();
 49 
 50             var oBg2 = g.BgColor;
 51             oBg2.init({
 52                 'activeClass': 'current',
 53                 'evenClass': 'even-color2',
 54                 'oddClass': 'odd-color2',
 55                 'ele' : 'table'
 56             });
 57             oBg2.setBgColor();
 58             oBg2.hover();
 59         }
 60 
 61     </script>
 62 </head>
 63 
 64 <body>
 65     <div></div>
 66     <div></div>
 67     <div></div>
 68     <div></div>
 69     <div></div>
 70     <div></div>
 71     <table>
 72         <tr>
 73             <th>姓名</th>
 74             <th>性別</th>
 75             <th>年齡</th>
 76         </tr>
 77         <tr>
 78             <td>ghostwu</td>
 79             <td>man</td>
 80             <td>20</td>
 81         </tr>
 82         <tr>
 83             <td>ghostwu</td