preface

Hi, I’m Wangly, an old, unlucky, off-duty fisherman. Affected by the epidemic, there are a lot less junior and intermediate positions this year. At this time, I have held my mobile phone and left tears of grief. Let’s start with my story. And then in the summary of the line recheck.

I am a junior college student in 2020 and have had one-year internship experience. Big factories cannot get in and small factories have low prices. I am a front end engineer in a 15-member Team of the company, responsible for collaborative development and independent completion of the company’s projects. Every day after work, I would think about my future development, and my job-hopping plan was disrupted by the story of a bat. The reason why I have the idea of job-hopping is that the company’s business and my growth have reached a time when I need to seek a breakthrough. In addition, the city is not very developed with the Internet and the economy is not very prosperous. Slowly contacted a few telephone interview, can be helpless at his academic record of specialized subject, do not have many good opportunity. My goal was simple, to find a company that had its own product and a business plan. It’s not that you’re not good enough, it’s that you’re not good enough to get noticed. The goal of 2020 is to find a company with its own products in the frontline and settle down.

For details on line

The whole is under questioning or being questioned. The interview was elaborate and dynamic. Much like Ryu was killed by Silk Blood. The length of the line is 2 hours and 15 minutes, three cups of white piao water, a plate of pastry.

The interview process

The interview process is divided into two stages: written test and interview. The written test examines some written code and understanding, and the interview examines some business scenarios and projects. Very detailed,

The written test

The questions are simple, just basic handwritten code and general knowledge questions. But it’s very easy to fail if you don’t have a system.

1. Implement a fixed left DIV and adaptive right DIV layout

/ / the DOM structure<div class="container">
  <div class="aside">left</div>
  <div class="section">right</div>
</div>// Style Style. Container {display: flex; } .container .aside { flex: 0 0 200px; } .container .section { flex: 1; }Copy the code

2. Use two ways to center the box

/ / the DOM structure<div class="container">
  <div class="box"></div>
</div>Container {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .container .box { background: red; min-width: 100px; min-height: 100px; } // Solution 2: position scheme. container {width: 100%; height: 100%; position: relative; } .container .box { background: red; min-width: 100px; min-height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }Copy the code

3. How do I style elements other than the beginning and end of a list

// look at the use of CSS pseudo-classes // DOM<ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
</ul>

// Style

.list > .item:not(:first-child):not(:last-child) {
  /* ... style */
}

Copy the code

4. What are the data types of JavaScript?

A: JavaScript is divided into base types and reference types, which are:

  • Basic types: number, string, Boolean, null, undefined
  • Reference types: Object, function, array

5. What is the output value of the following function foo

// @function foo
function foo(i) {
  try {
    if (i === 1) {
      return i
    }
  } catch (error) {
    return 0
    
  } finally {
    ++i
    return i
  }
}

// @console
console.log(foo(1))
Copy the code

2 a:

6. Given an array, sort it in ascending and descending order

Original array: [1, 4, 10, 2, 5, 18, 14] answer:

// @function bubble
function bubble(arr, state) {
  const len = arr.length
  let template
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (state === 'up') {
        if (arr[i] < arr[j]) {
          template = arr[i]
          arr[i] = arr[j]
          arr[j] = template
        }
      }
      if (state === 'down') {
        if (arr[i] > arr[j]) {
          template = arr[i]
          arr[i] = arr[j]
          arr[j] = template
        }
      }
    }
  }
  return arr
}

// @console
console.log(bubble([1.4.10.2.5.18.14].'down'))
Copy the code

7. What is the result of the following code execution

var name = 'zangsan';
(function () {
  console.log(name)
  name = 'Lisi'
  console.log(window.name)
  var name = 'wangwu'
  console.log(name)
})();
Copy the code

A: undefined > zangsan > wangwu

8. What is the difference between a for loop and a forEach loop?

A:

  • The for loop is native syntax sugar with no context, while forEach is the method on Array.
  • A for loop can exit the loop with a break, continue, but forEach can’t.

9. How long will it take to execute the following asynchronous functions?

// @promise function
function speed() {
  return new Promise(resolve= > {
    setTimeout(resolve, 3000)})}// @async function
async function foo() {
  let mySpeed = speed()
  await mySpeed
  await mySpeed
  await mySpeed
  await speed()
  await speed()
  await speed()
}

foo()
Copy the code

Answer: Approximately 12S, but over 12S.

10. Would you please implement a simple anti-shake function?

A:

// @function shake
function shake(fun, time) {
  let timeController = null
  return (. args) = >{ timeController ! = =null && clearTimeout(timeController)
    timeController = setTimeout((a)= > {
      fun.apply(this, args)
    }, time)
  }
}

// @test function
function myText() {
  console.log('text...... ')}// @output
shake(myText, 3000)
Copy the code

LocalStorage, sessionStorage, cookie

A: They are both used for data persistence,

  • Cookies are stored on the client and will be lost as the browser closes. The storage size is 4K
  • SessionStorage: valid only for this session and will be invalid after the browser is closed or the page is closed. The storage size is > 4M
  • LocalStorage: It is stored locally in the browser and will not be lost unless manually cleared or caused by unexpected factors. The storage size is 4M

12. I can’t remember some questions…

The interview

After finishing the problem, I looked at it carefully. After making sure there are no obvious problems, hand it over to HR nearby. I think it’s going to the tech department for evaluation. Personally, I think the written test is quite a pit. Real development for some pen test questions basic no contact. Therefore, every interview needs to spend a lot of time to go over the knowledge point, check the deficiency. After about 5 or 6 minutes, the personnel change took me to a separate office for an interview. There were already two people inside, one who looked like the manager and one who was supposed to be the front man. When I sat down, they already had my resume. I think I’ve already seen it. With the small change out after closing the door (all troops attack), the line begins:

To introduce myself

Self-introduction actually rarely go to see, generally I also according to some points to say some nonsense do not make mistakes.

  • Who am I, XXXX school junior college, major.
  • I have worked as an intern and full-time Web front-end engineer in two companies successively, with more than one year of work experience, mainly using Vue technology system as project infrastructure. I have successively experienced 4 projects, involving the collaborative development of large background management projects, the independent development of the company’s internal enterprise wechat H5 and small program service programs.
  • In my spare time, I like reading books, learning new technologies, writing open source projects and summarizing my blog. . It doesn’t really make much of a difference. Who has a good template to save my old ass.

After self-introduction, began to ask the right line.

1. What new features are you using in ES6? How do you use it?

A:

  • The first is the new block-level variable definition, let & const, which I use by default in my projectconstTo define my variable, which I only declare when I’m dealing with variable assignmentlet 。
  • The second is the template string, which was used in the past+ 和 toStringTo do some concatenation of strings, such asURL. The readability of this splicing is very poor. I used the ES6 template strings in my projects as soon as they appeared.
  • Deconstructing assignment is a very powerful feature in Vue bothmethodsorcomputdAre involved in a lot ofdataReactive variable reads, so I can put Vue’sthisDeconstruct it out and will need to use itdata methods. By deconstructing it, you avoid having a lot of codethis.XXXAvoid this bad code style.
  • The arrow function is much shorterfunctionWriting, the general function incallbackIn, you can make function calls quickly. Such asforeach ， mapMethods.
  • Set & Map is often used in my projects because it involves a table template. Since the format of the table data is not fixed, I often plan the format of the data returned in the background to be the format I uploaded, which is usuallykey value, so that the values returned to me in the background can be filled with key-value pairs via Map and rendered in the table. Because of the MapkeyThe type of data stored is fantastic. Object cannot do this.
  • Promise and Async it solves the callback hell of asynchrony, making JavaScript asynchrony a better experience. Typically in Vue data requests are made asynchronously in the form of promises.

Acquisition is a little long, otherwise this thing could have been said for an hour. I said there were a lot of updates to the ES6, so I picked out some of the typical features. The interviewer may also feel they are asking too broad a question. Also timely agreed, began the next problem.

2. You mentioned Promise. Do you know its API?

A:

  • resolve
  • reject
  • then
  • catch
  • finally
  • all

3. Do you know Promise’s REce API?

Answer: the last question seems to have forgotten to mention (embarrassed), I don’t use this method very often. What it does is it makes a concurrent comparison, it makes N promises and when one of them returns a result, it’s done. Whoever executes first, the result is the return value of that Promise. The parameters are the same as promise.all.

4. How does Axios send multiple requests simultaneously?

A: Axios itself is a Promise, and multiple Axios requests can be executed using promise.all. Axios also provides the axios.all method internally, which is used in the same way as promise.all.

5. Request backend data to indicate how you solve the problem across domains.

A: I personally prefer to use the CORS solution. The CORS standard adds a set of header fields that allow servers to declare which source sites have access to which resources. This needs to be complemented by the back end. The other is to use the Nginx proxy to forward.

I didn’t answer this part very well. If you don’t understand it, you can review the browser cross-domain solution.

6. Difference between V-show and V-if in Vue

A: The V-if directive actively ignores the bound DOM in the render View. It will not be loaded into the virtual DOM and will not be displayed in the ViewDOM. The V-show command adds a display: None style to the bound DOM for hiding and displaying.

7.com Puted and Watch can you talk to me?

A: Computed is a separate attribute and cannot duplicate the value name in methods/data. It is cacheable, and computed keeps the current value unchanged when the computed value you rely on hasn’t changed. Asynchronous watch does not support asynchronous watch can only observe values in data, and a function can only monitor one. It is used to perform a listening operation on a value.

8. What changes did Vue3 make to reactive binding, and why?

A:

  • 1.Vue2 uses Object. DefineProperty is used for data hijacking. Vue3 uses a new Proxy API. Object.defineProperty can only hijack Object attributes, while Proxy can directly Proxy objects.
  • Object.defineProperty Does not Observe the attributes of an Object. When adding or modifying attributes of an Object, you need to specify Observe again. On the other hand, the Proxy object is very friendly and supports most common operation interception.

9. What are VueRoute component route guards?

A:

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

10. What are the modes of VueRoute and how are they different?

A: There are two routing modes, hash History,

  • In hash mode, the URL contains one#No history.
  • The history route will refresh and redirect 404 if the back-end deployment does not change the page pointing, but the hash route will not
  • Hash routes are more compatible with history.

11. Can you tell me about the module namespace in Vuex?

A: Export the module and set namespaced: true to enable the namespace, so that the module has its own module ownership. For example, if there is an action named test in module A, we can use A /test to find it, and avoid collisions between Vuex modules.

12. What is the difference between Mutation and Action in Vuex

A: Mutation is primarily used to change data in state, so it acts primarily as a middleman. It does not support asynchrony, so it can be listened on by Vue and DevTools can synchronize to its records. If it’s asynchronous, it’s likely that DevTools won’t be able to synchronize exactly when it changes. The most common way to commit Mutation is through Action. Since Action is an asynchronous process, this ensures that the logic is called asynchronously without breaking the good record of Mutation. Easy for developers to debug. It’s an exchange of data.

13. I forgot the last few questions

Dui project

Some of the exciting hate items are a little private, so I won’t write them all. This piece is actually to see their own understanding of the project. Here are just a few dialogues for reference.

Q: Your company’s project uses webSocket. Why do you want to use it?

A: Because some important messages in my project need to be obtained in real time, if users do not access the interface of Message for A long time, it will be very troublesome if they miss the important alarm push. This is as logical as Meituan’s rider Smile operation.

Q: Since you use webSocket, can you tell us the common API of webSocket?

A: The API of webSocket is divided into

  • Onopen (), which opens the channel and connects to WS
  • Send () : sends a message
  • Onmessage (), ws message callback
  • Onerror (), WS connection error
  • Onclose (), ws connection closed

Q: If you want to keep the socket connection, how do you keep the current socket connection normal?

A: I do A timed ping operation called “heartbeat response”, how people decide whether they are alive or dead. In fact, the fastest way is their own heartbeat, as long as your heart is still beating, then you are still alive. Therefore, I use ws-send () to send a meaningless ping message at regular intervals. Tell backstage I’m still connected. After receiving the background, it will continue to push messages. And if the ping message is wrong. This means that WS may have broken unexpectedly, and will go onError (), at which point I can start waking it up again. This way I can depress webSocket to keep a relative connection persistent.

I will not talk about the company’s project in the future, in fact, it is a question and answer session, I should be clear about the modules made by myself. One item: (●’◡’●). One item for a solo item: nothing to hide.

Q: Did you implement a UI component library yourself?

A: Yes, I did it while I was off work. There are 22 components in total, and the documentation has not been updated to the latest version.

Q: Did you design the overall style of the components or?

A: I wrote it by my own feeling. I just designed some sizes by referring to AntD Vue of ants. I came up with the color scheme and style by myself.

Q: Can you tell me how you implement tooltip?

A: I implemented the tooltip component using pseudo classes. Content in the before and after pseudo classes can be bound to the dynamic values of CSS attr(properties) functions and then drawn by positioning. The core is the use of CSS pseudo-classes, ATTR (tootip), position and so on.

Q: I see. Most of your components only implement simple functions. Have you done any in-depth work?

A: This is A long-term maintenance project. It was just for practice at the beginning, but with more and more packaging experience, compared with the previous functions, I will find it very low, so I will do A rewrite after Vue3 comes out. Optimize the code structure.

Q: I had a look at your modal box and it was very interesting. Can you tell me about it?

A: Well, the idea for this modal box came from the Mac dialogs. I thought it was interesting, so I decided to move it to the component library, rethought it, and made it what it is now. However, most of the APIS are common and do not have some more customized functions.

Q:…

A:…

The following is omitted after the project, feel interesting to ask some things.

The interview summary

In fact, the overall interview is not as plain as described in the article, there are a lot of nervous, stuck places. Some problems were omitted, because I didn’t bring a recorder with me, so a lot of the recordings were made by memory. Holiday at home just drink some chicken soup, supplement the next body. Do a summary, I hope you are still looking for a job to help. It is really difficult to find a job this year, especially for those with low education and little experience like me, I am really tired. But I will stick to it, let’s cheer together oh. After the interview, there’s a routine that I don’t know if you noticed:

If you constantly hate you in the interview, or even ask someone to blast you, you will have a higher chance of getting an offer. Otherwise, you will get no reply after a smooth journey.

Although the final result is passed, but MY goal is still to go to the first-tier city after graduation, maybe just in order not to make themselves mediocre. Ok, everybody see officer see almost, feel useful to point a thumbs-up. Give me a thumbs up for my UI library.

Welcome to push me ashore:

  • Venue: Shanghang Shenguang
  • Salary: 8K-12K
  • Refused to outsource

My Github: Jump now

UI component library: Jump to Chinese site now