javascript原生框架(三)--css样式模块的封装

发表于 | 分类于 | 阅读次数:

css样式模块的封装

each方法的实现

1.在写样式之前,先给核心函数添加一个each方法.

-实现的代码如下

1
2
3
4
5
6
7
8
9
moyas.extend({
each: function (obj, callback) {
            var i = 0,
                l = obj.length;
            for (; i < l; i++) {
                if (callback.call(obj[i], obj[i], i) === false) break;
            }
        }
})

2.写一个用于css样式的each 方法,用于实现链式编程
-代码

1
2
3
4
5
6
7
8
9
10
moyas.fn.extend({
        //提供给moyas对象调用
        //遍历this
        each:function (callback) {
            moyas.each(this,callback);
            //实现链式编程
            //放回方法的调用者
            return this;
        }
    });

css样式方法

获取设置样式-css(); 判断类名-hasClass();
添加类名-addClass(); 移除类名-removeClass();
*切换类名-toggleClass();

代码如下

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
moyas.fn.extend({
    //判断有没有这个类名
    hasClass:function (className) {
        //默认的结果为flase;
        var ret = false;
        //遍历this 上的每一个dom 元素
        this.each(function (v) {
            if ((" "+v.className+" ").indexOf(" "+className+" ")!==-1){
                ret = true;
                return false;
            }
        });
        return ret;
    },
    //添加类名
    addClass:function (className) {
        return this.each(function (v) {
            if(!moyas(v).hasClass(className)){
                v.className += " "+className;
            }
        });
    },
    //移除类名
    removeClass:function (className) {
        return this.each(function (v) {
            v.className =  (" "+v.className+" ").replace(" "+ calssName + " "," ");
        });
    },
    //切换类名
    toggleClass:function (className) {
        return this.each(function (v) {
            var $v = moyas(v);
            if ($v.hasClass(className)){
                $v.removeClass(className);
            }else {
                $v.addClass(className);
            }
        });
    },
    //css样式的获取和设置
    //判断传入的参数
    //如果有对应的值 则为设置样式
    //如果没有对应的值  则为获取样式
    css:function (name,value) {
        //至传入一个参数
        if(value==undefined){
            //如果name类型为对象 则同时设置多个值
            if (typeof name ==='object'){
                //遍历设置
                this.each(function (v) {
                    for(var k in name){
                        v.style[k]=name[k];
                    }
                });
            }else {
                //如果name 不为对象
                //默认获取this 上的第一个dom 元素的指定的样式
                //先判断  如果this上没有任何的dom 元素  则返回null
                if(!this[0]) return null;
                return window.getComputedStyle?window.getComputedStyle(this[0])[name] :
                        this[0].currentStyle[name];
            }
        }else {
            //传入两个参数
            this.each(function (v) {
                v.style[name]=value;
            });
        }
        //实现链式编程
        return this;
    }
});