Don’t gossip, talk about our front end test. Knowledge is more miscellaneous, need is to sort out the notes and necessary knowledge review.

1. Use summary of Ant-Design and common components and their basic usage?

Ant-design provides components for React, Angular, and Vue, as well as common base components for PCS and mobile devices. The demo provided by Ant-Design is very rich and has a style that basically covers development requirements. Antd Demo is written by many people, so you can see that there are different styles of implementation, which can well meet different development styles. Common components include: Button, Form, Radio, Select, TimePicker, Upload, Table, etc. When using it, you need to refer to Demo to write, and at the end of the component interface page, there are properties and notes. Can be very convenient to achieve the effect.

2. What character entities are commonly used in the front end and how to write them?

Because reserved characters exist, character entities can be used when they need to be displayed. Common character fonts are (1) space & NBSP; (2) less than sign < (3) double quotation marks “; (4) Single quotation marks ‘ (5) & and symbol & (6) > > >;

3 React lifecycle and what does different lifecycle mean?

(1) Initialization of state is performed in constructor. (2) componentDidMount for asynchronous loading data, add event listener. GetDerivedStateFromProps updates the props passed to state. (4) componentDidUpdate handles requests triggered by state changes.

4. What are the commonly used chart drawing tools and what functions can they achieve?

EChats provides multi-dimensional data display on different platforms and supports multiple devices and visualization types, such as line charts, bar charts, scatter charts, pie charts, and K-charts.

5. What is the process of uploading OSS files in Ali Cloud?

Because of the key retention issues involved in OSS, it is best to send images to the backend, which then uplows the images to OSS and returns the OSS URL. The image selection uses the Upload component of Ant-Design.

6. Main functions and usage of Redux

The main function is to centralize all the states at the top of the component, allowing for flexible distribution of all states to all components.Store: A place where data is stored. The entire app has a Store. State: Contains all data. One state corresponds to one view. As long as the state is the same, the view is the same. Action: Notifies the View action to change the state, thus changing the View. The only way to change state is to use Action.

7. How to operate the third-party library that the upgrade project depends on?

Using NPM outdated, you can check the latest version of the package in NPM, then use NCU-u to upgrade the dependent library, and finally use NPM install to install the new version. Ncu is a tool for nom-check-updated, which is installed via NPM install -g npm-check-updates. After the upgrade is complete, you need to check whether the version of the dependent third-party library has been upgraded to a major version, for example, upgrade from 1.x to 2.x or upgrade from 3.x to 4.x. If cross-version upgrade is involved, be careful. You need to check the corresponding official version migration record to upgrade the code. Therefore, it is generally recommended to periodically upgrade the version of the third-party library, which can effectively fix the bugs of the third-party inventory and avoid the large impact of the upgrade caused by the large version.

8. How to use Hook in react version?

You can use state and other React features without writing a class. Declare new variables using useState

Const [count, setCount] = useState(0); // Declare a new state variable called "count" const [count, setCount] = useState(0);Copy the code

UseEffect adds the ability to manipulate side effects to function components for the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount. React calls the side effects function after every render (including the first one).

ComponentDidMount and componentDidUpdate: Document. title = 'You clicked ${count} times'; useEffect() => {document.title =' You clicked ${count} times'; });Copy the code

UseEffect can be used multiple times within components.

useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
Copy the code

Side effects functions can also specify how to “clear” side effects by returning a function. For example, in the above component, the side effects function is used to subscribe to a friend’s online status and to clear it by unsubscribing. Can be understood as before is added in the componentDidMount ChatAPI. SubscribeToFriendStatus (props. Friend. Id, handleStatusChange); To subscribe to a friend online, and then added in componentWillUnmount ChatAPI. UnsubscribeFromFriendStatus (props. Friend. Id, handleStatusChange); To unsubscribe. UseEffect the second argument is an array of dependent values. Effect is rendered only when the array values change. If an empty array is passed in, it is executed only once when the component is mounted and unmounted.

9. Git rebase and fast forward

The biggest difference between Git and SVN is distribution, which means that after checking out the project, you can submit the code locally, view the historical version, create a new branch of the project, etc. Git uses rebase to manage branches to avoid disjointing branches caused by merging multiple branches. In A merger, when the branch line A to be merged and the branch B to be merged, A’s base point is that B has no new commit on B, then fast forward and A merger commit is not generated. Fast forward can also be turned off to add a merge commit, which makes it easy to see who has done a merge.

10. The priority and weight of the CSS selector list?

  1. Universal selector (*)
  2. Element (type) selector weight 1
  3. Class selector weight 10
  4. Property selector
  5. pseudo-classes
  6. ID selector weight 100
  7. Inline style weight 1000

! The important rule overrides any other declarations and is only used on substitute pages that need to overwrite the entire site or external CSS.

11. What are the common CSS attributes and their functions?

classification attribute value
Width and height Width the width; Height is high; Max-height follows the parent tag
Font properties Color color; The font-family font; Font-size Text size; Font-weight Indicates the weight of the text Normal Default value Bold Bolder Lighter 100 to 900 Parameter Description Value Inherit Font size of class elements
color Hex value: #FF0000; Words: blue, red; RGB value: (255, 0, 0); Rgba (200, 0, 0, 0.3)
Text attributes Text-align, text-decoration, text-indent Left justify right justify center justify both ends; None default underline overline overline line-through Through text inherit parent class properties
Background properties Background-color: red; Background-image: url(‘1.jpg’); Background-repeat: repeat; Background position Background-position: Right top
CSS box Margin controls the distance between elements; Padding controls the distance between the content and the border; Border The inside margin and the border around the content; Content displays text and images. Order of abbreviations: top right bottom left
A border border-width, border-style, border-color; Border :2px solid red; Border-radius implements rounded border; The value of the border-style parameter is none. Dotted line outline outline outline outline outline outline outline outline outline outline outline outline outline outline outline outline outline outline outline outline solid implementation outline
According to display None is not displayed; Block covers the entire page width; Inline displays as inline elements; Inline-blocks have inner elements and block-level elements
floating Float Any element can float; The clear property specifies that no other floating elements are allowed on the side; Properties of float: left left, right right, none does not float. The clear attribute left does not float elements on the left, right does not float elements on the right, both does not float elements on the left, and none does not float elements on the right. Inherit the parent element;
The overflow overflow Visible content is unclipped, hidden content is clipped and the rest of the content is invisible, Scroll content is clipped and shows the scroll bar to view the rest of the content, Auto content is clipped and shows the scroll bar to view the rest of the content, inherit from the parent element
positioning position A. static B. relative C. absolute D. fixed

12. What does Webpack do and how to use it?

Module packing, analyzing the project structure, finding JavaScript modules and extension languages (Scss, TypeScript, etc.) that browsers don’t run directly, and packaging them into appropriate formats for use by browsers. Use CSS-loader and style-loader to embed stylesheet tables into webpack packed JS files.CSS preprocessors using less-loader, Sas-Loader, or stylus-loader can convert special types of statements into CSS statements that can be recognized by the browser.Webpack uses plug-ins to extend WebPack functionality and implement and perform related tasks throughout the build process. For example, HtmlWebpackPlugin, based on a simple template to generate the final Html5 file and automatically reference the packaged JS file in the file.

13. Promise implementation, advantages and disadvantages

Promise is used to indicate the final completion (or failure) of an asynchronous operation and its resulting value.

Var myPromise = new Promise(resolve, reject) => { If (resolve(value)} else if (reject(error)) {reject(error)}}) myPromise.then((value) => {if (value) {reject(error)}}) myPromise.then(value) => { Use value}, (error) => {// call after failure, error})Copy the code

Advantages: Eliminates callback hell, makes asynchronous task writing more standardized and concise. Cons: You can’t cancel a Promise. Once you create a Promise, it executes immediately. Second, if you don’t set a callback function, the Promise throws an error internally and doesn’t react externally. Third, when in a pending state, there is no way to know what stage of progress is currently being made.

14. Http status code and its meaning

  • 1xx: The server receives a request and requires the requester to perform further operations
  • 2xx: The request succeeded
  • 3xx: redirect, the resource has been moved to another URL
  • 4xx: client error, request syntax error or corresponding resource not found
  • 5xx: Server error
  • 301: Resources (web pages, etc.) are permanently transferred to another URL. The return value contains the new URL, and the browser automatically directs to the new URL
  • 302: Temporary transfer. The client should access the original URL
  • 304: Not Modified. The resource is Not returned because it has Not been Modified after the specified date
  • 403: The server refused to execute the request
  • 404: Requested resource (web page, etc.) does not exist
  • 500: Internal server error

15. Use of async and await

  • Async /await is a new way to write asynchronous code. Previous methods have callback functions and promises.
  • Async /await is implemented based on promises and cannot be used for normal callback functions.
  • Async /await, like Promise, is non-blocking.
  • Async /await makes asynchronous code look like synchronous code, which is part of its magic.

16. Why is the setTimeout delay not allowed

Single thread, execute synchronous main thread first, then execute asynchronous task queue.

17. Let const var scope and difference

Block-level scope, temporary dead zone. Var defines variables that can be accessed across block scopes, not function scopes. Variables defined by lets can only be accessed in the block scope, not across the block scope or function scope. Const defines a constant, which must be assigned when created, can only be accessed in the block scope and cannot be modified.

18. For in, forEach and for of

  • for inIterating over arrays iterates over properties and methods on array prototypes, which is better suited for iterating over objects. If you don’t want to iterate through the prototype methods and properties of myObject, you can check the hasOwnProperty method inside the loop to see if a property is an instance property of the object.
  • forEachBreak, continue, and return are not supported
  • for ofA set of values can be successfully traversed, not the index, without traversing the stereotype.

19. Summary of the difference between localStorage and sessionStorage and cookie

  • Common: They are saved in the browser and belong to the same source.
  • LocalStorage and sessionStorage are collectively called Webstorages. They are stored in browsers and do not participate in server communication. The size is 5M.
  • Different life cycles: localStorage permanent storage, sessionStorage current session. Can be manually deleted.
  • Different scopes: Different browsers do not share local and session, and different sessions do not share sessions.
  • Cookie: the set expiration time is valid until the size of 4K. There is a limit to the number, which varies with the browser. Generally, the number is 20. Carried in HTTP headers, too many can cause performance problems. Can own package, also can use native.

20. Life cycle of wechat applets?

  • OnLoad page loading: A page is called only once, and you can get the query parameter in onLoad to open the current page.
  • The onShow page displays: it is called every time the page is opened.
  • OnReady page is rendered for the first time: a page is called only once, indicating that the page is ready to interact with the view layer.
  • OnHide page hide: called when navigateTo or bottom TAB is switched.
  • OnUnload page unload: Performed when a page is destroyed.

21. Principle of wechat small program?

Wechat applet is developed by JavaScript, WXML and WXSS.

  • JavaScript: First of all, JavaScript code is run in wechat App, not in browser. Therefore, some H5 technology applications need wechat App to provide corresponding API support, which limits the application of H5 technology and cannot be called strict H5. Similarly, wechat provides some unique apis that H5 does not support or are not particularly well supported.
  • WXML: WXML wechat is developed based on XML syntax, so you can only use the existing tags provided by wechat during development. HTML tags are not available.
  • WXSS: Has most of the features of CSS, but not all of them, and there is no detailed documentation of what is and isn’t supported.

The architecture of wechat is data-driven. UI and data are separated, and all page updates need to be realized through changes to data. Wechat program is divided into two parts: WebView and appService. Among them, WebView is mainly used to show UI, and appService is used to deal with business logic, data and interface calls. They run in two processes, through the system layer JSBridge to achieve communication, UI rendering, event processing.

22. How to improve the application speed of wechat mini program?

  1. Improve page loading speed.
  2. User behavior prediction.
  3. Reduce the size of the default data.
  4. Componentization scheme.

23. What are the data transfer methods of wechat applets?

  • Global variables are used for data passing.
  • When a page jumps or is redirected, use the URL with parameters to pass data.
  • Use the component template template to pass parameters.
  • Use a database to transfer data.

** disclaimer: ** pictures and content to the network, I’m just a porter of knowledge, abuse