2020.10.27 summary of Beijing Ali cultural and entertainment

2020.10.27 Summary of Beijing Ali cultural and entertainment center

Let's start with the results ： It didn't ️️️

At 7:00 pm, the interviewer called on time , He first introduced himself , Then I said that tonight's interview is to communicate the ideas and directions of several questions , No standard answer , They are all open topics . Um. ··· Right enough ~~~

---

What is your company's project workflow ？

【 I 】： What process ···？
【 interviewer 】： Who will connect with you on the product side ？ Is there an agreement ？ Whether there is systematic analysis and review after receiving the project requirements ？ What is the process of going online ？
【 I 】： We are usually the technical manager to connect with us , The technical manager goes to connect with the product , The project requirements are all told by the technical manager , and UI Over there, after making the design drawings, we will follow the design drawings on the blue lake .
【 interviewer 】： What about the front end , Did you get the design drawing without review ？ Just do it ？
【 I 】： I don't know about the judges
【 interviewer 】： You're not involved in any of this, are you
【 I 】： Well, I wasn't involved
【 interviewer 】： How does your system operate when it is released ？
【 I 】： use docker Publish the packaged image to rancher On , stay rancher Deploy the image to the server .
【 interviewer 】： What are the testers doing inside
【 I 】： Our company personnel test on the server
【 interviewer 】： How many environments do you have , Is it direct to the online
【 I 】： It is first released to the test server of the company's intranet , No problem with the test, and then release it online
【 interviewer 】： Do you think there is any problem with the current process
【 I 】： I think the current image will be sent to after packaging rancher Update mirror to server on , A little bit of a problem .
【 interviewer 】： Do you pack the front end , Will the power of the front end be a little too big ？
【 I 】： If the front-end personnel do not come to pack , Let the implementation or technical manager package the front end , Maybe the error rate is a little higher , After all, front-end personnel must be more familiar with the packaging of front-end projects .
【 interviewer 】： Um.

---

Have you paid attention to Chrome The browser 80 Features of the version ？ What is the impact on the front end ？

【 I 】： I didn't pay attention to ···
【 interviewer 】： Have you ever used iframe
【 I 】： Never used
( What he should say here is iframe Well , Not sure , I said I didn't use it ···)

And then I checked ,Chrome Browser's 80 edition ：

1. JavaScript Optional chaining and Nullish coalescing Formal support .
2. Favicon Icon support SVG Format .
3. Remove the right FTP Support for .
4. Web workers Chinese support ES modules.
5. Content indexing API.
6. Disable third parties Cookie

Reference address ：https://zhuanlan.zhihu.com/p/107126906

---

Have you decided what technology or component library to use in your work ？

【 I 】： I previously selected a video preview component
【 interviewer 】： When you choose components , What is the process of thinking ？
【 I 】： The parameters are simple 、 Beautiful design 、 There's nothing wrong with it
【 interviewer 】： Did you choose one and use it
【 I 】： I have seen two , I chose the current one because its documentation is relatively clear , The interface is quite comprehensive , The required callback events of the operation logic are also provided , It's more convenient .

---

How do you manage the login status of the system

【 I 】： Is when the login interface is requested , Return the back end to token There's a front end , And judge by the expiration time token Is it invalid
【 interviewer 】： that token Where does it exist
【 I 】： It's there cookie Inside
【 interviewer 】： Then you think there is cookie What's in it , This token How does it work , How to verify your identity
【 I 】token It's an identity certificate , Each subsequent request will be brought along with the interface to the backend for verification
【 interviewer 】： Have you learned how the backend validates token It's someone's information
【 I 】：token It should be session Well , The back end should have a session To collect the data from the front end session Make a comparison and verification ···
【 interviewer 】： Um. ···

---

Well, if you put the local cookie Copy to another computer or browser cookie in , Is it because the identity information is obtained by another browser and you can access the server as you ？

【 I 】： Uh, yes ,cookie It's all over , The identity information will naturally pass
【 interviewer 】： Um. , Do you have any plan to protect it
【 I 】： You should also save user information
【 interviewer 】： Where should I put it
【 I 】： forehead ·· Can't save cookie In the ,cookie Will also be tortured
【 interviewer 】： You are not involved in e-commerce and payment functions , In case of payment , Can I hold your cookie Information to pay for ？
【 I 】： Uh, yes
【 interviewer 】： Well, this may not involve your business , Your business may token That's enough.

---

Have you ever had any safety problems before , How to solve it before

【 I 】： When I was a junior and senior , I have done a job related to payment , At that time, I didn't know much about safety , The payment amount and other data are put in the front end , Click to bring the data to the back end when you pay , But then someone modified the data through the interception interface , You can tamper with the payment amount . Then the order is generated at the back end , The front end only submits one order number in the past , The amount is no longer carried by the front end . Besides , I also made a lottery turntable , The results of the turntable are also generated at the front end , Some people modify the generated data of the front end , Get the data you want , After I discovered this problem , The result of the turntable is generated at the back end , As soon as the user clicks the turntable, he starts to get the lottery results from the back end , Although the turntable didn't stop, the result was already produced , Then control the position of the rotary table according to the results .
【 interviewer 】： Um. ··· If you take another step up in the future , I suggest you look up again .

---

ES6 Do you use it a lot , Array forEach and map What's the biggest difference

【 I 】：map There is a return value ,forEach no return value
【 interviewer 】：map Does it change the array itself
【 I 】：map Can't
【 interviewer 】： Um. ,forEach Well
【 I 】：forEach Meeting
【 interviewer 】： Um.

---

Used ES6 What's new in Set Combination

【 I 】： Used to , It is mainly used for weight removal
【 interviewer 】： Um.

---

Give you an object , How to judge whether it is an empty object ？

【 I 】： have access to Object.keys Turn array , To determine length Is it equal to 0
【 interviewer 】： Yes, yes, yes , anything else
【 I 】： This is how to convert an array , I think several types of array conversion are the same
【 interviewer 】： Let's talk about
【 I 】： Expand with the extension operator
【 interviewer 】： What else , Or is there anything else , It's up to you , See if you can still think of
【 I 】： You can also use ES2017 One of the Object.entries Convert an object into a collection of key value pairs
【 interviewer 】： Well, it's the entity of the object , anything else
【 I 】： Not for the moment
【 interviewer 】： also toString To judge , just so so for···in

---

React The parent component of passes a property to the child component , Is a callback function , Will the refresh of the parent component trigger the refresh of the child component

【 I 】： Meeting , As long as the parent component is updated , The subcomponents will be updated
【 interviewer 】： So how to control the sub components not to update
【 I 】： adopt shouldComponentUpdate Life cycle to control , It returns by default true, Update subcomponents , You can judge whether the attributes of the sub components have changed , Return without change false Don't update
【 interviewer 】： Um. , There's a hole in it , The attribute passed to the sub component is a function , How to judge the change of function attributes in the subcomponent
【 I 】： I don't know , I haven't noticed how to judge the change of function properties before ···
【 interviewer 】： Well, this is a pit , About hooks Performance optimized

It seems that I have to learn hooks 了 ····

---

What do you think of Vue2 Upgrade to Vue3.0 The most fundamental change in

【 I 】： The most fundamental change should be its response API The change of , Originally used to Object.defineProperty, Now it's Proxy, Previously, you needed to recursively listen to all the responsive data at once , and Proxy There is no need for one-time monitoring , Listen to which layer of the object you access
【 interviewer 】： What else , What's the difference between them
【 I 】：Object.defineProperty Unable to listen for the addition and deletion of object properties , and Proxy Can pass deleteProperty Method to listen for the deletion of an attribute , adopt set Method to determine whether the original attribute value is empty to determine whether a new attribute is being added .
【 interviewer 】： Um.

---

Vue3.0 Inside Vite Is there any change in the compilation method

【 I 】：Vite Is a new compiler , Equivalent to a packaging tool , That is, a service , No need to pack , While using webpack In fact, it is packaged under the development mode , Only the result of packaging is in memory , Every time you update a little bit of code, you need to re code . and Vite There's no need to pack , You visit a page , It will deal with this Vue page , take Vue Code to js
【 interviewer 】： Then you say Vite Is it possible to pack
【 I 】： forehead ····
【 interviewer 】： That is to say, if it goes online , Also use Vite Packing
【 I 】： I don't remember that. Alas , I only remember development Vite You can compile the page directly Vue file
【 interviewer 】： Well, that's right , But what I just said is a little flawed , Is to really use Vue3.0 Package and go online , Or use it webpack package , It is only used in the development and debugging phase Vite To improve efficiency
【 I 】： Oh

---

How do you solve cross domain problems

【 I 】： Our production mode uses Nginx Configure reverse proxy to solve cross domain problems , The development mode uses webpack-dev-server It's equipped with Proxy Cross domain
【 interviewer 】： Can you tell me Nginx How is it configured
【 I 】 stay Nginx Inside http server It's equipped with location /api, Always match to api At the beginning URL Replace with the real back-end address , Then when you visit, you don't go through Nginx This floor ,Nginx The request will be processed , According to its configuration, it will /api The first request is forwarded to the back-end address
【 interviewer 】： Can you set up a white list
【 I 】： Then I don't know , Our systems are internal systems for certain groups
【 interviewer 】： Oh , It is purely for internal use

---

Last ：

【 interviewer 】： We've had a good chat today , Some may not meet my goals and expectations , The later formal post may not be able to be promoted , This way , I think you should choose a main direction , for instance React The latest technology is solid ,Vue Interested ones are OK , Pick one . by the way , Do you think you have any bright spots that can convince me
【 I 】： forehead ··· forehead ··· I think I can write code
【 interviewer 】： Yeah yeah ,ES It's very convenient to understand , Include use JS They all have ideas . I just worked for a few years
【 I 】： Um. , Worked for a year
【 interviewer 】： Oh, oh, I have only worked for one year , Then follow up , May contact more businesses , I suggest you take another step , Think about the outward extension of the front end , For example, the interaction with the backend 、 Better solutions across domains . I am satisfied with your basic knowledge , However, what I have investigated more may be some generalized things , Related to personal work experience , It doesn't matter , Pretty good , The little girl , Come on! ~
【 I 】： OK , thank you
【 interviewer 】： Mm-hmm , If the official post cannot be pushed , Would you consider outsourcing
【 I 】： Well, I don't want to outsource
【 interviewer 】： Well, I know , That's all for today's interview , I wish you a happy future
【 I 】 thank you

---

_over