preface

Recently I was reading some interviews. I went to see other people’s questions in the interview, and then I sorted out the questions and answers for each interview. (Most likely to be updated later)

About this article

This article is because recently cast a didi front-end internship position, so in the niuke check about the didi face, so see this didi SP front end, sort out the answer to the question inside. Of course, if where speak bad or speak wrong, still hope everybody comments correct my mistake. React (React)

Didi SP side questions and solutions

1. Handwritten publish and subscribe model

I was so confused about the first question that I went to dig gold and looked up the publish and subscribe model. It turned out to be knowledge about design patterns. This piece of knowledge is missing, then fill, because I haven’t figured it out here for the time being not in detail.

2. Bidirectional binding principle of Vue

Vue.js uses data hijacking combined with publiser-subscriber mode. It hijacks the setter and getter of each attribute through Object.defineProperty() to publish messages to subscribers when data changes and trigger corresponding listener callback.

  • ① Implement data listener Observer, can monitor all the attributes of the data object, if there is any change can get the latest value and notify the subscriber
  • ② Implement an instruction parser Compile
  • Implement a Watcher that acts as a bridge between the Observer and Compile, subscribing to and receiving notification of each property change, and executing the corresponding callback function of the instruction binding to update the view
  • ④ Mvvm entry function, integration of the above three

3. Vue vs. React

“Similarities:”

  • 1) useVirtural Dom
  • ② They all use the componentization idea and the process is basically the same
  • ③ Both have mature communities that support server-side rendering

“Differences:”

  • 1 component communication is different
  • ② The template rendering method is different
  • ③ Diff algorithm is different
  • (4) Different event mechanisms
  • ⑤ The implementation principles of monitoring data changes are different

(Here I hope you can help me to add)

4. Do you know Webpack and tell me how to do it? The difference between loder and plugin

What is PI (1)?

  • Webpack is a module packaging tool that you can use to manage module dependencies in your project and compile the static files needed to output your modules. It can well manage and package the HTML, CSS, JS and static files used in development, so that development is more efficient. Webpack has module loaders for different types of dependencies, analyzes the dependencies between module dependencies, and finally merges them to generate optimized static resources.

(2) How? (Basic function and working principle)

  • Code conversion, file optimization, code segmentation, module combination, automatic refresh, code verification, automatic release

(3) Differences between Loder and Plugin

  • “Loder” is to give WebPack the ability to load and parse non-JS files
  • “Plugin” can extend the functions of WebPack and make webPack more flexible. You can change the output during the build through the WebPack API

5. Axios? What does Jsonp work on?

(1) What is Axios?

  • Axios is a Promise-based HTTP library that can be used in browsers and Node.js

(2) “What is Axios made of?” (expand)

  • Created from the browserXMLHttpRequests
  • Create HTTP requests from Node.js
  • Supporting Promise Api
  • Intercept requests and responses
  • You can cancel the request
  • Automatically convert JSON data
  • The client supports XSRF defense

(3) What is Jsonp? (Jsonp principle)

  • By dynamically creating a Script tag whose SRC points to a non-cognate URL and passing a callback argument as a function call with a function name and a set of parameters, the page executes a callback and processes the data when it receives the response

6. What does readyState=1, 2, 3 mean for handwritten Ajax?

(1) Handwritten Ajax (simple version)

function ajax ( url , successFn ){

    const xhr = new XMLHttpRequest()
    xhr.open( 'GET' , url , true)
    
 xhr.onreadystatechange = function() {  if( xhr.readyState == 4) { if( xhr.status == 200) { successFn(xhr.responseText)  }  }  }   xhr.send(null) } Copy the code

(2) What is readyState? What does readyState=1, 2, 3 mean?

  • Is the status of the HTTP request. When an XMLHttpRequest is first created, the value of this property starts at 0 and increases to 4 until the full HTTP response is received
  • 0 :(” uninitialized “) object established but not initialized (open method not called)
  • 1: (“Initialize the“Object has been created and has not yet been calledsendmethods
  • 2: (“To send data“)sendMethod was called, but the current state and HTTP header are unknown
  • 3: (“Data transfer“Partial data received because response and HTTP headers are incompleteresponseBodyandresponseTextThere was an error getting partial data
  • 4: (“complete“) After receiving the data, you can passresponseXmlandresponseTextGet the complete response data

7. Talk about deep and shallow copies

Here we refer to deep and shallow copies of objects

Shallow copy: Creates a new object with an exact copy of the original object’s property values. If the property is a primitive type, it copies the value of the primitive type, and if the property is a reference type, it copies the memory address, so if one object changes the address, it affects the other object

“Shallow copy method“

  • Objcet.assign
  • Extended operators…
  • Array.prototype.slice
  • Array.prototype.concat

Deep copy: A complete copy of an object from the heap, creating a new area of the heap to store the new object, and modifying the new object does not affect the original object

“Deep copy method“

  • JSON.stringify()
  • Handwritten deep copy

8. Write deep copies by hand

The old problem goes straight to the code

function deepClone( obj = { } ){

      if( typeofobj ! = ='object' || obj == null) {            return obj
      }
  let result  if( obj instanceof Array) { result = [ ]  } else {  result = { }  }   for( let key in obj ){  if( obj.hasOwnProperty(key) ){  result[key] = deepClone( obj[key] )  }  }   return result } Copy the code

9. How is setTimeout implemented? Put it in a queue? When does the code go in?

I originally thought it would be a simple topic about task queues and Event loops, but I looked at the answer written by the owner of this article

❝

It’s not implemented with queues, it’s implemented with hash objects, it’s put into the front end of didi SP when the code encounters it

❞

I also did not want to understand at a draught is what meaning, I searched the relevant knowledge, also can not search, do not know have big guy can give me popular science once

10. What is the difference between arrow functions and normal functions

“Arrow function differences:“

  • ① Can not be called by the new keyword, there is no prototype
  • This binding cannot be changed by the outer non-arrow function, so using call, apply, and bind will not affect the binding
  • (3) Arguments are not supported, so depending on the scope chain, you will get the arguments of the outer function
  • (4) You cannot name parameters repeatedly
  • ⑤ Implicit return

11. Talk about HTTP and HTTPS

Here’s how to reinforce your HTTP body of knowledge

HTTP

“HTTP Benefits” :

  • ① Flexible and extensible. One is that the syntax only provides the basic format, space to separate words, newline to separate fields and so on. The other is the form of transmission that not only can transmit text, but also can transmit pictures, video and other arbitrary data
  • ② Request-reply mode. Usually, one party sends the message and the other party receives the message or acts accordingly
  • ③ Reliable transmission. HTTP is based on TCP/IP, so it inherits this feature.
  • (4) There is no status. This is the scene of the answer

“HTTP disadvantages” :

  • (1) Stateless, sometimes, need to save information, such as shopping system, need to retain customer information and so on, on the other hand, sometimes, stateless will also reduce network sales, such as similar to the live broadcast industry, this is still a scene
  • (2) Plaintext transmission, that is, packets (mainly headers) in the protocol do not use binary data, but text. In this way, HTTP packet information is exposed to the outside world, which facilitates attackers
  • ③ Queue head blocking, when HTTP long connection is enabled, the same TCP connection, when a request time is too long, other requests can only be blocked, this is queue head blocking.

HTTPS

HTTPS is more secure than HTTP. In fact, HTTPS is not a new application-layer protocol. It is a combination of HTTP + TLS/SSL, which ensures security.

The difference between:

  • HTTP is a plaintext transmission protocol. HTTPS is a network protocol constructed using SSL and HTTP to encrypt transmission and authenticate identity. It is more secure than HTTP
  • HTTPS is more secure than HTTP, friendlier to search engines, and better for SEO. Google and Baidu preferentially index HTTPS web pages
  • HTTPS standard port 443, HTTP standard port 80
  • HTTPS requires an SSL certificate, but HTTP does not

At the end of the article

This is the first article about the topic of my book, and it will be updated later. If you think my writing is good, you can give me a thumbs up. After reading some interviews and interview questions, I still feel that I need to work harder, because THERE are still many knowledge points that I haven’t fully mastered. If the interviewer asks me a little deeper, I may not be able to answer them.

Other articles

  • Traversal of binary trees of data structures
  • Imitation go where project video learning summary
  • Webpack is easy to learn
  • Gluten series ② — Didi intern cool the meridian

This article is formatted using MDNICE