Today, I was arrested and interviewed the candidates. Here are a few knowledge points involved in the interview.
I will hand the candidate a bottle of water every interview, so that the candidate will be less nervous and have a better state for the interview. After all, the interview is a two-way choice, and the company needs to find the right person as soon as possible. There are not so many online comments. Psychological warfare.
Here I also want to talk about screwing up the interview rocket job, especially in the development industry. Many interviewers ask questions about the direction they are good at, completely ignoring the candidate's advantages, which brings a very bad interview to the candidate. Experience. It is best to judge whether the candidate is suitable for joining your team based on the candidate's strengths in the interview.
A normal interview should be based on the technical points involved in the candidate’s resume. Otherwise, what is the purpose of giving you a resume during the interview. As for the knowledge points not covered in the resume, it is necessary to ask, I don’t think it is necessary, because many people are in When writing a resume, I always strive to be comprehensive, and I can’t wait to write familiar knowledge points that I have heard of. So just follow your resume to ask questions. In addition, I would like to ask about some recently popular technologies, mainly examining the sensitivity of candidates to new technologies and their ability to accept new things.
If it involves a question that the candidate cannot answer, you also need to answer the candidate. After all, people come from so far away for your interview, and there is always something to be gained.
Finally, select a candidate in the resume to ask in depth. This link is generally called rating. If the previous questions are answered well, the person will basically pass, and in the end, the person will be rated. If the answers to the previous questions are not ideal, you will not be able to reach this link.
Proxy
is no longer a strange word in 2020. He can do a lot, especially after Vue3.0 is refactored through Proxy. Many interviewers like to ask about this Proxy and its comparison with Object.defineProperty.
Proxy is a special access proxy for the object. Through the Proxy, you can easily monitor the reading and writing process of the object. Compared with defineProperty, the function of Proxy is more powerful and even more convenient to use.
Here we define a person object, and we use new Proxy to create a proxy object for our person.
The first parameter of the Proxy constructor is the object we need to proxy, here is person, and the second parameter is also an object. We can call this object the processing object of the proxy. This object can be monitored by the get method. Property access, through the set method to introduce the process of setting properties in the object.
const person = {
name: ‘yd’,
age: 18
}
const personProxy = new Proxy(person, { get() {}, set() {} }) Let’s first look at the get method. The simplest method can receive two parameters. The first is the target object of the proxy, and the second One is the attribute name of the attribute accessed from the outside. The return value of this method will be the result of external access to this property.
{ get(target, property) { console.log(target, property); return property in target? target[property]: undefined; } } Let’s look at the set method again. This method accepts three parameters by default, which are the proxy target object. , And the attribute name we want to write and the last attribute value we want to write. We can do some verification. For example, if age is set, its value must be an integer, otherwise an error will be thrown.
{
set(target, property, value) {
console.log(target, property, value);
if (property === ‘age’) {
if (!Number.isInteger(value)) {
throw new TypeError(``${value} must be a integer);
}
}
target[property] = value;
}
}
相比于Object.defineProperty, Proxy到底有哪些优势。
First of all, the most obvious advantage is that Proxy is more powerful. This power is embodied in that Object.defineProperty can only monitor the reading or writing of object properties, while Proxy can also monitor properties in the object in addition to reading and writing. Deletes, calls to methods in objects, etc.
The second advantage is to monitor the array object. Usually we want to monitor the changes of the array. Basically, we need to rewrite the array method. This is also the implementation of Vue. The proxy can directly monitor the changes of the array. In the past, the most common way we wanted to monitor the operation of an array through Object.defineProperty was to rewrite the operation method of the array. This is also the method used in Vue.js. The general way is to override the array prototype through a custom method. Methods such as push and shift on the object hijack the corresponding method call process.
What type of object’s key supports?
This question examines whether the candidate’s basic knowledge is solid.
Many people think that the key of an object is a string type. If it was true before, the key type of an object in the ES2015 version can also be a Symbol.
const person = { name:'yd', [Symbol()]: 18 } This also leads to the following Symbol.
Symbol
before ECMAScript2015, the property names of objects are all strings, and the strings may be repeated. If they are repeated, conflicts will arise.
In the past, the best way to solve this problem was to make an agreement, but the agreed way only circumvents the problem and does not completely solve the problem. If someone does not follow the agreement in the process, the problem will still exist.
ES2015 provides a new primitive data type Symbol to solve this problem. The translated meaning is called a symbol, which means a unique value when translated. A Symbol type of data can be created through the Symbol function, and the result of this type of data typeof is symbol, which means that it is indeed a brand new type.
const s = Symbol();
typeof s; // symbol type
The biggest feature of this type is uniqueness, which means that every value we create through the Symbol function is unique. He will never repeat.
Symbol() === Symbol(); // false
Considering that a string is allowed to be received when the symbol is created for debugging during the development process, as the description text of this value, we can distinguish which symbol is when we use the symbol many times A Symbol, but this parameter is only for description, and the value generated by the same description field is still different.
const s1 = Symbol(‘foo’);
const s2 = Symbol(‘foo’);
s1 === s2; // false
Starting from ES2015, objects have allowed the use of Symbol as a property name. That is to say, the property name of the object can be of two types, string and Symbol.
const person = { [Symbol()]: 123, [Symbol()]: 456 } If we need to reuse the same Symbol value globally, we can use global variables to achieve this, or use the Symbol type to provide A static method to achieve. Specifically, it is Symbol's static method for, which receives a string as a parameter, and the same parameter must correspond to the same value.
const s1 = Symbol.for(‘foo’);
const s2 = Symbol.for(‘foo’);
s1 === s2; // true
This method maintains a global registry and provides a correspondence between strings and Symbols. It should be noted that the relationship between string and Symbol is maintained internally, which means that if the parameter is not a string, it will be converted to a string.
const s1 = Symbol.for(‘true’);
const s2 = Symbol.for(true);
s1 === s2; // true
JSONP
Many people's understanding of jsonp stays in the concept, and they have not really understood his principle. Why can he cross domains? Of course, it is not only the script tag that is not affected by the same-origin policy. Actually The above jsonp is a front-end and back-end agreed solution.
But it is rarely used now. Because now there is a more popular CORS solution, it will be relatively safer, but jsonp still has its own advantages.
Many people know the browser's same-origin policy, that is, the domain name, protocol, and port of the requested page address and the requested interface address must be consistent, otherwise the browser will intercept this request. Browser interception does not mean that the request is published, the request can still reach the server normally, if the server returns normally, the browser will receive it, but it will not be handed over to the page we are on. This can be seen by viewing the network.
jsonp generally uses the src attribute of the script tag. For the server, there are only two operations: request and response. When a request comes, it will respond, no matter what the response is. There are too many types of requests.
The browser inputs a url is a request, ajax calls an interface is also a request, and the src of img and script is also a request. These addresses will reach the server. So why does jsonp generally use script tags? First of all, everyone knows that the js loaded by script has no cross-domain restrictions, because what is loaded is a script, not an ajax request. You can understand that the browser restricts the XMLHttpRequest object, and script does not use this object.
It is not enough to have no restrictions. There is a more important point because script is a label for executing js scripts, and the content he requested will be directly executed as js.
It can also be seen that jsonp and ajax have different requirements for return parameters. jsonp needs the service to return a js script, and ajax needs to return data.
Therefore, the server is required to process the jsonp request separately. Generally, the server interface will return the response data through function calls. For example, if the returned content is'yd', then it must be returned as cb('yd')
cb('yd')
This is a function call script, which will be executed immediately after loading through the script tag, if we define a cb function globally. Then when this script is executed, the function we defined will be called, and the parameters in the function are the values returned by the service. The front end can also be obtained in this function.
function cb (data) { console.log(data); } So jsonp is a result agreed by the front and back ends.
The CORS
browser uses the same-origin policy to limit the cross-domain problems between the front and back ends, but it also provides corresponding solutions.
When the server returns the corresponding response, it can allow cross-domain requests for which URLs by setting the response header, so that the front end can successfully get the response result. So this also confirmed that the front-end failed to get the result is not that the server did not return, but the browser did not give the front-end.
Access-Control-Allow-Origin: www.xxxx.com
How does the proxy of webpack solve cross-domain?
As mentioned earlier, cross-domain is due to the browser's same-origin policy restriction. The problem occurs in the browser, so can we avoid the browser? Earlier I wrote an article about nginx that the front-end needs to know, which introduced reverse proxy and load balancing. In fact, it is like a reverse proxy here.
When we use webpack to develop projects, webpack's dev-server module will start a server, which not only helps us do automatic updates, but also can do reverse proxy.
That is, we send the request to webpack-dev-server, and then webpack-dev-server requests the back-end server. There is no cross-domain problem for the requests between services. As long as the back-end returns webpack-dev-server, you can get it. To, and then back to the front end.
Well, I basically asked these questions. The boss said that the interview time should be around 20 minutes.