JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation

To catch up with the stars 2021-02-23 02:24:01
javascript advanced javascript object-oriented object


Sort out the knowledge points

Lecture notes

1、JavaScript object-oriented

1.1、 Object oriented introduction

  • stay Java We learned about object orientation in , The core idea is that everything is an object .

  • stay JavaScript There is also object orientation in . Similar thinking .

 

 

1.2、 Definition and use of classes

  • Structure description

 

 

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Definition and use of classes </title>
    </head>
    <body>
       
    </body>
    <script>
       // Definition Person class
       class Person{
           // Construction method
           constructor(name,age){
               this.name = name;
               this.age = age;
          }

           //show Method
           show(){
               document.write(this.name + "," + this.age + "<br>");
          }

           //eat Method
           eat(){
               document.write(" having dinner ...");
          }
      }

       // Use Person class
       let p = new Person(" Zhang San ",23);
       p.show();
       p.eat();
    </script>
    </html>

1.3、 The definition and use of literal quantity class ***

  • Structure description

     

     

    • This is actually creating an object directly

    • When defining variables and methods in a class , The object of this class is created directly

    • Literal : That is to know what type it is from the literal meaning of the code

    • The literal quantity of an object is a pair of braces It means , We'll see later when we assign values to variables , To the right of the equal sign is a pair of braces , Then you know that the declared variable is an object

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Literal quantity defines class and uses </title>
    </head>
    <body>
       
    </body>
    <script>
       // Definition person
       let person = {
           name : " Zhang San ",
           age : 23,
           hobby : [" Listen to the teacher "," Study "],

           eat : function() {
               document.write(" having dinner ...");
          }
      };

       // Use person
       document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>");
       person.eat();
    </script>
    </html>

1.4、 Inherit

  • Inherit : Let a class and a class have the relationship of children and parents , Subclasses can use members that the parent class has permission to .

  • Inherit keywords :extends

  • Top level parent class :Object

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title> Inherit </title>
    </head>
    <body>
       
    </body>
    <script>
       // Definition Person class
       class Person{
           // Construction method
           constructor(name,age){
               this.name = name;
               this.age = age;
          }

           //eat Method
           eat(){
               document.write(" having dinner ...");
          }
      }

       // Definition Worker Class inheritance Person
       class Worker extends Person{
           constructor(name,age,salary){
               super(name,age);
               this.salary = salary;
          }

           show(){
               document.write(this.name + "," + this.age + "," + this.salary + "<br>");
          }
      }

       // Use Worker
       let w = new Worker(" Zhang San ",23,10000);
       w.show();
       w.eat();
    </script>
    </html>

1.5、 Summary

  • object-oriented

    Organize relevant data and methods as a whole , Modeling the system from a higher level , Closer to the natural mode of operation of things .

  • The definition of a class

    class class {} Literal definition

  • The use of the class

    let Object name = new Class name (); Object name . Variable name Object name . Method name ()

  • Inherit

    Let classes and classes have child parent relationships , Improve the reusability and maintainability of the code .

    Subclass extends Parent class

    Object Top level parent class

2、JavaScript Built-in objects

2.1、Number

  • Methods to introduce

 

 

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Number</title>
</head>
<body>
   
</body>
<script>
   //1. parseFloat() Convert the string floating-point number passed in to floating-point number
   document.write(Number.parseFloat("3.14") + "<br>");

   //2. parseInt()   Converts the incoming string integer to an integer
   document.write(Number.parseInt("100") + "<br>");
   document.write(Number.parseInt("200abc") + "<br>"); // Starting with numbers , Until it's not a number
   
   
   // 3. isNaN() Judge whether something is The digital
   // not a number : The digital
   console.log(Number.isNaN(NaN)); // true
   console.log(Number.isNaN(1)); // false

</script>
</html>

2.2、Math

  • Methods to introduce : random* **

 

 

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Math</title>
</head>
<body>
   
</body>
<script>
   //1. ceil(x) Rounding up
   document.write(Math.ceil(4.4) + "<br>");    // 5
   
   //2. floor(x) Rounding down
   document.write(Math.floor(4.4) + "<br>");   // 4
   
   //3. round(x) Round a number to the nearest whole number
   document.write(Math.round(4.1) + "<br>");   // 4
   document.write(Math.round(4.6) + "<br>");   // 5
   
   //4. random() random number , The return is 0.0-1.0 The range between ( With head and no tail )
   document.write(Math.random() + "<br>"); // random number
   
   //5. pow(x,y) Power operation x Of y Power
   document.write(Math.pow(2,3) + "<br>"); // 8
</script>
</html>

2.3、Date

  • Method statement

    • Construction method

     

     

    • Member method

     

     

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Date</title>
</head>
<body>
   
</body>
<script>
   // Construction method
   //1. Date() Create objects based on the current time
   let d1 = new Date();
   document.write(d1 + "<br>");

   //2. Date(value) Creates an object based on the specified millisecond value
   let d2 = new Date(10000);
   document.write(d2 + "<br>");

   //3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) Create an object based on the specified field ( Month is 0~11)
   let d3 = new Date(2222,2,2,20,20,20);
   document.write(d3 + "<br>");

   // Member method
   //1. getFullYear() Get year
   document.write(d3.getFullYear() + "<br>");

   //2. getMonth() Get month (0-11: representative 1-12 month )
   document.write(d3.getMonth() + "<br>");

   //3. getDate() Get days
   document.write(d3.getDate() + "<br>");
   document.write(d1.getDay() + "<br>");// Get the day of the week (0-6: Sunday - Saturday )

   //4. toLocaleString() Returns a string in local date format
   document.write(d3.toLocaleString());
</script>
</html>

2.4、String

  • Method statement

    • Construction method

     

     

    • Member method charAt,indexOf,subString

     

     

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>String</title>
</head>
<body>
   
</body>
<script>
   //1. Constructor creates a string object
   let s1 = new String("hello");
   document.write(s1 + "<br>");

   //2. Direct assignment
   let s2 = "hello";
   document.write(s2 + "<br>");

   // attribute
   //1. length   Gets the length of the string
   document.write(s2.length + "<br>");

   // Member method
   //1. charAt(index)     Gets the character at the specified index
   document.write(s2.charAt(1) + "<br>");

   //2. indexOf(value)   Gets the index position where the specified string appears
   document.write(s2.indexOf("l") + "<br>");

   //3. substring(start,end)   Intercepts a string according to the specified index range ( With head and no tail )
   document.write(s2.substring(2,4) + "<br>");

   //4. split(value)   Cut strings according to specified rules , Returns an array of
   let s3 = " Zhang San ,23, male ";
   let arr = s3.split(",");
   for(let i = 0; i < arr.length; i++) {
       document.write(arr[i] + "<br>");
  }

   //5. replace(old,new)   Replace the old string with the new string
   let s4 = " Can you Parachute ? Let me drop into a box . Damn .";
   let s5 = s4.replace(" Damn ","***");
   document.write(s5 + "<br>");
</script>
</html>

2.5、RegExp ***

  • Regular expressions : It's a rule for matching strings

  • It's often used to log in 、 Registration form verification

 

 

  • Method statement

    • Construction method & Member method

     

     

    • The rules

     

     

    • [] A commonplace

    • {} The number of times a rule repeats

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>RegExp</title>
</head>
<body>
   
</body>
<script>
   //1. Verify phone number
   // The rules : first place 1, Second 358, The third to eleventh digits must be numbers . Total length 11
   let reg1 = /^[1][358][0-9]{9}$/;
   document.write(reg1.test("18688888888") + "<br>");

   //2. Verify user name
   // The rules : Letter 、 Numbers 、 Underline composition . Total length 4~16
   let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
   document.write(reg2.test("zhang_san123"));
</script>
</html>

2.6、Array ***

  • Member method :push,pop

 

 

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Array</title>
</head>
<body>
   
</body>
<script>

   let arr = [1,2,3,4,5];

   //1. push( Elements )   Add elements to the end of the array
   arr.push(6);
   document.write(arr + "<br>");

   //2. pop()         Delete the element at the end of the array
   arr.pop();
   document.write(arr + "<br>");

   //3. shift()       Delete the top element of the array
   arr.shift();
   document.write(arr + "<br>");

   //4. includes( Elements ) Determine whether the array contains the specified element
   document.write(arr.includes(2) + "<br>");

   //5. reverse()     Invert array elements
   arr.reverse();
   document.write(arr + "<br>");

   //6. sort()         Sort array elements
   arr.sort();
   document.write(arr + "<br>");

</script>
</html>

2.7、Set

  • JavaScript Medium Set aggregate , Element uniqueness , The access order is consistent

  • Method statement

 

 

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Set</title>
</head>
<body>
   
</body>
<script>
   // Set()   Create a collection object
   let s = new Set();

   // add( Elements )   Additive elements
   s.add("a");
   s.add("b");
   s.add("c");
   s.add("c");

   // size attribute   Get the length of the collection
   document.write(s.size + "<br>");    // 3

   // keys()     Get iterator object
   let st = s.keys();
   for(let i = 0; i < s.size; i++){
       document.write(st.next().value + "<br>");
  }

   // delete( Elements ) Deletes the specified element
   document.write(s.delete("c") + "<br>");
   let st2 = s.keys();
   for(let i = 0; i < s.size; i++){
       document.write(st2.next().value + "<br>");
  }
</script>
</html>

2.8、Map

  • JavaScript Medium Map aggregate ,key only , The access order is consistent

  • Method statement

 

 

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Map</title>
</head>
<body>
   
</body>
<script>
   // Map()   establish Map A collection of objects
   let map = new Map();

   // set(key,value) Additive elements
   map.set(" Zhang San ",23);
   map.set(" Li Si ",24);
   map.set(" Li Si ",25);

   // size attribute     Get the length of the collection
   document.write(map.size + "<br>");

   // get(key)     according to key obtain value
   document.write(map.get(" Li Si ") + "<br>");

   // entries()   Get iterator object
   let et = map.entries();
   for(let i = 0; i < map.size; i++){
       document.write(et.next().value + "<br>");
  }

   // delete(key) according to key Delete key value pair
   document.write(map.delete(" Li Si ") + "<br>");
   let et2 = map.entries();
   for(let i = 0; i < map.size; i++){
       document.write(et2.next().value + "<br>");
  }
</script>
</html>

2.9、Json ***

  • JSON(JavaScript Object Notation): Is a lightweight data exchange format

    • It is based on ECMAScript A subset of the specification , Use text format completely independent of programming language to store and represent data

    • A simple and clear hierarchy makes JSON Become the ideal data exchange language . Easy to read and write , At the same time, it is also easy to analyze and Generate , And effectively improve the network transmission efficiency

     

     

  • Method statement

 

 

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>JSON</title>
</head>
<body>
   
</body>
<script>
   // Define weather objects
   let weather = {
       city : " Beijing ",
       date : "2088-08-08",
       wendu : "10° ~ 23°",
       shidu : "22%"
  };

   //1. Convert the weather object to JSON Format string
   let str = JSON.stringify(weather);
   document.write(str + "<br>");
   //{"city":" Beijing ","date":"2088-08-08","wendu":"10° ~ 23°","shidu":"22%"}
   //json: key and value Must be wrapped in double quotation marks ,value If it's a number, it can be omitted
   //2. take JSON The format string is parsed into JS object
   let weather2 = JSON.parse(str);
   document.write(" City :" + weather2.city + "<br>");
   document.write(" date :" + weather2.date + "<br>");
   document.write(" temperature :" + weather2.wendu + "<br>");
   document.write(" humidity :" + weather2.shidu + "<br>");
</script>
</html>
  • json Analysis chart :

     

     

2.10、 Form verification ***

  • Case description

 

 

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> Form verification </title>
   <link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
   <div class="login-form-wrap">
       <h1> Black horse programmer </h1>
       <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
           <label>
               <input type="text" id="username" name="username" placeholder="Username..." value="">
           </label>
           <label>
               <input type="password" id="password" name="password" placeholder="Password..." value="">
           </label>
           <input type="submit" value=" register ">
       </form>
   </div>
</body>
<script>
   //1. Submit events for form binding
   // Form submit Once you click the button , Will trigger first onsubimit Event processing function :
   // (1) If the handler returns false, Then you don't submit the form  
   // (2) If the handler returns true, Then you submit the form ( Submit Form : Jump to form Of action Corresponding url)
   document.getElementById("regist").onsubmit = function() {
       //2. Get the filled in user name and password
       let username = document.getElementById("username").value;
       let password = document.getElementById("password").value;

       //3. Judge whether the user name conforms to the rules 4~16 Three pure letters
       let reg1 = /^[a-zA-Z]{4,16}$/;
       if(!reg1.test(username)) {
           alert(" The user name does not conform to the rules , Please enter 4 To 16 The pure letter of bit !");
           return false;
      }

       //4. Judge whether the password meets the rules 6 Digit pure number
       let reg2 = /^[\d]{6}$/;
       if(!reg2.test(password)) {
           alert(" The password doesn't fit the rules , Please enter 6 It's a pure digital password !");
           return false;
      }

       //5. If all the conditions are not met , Then submit the form
       return true;
  }
   
</script>
</html>

2.11、 Summary

  • The built-in object is JavaScript Special data types with properties and methods provided .

  • Digital date Number Math Date

  • character string String RegExp

  • Array set Array Set Map

  • Structured data JSON

3、JavaScript BOM

  • BOM(Browser Object Model): Browser object model .

  • Encapsulate the various components of the browser into different objects , It's convenient for us to operate .

 

 

3.1、Windows Window object

  • Timer ***

    • Unique identification setTimeout( function , Millisecond value ): Set one time timer ( Delay timer )

      • The first parameter , Just pass the function name , No call required

    • clearTimeout( identification ): Cancel the one-time timer

    • Unique identification setInterval( function , Millisecond value ): Set the cycle timer ( Interval timer )

      • The first parameter , Just pass the function name , No call required

    • clearInterval( identification ): Cancel the cycle timer

  • Loading event ***

    • window.onload: The function to trigger this event after the page is loaded

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>window Window object </title>
   <script>
       // One 、 Timer
       function fun(){
           alert(" It's time to get up !");
      }
   
       // Set one time timer
       //let d1 = setTimeout("fun()",3000);//d1 It's a timer id
       let d1 = setTimeout(fun,3000);// Recommend writing
       // Cancel the one-time timer
       //clearTimeout(d1);
   
       // Set the cycle timer
       //let d2 = setInterval("fun()",3000);
       let d2 = setInterval(fun,3000);// Recommend writing
       // Cancel the cycle timer
       //clearInterval(d2);
   
       // Loading event : When body Code parsing is equivalent to loading the interface
       window.onload = function(){
           let div = document.getElementById("div");
           alert(div);
      }
   </script>
</head>
<body>
   <div id="div">dddd</div>
</body>
<!-- <script>
   // One 、 Timer
   function fun(){
       alert(" It's time to get up !");
   }

   // Set one time timer
   //let d1 = setTimeout("fun()",3000);
   // Cancel the one-time timer
   //clearTimeout(d1);

   // Set the cycle timer
   //let d2 = setInterval("fun()",3000);
   // Cancel the cycle timer
   //clearInterval(d2);

   // Loading event
   let div = document.getElementById("div");
   alert(div);
</script> -->
</html>

3.2、Location Address bar object

  • href attribute

    By setting href To change the address bar address , Jump the interface .

     

     

  • Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>location Address bar object </title>
   <style>
       p{
           text-align: center;
      }
       span{
           color: red;
      }
   </style>
</head>
<body>
   <p>
      Registered successfully !<span id="time">5</span> Automatically jump to the home page in seconds ...
   </p>
</body>
<script>
   //1. Define methods . Change seconds , Jump to the page
   let num = 5;
   function showTime() {
       num--;

       if(num <= 0) {
           // Jump page
           location.href = "index.html";  ***
      }

       let span = document.getElementById("time");
       span.innerHTML = num;
  }

   //2. Set the cycle timer , Every time 1 Second execution showTime Method
   setInterval("showTime()",1000);
</script>
</html>

3.3、 Case study - Dynamic advertising

  • Case analysis and implementation

<!-- Advertising images -->
<img src="img/ad_big.jpg" id="ad_big" width="100%"/>
  • stay css In the style ,display Attributes can control whether an element is displayed

style="display: none;"
  • Set the timer ,3 Show the ad image in seconds

//1. Set the timer ,3 Show the ad image in seconds 
setTimeout(function(){
   let img = document.getElementById("ad_big");
   img.style.display = "block";
},3000);
  • Set the timer ,3 Hide the ad image in seconds

//2. Set the timer ,3 Hide the ad image in seconds 
setTimeout(function(){
   let img = document.getElementById("ad_big");
   img.style.display = "none";
},6000);

3.4、 Summary

  • BOM(Browser Object Model): Browser object model .

  • Encapsulate the various components of the browser into different objects , It's convenient for us to operate .

    • Window: Window object

    • Location: Address bar object

    • Navigator: Browser object

    • History: Current window history object

    • Screen: Display screen objects

  • Window Window object

    • setTimeout()、clearTimeout(): One time timer

    • setInterval()、clearInterval(): Cycle timer

    • onload event : When the page is loaded, the execution function is triggered

  • Location Address bar object href attribute : Jump to the specified URL Address

4、JavaScript encapsulation

Encapsulate ideas

  • encapsulation : Encapsulate and hide complex operations , Provide more simple operation to the outside world .

  • How to get elements

    • document.getElementById(id value ): according to id Value get element

    • document.getElementsByName(name value ): according to name Attribute values get elements

    • document.getElementsByTagName( Tag name ): Get elements by tag name

  • Code implementation

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> encapsulation </title>
    </head>
    <body>
    <div id="div1">div1</div>
    <div name="div2">div2</div>
    </body>
    <script src="my.js"></script>
    <script>
    let div1 = getById("div1");
    alert(div1);
    // let div1 = document.getElementById("div1");
    // alert(div1);
    // let divs = document.getElementsByName("div2");
    // alert(divs.length);
    // let divs2 = document.getElementsByTagName("div");
    // alert(divs2.length);
    </script>
    </html>

    js encapsulation

    function getById(id){
    return document.getElementById(id);
    }
    function getByName(name) {
    return document.getElementsByName(name);
    }
    function getByTag(tag) {
    return document.getElementsByTagName(tag);
    }

Our previous operations were all based on native JavaScript Of , More complicated . JQuery It's a front-end framework technology , in the light of JavaScript A series of encapsulation is carried out , It makes the operation very simple ! Look forward to it ……

版权声明
本文为[To catch up with the stars]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222224403590w.html

  1. vue判断elementui中el-form是否更新变化,变化就提示是否保存,没变就直接离开
  2. 算法题:两数之和——JavaScript及Java实现
  3. 高性能 Nginx HTTPS 调优
  4. Why Vue uses asynchronous rendering
  5. day 31 jQuery进阶
  6. day 30 jQuery
  7. CSS whimsy -- using background to create all kinds of wonderful backgrounds
  8. Why are more and more people learning front end?
  9. What do you do with 4K front-end development?
  10. 8 years of front-end development knowledge precipitation (do not know how many words, keep writing it...)
  11. What is the annual salary of a good web front end?
  12. Front end novice tutorial! How to get started with web front end
  13. Will the front end have a future?
  14. Is the front end hard to learn?
  15. Seven new Vue combat skills to improve efficiency in 2021!
  16. Is front end learning difficult?
  17. How about the process of Web front-end development and self-study?
  18. Front end learning route from zero basis to proficient
  19. What is the basis of learning front end?
  20. What knowledge points need to be learned for self-study front end? How long can I become a front-end Engineer?
  21. An inexperienced front-end engineer, what are the common problems when writing CSS?
  22. HttpServletRequest get URL (parameter, path, port number, protocol, etc.) details
  23. Springboot starts http2
  24. Enabling http2.0 in spring boot
  25. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  26. Using JavaScript in Safari browser history.back () the page will not refresh after returning to the previous page
  27. vue.js Error in win10 NPM install
  28. In less than two months, musk made more than $1 billion, more than Tesla's annual profit
  29. Springboot starts http2
  30. Vue event bus
  31. JQuery easy UI tutorial: custom data grid Pagination
  32. Using okhttp and okhttpgo to obtain onenet cloud platform data
  33. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  34. HTTP 1. X learning notes: an authoritative guide to Web Performance
  35. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  36. HTTP 1. X learning notes: an authoritative guide to Web Performance
  37. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  38. Event bubble and capture in JavaScript
  39. The root element is missing solution
  40. Event bubble and capture in JavaScript
  41. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  42. Javascript数据类型
  43. HTTP interface debugging tool! 48000 star HTTP command line client!
  44. Parameter encryption of front end URL link band
  45. HTTP interface debugging tool! 48000 star HTTP command line client!
  46. Three front end frameworks: data binding and data flow
  47. Reading Axios source code (1) -- exploring the realization of basic ability
  48. Event bubble and capture in JavaScript
  49. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  50. R & D solution e-Car front end monitoring system
  51. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  52. R & D solution e-Car front end monitoring system
  53. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  54. 解决ajax跨域问题【5种解决方案】
  55. Top ten classic sorting of JavaScript
  56. HTTP 1. X learning notes: an authoritative guide to Web Performance
  57. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  58. My http / 1.1 is so slow!
  59. Why Vue uses asynchronous rendering
  60. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for