preface

I am honored to have been interviewed by JINGdong Group – Jingdong Mall – User experience Design Department of Jingdong Mall – Front-end Development Department – front-end architecture Group.

What I’m going to do is I’m going to give you the right answers to the questions, some of which I’ve covered in previous columns, so I’m going to include links to the columns I’ve written.

I hope that in addition to seeing how to answer the interview questions on the basis of, or suggest that you can systematic, more precise to understand the various aspects of the pilot to test knowledge points, to understand exactly what this is what, rather than what this question to answer.

The body of the

Symbolic beginning

I first asked about my education background, introduced the projects I had done before, and what technology stacks I had used, and I felt that I had encountered more complex functions in my projects

Here everyone according to their own situation, as long as the answer is clear can

Front-end technical issues

1. What is the vUE life cycle?

  • beforeCreate(Before initializing bounds)
  • created(After interface initialization)
  • beforeMount(Before rendering the DOM)
  • mounted(After rendering the DOM)
  • beforeUpdate(Before data update)
  • updated(After data update)
  • beforeDestroy(Before uninstalling components)
  • destroyed(After uninstalling components)

Note: In our daily work, we can actually clearly know that there are these life cycle methods, but, if you want to understand each life cycle before the implementation, what do you do, please jump: detailed Vue life cycle implementation

2. How is VUE responsive data implemented?

In the official documentation, there is a brief point, is based on Object. DefineProperty to implement;

However, there is a requirement that before instantiating the Vue constructor, all the data that is processed for bidirectional binding must be initialized in the data, even if it is a null value.

This is because Vue checks the data each time it is instantiated, looking at and listening for existing properties with object.defineProperty.

Each time it is necessary to determine or display the data of the current responsive listener, for example:

<div>{{name}}</div>
Copy the code
new Vue({
    data(){
        return {
            name:'zhangsan'}}})Copy the code

When I initialize it, I bind a name property, which is presented in a div;

When I add a name to the div, I actually get the name attribute when the template is compiled;

As mentioned earlier, I have bound the current property to object.defineProperty, so when I get it, I will call the get method;

Before that, I had to instantiate a DEP queue, and every time I get the name attribute, I do a push;

When I want to do data modification, such as zhangsan into lisi, then in the set method, my current attribute queue has listened to the current attribute location, all update again;

Finally, modify the property values in the data object;

Vue source code parsing (before instantiation) – the implementation principle of responsive data

4, a URL from the input press enter key, to the page display, have experienced what?

First, after entering the address and pressing Enter, the DNS server will resolve the ADDRESS through the current address.

At this point, the browser sends a TCP connection request to the Web server (three-way handshake) after finding the real IP:

The first time: When the connection is established, the client sends a SYN packet to the server, enters the SYN_SENT (Transmission Control protocol) state, and waits for the server to confirm.

The second time: After receiving a SYN packet, the server must acknowledge the syn packet from the client and send an ACK packet, that is, a SYN + ACK packet. At this time, the server enters the SYN_RECV state (the state when the server receives the SYN packet from the client and sends an ACK packet).

Third attempt: After receiving the SYN + ACK packet from the server, the client sends an ACK packet to the server. After the PACKET is sent, the client and server enter the ESTABLISHED state (TCP connection succeeds) and complete the three-way handshake.

After the three-way handshake, the connection is established between the client and the server, and the TCP protocol is broken.

Starts to access the default index. HTML under the current server, and calls the accessed resource file to display the corresponding content.

How do you understand object orientation, what is object orientation, and what have you done with object orientation

Object-oriented has three major features: encapsulation, inheritance, polymorphism, in fact, there is another feature, is abstract, but we usually talk about this point;

Object-oriented has two concepts: classes and instances;

Object-oriented advantages: scalability, easy maintenance, high cohesion, low coupling;

The downside of object-oriented: Because of the nature of it, the overall size of it is very large, even if it is broken up into different classes, which is a disadvantage compared to functional programming, because functional programming has a characteristic that each function only does one thing;

In the project, there are a lot of things to do with object-oriented, and two of them are the most impressive. One is the function encapsulation of instant messaging, and the other is the unified processing of audio and video playback. Instant messaging involves a lot of functions and is quite tedious.

Because our products involve a lot of audio and video, but audio and video files are not allowed to play at the same time, only one at a time;

For example, if I play audio A, and then I hit Play audio B, then audio A is paused, not cleared, and the next time I hit play it again;

In addition, if I continue to update the data obtained from my data object in the state, it will also affect the JS engine thread. For example, I am also doing something else at this time, and I have to queue in the event loop, which is not what we want.

So I use a class to do this, a singleton pattern for design patterns;

When the page is first entered, only the file is loaded and the object is not instantiated.

When I find an operation on a media file (audio/video), I am creating or retrieving it.

class Media {
    
}

Media.instance = undefined;

Media.getInstance = function(){
    if(! Media.instance){ Media.instance =new Media()
    }
    return Media.instance;
}
Copy the code

This is a simple singleton pattern implementation;

So if we want to do this to the media file, we need to have a separate property:

class Media {
    constructor() {this._onlyMedia = {
            id:' '.url:' '.name:' '.curTime:' '.duration:' '. }}}Copy the code

So you get the general idea, like every time I click on a media file, I’m going to compare whether it’s the same, because it has a different ID;

I'm not going to write down the actual implementation steps, just make the general idea clearCopy the code

6. You mentioned an event loop just now. Can you briefly describe what an event loop is?

As we all know, JS is single-threaded. Although there are workers now, they can only perform calculation, but not operate DOM.

Js at the beginning of the execution of the thread, is the main thread, and then the main thread execution is completed, microqueue microtask loop execution, microqueue execution is completed, in the execution of macro queue macroTask;

Methods of macro queues: setTimeout, setInterval, setImmediate, I/O, and UI Rendering

Microqueue methods: promise.then, process.nexttick, Object.observe(deprecated)

Just before I have written this article, want to understand this knowledge in detail, jump: Performance optimization – JS event loop mechanism (event loop)

Talk about XSS attacks

It’s a way of scripting code into a page for other users, usually through form submission;

If we were to write this kind of attack defense, the simplest way would be to use the content of form submission, do processing, do not allow to submit script tag content, etc.

In actual projects, axiOS is usually used to submit requests. It has intercepted XSS attacks, so we do not need to do this intentionally.

8, the difference between == and ===

== will automatically convert the type for comparison, === is mandatory will not convert

Can an on event listen for multiple events in vUE?

can

Career development and future planning

1. How do you see yourself in the future and where do you want to go

My job is a front end, but I’m interested in the products is also very, do the front for so long, I found some front and some problems of product communication directly, can express the meaning of each other is the same, but the terms are different, the ascension of communication cost, leading to a direct will appear certain friction each other;

And if everyone stood in their point of view to consider problem, will have some limitations, including product, although I was a programmer, but I will stand on a user’s point of view to consider problems of our products, and I am a user, I want to what kind of product, what kind of product in line with my needs, To figure out what kind of product the product manager wants to design, and what kind of product the user wants, these are two concepts;

If regardless of the direction of the product only consider development of words, I’m thinking I learn, the front end of the front end, after all, involves the knowledge are many, although now a lot of front to understand backend, this I agree, but I think as a front end, or their own job to do an extreme, to study other language;

What I mean by extreme is not to complete the work at hand well, but to keep learning and tracking in this field, and to have a strong sense of smell for new knowledge.

At ordinary times, I will understand the knowledge, the exploration of new technology, and some of the larger framework source code interpretation and then write an article published to the blog;

2. You mentioned that you would write a blog. Was that a requirement of your previous company?

No, I wrote it in my own name;

In the past, I was very few to write this aspect of things, do not like to write, lazy, later contact with a friend, he said you can try to write, sum up their own, then I began to try to write;

At first, when I wrote the first article, I felt like this. I wrote an article according to my idea. However, in this article, I found that there were problems with the first typesetting format, which looked very inconvenient and messy.

Then there are some points of introduction is very unclear, or there are certain problems in understanding, through the comments of netizens, I can also know where my own weaknesses;

For a long time, you will form this habit, like to share, like to write articles, and everyone progress together, in fact, blogging also has a benefit, that is, you write a blog for a long time, expression ability will also have a certain improvement;

If you are good at technology but can’t express yourself, it is difficult for you to work together, so you can only fight alone. If you can make what you say understood and accepted by everyone, it means you can play a great role in the team. Sometimes, good at technology is better than good at communication and expression.

conclusion

Later two interviewer out half a day, then came in to say with me, the feeling is very suitable, is the most appropriate a interview these days, but because of 52 principle, they went to consult the technical director, technical director said that hr might be not over there, then asked a colleague now before I in jingdong, he said if you want to this is not in conformity with the principle of 52 come in, Everyone from the interviewer to the technical director should take responsibility to ensure that I can stay in JD.com for two years.

May be my ability or insufficient, but the above are my answers, but in the form of a blog to write out, write more detailed, and may be the latter, if the latter, that injustice;

Finally, he recommended me to a driverless company. After three rounds of technology interviews, he waited for HR’s notice.