Record a front-end interview experience of Ant Financial

Coordinates in Chengdu, junior college, 4 years front-end, sharing an interview experience with Ant Financial.

one side

• 1. Self-introduction

Answer: I am XXX, experience. . . .

• 2. Vue data responsive realization

Answer: I talked a lot, I feel very excited.

• 3. Realization of vue computed

Answer: Well, I got stuck here, because I was a little nervous at the time, even though I kept advising myself, and then my mind went blank.

• 4. Are you good at css?

Answer: What I am good at is positioning in css.

• 5. Please introduce the positioning in detail?

Answer: static, fixed, relative, absolute, sticky, inherit. Then they respectively introduced their usage.

• 6. Do you know the browser cache?
• 7. Is there anything else you want to ask?

slightly.

Two sides

• 1. The configuration method and compilation process of webpack.

Answer: This question is relatively large, and I feel that my answer is not very good.

• 2. Parse URL parameters.

My thinking at the time was like this, by intercepting the parameters behind the string, and then matching through regular, respectively matching the parameter name and parameter value, they must be matched to two arrays, and then traverse one of the arrays. The following is the complete code that I implemented according to my ideas after the interview. Of course, I cannot write such a complete code during the interview.

    var getURLParam = function(url){
        let res = {};
        if(url.lastIndexOf("?") === -1)return res;
        let param = decodeURIComponent(url.slice(url.lastIndexOf("?") + 1));
        let keys = param.match(/\w+\=|\=/g);
        keys && (keys = keys.map(k => k.replace(/\=/g,"")));
        let values = param.match(/(\=(\w+|\s*)\&)|(\=(\w+|\s*))/g);
        values && (values = values.map(v => v.replace(/\&|\=/g,"")));
        keys && keys.forEach((k,i) => res[k] = values[i]);
        return res;
    }

• 3. Realize a general batch update strategy.

    let notifyFn;
    function fn1(){
        notifyFn();
        statement1;
        statement2;
    }
    function fn2(){
        statement3;
        notifyFn();
        statement4;
    }
    function fn3(){
        statement5;
        statement6;
        notifyFn();
    }
    async function onMount(){
        notifyFn = update(() => {
            //在statement6执行完之后执行
        })
        fn1();
        await Promise.resolve();
        fn2();
        await Promise.resolve();
        fn3();
    }

When I saw this question for the first time, I was stunned. I didn’t understand what the investigation point of this question was. Although I asked the interviewer, the interviewer told me about it. I still didn't understand. The interviewer said that we skip this question first and analyze the next one.

• 4. React is based on one-way data flow. The communication support between components is not good enough. Now it is necessary to simulate a global EventStore. Makes it possible to meet the following conditions to support communication between components.

    class Event {

    }

// 用法
const loader = new Event();
loader.bind("loaded",event => console.log(event));//注册事件
loader.trigger("loaded",{ data:"data" });//触发事件
loader.unbind("loaded");//注销事件

This question, I looked like it was implementing an event dispatcher, and I also told the interviewer my own implementation ideas.

• 5. Is there anything else you want to ask?

slightly.

On the one hand, I actually made enough preparations. On the other hand, because I felt that my performance was not very good, obviously I received an email that failed the interview two days later. I analyzed it in detail and finally made it. Summarized as follows.

Interview summary:

My second side was too eager and rushed, I didn’t prepare, and then I didn’t show my highlights and abilities well in the second interview. At the end of asking questions, I didn’t even ask questions, but asked the interviewer to record the questions. Come down (I intended to come down and study it, especially the third question).

In fact, with the exception of the fourth question I wrote a similar one before, I did not prepare for the other questions and played on the spot. Therefore, the key to my drop is not the problem, but my performance. I couldn't read the question directly, and then the interviewer told me about it. I still didn't understand and didn't think about why, so maybe this made the interviewer think I gave up this question.

On both sides of the whole game, I analyzed the other three questions fairly well, but in the third question, I was very panicked and did not show a calm thinking, so this should be the key point for me to drop points.

The entire Ant Financial Interview ended in this way. After this interview, I also learned my shortcomings, that is, it is easy to be nervous and flustered.

As a programmer, the most important attitude you should have is to keep specializing in research, not to be afraid of difficulties, to be calm in the face of things, and not to be chaotic in the face of danger, so that you can better show yourself. And I didn't do it, so I will prepare well in the next time and fully improve myself. I want to hope that I can continue to participate in the interview in half a year.

Learning is endless, there is still a long way to go, and I still have a long way to go. After the interview, after my own summary and reflection, I finally understand that what the interviewer wants to examine is not the answer itself, but whether I have the determination to solve the problem, whether I have the ability to calmly analyze the problem, and my own thinking and understanding .

I also practice an algorithm question every day, urge myself to study hard, and record my thoughts, and then organize it into a document website. Welcome to check offer algorithm question .

My open source project is a color picker written in native JavaScript, flexible custom extension, modify the configuration object can also automatically update ew-color-picker .

My documentation has been improved a lot, and the use of each api is introduced in detail. I hope that I can raise an issue. There are still many imperfections in this project. ewColorPicker document website .

I’m thinking about recording the online course play typescript1 , play typescript2 suitable for a certain basic front-end, I hope everyone will support you, thank you.