Front-end development there are a lot of fun, I must learn many, have to follow the trend to keep learning state constantly update their technology stack, according to the previously seen the article summed up the front end and they usually meet specification, remind her attention code standard, also for your reference, have not the right place you Daniel hope point.

Recommended use

  • Recommended to use vsCode for development, lightweight interface beautiful, easy to debug, automatic formatting code related to vsCode

  • The arrow function is recommended to solve the this pointing problem, and is more concise

    The conventional way of writing a function

    function getPersonList() {
    // do something
    return personList
}
Copy the code

    Arrow function

    const getPersonList = () = > personList
Copy the code

  • It is recommended to concatenate strings using ES6 syntax, for example

    var message = `Hello ${name}`
Copy the code

  • It is recommended to use ES6 to deconstruct assignments for more concise code

    Regular writing

    var data = { name: 'zjf'.age: 1 };
var name = data.name;
var age = data.age;
Copy the code

    Deconstruction of writing

    let data = { name: 'zjf'.age: 1.height: 1 };
let{ name, ... rest } = data;Copy the code

  • The lodash/moment.js library is recommended. It can be run in a browser or node.js environment, and is wrapped in native methods. Functional programming is recommended if not necessary

    • Lodash is a modern, efficient and modular JS feature pack LoDash library
    // There is a big problem with the personList error if it is accidentally treated as a non-array
personList.map((value, key) = > {
    // do something
})
// The code is not concise enough
for(let i=0; i<LEN ; i++) {
    // do something
}
// It is recommended that loDash do some processing and return an empty array if personList is null
_.map(personList, value= > {
    // do something
})
Copy the code
    • Moment.js is mainly used to handle the date-time operation moment library

  • You are advised to use the devTool code debugging tool chrome-devtool

  • Learn the internal mechanics of promises

  • It is recommended to learn event-loop Event polling, which will help you better find the cause of an error when an asynchronous problem occurs

Event loop — Browser and Node

  • Learning the source code of each framework, Express, React, Vue is of great help to my improvement

  • Learn about Webpack webpack4- Use it for the first time, click it together 11 times

  • We recommend using axios, which basically intercepts and encapsulates the data before you request it. You can customize the configuration and cancel the request. We recommend using the encapsulated method, which gets the data returned by Axios

    export function post(url, data, config) {
  return new Promise((resolve, reject) = > {
    $http
      .post(url, data, config)
      .then(res= > {
        resolve(res.data);
      })
      .catch(err= > {
        reject(err.data);
      });
  });
}
Copy the code

  • It is recommended to install some official dependencies or plug-ins, and avoid using personal libraries on Github

Vue related

  • Do not use index as key in V-for, the essence of key is actually an ID, if index is used as index in diff update operation, when the array length is updated, it will increase the cost of render, reduce performance

  • JSX syntax is recommended for component development, which is more efficient and convenient

    Vue.component('xxx', {
    props: {},
    render(h) {
        return (
            <div>{this.slotScope.default()}</div>)}})Copy the code

  • In VUE, try to increase the readability of data attributes. If it is not necessary, do not initialize it into various strange forms. On the one hand, it is not very readable, and on the other hand, it is not strong in later expansibility, such as

    / / do not recommend
data() {
    return {
        msg: [[], []]}}Copy the code

  • Local styles don’t pollute the world, say scoped

  • Use deep Watch with caution because the vUE base layer will iterate through notify all the way to the lowest level object, increasing the performance cost

  • Reduce coupling between components and avoid situations where a value is passed through multiple components. Vuex state management is recommended in this case

  • If array elements are involved, adding keys is recommended to improve optimization efficiency

  • If the property is an array, the modification via arr[index] will not be updated. The reason is that Object.defineProperty does not support arrays, so Vue overwrites all the array methods and requires native array methods to be updated

    var methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
];
Copy the code

    or

    vue.$set(obj, key, value)
Copy the code

  • Develop 12 Vue.js development tips and tricks efficiently using vUE tips and tricks

  • Encapsulate CSS to Improve Style Writing Efficiency 55 essential pieces to improve your CSS development efficiency

  • Use these 15 Vue instructions to make your project development fun

Format specification

  • In complex logic for proper functional separation, a function to handle a function, and add comments, take a reasonable method name, improve the late readability, unreasonable writing methods such as

    // It is difficult to discern the return value of this method
function showPersonList() {....} 
// It's hard to know what the method does
function msg() {}
Copy the code

    It is recommended to use the verb handler/use/send if the return value is/should/has or if it is process-related

    function hasPersonList() {}
function sendMsg() {}
Copy the code

  • If-else is not recommended when there is too much logic. Switch is recommended to increase code readability

  • Naming conventions, comments are intended to aid subsequent understanding and modification, and meaningful naming can reduce comments to some extent

    let fName = 'jackie'; // What does f stand for
let firstPersonName = 'bob'; // Too long variable names are not concise enough
if (value.length < 8) {   // Why is the length 8
}
let personLen = 4;  // It will never be used again
Copy the code

    This type of naming is not recommended, because useless variables need to be commented out or deleted

    // Meaningful concise naming
let firstName = 'jackie';
const MAX_PERSON_LIST = 8;
if (value.length < MAX_PERSON_LIST) {
}
// let personLen = 4; 
Copy the code

  • Try not to use magic blocks such as ‘1’, ‘2’, etc. Instead, create static arguments in const files such as

    // const/base.js
export const STATUS = {
    invalid: '0'.valid: '1',}Copy the code

  • Pay attention to the code reconstruction, reduce the later maintenance cost