Graduated from 19 years into a bank, at the end of confirmation, to offer is the front-end development, but because the center is a major responsibility is the development of data, can only do the front while learning the knowledge of the data development, the content of the front end late less and less, so in the case of push chance and work review and interview, succeeded in winning offer, Document the interview.

One side

1. What are the higher-order components? You design such a watermark component, why use high – order components. Component design ideas.

A :HOC defines a function that takes a component and returns a wrapped component. The problem is that your resume has a toy project on it (watermark widget Github address). The implementation principle is very simple, the internal is a third-party watermark component, but I need to be compatible with the use of React project, but do not want to destroy its internal code structure, so the best way is to enhance its function to support the configuration of transparent and compatible with React code, in this case, we can use HOC, The passing of configuration items can be further abstracted on top of HOC, namely:

const WatermarkEnhancer = optionsObject= > metaComponent= > enhancedComponent
// Can be used with decorators@WatermarkEnhancer({ ... options })class Demo extends Component {
    // some code
}
Copy the code

2. Describe the business scenario of the Watermark component. If someone wants to remove the watermark in the console by deleting the DOM, how to prevent?

A: Say MutationObserver, listen for DOM changes and re-watermark; Listening for keyboard event F12 disables opening console If the user disables JS with disable JS in the console and the listening event is invalid, what can be done to prevent it? Click disable js and the action itself can be listened on, so you can listen on the action and intercept it, and then you can do some custom actions, such as closing the page.

3. Difference between Dvajs and Umijs.

A: Dvajs itself is approximately equivalent to redux + React-redux + Redux-saga. It integrates the management of synchronous and asynchronous state and makes some conventions for developers to easily manage state according to routines. Moreover, because the underlying layer of Dvajs is only the integration of the above libraries and the API is highly consistent, So the barrier to entry is very low (if you already know about Redux, Redux-Saga). Simply think of Dvajs as a best practice for synchronous asynchronous state management.

Now, Umijs. Umijs is a framework that integrates Dvajs(state management), Router (routing function), Request (network request), Mock (locally developed interface Mock function)… This framework includes these functions, and actually plays a role of technical convergence, just a Umijs, the development of the required functions are basically included, rather than their own installation of a bunch of gadgets have to configure.

4. The use of REdux in Dvajs (discuss the necessity of state management and the thinking of reasonable use and not abuse)

A: Let’s talk about React’s one-way data flow, component state management, parent to child, child to parent, and cross-component hierarchy. Common state is good for Redux to manage uniformly (useContext can do the same). However, it is not appropriate to bring up independent states that are managed internally by their own components. This will make it difficult to reuse components. You need to deal not only with components but also with Redux. If you don’t know why you should use a state management library such as Redux, you don’t need it now, it will come up when you feel you need it.

Redux connect and redux connect and redux connect

A: Redux itself is framework independent. It just creates a process for managing states. Good state flow and steps for modifying states make it easier to manage complex states. React connects to React and Redux connects to Redux. That’s why it’s called React-Redux.

6. React-redux performance issues (?)

A: Tell the interviewer directly that you haven’t had any performance problems (maybe I’m just too lazy to do that)

7. This refers to the problem (defined when arrow function is defined, defined when normal function is executed)

class Student {
  constructor(name) {
    this.name = 'Tom'
  }

  getInfo() {
    return {
      name: 'Jerry'.getName() {
        return this.name
      }
    }
  }
}
let s = new Student()
console.log(s.getInfo().getName()) // Jerry
// How to print Tom, can only modify the code in the class (arrow function, expand to say that this points to the problem)
Copy the code

8. Obj instantiation, pointer issues for modifying properties and re-instantiation

function changeObjProperty(o) {
  o.siteUrl= 'http://a.com'
  o = new Object()
  o.siteUrl = 'http://b.com'
}

let s = new Object()
changeObjProperty(s)
console.log(s.siteUrl)
Copy the code

9. 0.1 + 0.2! == 0.3(Accuracy loss problem: IEEE 754. How to solve it? For example, divide the integer part and the decimal part by the decimal point, add the decimal part separately, pay attention to carry processing.

10. A brief introduction to SPA and front-end routing (extension to ajax -> PJAX -> history API pushState, popState, replaceState) The relationship between browser URL loading and unloading and these apis, route mapping management and component rendering.

11. Code:

/* Implement a randomString function that returns an array containing one thousand strings, each of which is a non-repeatable 6-digit random captcha. * /
function randomString() {
// write your code here
}


Copy the code

12. Code:

/* Implements a sum function that accepts an arR and adds up the arR items. Only the add method can be used, which accepts two numbers and returns a sum */ at the back end of an asynchronous request
function add(a,b) {
  return Promise.resolve(a+b)
}

function sum(arr) {
  BeforeSum, afterSum. BeforeSum.
}

/* Variant: What if the backend set a concurrency limit, can not request more than three, what if? * /
Copy the code

Second interview

1. CSS problem: Implement a Chrome back button, mouse over a dark circular background, inside a 90 degree Angle.

2. 参 考 答 案 : Suppose page A has some query parameters, click to open page B to take the parameters of A to page C. Then page B will jump to page C. If the parameters of page B are taken from page A, then page C will not be taken. (I spent most of my time talking to the interviewer about possible ideas and then coding. Query parameters merge processing, jump interception and other implementation.

3. Change 123456789 to money mode, i.e. 12,345,678.

4. The content of your resume is not recorded here.

On three sides

1.

/* Please implement the lottery function rand, ensure that the random input is represented by an array of objects, the object has attributes N represents the name of the person, w represents the weight of a random return a winner name, probability is proportional to w */
let peoples = [
  {n:'p1'.w:100},
  {n:'p2'.w:200},
  {n:'p3'.w:1}];let rand = function (p) {};Copy the code

2. Open question: An HTML file introduces a large JS, which is an out-of-order array of numbers (huge length). Find the maximum value of the JS file and display it.

3. Problems related to the project are not recorded here.

Three rounds of technical aspects can actually feel that one side will investigate some front-end foundation and source code related knowledge, two and three sides will also ask a lot of project experience, management content. For example, git workflow, CI/CD related practice, some thoughts on reconstruction, influencing factors of selection, and my usual way of learning. I also do data development and a little node development in the bank, which is a plus.

HR side

I feel that hr actually has some game elements, but chat with HR, try to be sincere, work is mutual choice, in the current situation of the company and deviation from their own career planning, their expected development, treatment can be sincerely said. Finally, I am satisfied with the treatment offered by Byte, and I am very happy to develop on a better platform. (After all, the technical background of the bank is really not comparable to byte, or need a better platform to improve themselves, it is not very good to rely on their own…)

feeling

I remember it started at the end of March. At that time, I suffered a big blow, and I couldn’t see a way out at work. I couldn’t sleep every night, and I couldn’t work well during the day, and I couldn’t eat anything. Bybyte contacted me and asked if I would be available for an interview, so I said a date and started the interview. So forced themselves to start to look at the data, the in the mind was a little better.

I still remember that one Sunday, the sun was shining outside the window, and I talked with an interviewer for more than an hour. I felt the atmosphere was very relaxed. There were programming questions, but the difficulty was not high. I told the interviewer my ideas while reading the questions, and then started coding. The interviewer would nod his head every time I finished and say, “Okay, sure. Boon boon. Let’s move on to the next one.” I’m very grateful to him for giving me the pleasure of communication technology, which I haven’t had in a long time. At the end of the interview, I asked him some questions about career planning, and he patiently told me about his own experience. Finally, he was very grateful that I could spare time for the interview on the weekend.

The result of one side came out very quickly. When HR told me that night, I actually didn’t believe it. I have tried to work in big factories before graduation, but all of them were round trips without exception. I deeply doubt whether my ability really does not match the positions in these big factories. Entering a bank after graduation is also a bit of an escape. Then I made an appointment with HR for the next round of interview, and decided to put aside those unpleasant memories and devote all my energy to the preparation of the second interview after work.

Then I talked with my first teacher who had taught me during my internship that I was out of date. She answered my request patiently as before and also gave me some materials for me to make up for my omissions. Later, I found a front-end interview material prepared by my classmates on Github. As time went by, my concentration during this period reminded me of the senior year in high school. The clear goal and daily work, overtime and review made me feel calm unexpectedly.

In the second interview, the first thing the interviewer said to me was, “The interviewer gave you a good evaluation, and I hope you can continue your efforts.” . The second interview actually asked a lot of projects on the resume, including some implementation details, as well as the application scenarios of the project, pain points solved and difficulties in technical implementation. I could see that the interviewer was trying to find out as much as possible about what I had done before, and questions kept coming up during the discussion. And then is some general questions, written in the above the surface through the routing jump to intercept the problem, the interviewer should be inspect my ability of coding, this problem should be spent 40 minutes, continuously put forward its own problems clear requirements, continuously put forward their own ideas to discuss the feasibility, then try to code.

In fact, I am not satisfied with the performance of the second, anxiously waiting for the results, and finally came to the three. In front of three asked a lot of students originally in byte, but also at that time added Hao God wechat, to the universe team, the group is full of big men, every day can learn new things, can be happy!

The three interviewers may be at different levels and do not like me to talk in detail or give specific examples. They hope that I can speak concisely and abstractly. I was interrupted several times during the interview, so I was asked not to expand too much and just summarize. I have been discussing the coding problem with the interviewer, because I really had no idea at that time, and I felt whether it was cold this time. . Finally, I managed to write it, but was told the code was too complicated. Open questions above all classics, but also asked a lot of more abstract questions, feel partial management some.

When I finally got to hr, I suddenly realized THAT I wasn’t as bad as I thought I was. I talked with HR about my current job, future planning and expected treatment. After that, I went through the process to negotiate the salary with HRBP. After receiving the offer, I talked with the current leader. In fact, I was still not used to parting. He asked me why I wanted to leave and what I was not satisfied with, and then congratulated me on moving to a bigger company with deeper technical knowledge. At the moment, I am sorting out my work. After the handover, I will move out of the place WHERE I have been for nearly two years and start a new life. In fact, a person wandering, from place to place, meet some people, say goodbye to some people or become accused of others. I always need to think about where I want this road to go.

I wish you all a satisfactory offer!