js封装——封装一些小例（栗）子

发表于 | 阅读量 次
| 字数统计 863 | 阅读时长 4

在开发过程中，经常会遇到很多相同的效果和逻辑交互，相同的代码要写很多次，代码重复，这样会导致很多问题，具体问题就不说了，大家应该都懂！
今天，通过几个封装效果的几个实例，来实现代码的复用，让你的代码也变的简洁高效起来吧！请往下看：

封装，就是把一个零零散散的东西做成一个组件。实现共同调用，但又不相互影响，实现代码复用！网上的关于这类文章的介绍很多，我这里就不多介绍，直接上手写几个小栗子，我想会更直接；
示例1
如图：仿的百度输入法的效果

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
css:
 <style>
        body,ul, li,
        button {
            margin: 0; padding: 0;
        }
        
        body {
            font: 12px/1.5 Tahoma;
        }
        
        ul {
            list-style-type: none;
        }
        
        button {
            cursor: pointer;
        }
        
        #outer {
            width: 70px;
            margin: 10px auto;
        }
        
        .ime {
            margin-top: 5px;
            background: #fff;
            border: 1px solid #9a99ff;
            display: none;
        }
        
        .ime li {
            width: 100%;
            line-height: 24px;
            display: inline-block;
            vertical-align: top;
        }
        
        .close {
            border-top: 1px solid #9a99ff;
        }
        
        .ime li a {
            color: #00c;
            padding: 0 5px;
            display: block;
            text-decoration: none;
        }
        
        .ime li a:hover {
            background: #d9e1f6;
        }
    </style>
    html:
     <div id="outer">
        <button>输入法</button>
        <ul class="ime">
            <li><a href="javascript:;">手写</a></li>
            <li><a href="javascript:;">拼音</a></li>
            <li class="close"><a href="javascript:;">关闭</a></li>
        </ul>
    </div>

重点js（未经封装的常规写法）：

1
2
3
4
5
6
7
8
9
10
11
12
window.onload = function() {
    var oBtn = document.getElementsByTagName("button")[0];
    var oIme = document.getElementById("ime");
    var oClose = document.getElementById("close");
    var style = oIme.style;
    oBtn.onclick = function() {
        style.display = style.display == "block" ? "none" : "block"
    };
    oClose.onclick = function() {
        style.display = "none"
    }
};

封装后的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = function() {
    new Writes("outer");    //调用方法，直接new一下就行了
}
function Writes(id) {
    var oUter = document.getElementById(id);
    this.oBtn = oUter.getElementsByTagName("button")[0];
    this.oIme = oUter.getElementsByClassName("ime")[0];
    this.oClose = oUter.getElementsByClassName("close")[0];
    var _this = this;
    this.style = this.oIme.style;
    this.oBtn.onclick = function() {
        _this.shows(this);
    };
    this.oClose.onclick = function() {
        _this.hides(this);
    };
};
Writes.prototype.shows = function() {
    this.style.display = this.style.display == "block" ? "none" : "block"
};
Writes.prototype.hides = function() {
    this.style.display = "none"
};

示例2
如图：弹出层效果，很常见的效果

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
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
css:
<style>
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        
        body,
        div,
        h2 {
            margin: 0;
            padding: 0;
        }
        
        body {
            font: 12px/1.5 Tahoma;
        }
        
        center {
            padding-top: 10px;
        }
        
        button {
            cursor: pointer;
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;
            filter: alpha(opacity=50);
            display: none;
        }
        
        .win {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 200px;
            background: #fff;
            border: 4px solid #f90;
            margin: -102px 0 0 -202px;
            display: none;
        }
        
        h2 {
            font-size: 12px;
            text-align: right;
            background: #FC0;
            border-bottom: 3px solid #f90;
            padding: 5px;
        }
        
        h2 span {
            color: #f90;
            cursor: pointer;
            background: #fff;
            border: 1px solid #f90;
            padding: 0 2px;
        }
    </style>
    html:
    <div id="cont">
        <div class="overlay"></div>
        <div class="win">
            <h2><span class="close">×</span></h2>
        </div>
        <button>弹出层</button>
    </div>
未封装的写法：
--------------------------
window.onload = function() {
    var cont = document.getElementById('cont');
    var oWin = document.getElementsByClassName("win")[0];
    var oLay = document.getElementsByClassName("overlay")[0];
    var oBtn = document.getElementsByTagName("button")[0];
    var oClose = document.getElementsByClassName("close")[0];
    oBtn.onclick = function() {
        oLay.style.display = "block";
        oWin.style.display = "block"
    };
    oClose.onclick = function() {
        oLay.style.display = "none";
        oWin.style.display = "none"
    };
};
封装后的写法，对比一下
--------------------------
window.onload = function() {
      new shows('cont'); //调用方法，直接new一下就行了
};
function shows(id) {
    var cont = document.getElementById(id);
    this.oWin = cont.getElementsByClassName("win")[0];
    this.oLay = cont.getElementsByClassName("overlay")[0];
    this.oBtn = cont.getElementsByTagName("button")[0];
    this.oClose = cont.getElementsByClassName("close")[0];
    var _this = this;
    this.oBtn.onclick = function() {
        _this.block();
    };
    this.oClose.onclick = function() {
        _this.none();
    }
};
shows.prototype.block = function() {
    this.oLay.style.display = "block";
    this.oWin.style.display = "block"
};
shows.prototype.none = function() {
    this.oLay.style.display = "none";
    this.oWin.style.display = "none"
};

简单总结：
1.不能存在函数嵌套，全局变量；
2.window.onload改写成构造函数的形式；
3.全局变量改写成属性；
4.函数改写成方法；
6.最后，注意一下this,事件方法，闭包，传参这几点注意一下，就ok了？

访客的ip和所在地址： 访问时间: 当前时间:

殖民 wechat
欢迎您扫一扫上面的微信公众号
打赏不在多少，请鼓励一下！