Front end practice experience

I can’t write down what I don’t remember. I’ve read too many digg blogs these days. I have to say, I’m just getting started

Since February, I have been studying the front end of the school’s online class at home until now

New Man Tat Education (Phone: 20min)

This is a small company (I think), the phone, the content is very basic, if you know the front end, an algorithm problem, delete an array of even numbers, this can be implemented in a variety of ways, phone, you don’t have to write code

What is browser backflow
How does lazy loading of pictures work
Event loop
Delete an even number from the array

Less than 20 minutes of telephone interview, after the interview was recorded, I feel the process is not very formal, so I feel the company is too small.

Tucson Future (video side 60min)

There was something in the interview, so I only had one interview. I called to cancel the second interview (because I had offers from other companies before the second interview).

I have done some research on this company, I think it is not very big, the interview will be relatively simple, but in the process I am quite not good, let me think it is tall and fashionable

Questions about the project too much, I do the high copy of millet mall itself, is the following tutorials, so the deeper things couldn’t come up with an answer, he asked, have any difficulty in the process of the project to do, I say, the project I use Vue framework, but the child components after the update, the parent component does not update, led to a display of data in the parent component, I didn’t update it in time, and I’m not quite clear about the specific difficulties, because I don’t know the difficulties myself, let alone the solutions. I dug a huge hole for myself, and I regretted it so much. Balabala muddled through it.
He asked me what I had written on my resume, but I didn’t prepare the content on my resume properly. And how to write the configuration file? I said I didn’t know. I only knew how to use it

// Webpack configuration information in vue.config.js, I didn't answer at that time
module.exports = {
  / /...
  devServer: {
      host:'localhost'.port:8080.proxy: {
          '/api': { // Capture the flag of the API, and if there is a string in the API, start matching the proxy
              target: 'http://www.baidu.com/'.// The proxy's API address is the cross-domain API address required.
              pathRewrite: {'^/api' : ' '},/ / such as API access path: / API/users, eventually proxy access path: http://www.baidu.com/users
              changeOrigin: true.// If target is a domain name, this parameter is required; otherwise, the proxy fails
              secure: false.// Accept backend servers running over HTTPS that can use invalid certificates without checking for security issues
          },
          '/api2': {... }}}};Copy the code

How do components load on demand? I couldn’t explain it clearly for a long time, because I really only had a little influence and didn’t know the specific implementation of the project

Now we know that there are probably two implementation methods, both using modularity, one is require() to implement asynchronous loading on demand, after es6 introduced import() loading method, can also use import() loading, each component is packaged into a JS file, this method requires a relatively new Webpack packaging.

How is the front-end optimized for performance? I memorized many before the interview, but only came up with two during the interview
Front-end implementation cross domain issues?

The use of interface proxy is mainly to configure the server

Use JSONP to cross domains

When requesting data from the server, how to block the data interface? How to block both request and respose data
There are five ways to communicate between components
1. Props and $emit
2. $children /$ parent
3. ref / refs
4. eventBus
5. Vuex

But he asked me if I would provide/inject, and I said I had heard of it, but hadn’t used it, so I wouldn’t

Vuex typically stores that kind of data

After the interview, I felt cool, but I made a second appointment, so we must be confident!!

Who to learn from (written test 20min, video interview 60min)

(I have offered the offer and plan to go to Dachang. I will go to Dachang for the next internship, but I am not allowed now.)

Written test (given 60min, used 20min) : basic CSS, HTML, JS questions

I only remember some of them, because they’re a little bit easy, but I haven’t memorized some of them yet

What are all the attributes of position that I don’t know
The semantic role of HTML tags
Implement the inversion of a string

The rest of the test some basic CSS, some attributes I really was incomplete, there are short answer questions, I think as long as the meaning of the right line, this is not a school, not an exam, the interviewer understand you on the line, about the written test, as long as the front-end has a period of time do not have to worry!

The interview

I have to say, I’m really a luckydog. I met a toku alumnus

Image point, blurred, then gradually become clear, I believe that everybody is met, at first I didn’t understand his meaning, I said the image lazy loading technique, he said he asked not behind this, as for behind him and I said this is a feature of PNG, part of the browser receives the browser will display pictures, after when data from increased slowly, The picture certainly becomes clearer
Difference between hash route and history route

When a route is redirected, neither hash route nor history route will refresh the entire page. Both redirect is equivalent to jumping in the anchor of the same document, so the whole page will not be refreshed. History requires backend cooperation, but hash route does not. That is, transparent to the back end.

The title as follows

/ / url parameter parsing http://xxx.com/yyy?a=1&b=2&c=3 returns {2, a: 1, b: c: 3}
// My solution:
let str = 'http://xxx.com/yyy?a=1&b=2&c=3'
const fn = (str) = > {
  const result = {}
  const temp = str.split('? ') [1].split('&')
  for (let i = 0; i < temp.length; i++) {
    let temp2 = temp[i].split('=')
    result[temp2[0]] = temp2[1]}return result
}
console.log(fn(str));
Copy the code

If queryString is encoded, how can it be converted to Chinese? I don’t know, but I know there is an API in JS that can be converted. Behind the escape, encodeURI, encodeURIComponent usage scenarios, know that you can use decodeURIComponent

The title as follows

Aaa {{XXX}} BBB {{yyy}} CCC, {XXX :1,yyy:2} return aaa1bbb2CCC
let str = 'aaa{{xxx}}bbb{{yyy}}ccc'
let obj = { xxx: 1.yyy: 2 }

const fn = (str, obj) = > {
  let count = 0
  let temp = ' '
  let result = ' '
  for (let i = 0; i < str.length; i++){
    if (str[i] === '{') {
      count ++
    }else if (str[i] === '} ') {
      count--
      if (count === 0) {
        result += obj[temp]
        temp = ' '}}else if (count === 2) {
      temp += str[i]
    } else {
      result += str[i]
    }
    
  }
  return result
}

console.log(fn(str,obj));
Copy the code

The above content was used for about 20 minutes, he thought it was ok, I can pass, later found that he was an alumnus, I took some more lessons from him, he is a good person, this is also a big reason why I choose who to learn from, there is a good student in it.

Bytedance (video side: 60min, video side: 60min)

A total of two sides, the first side, side two feel cool, said that if you have an interview, hr will inform you, talked to the first side by the implementation of the principle and a little bit of CSS, around the transform, and the liquid layout, the inside of the front unit and knowledge point is around in front of my project, then there are the following two code problem 1 and 2, HTTP caching is an important part of HTTP caching. HTTP caching is an important part of HTTP caching. HTTP caching is an important part of HTTP caching.

Implement a repeat method with the following requirements:

Function repeat (func, times, wait) {}
Const repeatFunc = repeat(console.log, 4, 3000);
repeatFunc("hellworld"); Helloworld is output 4 times, 3 seconds apart
Copy the code

I had some ideas, but I was out of shape and dizzy at that time. I talked about my ideas with the interviewer, but I failed to write the code and did not exert my normal strength

Finally, I discussed with the interviewer and me that setTimeout and setInterval could be used. I was thinking of setInterval.

Then I rewrote the code

function repeat(func, times, wait) {
    return (arg) = > {
        for (let index = 1; index <= times; index++) {
            setTimeout(() = > {
                func(arg)
            }, index * wait)
        }
    }
}
Copy the code

Implements a function that takes a string of two binary numbers and outputs the decimal value of the sum of the two numbers.

 add('01'.'10') = 3
Copy the code

I use the complex algorithm to achieve, because the state of the interview is really bad, I and the interviewer about two kinds of methods, one kind is to short strings up in front of the zero, then begin from the end of the string traversal together at the same time, and plus the carry flag, another method is not zero, the interviewer and I said if you can reverse the two strings, I can go through it in positive order instead of in reverse order, and I’m so stupid of myself

Finally the interviewer told me to use parseInt(’01’, 2); Implementation, I am too ignorant to know that parseInt can pass two parameters

The code is as follows:

const add = (str1, str2) = > {
    return parseInt(str1, 2) + parseInt(str2, 2)}Copy the code

I look at a tree from left to right, and I print the nodes that I see, and my idea is to go through the hierarchy, and then print the first number of each layer, and the code does that

// Here is the structure of the number given by the interviewer
interface Node {
// left: Node;
// right: Node;
// value: string;
// }
// I implemented the code
function levelNode(node,level){
  this.node = node
  this.level = level
}

const fn = (node) = >{
  const queue = []
  let result = []
  let ans = []
  let level = 0
  if(! node) { retun result } queue.push(new levelNode(node,0))
  while(queue.length){
    let tempNode = queue.shift()
    if(! result[tempNode.level]){ result.push([]) } result[tempNode.level].push(tempNode.level.value)if(tempNode.node.left){
      queue.push(new levelNode(tempNode.node.left,tempNode.level + 1))}if(tempNode.node.right){
      queue.push(new levelNode(tempNode.node.right,tempNode.level + 1))}}for(let i = 0; i < result.length; i++){
    ans.push(result[i][0])}return ans
}
Copy the code

Implement array flattening

This one is relatively simple. The code is as follows

const flat = (arr,result = []) = > {
  if(Array.isArray(arr)){
    for(let i = 0; i < arr.length; i++){
      flat(arr[i],result)
    }
  }else{
    result.push(arr)
  }
  return result
}


let temp =[1[2[3[4]]]]

console.log(flat(temp))
Copy the code

The problem is that the implementation is not satisfied, he added that in the implementation process, splice operation on the original array, finally cannot return a new array, that is, after executing the function, the original array has been flattened, I cried, no

Then I thought:

const flat = (arr) = > {
    for (let i = 0; i < arr.length; i++) {
        const temp = arr[i];
        if(Array.isArray(temp)) {
            arr.splice(i, 1. flat(temp)) } }return arr
}

Copy the code

Question five is too difficult

// The subject is as follows
fs.readFile('1.txt'.(err, data) = > {});

const newReadFile = promisify(fs.readFile);

newReadFile('1.txt')
  .then(data= > {})
  .catch(err= >{}); Promisify Encapsulates fs.readFile as a promise using the promisify function, please implement promisifyCopy the code

This is too difficult, he asked me if I promise, I said I know a little bit, he let me do this problem, I’m still a kid, okay?

Later, I read some other people’s articles and wrote an implementation method:

const promisify = (func) = > {
    return (filePath) = > {
        return new Promise((resolve, reject) = > {
            func(filePath, (err, data) = > {
                if(! err) { resolve(JSON.parse(data))
                }
                else {
                    reject(err)
                }
            })
        })
    }
}
Copy the code

In the end, I asked the interviewer what my weaknesses were, and in general, it was: When writing code, if you are stuck, say it quickly, and if you are not, say it quickly, because the interviewer wants to know what you are good at. If you are stuck on what you are not good at, then time is wasted and you will not be able to show what you are good at.

360

I made an appointment on next Monday, but there are too many exams, I don’t want to try again, I just learn from someone, so I cancelled the interview

In the interview with bytedance and who I learned from, I was asked where I was weak, and I was told that I didn’t have long experience in front end, so I’d better accumulate it slowly.

More and more

I still have two weeks left in school, and I haven’t started to prepare for the next four exams and two classes. Because I have been preparing for the interview, the time is tight, so there are many bad things in this article, I hope you can understand, after all, I am still a coding child

Front end practice experience

Front end practice experience

New Man Tat Education (Phone: 20min)

Tucson Future (video side 60min)

Who to learn from (written test 20min, video interview 60min)

Bytedance (video side: 60min, video side: 60min)

360

More and more

Related Posts

[Suggested collection] 101 brain maps, learn Vue3 from scratch (including the latest syntax of Vue3.2)

Interesting NodeJS module: Buffer

How to use setState in react-hooks