Wechat official account: [Dafront-end Yizhan] Follow Dafront-end Yizhan. Questions or suggestions, welcome the public account message.

This is the 28th day of my participation in the August Text Challenge.More challenges in August

Today weekend, things a little too much, almost want to break more, think or more haha! Today, I will briefly summarize the business scenarios that we may encounter in our daily work, and then how we skillfully deal with redundant code. We will also use ES6 extension operators in this scenario. I believe many students know the function of this, but do not know how to apply it in practice. Applying what you learn is critical, especially for us front-end engineers.

Extended operators (…) Converts an array to a comma-separated sequence of arguments.

Business scenarios: We can get the incoming parameters by the arguments array, such as in vue project, multiple components at the same time, with the help of a data interface, but access to data and binding component is required to do the corresponding business operations, by this time most students might not a component to define a function with different internal logic, At this point, the code is relatively redundant, especially when the process of building parameters is repeatedly coded. At this point we can extract a common method to handle the different logic, but we can pass in the parameters flexibly. The following is an example. Component A and component B call the same interface, but do different business operations after obtaining the data. The getListData method may be triggered by the sub-component through $emit, or even more complex business logic may occur. Because sometimes the interface parameters we need to build the back end may be complicated, such as some array traversal work, and then we pass in the vUE instance of the component to do the business logic after they get the data.

Import FetchData from './utils. Js'... GetListData (){FetchData(this,... arguments) } ...Copy the code
Import FetchData from './utils. Js'... GetListData (){FetchData(this,... arguments) } ...Copy the code
/**utils. Js file **/ import listData from 'api.js' // API,js is a wrapped axions or fetch data interface... FetchData(vueInstance,... arguments){ const params = { ... } listData(params).then(res => { const {error, message} = res if(error ! $message.error(message)} else {vueInstance can be used to handle different business logic in public methods.Copy the code

The more complex the business scenario, the more we need to understand how to do method extraction, consider reuse of components, and so on, so that we can be less passive in a series of product iterations.














Pay attention to the bottom [Big front End station]
Let’s learn and make progress together

[Share, like, watch] Let more people join us