[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件



    
    
    
    隔行变色插件开发 - by ghostwu
    
        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;
        }
    
    
    
        (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;
        })();
    
    
        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();
        }
    



    
姓名 性别 年龄
张三 man 20
张三 man 20
张三 man 20
张三 man 20
张三 man 20
张三 man 20
张三 man 20

我们要实现的是多个插件功能【选项卡,全选,不选,反选,轮播,弹窗,分页等常用插件】,所以第一步,要做一个简单的模块架构,这里,我采用的是字面量单例模式+命名空间

 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 
 2 
 3 
 4     
 5     
 6     
 7     隔行变色 - by ghostwu
 8     
 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     
24     
25     
26         window.onload = function(){
27             var oBg = g.BgColor;
28             oBg.init();
29             oBg.setBgColor();
30             oBg.hover();
31         }
32     
33 
34 
35     
36
37
38
39
40
41 42

至此,一个简单的隔行变色功能就完成了,但是不能称之为插件,因为这个功能现在是写死的

三、把可能变化的部分抽象出来变成配置

可能变化的部分有:

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 
 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 
17 
18 
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 

五、完善元素的配置

在第四步中,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 
  2 
  3 
  4 
  5     
  6     
  7     
  8     隔行变色 - by ghostwu
  9     
 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     
 38     
 39     
 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     
 62 
 63 
 64 
 65     
66
67
68
69
70
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
姓名性别年龄
ghostwuman20
ghostwuman20
ghostwuman20
ghostwuman20
ghostwuman20
ghostwuman20
ghostwuman20
113 114 115

至此,我们开发的功能,勉强算个插件了,但是,不能按区域控制,比如页面上有10个div, 分成2部分,一部分有5个div,另外一部分也是5个,我想其中一部分div加上隔行变色效果。另外一部分不加.

六、分块控制

其实很简单,就是不要用document去获取元素,document获取到的元素是所有的元素,所以我们在配置中加一个上下文的配置,可以限定获取某部分满足条件的节点.

修改demo.js对应部分的代码如下:

 1 ghostwu.BgColor = {
 2         oldColor : null,
 3         opt : {
 4             'activeClass' : 'active',
 5             'oddClass' : 'odd-color',
 6             'evenClass' : 'even-color',
 7             'ele' : 'div',
 8             'context' : document
 9         }
10     };
11 ghostwu.BgColor.init = function( option ){
12     for( var key in option ){
13         this.opt[key] = option[key];
14     }
15     var cxt = this.opt['context'];
16     if ( typeof cxt === 'string' ){
17         cxt = document.querySelector( this.opt['context'] );
18     }
19     if ( this.opt['ele'] == 'div' ) {
20         this.elements = cxt.querySelectorAll( this.opt['ele'] );
21     }else{
22         this.elements = cxt.querySelectorAll( this.opt['ele'] + " tr" );
23         this.elements = [].slice.call( this.elements );
24         for( var i = 0 ; i < this.elements.length; i++ ){
25             if ( this.elements[i].children[0].nodeName.toLowerCase() == 'th' ) {
26                 this.elements.splice( i, 1 );
27             }
28         }
29     }
30 }

修改html页面代码如下:

  1 
  2 
  3 
  4 
  5     
  6     
  7     
  8     隔行变色 - by ghostwu
  9     
 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 
 21         .even-color {
 22             background: #ccc;
 23         }
 24 
 25         .odd-color {
 26             background: #eee;
 27         }
 28 
 29         .even-color2 {
 30             background: #000;
 31         }
 32 
 33         .odd-color2 {
 34             background: #666;
 35         }
 36 
 37         .current {
 38             background: yellow;
 39         }
 40 
 41         .active {
 42             background: #09f;
 43         }
 44 
 45         #box div,
 46         #box2 div {
 47             margin: 10px;
 48             padding: 10px;
 49             border: 1px solid #ccc;
 50         }
 51     
 52     
 53     
 54         window.onload = function () {
 55             var oBg = g.BgColor;
 56             oBg.init({
 57                 'activeClass': 'current',
 58                 'evenClass': 'even-color2',
 59                 'oddClass': 'odd-color2',
 60                 'context' : '#box'
 61             });
 62             oBg.setBgColor();
 63             oBg.hover();
 64 
 65             var oBg3 = g.BgColor;
 66             oBg3.init({
 67                 'activeClass': 'active',
 68                 'evenClass': 'even-color',
 69                 'oddClass': 'odd-color',
 70                 'context' : '#box2'
 71             });
 72             oBg3.setBgColor();
 73             oBg3.hover();
 74 
 75             var oBg2 = g.BgColor;
 76             oBg2.init({
 77                 'activeClass': 'current',
 78                 'evenClass': 'even-color2',
 79                 'oddClass': 'odd-color2',
 80                 'ele': 'table',
 81                 'context' : document
 82             });
 83             oBg2.setBgColor();
 84             oBg2.hover();
 85         }
 86     
 87 
 88 
 89 
 90     
91
92
93
94
95
96
97
98
99
100
101
102
103
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
姓名性别年龄
ghostwuman20
ghostwuman20
ghostwuman20
ghostwuman20
ghostwuman20
ghostwuman20
ghostwuman20
146 147 148

这样我们就可以达到分块控制的目的,但是,如果你仔细一点,应该能发现一个问题,activeClass设置的样式产生了覆盖,3个区域不能定制activeClass。这个就是单例模式无法解决的问题,我们可以通过构造函数解决

七、构造函数解决属性配置覆盖的问题

最终版demo.js文件

 1 (function(){
 2     /*
 3         隔行变色
 4         选项卡
 5         全选不选反选
 6     */
 7     var ghostwu = {};
 8 
 9     /***************隔行变色开始***************/
10     ghostwu.BgColor = {
11         Bg : function( option ){
12             return new ghostwu.BgColor.init( option );
13         }
14     };
15     ghostwu.BgColor.init = function( option ){
16         this.oldColor = null;
17         this.opt = {
18             'activeClass' : 'active',
19             'evenClass' : 'even-color',
20             'oddClass' : 'odd-color',
21             'ele' : 'div',
22             'context' : document
23         }; //存储默认配置
24         for( var key in option ){
25             this.opt[key] = option[key];
26         }
27         if ( this.opt.ele == 'div' ){
28             var curCxt = this.opt.context;
29             if ( typeof this.opt['context'] === 'string' ) {
30                 curCxt = document.querySelector( this.opt['context'] );
31             }
32             this.elements = curCxt.querySelectorAll( this.opt.ele );
33         }else {
34             this.elements = this.opt.context.querySelectorAll( this.opt.ele + ' tr' );
35             for( var i = 0; i < this.elements.length; i++ ){
36                 if( this.elements[i].children[0].nodeName.toLowerCase() == 'th'){
37                     this.elements = [].slice.call( this.elements );
38                     this.elements.splice( i, 1 );
39                 }
40             }
41         }
42     }
43     ghostwu.BgColor.init.prototype.setBgColor = function(){
44         for( var i = 0 ; i < this.elements.length; i++ ){
45             if ( i % 2 == 0 ) {
46                 this.elements[i].className = this.opt['evenClass'];
47             }else {
48                 this.elements[i].className = this.opt['oddClass'];
49             }
50         }
51     }
52     ghostwu.BgColor.init.prototype.hover = function(){
53         var that = this;
54         for( var i = 0 ; i < this.elements.length; i++ ){
55             this.elements[i].onmouseover = function(){
56                 that.addBg( this );
57             };
58             this.elements[i].onmouseout = function(){
59                 that.removeBg( this );
60             }
61         }
62     }
63     ghostwu.BgColor.init.prototype.addBg = function( curObj ){
64         this.oldColor = curObj.className;
65         curObj.className = this.opt['activeClass'];
66     }
67     ghostwu.BgColor.init.prototype.removeBg = function( curObj ){
68         curObj.className = this.oldColor;
69     }
70     /***************隔行变色结束***************/
71 
72 
73 
74 
75     window.g = ghostwu;
76 })();

页面测试代码:

  1 
  2 
  3 
  4 
  5     
  6     
  7     
  8     隔行变色插件开发 - by ghostwu
  9     
 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 
 21         .even-color {
 22             background: #ccc;
 23         }
 24 
 25         .odd-color {
 26             background: #eee;
 27         }
 28 
 29         .even-color2 {
 30             background: #000;
 31         }
 32 
 33         .odd-color2 {
 34             background: #666;
 35         }
 36 
 37         .current {
 38             background: yellow;
 39         }
 40 
 41         .active {
 42             background: #09f;
 43         }
 44 
 45         #box div,
 46         #box2 div {
 47             margin: 10px;
 48             padding: 10px;
 49             border: 1px solid #ccc;
 50         }
 51     
 52     
 53     
 54         window.onload = function () {
 55             var oBg = g.BgColor.Bg({
 56                 'activeClass': 'current',
 57                 'ele': 'table'
 58             });
 59             oBg.setBgColor();
 60             oBg.hover();
 61 
 62             var oBg2 = g.BgColor.Bg({
 63                 'activeClass': 'active',
 64                 'ele': 'div',
 65                 'context': '#box'
 66             });
 67             oBg2.setBgColor();
 68             oBg2.hover();
 69 
 70             var oBg3 = g.BgColor.Bg({
 71                 'activeClass': 'current',
 72                 'ele': 'div',
 73                 'evenClass': 'even-color2',
 74                 'oddClass': 'odd-color2',
 75                 'context': '#box2'
 76             });
 77             oBg3.setBgColor();
 78             oBg3.hover();
 79         }
 80     
 81 
 82 
 83 
 84     
85
86
87
88
89
90
91
92
93
94
95
96
97
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
姓名性别年龄
张三man20
张三man20
张三man20
张三man20
张三man20
张三man20
张三man20
140 141 142
博客园-原创精华区稿源:博客园-原创精华区 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录