Keep on coding

JavaScript-面向对象鸡汤

发表于 | 分类于 ， | | 阅读次数
知道大家被前面面向对象的概念弄的都有点不想学编程了是吧,概念这种东西怎么说呢,能理解最好,不能理解就得结合案例和长时间的慢慢消化才行,总之不想当司机的厨师不是一个好程序猿.在中国现在浮躁的社会环境下,如果你不能静下心来学点东西,那你可能再过几年又面临换行或者到处找工作的局面,只有基础只是打的坚实,才能理解内部的真正的原理,才能走的更高更远.

下面给大家准备了两个小例子,如果把前面的概念比作是白大米,白馒头的话,那现在就给大家来点鸡汤喝喝

小案例一 —-> Tab选项卡切换

用面向对象编程写的 如果你前面的真的掌握了的话 那你看懂这个案例应该不难

< ! ———- HTML ———– >

  • 示例代码 :
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
<div class="tab">
    <ul class="tab-top" id="tab_top">
        <li class="current">公告</li>
        <li>规则</li>
        <li>论坛</li>
        <li>公益</li>
        <li>安全</li>
    </ul>
    <div class="tab-bottom" id="tab_bottom">
        <div class="tab-content selected">
            <ul>
                <li>
                    <a href="#">数据七夕:金牛爱送玫瑰</a>
                </li>
                <li>
                    <a href="#">阿里打造"互联网监管"</a>
                </li>
                <li>
                    <a href="#">10万家店60万新品</a>
                </li>
                <li>
                    <a href="#">全球最大网上时装周</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <ul>
                <li>
                    <a href="#">“全额返现”要管控啦</a>
                </li>
                <li>
                    <a href="#">淘宝新规发布汇总(7月)</a>
                </li>
                <li>
                    <a href="#">炒信规则调整意见反馈</a>
                </li>
                <li>
                    <a href="#">质量相关规则近期变更</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <ul>
                <li>
                    <a href="#">阿里建商家全链路服务</a>
                </li>
                <li>
                    <a href="#">个性化的消费时代来临</a>
                </li>
                <li>
                    <a href="#">跨境贸易是中小企业机</a>
                </li>
                <li>
                    <a href="#">美妆行业虚假信息管控</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <ul>
                <li>
                    <a href="#">接次文件，毁了一家店</a>
                </li>
                <li>
                    <a href="#">账号安全神器阿里钱盾</a>
                </li>
                <li>
                    <a href="#">新版阿里110上线了</a>
                </li>
                <li>
                    <a href="#">卖家学违禁避免被处罚</a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <ul>
                <li>
                    <a href="#">为了公益high起来</a>
                </li>
                <li>
                    <a href="#">魔豆妈妈在线申请</a>
                </li>
            </ul>
        </div>
    </div>
</div>

< ! ——— Style ————— >

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
<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style-type: none;
        }
        .tab {
            width: 498px;
            height: 130px;
            border: 1px solid #999;
            margin: 100px auto;
            overflow: hidden;
        }
        .tab .tab-top {
            width: 501px;
            height: 33px;
            background: #eee;
            position: relative;
            left: -1px;
        }
        .tab .tab-top li {
            float: left;
            width: 98px;
            height: 33px;
            text-align: center;
            line-height: 33px;
            cursor: pointer;
            border-bottom: 1px solid #999;
            padding: 0 1px;
        }
        .tab .tab-top li.current {
            background: #fff;
            border-bottom: 0;
            border-left: 1px solid #9d9d9d;
            border-right: 1px solid #9d9d9d;
            padding: 0;
        }
        .tab .tab-top li:hover {
            font-weight: 700;
            color: #f40;
        }
        .tab-bottom .tab-content {
            display: none;
        }
        .tab-bottom .tab-content a {
            text-decoration: none;
            color: #000;
        }
        .tab-bottom .tab-content a:hover {
            color: #f40;
        }
        .tab-bottom .tab-content ul li {
            margin-top: 20px;
            width: 220px;
            float: left;
            text-align: center;
        }
        .tab-bottom .selected {
            display: block;
        }
</style>

< ! ——— JavaScript ——- >

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
<script>
    function $(id) {
        return document.getElementById(id);
    }
    window.onload = function () {
        function TabFn() {
            // 获得属性
            this.topLis = $('tab_top').getElementsByTagName('li');
            this.tabContent = $('tab_bottom').getElementsByClassName('tab-content');
        }
        TabFn.prototype = {
            // 1. 初始化方法
            init: function () {
                // 1.1 设置索引
                this.setIndex();
                // 1.2 监听事件
                this.bindEvent();
            },
            // 2. 索引
            setIndex: function () {
                for (var i = 0; i < this.topLis.length; i++) {
                    var li = this.topLis[i];
                    li.index = i;
                }
            },
            // 3. 监听
            bindEvent: function () {
                for (var i = 0; i < this.topLis.length; i++) {
                    var self = this;
                    this.topLis[i].onmouseover = function () {
                        self.handler(this);
                    }
                }
            },
            // 4. 排他
            handler: function (that) {
                for (var j = 0; j < this.topLis.length; j++) {
                    this.topLis[j].className = ''
                    this.tabContent[j].style.display = 'none';
                }
                that.className = 'current';
                this.tabContent[that.index].style.display = 'block';
            }
        }
        // 5. 实例化对象
        var tab = new TabFn();
        tab.init();
    }
</script>

< ! ——— 效果展示 ———- >

**Tab选项卡**

小案例二 —-> 五彩人生

  • 示例代码 :

< ! ———- HTML ———– >

1
<div id="ball"></div>

< ! ——— Style ————— >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        #ball {
            width: 100%;
            height: 100%;
            background-color: #000;
        }
</style>

< ! ——— JavaScript ——- >

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
// Underscore是一个类库,上面有好多方法,网上可以下载到
<script src="js/Underscore-min.js"></script>
// 外链一个面向对象文件
<script src="js/ColorBall.js"></script>
/**
 * 1.构造函数
 * @param option 可选参数
 * @constructor
 */
function ColorBall(option) {
    this._init(option);
}
/**
 * 2.构造函数的原型库
 * @type {{constructor: ColorBall}}  构造器:构造函数
 */
ColorBall.prototype = {
    // 获得当前构造函数
    constructor: ColorBall,
    // 1. 添加属性
    _init: function (option) {
        var option = option || {};
        // 1.1 必要的属性
        this.parentId = option.parentId;
        this.x = option.x || 0;
        this.y = option.y || 0;
        this.r = 60;
        this.bgColor = option.bgColor || 'green';
        // 1.2 变化的属性
        this.dX = _.random(-5, 5);
        this.dY = _.random(-5, 5);
        this.dR = _.random(1, 3);
        // 1.3 把实例化的小球装入数组
        ballArr.push(this);
    },
    // 2. 绘制小球
    render: function () {
        // 2.1 创建节点
        var parentNode = document.getElementById(this.parentId);
        var childNode = document.createElement('div');
        parentNode.appendChild(childNode);
        // 2.2 设置定位
        parentNode.style.position = 'relative';
        childNode.style.position = 'absolute';
        // 2.3 设置属性
        childNode.style.left = this.x + 'px';
        childNode.style.top = this.y + 'px';
        childNode.style.width = this.r + 'px';
        childNode.style.height = this.r + 'px';
        childNode.style.borderRadius = '50%';
        childNode.style.backgroundColor = this.bgColor;
    },
    // 3. 小球开始运动
    update: function () {
        // 3.1 小球位置的变化轨迹
        this.x += this.dX;
        this.y += this.dY;
        this.r -= this.dR;
        // 3.2 判断半径值
        if (this.r < 0) {
            this.r = 0;
            // 如果小球的半径小于0的话 就把小球移除数组
            ballArr = _.without(ballArr, this);
        }
    }
}
<script>
    // 1. 获取标签
    var ball = document.getElementById('ball');
    // 2. 定义小球数组和颜色数组
    var ballArr = [];
    var colorArr = ['pink', 'red', 'purple', 'blue', 'green', 'orange', 'skyblue', 'white'];
    // 3. 创建小球装入数组
    ball.onmousemove = function (event) {
        var event = event || window.event;
        new ColorBall({
            parentId: 'ball',
            x: event.clientX,
            y: event.clientY,
            bgColor: colorArr[_.random(0, colorArr.length - 1)]
        });
    }
    // 4. 开始定时器
    setInterval(function () {
        // 4.1 先把创建的div清屏
        for (var i = 0; i < ball.children.length; i++) {
            ball.removeChild(ball.children[i]);
        }
        // 4.2 绘制小球和小球的动画
        for (var i = 0; i < ballArr.length; i++) {
            ballArr[i].render();
            ballArr[i].update();
        }
    }, 50);
</script>

< ! ——— 效果展示 ———- >

**五彩小球**