- 自己最近在學(xué)習(xí)一些JS插件的寫(xiě)法，那么當(dāng)然就繞不開(kāi)jquery闲坎，于是自己就邊學(xué)習(xí)邊模仿吊趾，寫(xiě)一個(gè)自己的jQuery
- 自己也是在學(xué)習(xí)過(guò)程中形帮，有問(wèn)題請(qǐng)各位指出，希望大伙能多多支持先蒋，給給star骇钦，點(diǎn)點(diǎn)贊唄，源碼github地址
這次我們來(lái)實(shí)現(xiàn)each,hasClass,addClass,removeClass的方法竞漾。
each
其實(shí)each很簡(jiǎn)單眯搭，就是封裝了一層遍歷罷了。所以直接開(kāi)寫(xiě)
Ye.each = function(obj, callback){
var len = obj.length,
constructor = obj.constructor,
i = 0;
//obj是一個(gè)JQ對(duì)象
if(obj.constructor == Ye){
for(; i < len; i++){
var v = callback.call(obj[i], i ,obj[i]);
if(v == false) break;
}
}else if(isArray(obj)){
for(; i < len; i++){
var v = callback.call(obj, i ,obj[i]);
if(v == false) break;
}
}else{
for(var i in obj){
var v = callback.call(obj, i , obj[i]);
if(v == false) break;
}
}
}
each傳進(jìn)來(lái)的obj分三種情況
1.一個(gè)JQ對(duì)象 2.一個(gè)數(shù)組 3.一個(gè)普通對(duì)象
對(duì)象的遍歷通過(guò)for in 來(lái)實(shí)現(xiàn)业岁。
使用.call 來(lái)調(diào)用函數(shù)鳞仙，.call傳的第一個(gè)參數(shù)是為修改函數(shù)內(nèi)部的this,后面的都是作為函數(shù)的參數(shù)。
hasClass,addClass,removeClass
這幾個(gè)方法實(shí)際上核心一樣笔时，都是獲取className,然后用正則去匹配棍好，后續(xù)再做不同的操作，先直接上代碼
Ye.prototype = {
//省略代碼...
hasClass:function(cls){
//使用RegExp構(gòu)建正則表達(dá)式允耿，需要在轉(zhuǎn)義字符前加反斜杠借笙。字面量形式則不用
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
//遍歷JQ里的DOM
for(var i = 0; i < this.length; i++){
if(this[i].className.match(reg)) return true;
}
return false;
},
addClass:function(cls){
var reg = new RegExp('\\s|^') + cls + new RegExp('\\s|$');
for(var i =0; i < this.length; i++){
//沒(méi)有這個(gè)類(lèi)名，則添加
if(!this[i].className.match(reg)){
this[i].className += " " + cls;
}
}
return this;
},
removeClass:function(cls){
var reg = new RegExp('\\s|^') + cls + new RegExp('\\s|$');
for(var i = 0; i < this.length; i++){
if(this[i].className.match(reg)){
this[i].className.replace(cls,"");
}
}
return this;
}
//省略代碼...
}
這里其實(shí)也很簡(jiǎn)單较锡，主要是要會(huì)運(yùn)用正則匹配表達(dá)式去查找业稼，然后利用repalce等字符串的方法去替換。
在最后的removeClass中蚂蕴，我們是將cls替換成一個(gè)空字符串低散，如果這個(gè)className前后有空格的話，我們就沒(méi)有去掉掂墓，繼續(xù)保留了谦纱，所以可能會(huì)導(dǎo)致className里有許多無(wú)用的空格看成。
想要去掉的話其實(shí)也有辦法君编，我們可以利用正則對(duì)象的$1,$2...等屬性，來(lái)得到正則匹配里子匹配獲取到的對(duì)象川慌。
從而判斷是否有空格吃嘿，進(jìn)而去把空格也替換掉祠乃，具體的可以去看正則匹配的一些介紹。
今天的方法就實(shí)現(xiàn)到這里啦兑燥。
附：
既然您看都看完了亮瓷，麻煩您點(diǎn)個(gè)贊，給個(gè)star唄降瞳，謝謝您的支持
源碼地址：https://github.com/LY550275752/my-js-plug/blob/master/Ye.js
如果您不知道我在說(shuō)什么的話嘱支，推薦您從頭開(kāi)始看我的這個(gè)系列文章:
