我在樂字節學習前端的第九天-js實現jQuery的簡單方法和鏈式操做

時間 2021-02-18

標籤 css html jquery ajax 數組函數測試 flex this spa 欄目 JavaScript 简体版

原文原文鏈接

我用這篇文章來理一理如何用js去實現封裝jQuery的簡單方法。

文末有完整代碼連接，須要代碼的朋友直接看文末

本文js實現了下面jquery的幾種方法，我將它分爲8個小目標

實現$(".box1").click( )方法

實現$("div").click( )方法

考慮$( )中參數的三種狀況

實現jq中的on方法

實現鏈式操做

實現jq中的eq方法

實現jq中的end方法

實現jq中的css方法

有不正確的地方還望你們在評論區指出來，謝謝啦。

1. 實現$(".box1").click( )方法

首先，咱們定第一個小目標，就是如何一步一步去實現下方jQuery代碼的功能。css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
//同一個文件下操做的話，後面記得刪除下面引入的cdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
<script>
$(".box1").click(()=>{
console.log(456);
})
</script>
</html>html

這裏說一下哈，不會jQuery的小夥伴也別慌，只要你有一點點js基礎，花個10分鐘到jquery教程簡單瞭解一下便可。

$(".box1").click(()=>{
console.log(456);
})
複製代碼jquery

好了，言歸正傳，咱們來分析上面jQuery的代碼。ajax

$(".box1") 就是實現了選擇器的功能。
$(".box1").click 就是選擇器 + 調用click方法
最後在click裏面傳入函數。

第一個小目標就是本身封裝js來實現上面代碼的功能。咱們分三步走戰略來實現。數組

js實現 $(".box1")

實現 $(".box1").click()

實現 $(".box1").click( ( ) => { console.log("123") } )

第一步就是先用js實現 $(".box1")，對吧函數

// 實現$(".box1")
class jquery {
constructor(arg) {
console.log(document.querySelector(arg));
}
}

function $(arg) {
return new jquery(arg);
}

// 實現$(".box1")
let res = $(".box1");
console.log(res);
複製代碼測試

這樣是否是就經過構建()方法並返回jquery實例，實現了()方法並返回_jquer**y_實例，實現了(".box1")呢。flex

那好，接下來咱們進行第二步就是實現 $(".box1").click()。相信你們也看出來了，就是在jquery類中多了一個click方法。this

// 實現$(".box1").click()
class jquery {
constructor(arg) {
console.log(document.querySelector(arg));
}

click() {
console.log("執行了click方法");
}
}

function $(arg) {
return new jquery(arg);
}

// 實現$(".box1").click()
let res = $(".box1").click();
console.log(res);
複製代碼spa

接下來，咱們進行第三步就是實現 $(".box1").click( ( ) => { console.log("123") } )。

// 實現$(".box1").click(() => {console.log("123")})
class jquery {
constructor(arg) {
this.element = document.querySelector(arg);
// console.log(element);
}

click(fn) {
this.element.addEventListener("click", fn);
}

}

function $(arg) {
return new jquery(arg);
}

//實現$(".box1").click(() => {console.log("123")})
$(".box1").click(() => {
console.log("123")
});
複製代碼

到此爲止，咱們實現了第一個小目標，你們是否是以爲簡單呢，ok，接下來咱們繼續第二個小目標。

2. 實現$("div").click( )方法

第二個小目標也不難，就是考慮有多個div元素須要綁定click事件，咱們用selectSelectorAll來獲取元素的話，如何處理，其實也挺簡單，就是在click方法中多出一個循環，去獲取NodeList中的值。我直接上代碼了，你們試一試就知道啦。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>

<body>
<div class="box1"></div>

<div class="box2"></div>
</body>

<script>
// 實現$(".box1").click(() => {console.log("123")})
class jquery {
constructor(arg) {
//下面element存的是NodeList對象，它是一個類數組有length屬性
this.element = document.querySelectorAll(arg);
}

click(fn) {
for(let i = 0; i < this.element.length; i++) {
this.element[i].addEventListener("click", fn);
}
}

}

function $(arg) {
return new jquery(arg);
}

//實現$(".box1").click(() => {console.log("123")})
$("div").click(() => {
console.log("123")
});

</script>

</html>

好了，完成兩個小目標了，相信你已經有成就感了。

3. 考慮$( )中參數的三種狀況

接下來第三個小目標咱們來考慮一下$( )中參數不一樣的狀況，我先將三種狀況列出來。（可能還有其餘狀況，這裏就不說了）

1.狀況一：就是$( )參數爲字符串

$(".box1")
複製代碼

2.狀況二：就是$( )參數爲函數的狀況。

//參數爲函數
$(function() {
console.log("123");
})
複製代碼

3.狀況三：就是$( )參數爲NodeList對象或selectSelect得到的節點

// 狀況三
$(document.querySelectorAll("div")).click(()=>{
console.log("123");
})
$(document.querySelector("div")).click(()=>{
console.log("456");
})

接下來第三個小目標是手寫函數來實現三種狀況。首先咱們增長addEles方法，修改上面的click方法

addEles(eles){
for (let i = 0; i < eles.length; i++) {
this[i] = eles[i];
}
this.length = eles.length;
}

// 實現$(".box1").click(() => {console.log("123")})
click(fn) {
for(let i = 0; i < this.length; i++) {
this[i].addEventListener("click", fn);
}
}

接下來實現三種不一樣參數的處理方法

constructor(arg) {

//狀況一
if(typeof arg === 'string') {
this.addEles(document.querySelectorAll(arg));
}else if(typeof arg === 'function') {
//狀況二
document.addEventListener("DOMContentLoaded", arg);
}else {
//狀況三
if(typeof arg.length === 'undefined') {
this[0] = arg;
this.length = 1;
}else {
this.addEles(arg);
}
}

}

4. 實現jq中的on方法

接下來實現第四個小目標實現jq的on方法

// on方法
on(eventName, fn) {
let eventArray = eventName.split(" ");
//考慮多個節點
for(let i = 0; i < this.length; i++) {
//考慮多個事件
for(let j = 0; j < eventArray.length; j++) {
this[i].addEventListener(eventArray[j], fn);
}
}
}

再測試下ok不

// on方法
$("div").on("mouseover mousedown",function(){
console.log("on方法");
})

5. 實現鏈式操做

接下來實現第五個小目標實現jq的鏈式操做

劃重點，在on和click中添加return this便可實現鏈式

//鏈式操做
//劃重點，在on和click中添加return this便可實現鏈式
// click方法
click(fn) {
for(let i = 0; i < this.length; i++) {
this[i].addEventListener("click", fn);
}
return this;
// console.log(this);
}

6. 實現jq中的eq方法

接下來實現第六個小目標實現jq中的eq方法

//eq方法
eq(index) {
return new jquery(this[index]);
}

這裏經過new一個jquery實現 new的過程你們應該清楚吧，咱們溫習一下：

執行函數
自動建立一個空對象
將空對象的原型指向構造函數的prototype屬性
將空對象和函數內部this綁定
若是renturn後跟着對象，返回這個對象。沒跟的話就自動返回this對象

7. 實現jq中的end方法

實現第七個小目標實現jq中的end方法。要實現這個功能，除了新增end( )方法，咱們還得在構造函數上實現，constructor新增參數root，新增屬性prevObject，並在eq方法這種新增參數this。

constructor(arg, root) {
if(typeof root === "undefined") {
this.prevObject = [document];
}else {
this.prevObject = root;
}
//eq方法
eq(index) {
return new jquery(this[index], this);
}
//end方法
end() {
return this.prevObject;
}

8. 實現jq中的css方法

在jq中css能夠獲取樣式，設置一個樣式或多個樣式

// 狀況一 :獲取樣式（只去獲取第一個元素）

let res = $("div").css("background");
console.log(res);

// 狀況二（設置樣式）

$("div").css("background","yellow");

// // 狀況三（設置多個樣式）

$("div").css({background:"black",width:200,opacity:0.3});

接下來實現css方法

//css方法

css(...args) {
if(args.length === 1) {

//狀況一：獲取樣式
if(typeof args[0] === 'string') {
return this.getStyle(this[0], args[0]);
}else {
//狀況三：設置多個樣式
for(let i = 0; i < this.length; i++) {
for(let j in args[0]) {
this.setStyle(this[i], j, args0);
}

}
}
}else {
//狀況三
for(let i = 0; i < this.length; i++) {
this.setStyle(this[i], args[0], args[1]);
}
}
} //css方法
css(...args) {
if(args.length === 1) {
//狀況一：獲取樣式
if(typeof args[0] === 'string') {
return this.getStyle(this[0], args[0]);
}else {
//狀況三：設置多個樣式
for(let i = 0; i < this.length; i++) {
for(let j in args[0]) {
this.setStyle(this[i], j, args0);
}

}
}
}else {
//狀況三
for(let i = 0; i < this.length; i++) {
this.setStyle(this[i], args[0], args[1]);
}
}
}

增長cssNumber方法來肯定不用加px的屬性名

最後獻上完整代碼，若是大哥們覺的不錯，給個讚唄

}
.box2:hover {
transform: scaleX(2);
width: 200px;
height: 100px;
}
</style>
</head>

<body>
<div class="box1"></div>

<div class="box2"></div>
<button>點擊</button>
</body>

<script>

class jquery {

constructor(arg, root) {
if(typeof root === "undefined") {
this.prevObject = [document];
}else {
this.prevObject = root;
}
//狀況一
if(typeof arg === 'string') {
this.addEles(document.querySelectorAll(arg));
}else if(typeof arg === 'function') {
//狀況二
document.addEventListener("DOMContentLoaded", arg);
}else {
//狀況三
if(typeof arg.length === 'undefined') {
this[0] = arg;
this.length = 1;
}else {
this.addEles(arg);
}
}

}

//增長方法
addEles(eles){
for (let i = 0; i < eles.length; i++) {
this[i] = eles[i];
}
this.length = eles.length;
}

//鏈式操做
//劃重點，在on和click中添加return便可實現鏈式
// click方法
click(fn) {
for(let i = 0; i < this.length; i++) {
this[i].addEventListener("click", fn);
}
return this;
// console.log(this);
}

// on方法
on(eventName, fn) {
let eventArray = eventName.split(" ");
//考慮多個節點
for(let i = 0; i < this.length; i++) {
//考慮多個事件
for(let j = 0; j < eventArray.length; j++) {
this[i].addEventListener(eventArray[j], fn);
}
}
return this;
}

//eq方法
eq(index) {
return new jquery(this[index], this);
}

//end方法
end() {
return this.prevObject;
}

//css方法
css(...args) {
if(args.length === 1) {

}
}
}else {
//狀況三
for(let i = 0; i < this.length; i++) {
this.setStyle(this[i], args[0], args[1]);
}
}
}

getStyle(ele, styleName) {
return window.getComputedStyle(ele, null)[styleName];
}
setStyle(ele, styleName, styleValue) {
if(typeof styleValue === "number" && !(styleName in $.cssNumber)) {
styleValue = styleValue + "px";
}
ele.style[styleName] = styleValue;
}

}

function $(arg) {
return new jquery(arg);
}

//css方法用
$.cssNumber = {
animationIterationCount: true,
columnCount: true,
fillOpacity: true,
flexGrow: true,
flexShrink: true,
fontWeight: true,
gridArea: true,
gridColumn: true,
gridColumnEnd: true,
gridColumnStart: true,
gridRow: true,
gridRowEnd: true,
gridRowStart: true,
lineHeight: true,
opacity: true,
order: true,
orphans: true,
widows: true,
zIndex: true,
zoom: true
}
// //實現狀況一：$(".box1")
// $("div").click(() => {
// console.log("123")
// });

// //實現狀況二：參數爲函數
// $(function() {
// console.log('狀況2');
// })

// // 狀況三
// $(document.querySelectorAll("div")).click(()=>{
// console.log("123");
// })
// $(document.querySelector("div")).click(()=>{
// console.log("456");
// })

// // on方法
// $("div").on("mouseover mousedown",function(){
// console.log("on方法");
// })

//鏈式操做
// $("div").click(() => {
// console.log("click方法")
// }).on("mouseover", function() {
// console.log('鏈式on方法');
// })

// $("div").on("mouseover", function() {
// console.log('鏈式on方法');
// }).click(() => {
// console.log("click方法")
// })

// //eq方法
// $("div").eq(0).click(() => {
// console.log("eq方法")
// })

//endf方法
// let res = $("div").eq(0).eq(0).eq(0).end();
// console.log(res);

//css方法

// 狀況一 :獲取樣式（只去獲取第一個元素） // let res = $("div").css("background"); // console.log(res); // 狀況二（設置樣式） // $("div").css("background","yellow"); // // 狀況三（設置多個樣式） // $("div").css({background:"black",width:200,opacity:0.3});</script></html>