可想實現一個自己的簡單jQuery庫？(七)

二哲發表於2015-11-20
jQuery

Lesson-6

這個版本完善hasClass和css 方法.

新增 attr和data

css: function(attr, val) { //鏈式測試

    for (var i = 0; i < this.length; i++) {
        if(typeof attr == `string`) {
            if (arguments.length == 1) {
                return getComputedStyle(this[0], null)[attr];
            }
            this[i].style[attr] = val;
        } else {
            var _this = this[i];
            f.each(attr,function(attr,val) {
                _this.style.cssText += `` + attr + `:` + val + `;`;
            });
        }
    }
    return this;
}

在我們上一個版本中,沒有對css方法傳物件進行解析,在這我們要進行完善.

剛剛好我們現在已經有了each方法!直接用上吧!

在我們的for迴圈中,要先判斷下傳入的attr引數是字串還是物件.

如果是字串,我們就按照css(`width`,`100px`)這樣的方式處理

如果是物件css({"width":`100px`,`height`:`200px`})

var _this = this[i];
f.each(attr,function(attr,val) {
    _this.style.cssText += `` + attr + `:` + val + `;`;
});

首先我們快取下當前的this,然後用cssText方法,直接拼接進去即可.

接著我們需要完善hasClass方法.這裡要著重說明下!目前我搜到的一大堆hasClass方法與jQuery的實現都是不同的

比如有這樣的dom結構

<div id="pox">
    <ul>
        <li class="a c">pox</li>
        <li class="b">pox</li>
        <li>pox</li><li>pox</li>
        <li>pox</li>
    </ul>
</div>

我們如果寫$(`#pox li`).hasClass(`b`)與$(`#pox li`).hasClass(`a`)那都會是什麼樣的結果呢?

結果是都會返回true.

而現在基本能搜到的完全沒有做這方面的判斷.所以我們來看看我是如何實現的

hasClass : function(cls) {
    var reg = new RegExp(`(\s|^)` + cls + `(\s|$)`);
    var arr = [];
    for (var i = 0; i < this.length; i++) {
        if (this[i].className.match(reg)) arr.push(true);
            else arr.push(false);
    }
    if (arr.indexOf(true) != -1)  return true;
        else  return false;
}

首先我們需要一個正則匹配,還需要一個陣列,進行儲存每個元素是否有存在判斷的class

然後我們再在那個陣列中尋找是否有true?如果有true,則返回true,如果一個true都沒有的情況下,才能完全返回false.希望大家在這裡要注意以下

最後是我們的attr和data方法

attr : function(attr, val) {
    for (var i = 0; i < this.length; i++) {
        if(typeof attr == `string`) {
            if (arguments.length == 1) {
                return this[i].getAttribute(attr);
            }
            this[i].setAttribute(attr,val);
        } else {
            var _this = this[i];
            f.each(attr,function(attr,val) {
                _this.setAttribute(attr,val);;
            });
        }
    }
    return this;
},
data : function(attr, val) {
    for (var i = 0; i < this.length; i++) {
        if(typeof attr == `string`) {
            if (arguments.length == 1) {
                return this[i].getAttribute(`data-` + attr);
            }
            this[i].setAttribute(`data-` + attr,val);
        } else {
            var _this = this[i];
            f.each(attr,function(attr,val) {
                _this.setAttribute(`data-` + attr,val);;
            });
        }
    }
    return this;
}

這兩個方法就很簡單啦,跟CSS方法類似,先判斷第一個引數是否為字串,如果是字串就是直接增加一個屬性.如果是物件,就each下一個一個set即可.

毛主席說過,只閱不star都是耍流氓! ?

github地址: https://github.com/MeCKodo/forchange/tree/master/lesson-6
可想實現一個自己的簡單jQuery庫？(六)：http://segmentfault.com/a/1190000004013654

相關文章