Of Stack

js Implementation jQuery Encapsulation Simple Method and Chain Operation Detailed Explanation

  • 2021-11-01 02:22:11
  • OfStack
Directory 1. Implement the $(". box1"). click () method
2. Implement the $("div"). click () method
3. Consider three cases of parameters in $()
4. Implement the on method in jq
5. Implement chain operation
6. Implement the eq method in jq
7. Implement the end method in jq
8. Implement the css method in jq
Summarize

I use this article to explain how to use js to realize the simple method of encapsulating jQuery.

In this article, js implements the following methods of jquery, which I divide into eight small goals

Implement the $(". box1"). click () method Implement the $("div"). click () method Consider three cases of parameters in $() Implementation of on method in jq Implement chain operation Implementation of eq method in jq Implementation of end method in jq Implementation of css method in jq

There are incorrect places, please point them out in the comment area, thank you.

1. Implement the $(". box1"). click () method

First of all, we set the first small goal, that is, how to realize the function of jQuery code below step by step. 


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 // Same as 1 If you operate under a file, remember to delete the following introduced 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>
 Copy code  

 $(".box1").click(()=>{
 console.log(456);
 })

Ok, to get down to business, let's analyze the code of jQuery above.

$(". box1") implements the functionality of the selector. $(". box1"). click is the selector + calling the click method Finally, pass in the function in click.

The first small goal is to encapsulate js to realize the functions of the above code. We take a three-step strategy to achieve it.

js Implementation $(". box1") Implement $(". box1"). click () Implement $(". box1"). click (() = > { console.log("123") } )

Step 1 is to implement $(". box1") with js, right 


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

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

 //  Realization $(".box1")
 let res = $(".box1");
 console.log(res);

Does this accomplish (". box1") by building the () method and returning an jquery instance?

Well, let's move on to Step 2 to implement $(". box1"). click (). I believe you can see that there is one more click method in jquery class. 


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

 click() {
  console.log(" Executed click Method ");
 }
 }

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

 //  Realization $(".box1").click()
 let res = $(".box1").click();
 console.log(res);

Next, we proceed to step 3 to implement $(". box1"). click (() = > {console. log ("123")}). 


 //  Realization $(".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);
 }

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

So far, we have achieved the first small goal. Do you think it is simple, ok? Next, we will continue to the second small goal.

2. Implement the $("div"). click () method

The second small goal is not difficult, that is, considering that there are multiple div elements that need to be bound with click events. If we use selectSelectorAll to get elements, how to deal with them is actually quite simple, that is, there is one more loop in click method to get the values in NodeList. I directly on the code, we try a try to know. 


<!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> //  Realization $(".box1").click(() => {console.log("123")})
 class jquery {
 constructor(arg) {
  // Below element What is saved is NodeList Object, which is the 1 An array of classes has length Attribute 
  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);
 }

 // Realization $(".box1").click(() => {console.log("123")})
 $("div").click(() => {
 console.log("123")
 }); </script>

</html>

Ok, I have accomplished two small goals. I believe you already have a sense of accomplishment.

3. Consider three cases of parameters in $()

Next, for the third small goal, let's consider the cases where the parameters in $() are different under 1. I will list three cases first. (There may be other situations, so I won't talk about them here.)

1. Case 1: That is, the $() parameter is a string 


$(".box1")

2. Case 2: This is the case where the $() argument is a function. 


// Argument is a function 
 $(function() {
 console.log("123");
 })

3. Case 3: The $() parameter is the node obtained by NodeList object or selectSelect 


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

Next, the third small goal is to write functions to realize the three situations. First, we add the addEles method and modify the click method above 


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

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

Next, three processing methods of different parameters are implemented 


 $(".box1").click(()=>{
 console.log(456);
 })
0

4. Implement on method in jq

Next, implement the on method of jq for the fourth small goal 


 $(".box1").click(()=>{
 console.log(456);
 })
1

Under re-test, ok does not 


 $(".box1").click(()=>{
 console.log(456);
 })
2

5. Implement chain operation

Next, realize the fifth small goal to realize the chain operation of jq

By adding return and this to on and click, the chain can be realized 


// Chain operation 
 // Focus, in on And click Add to return this Chain can be realized 
 // click Method 
 click(fn) {
  for(let i = 0; i < this.length; i++) {
  this[i].addEventListener("click", fn);
  }
  return this; 
  // console.log(this); 
 }

 // on Method 
 on(eventName, fn) {
  let eventArray = eventName.split(" ");
  // Consider multiple nodes 
  for(let i = 0; i < this.length; i++) {
  // Consider multiple events 
  for(let j = 0; j < eventArray.length; j++) {
   this[i].addEventListener(eventArray[j], fn);
  }
  }
  return this;
 }

6. Implement the eq method in jq

Next, implement the sixth small goal to implement the eq method in jq 


 $(".box1").click(()=>{
 console.log(456);
 })
4

Here, the process of realizing new through new1 jquery should be clear to everyone. Let's review 1:

Execute function Automatically create 1 empty object Point the prototype of an empty object to the prototype property of the constructor Bind an empty object to the function's internal this If renturn is followed by an object, this object is returned. Automatically returns this object if not followed

7. Implement the end method in jq

Achieve the seventh small goal to implement the end method in jq. To do this, in addition to adding the end () method, we have to add the parameter root to constructor, add the attribute prevObject, and add the parameter this to the eq method. 


 $(".box1").click(()=>{
 console.log(456);
 })
5

8. Implement the css method in jq

In jq, css can get styles, set 1 style or more styles 


 $(".box1").click(()=>{
 console.log(456);
 })
6

Next, the css method is implemented 


 $(".box1").click(()=>{
 console.log(456);
 })
7

Add cssNumber method to determine the attribute name without adding px 


//css Method 
 $.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
}

Finally, offer the complete code. If the big brothers feel good, give a compliment 


 $(".box1").click(()=>{
 console.log(456);
 })
9

Summarize

Related articles: