Gluten series ② - Didi intern cool the meridian

preface

I made an appointment for an interview two or three days after my last internship on didi’s official website. I asked a total of 16 questions as follows. The questions were not very difficult compared with those in the school, and I also answered about ten of them correctly. I felt ok in the whole answer (I was a little nervous in the first interview). After answering the question, the interviewer said that MY performance was good and that someone would contact me later. After waiting for a few days without a call, he added the contact in the email to ask, and the result is shown in the picture.To sum up the reasons, I think I may not be very clear when I answered, I did not list points, and the depth of the answer is not enough, some questions did not answer to the essence. Keep up the good work. Before the school did not find a good company internship, to the school changsha there to find an internship company. I’m talking a lot of nonsense, so let’s go straight to the title.

Drip drip intern side with questions and solutions

1. What is your understanding of the box model?

The first interview, a little nervous, resulting in such a simple question, unexpectedly did not answer the complete…

The main thing is to make both of them better

Standard box model

IE Box model

Image from CSS box model

2. What new tags have HTML5 added?

Template, Section, nav, article, aside, Header, footer, main, Canvas, SVG, video, audio, source, track, menu

Semantic HTML

Different function boxes should be used to represent the corresponding function of the HTML tag:

① Easier to read (increase code readability, easy to maintain)
② Make search engines easier to “read” (SEO)

The night before, I watched a little bit, but I only answered video and audio, probably because I don’t use them much at ordinary times. In fact, I have been very nervous to this, but fortunately the questions behind are also very good answer.

3. What are block-level labels and inline labels? What’s the difference? Essential difference?

(1) Block-level elements

div,p,h1-h6,ul,ol,dl,li,header,footer,aside,section,article,form,table

(2) Inline elements

span,img,button,input,b,q,i,a,em,label

(3) Difference

I haven’t really looked at this distinction before, except to say that block-level tags are placed on a single line, while in-line tags are placed next to each other until the edges of the browser are wrapped. What’s the essential difference? Do you know?

(4) Essential differences

Set width for inline elements. The height attribute is invalid
Only margin-left, margin-right, padding-left, and padding-right inline elements have margin effects. Other attributes have no margin effects
For inline elements, width is invalid, height is invalid, and margin and padding are unaffected
Block-level elements can set width and height attributes

4. How do I set values to change their inline or block level?

Set display to block, inline, or inline-block, but the latter two are different

Blocks are the block-level elements in point 3 above
Inline: Sets the label as an inline label. Width and height cannot be set
Inline-block: Sets the label to an in-line block-level label, which can be set width and height

5. CSS positioning, which positioning, fixed is relative to which positioning?

Static: is the default value of the position property. If you omit the position attribute, the browser assumes that the element is static. This keyword specifies the normal layout behavior of the element, that is, the current layout position of the element in the general flow of the document. The top, right, bottom, left, and Z-index attributes are invalid
② relative: indicates that the element is static and relative to the default position. It must be used with the top, bottom, left, and right attributes to specify the direction and distance of the offset
(3) Absolute: An element offset that is not static relative to its parent is searched one layer at a time until the root element is found. It must be used with the top, bottom, left, and right attributes to specify the direction and distance of the offset
Fixed: relative to the viewport (viewport, browser window) offset, that is, the positioning base point is the browser window. This results in the element’s position not changing as the page scrolls, as if it were fixed to the page. The position of an element is specified by the left, top, right, and bottom attributes
⑤ Sticky: different from the first four attribute values, it will produce a dynamic effect, much like the combination of relative and fixed: In some cases it is “relative”, while in other cases it is “fixed”. In other cases it is “fixed”. If sticky is effective, it must be used with top, bottom, left and right attributes. Otherwise, it is equivalent to relative positioning and does not produce the effect of “dynamic fixation”. The reason is that these four attributes are used to define “offset distance”, which browsers treat as the threshold for sticky to take effect

6. What are the ways of horizontal and vertical center?

(1) Horizontal center

Inline element: text-align: center
Block element: margin: 0 auto
Absolute: (left: 50% + margin-left: negative)
translateX
Flex: (display: flex; The justify – content: center;)

(2) vertical center

Inline element: height = line-height
Absolute: (top: 50% + margin-top: negative)
translateY
Flex: (display: flex; flex-direction: column; The justify – content: center;)

7. What are floats? What are the effects of setting a float?

(1) Float

None: the default value is not floating
Left: left float
Right: floats to the right

(2) What is the impact?

The element with the float property is removed from the standard flow and moved to the specified location

(3) How to clear floating

Selector {clear: property value}; The clear: clear
Parent add overflow: Hidden
Clear the float with the after pseudo-element
The parent element is also set to float
The parent element sets display:table

8. What are the basic data types?

Value types

String,undefinded,Boolean,Number,Symbol

Reference types

Object,Null

What about closures?

(1) What is a closure

Simply put, closures are functions that can read variables inside other functions. In essence, closures are Bridges that connect the inside and outside of a function
It can be understood as follows: A closure is like a function carrying around a satchel-bag, and that satchel-bag contains some of the things that a function needs when it’s born, and the technical way to describe it is to return a child function in a parent function, and if the child function refers to variables in the parent function, those variables become a closure, It is available throughout the lifetime of the subfunction.

(2) The representation of closures

Return a function
Passed as a function parameter
The callback function
Atypical closure IIFE(execute function expression immediately)

(3) Closure application scenarios

Variables reside in memory for a long time
Avoid contamination of global variables
Private members exist
Modular packaging, HOC, etc

(4) Disadvantages of closures

Because closures refer to variables/functions in the scope of the enclosing function, they take up more memory than other non-closure functions
When the outer function exits the call stack after execution, the variables in the outer function scope may not be collected by the JS engine’s garbage collector, causing a memory leak. Overusing closures can lead to excessive memory usage and even memory leaks

10. What are the JS events?

This topic belongs to the review blind spot, only talk about click, drag, zoom and small mouse events

1.UI events: Triggered when the user interacts with an element on the page
- DOMActivate: Indicates that the element has been activated by user action (mouse or keyboard)
- Load: Triggered on the window when the page is fully loaded
- Unload: Fires on the Window when the page is completely unloaded (as opposed to above)
- Abort: When the user stops the download process, it is fired on the
- Error: Raised on Windows when JS errors occur, on elements when images cannot be loaded, and on
- Select: Triggered when the user selects one or more characters in a text box
- Resize: Fires on the window or frame when its size changes
- Scroll: Triggered when the user scrolls an element with a scroll bar
2.“Event”: fires when a page element gains or loses focus
- Blur: Triggered when an element loses focus
- DOMFocusIn: Fires when the element gains focus
- DOMFocusOut: Fires when an element loses focus
- Focus: Fires when the element gains focus
- Focusin: Fires when the element gains focus
- Focusout: Fires when an element loses focus
3.Mouse events: Triggered when the user performs an action on the page with the mouse (scroll wheel also counts)
- Click: Triggered when the user clicks the main mouse button or presses the Enter key
- Dblclick: Triggered when the user double-clicks the main mouse button
- Mousedown: Triggered when the user presses any mouse button
- Mouseenter: Triggered when the mouse cursor moves from outside the element to within the element for the first time
- Mouseleave: Triggered when the mouse cursor over an element moves outside the scope of the element
- Mousemove: Fires repeatedly as the mouse pointer moves inside the element
- Mouseout: Triggered when the mouse pointer is over one element and then the user moves it over another element
- Mouseover: Triggered when the mouse pointer is outside one element and then the user moves it inside the boundary of another element for the first time
- Mouseup: Triggered when the user releases the mouse button
- Mousewheel: triggered when the user interacts with the page using the mousewheel to scroll the page vertically
(4)Keyboard and text events: Keyboard events are triggered when the user uses the keyboard
- Keydown: Emitted when the user presses any key on the keyboard, and repeatedly if held
- Keypress: Triggered when the user presses a character key on the keyboard, and repeatedly if held
- Keyup: Triggered when the user releases a key on the keyboard
- TextInput: This event is triggered when the user enters a character in an editable area
⑤ Compound events (this is not detailed)
⑥ Change event: give a hint when a part of the DOM changes
- DOMSubtreeModified: Triggered when anything changes in the DOM structure
- DOMNodeInserted: Triggered when a node is inserted as a child node into another node
- DOMNodeRemoved: Triggered when a node is removed from its parent
- DOMNodeInseretedIntoDocument: in a node is inserted into the document directly or indirectly by subtree is inserted into the document after the trigger
- DOMNodeRemovedFromDocument: in a node is removed from the document directly or indirectly by subtree is removed from the document before the trigger
- DOMAttrModified: Triggered after a feature has been modified
- DOMCharacterDataModified: Triggered when the value of a text node changes
All landowners HTML 5 events
- contextmenu
- Beforeunload: Triggered before the browser unloads a page, it can be used to ununload and continue with the original page (pop-up messages, such as whether to close the current page)
- DOMContentLoaded: Triggered after the complete DOM tree is formed
- Readystatechange (5 states not detailed)
- Pageshow, pagehide
- haschange
⑧ device events: mobile phone screen rotation, touch and gesture events, etc

11. What is Webpack? Role? The difference between Loder and Plugin (summarized in the previous article)

This was sorted out before, so it’s a good answer

What is PI (1)?

Webpack is a module packaging tool that you can use to manage module dependencies in your project and compile the static files needed to output your modules. It can well manage and package the HTML, CSS, JS and static files used in development, so that development is more efficient. Webpack has module loaders for different types of dependencies, analyzes the dependencies between module dependencies, and finally merges them to generate optimized static resources

(2) Differences between Loder and Plugin

Loder is the ability for WebPack to load and parse non-JS files
Plugin can extend the functions of WebPack and make webPack more flexible. You can change the output during the build through the WebPack API

12. Talk about HTTP status codes

Here is not a detailed list, only to talk about what I often remember, this should answer I have answered almost

200 The request is processed successfully
204 Request processed successfully, but no resource returned
206 Successful processing of a scope request
301 Permanent redirect
302 Temporary redirect
303 temporarily redirects and explicitly states that the client requests the resource using the GET method
304 Resources are found, but the client cache resources are still available
400 Syntax errors exist in the request packet
401 (1) Authentication required (2) Authentication failed (If the authentication fails, the system returns two times. The first time the system returns a message indicating that authentication is required)
403 Access is denied because no permission is granted
404 The requested resource could not be found (① the url is wrong ② the server rejected the request without explanation)
500 Internal server resources are incorrect
503 The server is overloaded and shut down for maintenance
504 Gateway times out

13. Did the project encounter cross-domain problems? How to solve it? (Summarized in the previous article)

I didn’t have this problem in the project, but I knew about cross-domain and I knew about the solution, and I started singing

(1) What is cross-domain

A difference in protocol, domain name, or port can cause cross-domain errors

(2) How to solve it

JSONP: By dynamically creating a script tag whose SRC points to a non-cognate URL and passing a callback argument as a function call with a function name and a set of parameters, the page receives the response and executes the callback and processes the data
② CORS: Set HTTP headers on the server

14. Vue’s bidirectional binding principle (summarized in the previous article)

Vue.js uses data hijacking combined with publiser-subscriber mode. It hijacks the setter and getter of each attribute through Object.defineProperty() to publish messages to subscribers when data changes and trigger corresponding listener callback.

① Implement data listener Observer, can monitor all the attributes of the data object, if there is any change can get the latest value and notify the subscriber
② Implement an instruction parser Compile
Implement a Watcher that acts as a bridge between the Observer and Compile, subscribing to and receiving notification of each property change, and executing the corresponding callback function of the instruction binding to update the view
④ Mvvm entry function, integration of the above three

15. Talk about the Vue lifecycle

Pictures fromVue life cycle

16. Does Vuex work? What problem is it essentially solving?

Vuex

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way. Simply put, it is data sharing, centralized data for unified management

The first answer I asked was for communication between components. Interviewer :(asking me) is this the only way to communicate? Parent to child, child to parent, component to component communication via props, event cars, etc. Face: What problem do you think it is essentially solving? I thought about it, should be to solve those multiple components are used in the data, in this centralized management, so convenient point.

17. Talk about your understanding of Git. Have many people developed it?

The following two common operations are described in the development process

(1) Every time a new function is developed, a series of operations in Git

① First go to the online code management warehouse to create a new function branch (it is recommended to name the page component for easy management)
② Go to the local project directorygit bash here, the inputgit pullPull the branch off the line
(3) inputgit checkout xxxxxxSwitch to new branch (XXXXXX is the name of the new branch)
(4) inputgit statusLook at what you’re doing, make sure you’re right and start writing code

(2) A series of Git operations after the completion of a new function development

① Go to the local project directory and right-clickgit bash hereOpen thegit bash
(2) inputgit addTo add all modified files to the local cache
(3) inputgit commit -m 'xxxxxx'Submit, and enter the description of submitting online (XXXX content is the description of this submission and modification)
(4) inputgit pushPush the code submitted above to the cloud project code Management repository

(After the above steps are done, we just push the content of the branch to the cloud, but we still have to merge the branches.)

5. Inputgit checkout masterSwitch to themasterbranches
6. Inputgit merge origin/xxxxxxMerge branch (XXXXXX is just newly created branch) generally in actual operation, is to pass the test, test no problem, before the online merge branch
⑦ Re-inputgit pushWill be mergedmasterBranch content to cloud sync

No one had developed it, but I wanted to know if I knew how to resolve code conflicts, and the interviewer told me about it. I knew it too, but I didn’t dare to interrupt

At the end of the article

If you think my writing is good, you can give me a thumbs up. If there is anything wrong or bad, please comment and point out so that I can correct it.

Gluten series ② — Didi intern cool the meridian