"One big factory a week" reviewed Taptap's experience and found deficiencies, and cracked them one by one!

Preface

Hello, everyone, I’m Lin Sanxin, most difficult knowledge points in the most easy-to-understand is my motto, based on the premise of advanced is my original intention

One big factory a week is a new series of articles published by me. The general process is as follows:

• I will collect some interviews from big factories and try to answer
• If they are all cities, wait for another round next week
• If you don’t, write it down, overcome them, write an article, and then the next round

The purpose of this series is: yourself to learn, write articles to consolidate new knowledge, and review old knowledge

Taptap

Today is a giant one week the first period, and today we look to re-set TAPTAP face was found inadequate, and one by one break them!

one side

1. What treatment has been done for skin resurfacing? Have you dealt with skin resurfacing that may change the size?

I have done in 161c48efb08fb6 WeChat applet and PC management system respectively

• Mini Program: Our company is a game mini program. The skin change of this mini program is to read the pop-up drawer of the story. The requirement is to change the three skins and change them at the same time by clicking the button. Read the color of the text. My solution is to use Map to store three kinds of skin information. After clicking the button, it will match the corresponding skin in the Map, replace the drawer background image, and modify the HTML code of the reading text in a regular way, and replace the color attribute in the style. , To achieve the peeling effect
• PC management system: a back-end management system of our company, has done the dark night mode and day mode, after confirming the theme color with the product, start programming. Since our system is antd component library, we need to antd corresponding theme file of and encapsulate the corresponding 161c48efb09048 switch theme hook. At the same time, we must store the theme ID in localStorage to ensure that the theme is restored after refresh. Then a package is AppDarkModeToggle a switch assembly, after the handover triggering event, changing html the data-dark attribute by attribute selector, a trigger switch under the label pattern, while changing Header，Sider，Footer like component layout switching the background color, font color, etc.

2. What practices does i18n do within the team?

Project implementation

i18n means so that the product can adapt to the needs of different languages and regions without major changes. I have also done i18n in my project. What we did was the international language switch official website and the management system. The switch was Chinese and English. My steps were

• 1. Determine the text of Chinese and English according to the design draft
• 2. Organize into two folders en and zh to store the data in the corresponding language
• 3. Make sure that the form of the data is the key-value pair form of the object
• 4. vite the import.meta.globEager method of 061c48efb09107, organize the two data into i18n plug-in (different plug-ins require different formats)
• 5. When the project is initialized, initialize the i18n plug-in
• 6. Encapsulate the corresponding switch language component- AppLocalePicker , used to switch themes, and change the lang attribute of the html
• 7, while making initialization language identified, to avoid refresh status is lost

Plug-in selection

I will choose some plug-ins that are more convenient to use to achieve i18n

• Vue: The plug-in I chose for Vue is vue-i18n
• React: The plug-in I chose for i18next

3. What problems did Webpack encounter when migrating Vite?

• 1. Environment variables need the prefix Vite_
• 2. The method of obtaining environment variables is import.meta

• 3. An error is reported when using tsx in Vue: React is not defined

  // vite.config.ts
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: 'import { h } from "vue";',
  },

• 4. Theme plugin vite-plugin-theme
• 5. Windicss plug-in vite-plugin-windicss
• 6. Try not to use commonjs , use es module

4. What practices have CI/CD done?

• CI stands for continuous integration. What I understand is that we write code every day and submit it to the main branch. Every day, it is a highly repetitive operation. continuous integration I understand that it will be as fast as possible Help you submit the code to the main branch. The advantage of this is that when the number of developers is large, such rapid integration will help reduce conflicts between developers’ codes.
• CD represents continuous deployment. I understand that since there is continuous integration code, and the integration of the code must be for the final release deployment, so continuous deployment is automatically deployed to the environment after the code is automatically integrated, saving a lot of money Manpower

I have participated in the CI/CD workflow in the previous company and used it, but did not implement it in depth. At that time, the company used Jenkins

5. Have you learned about authentication? How does jwt implement kicking, the difference between session and jwt authentication?

session authentication

session authentication requires server storage

• 1. User login
• 2. The server receives the login request, generates the corresponding user ID, and exists on the server
• 3. The server transmits the logo to the front end, which is Cookie in 061c48efb093a5 and in the browser
• 4. The front end will bring this Cookie to request every next request
• 5. The server receives the identifier, and matches the identifier in the database. If it matches, it will accept it, and if it fails to match, it will not accept it.
• 6. When the user logs out, the front and back ends will destroy this logo

jwt authentication

authentication does not require server storage

• 1. User login
• 2. The server receives the login request and generates a token to the front end according to the user information
• 3. The front end receives token , which is browser local cache LocalStorage (for example, 061c48efb09467)
• 4, then each request, are required to token tape request header in
• 5. The server parses the token from the front end, accepts it if it is valid, and returns 401
• 6. When the user logs out, only the front end needs to destroy the token

jwt kick people

I understand that 161c48efb094e5 jwt , which means that the backend controls someone’s token invalid. I can think of four ways

• 1. When the server generates token , it generates a section of ID 1 and sends ID 1 + token to the front end. When I want to kick someone off, the back end generates a new ID 2 and modify the user correspondence The token is ID 2 + token, then next time this user ID 1 + token, the test will fail. This method requires server-side storage, which violates the original intention jwt authentication
• 2. Set up two tokens, one access_token one refresh_token . The former has a shorter expiration time of 1 hour, and the latter has a longer expiration time of one month. Store refresh_token in the back-end database (such as redis), and access_token to the front-end. When the front-end access_token , it must determine whether the refresh_token redis has expired. If it does not expire, it will pass, or access_token expired, as long as refresh_token not expired. Refresh access_token return to the front end. So if you want to kick someone offline, it's easy to do, just remove refresh_token from redis. The disadvantage is the same as the first point
• 3. Blacklist mode. token of the user who needs to be kicked in an array. When this user visits, traverse the array to see if there is such a person, and kick it offline if so.
• 4. Another mode of kicking people is that in our company's game business, kicking people offline uses the Websocket to kick people out of the room in real time, without involving token

6. What are the differences between the TCP three-way handshake http1.0 http1.1 http2?

HTTP has always been my shortcoming, record it, record it

7. Why can https be prevented from man-in-the-middle attacks?

I recommend an article I wrote I drew 13 pictures and talked about HTTPS in the most easy-to-understand terms. I won!

8. Bubble sort

Average time complexity

O(n^2)

Ideas

There are n numbers in the array, compare every two adjacent numbers, if the former is greater than the latter, swap the positions of the two numbers; in this way, in the first round, the largest number can be selected and placed at the end; then After n-1 (length-1 of the array) rounds, all numbers are sorted.

accomplish

 //从大到小排序
    var array=[10,20,9,8,79,65,100];
    //比较轮数
    for ( var i=0;i<array.length-1;i++){
        //每轮比较次数，次数=长度-1-此时的轮数
        for (var j=0;j<array.length-1-i;j++) {
            if (array[j] > array[j + 1]) {
                var temp = array[i];
                array[j] = array[j + 1];
                array[j + 1] = temp;
            } //end if
        }//end for 次数
    } //end for 轮数
    console.log(array);

Two sides

1. Give you an array that has been sorted in ascending order, give a number, and find out how many times this number appears in this array

Ideas

Since it is sorted in ascending order, it means that if this number appears multiple times. It must be next to each other, so there is no need to traverse the entire array. As long as you start with this number and leave this number as the end, you can jump out of the traversal after the statistics are completed during this period. There is no need to do the following useless work (this is I can only think of optimization points)

accomplish

const arr = [1, 2, 3, 4, 5, 5, 6, 6, 7]

const computed = (arr: number[], num: number): number => {
  let flag = false
  let sum = 0
  for (let item of arr) {
    if (item === num) {
      sum++
      flag = true
      continue
    }
    if (item !== num && flag) break
  }

  return sum
}

console.log(computed(arr, 5))

2. The shuffling algorithm, how to verify that this shuffling algorithm can shuffle the cards chaotically enough

1. Random index I

• 1. Create an empty array
• 2. Generate a 0 —— length - 1 , and put the corresponding element of this random index into the new array
• 3. Delete the element corresponding to this index in the original array, and update the original array length
• 4. Repeat 2 and 3 until the original array length === 0

• 5. Return a new array

  const shuffle = (arr: number[]) => {
  if (!arr.length) return []
  let random: number
  let res: number[] = []
  while (arr.length) {
    random = Math.floor(Math.random() * arr.length)
    res.push(arr[random])
    arr.splice(random, 1)
  }
  return res
  }

2. Random Index II

• (arr[length-1]) in the array (length n), and exchange it with any of the n elements. At this time, the last element has been determined
• 2. Select the penultimate element (arr[length-2]) and exchange it with n - 1 5 elements 061c48efb097b
• 3. Repeat steps 1 and 2 until 1 element remains

const shuffle = (arr: number[]) => {
  if (!arr.length) return []
  let index = arr.length - 1
  let random: number
  while (index) {
    random = Math.floor(Math.random() * index--)
    // 或者
    // random = (Math.random() * index--) >>> 0
    const temp = arr[index]
    arr[index] = arr[random]
    arr[random] = temp
    // 这样也行，但是我的eslint不允许哈哈
    // [arr[lastIndex], arr[random]] = [arr[random], arr[lastIndex]]
  }

  return arr
}

3. Sort method

const shuffle = (arr: number[]) => {
  return arr.sort(() => 0.5 - Math.random())
}

3. The node stream fetches a log with a huge amount of data. Due to the memory limitation, only a part of it can be fetched at a time. Now I hope to fetch 10,000 logs randomly from all the logs. How to do it?

This question will not. . Record it, record it

4. Introduce what the project is done by the plan proposed by you

Leading two or three projects:

• Project A: Mini Program
• Project B: official website
• Project C: Backstage management system

Under-recorded

• What are the differences between the TCP three-way handshake http1.0 http1.1 http2?
• Insufficient practical experience in CI/CD
• Use of node stream

Concluding remarks

I am Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends and fish together haha, fish school

Topic extraction

This time the topic of the face sutra was taken from After a year and a half, I, a humble front-end vegetable chicken, came to write the face sutra again