Words such as “team”, “team work”, “killing squad” and “Avengers” are not unfamiliar to people at work and in life. These words are derived from the highly recognizable style of doing things, or the efficiency and low cost of communication between teams. The whole team operates very efficiently. Hence the word “team”. What is indispensable, of course, is the teamwork and tacit understanding of the players and some standards of behaviour that everyone follows. As a front-end developer who has learned hypertext Markup language for 3 months in summer camp, I think I need to customize a code code code from myself first, at least let myself understand my code style code and follow it, and then naturally talk about the tacit understanding between the team. Here are some of the code specifications that I currently think work

Named:

Const named constants:
  • The term “constant” is colloquially used to mean something that does not change, but in development I prefer to think of it as something that does not change in the block-level scope, so some of the conventionally invariant variables in a function should be named
  • Constants are named as follows: uppercase + underscore + uppercase + underscore… The format should be easy to accept as XXXX_XXXX and the uppercase letters should stand out in the snippet so that the constants are visible when viewing the block-level scope
    // good
    const FOOD_NUM = 3;
    const TOTAL_PEOPLE = 4; 
    let eat = FOOD_NUM / TOTAL_PEOPLE; 
    
    // bad
    let eat = 3 / 4;
Copy the code
2, let named variable:
  • The amount of variation that can occur in this scope, the amount of variation that can occur in development should be a lot, a lot of uses, and too many capital letters can be visually exhausting, so I’m more loyal to the small hump nomenclature
  • Normal variables follow the rules of naming + data structure: xxxList, xxxObj, xxxString, xxxNumber…
  • Boolean type variables: isXXX, hasXXX, canXXX…
  // bad
  let a = [] // The semantics are not clear
  let dc = [] // This is a generic abbreviation
  let sb = ' ' // It is easy to cause conflicts
  let bookData = [] // Book data, but do not know what type
  let sex = ... // Gender variable type is not clear, e.g. 1, "0 is male, 1 is female, 3 is unknown "2, "' male 'is male,' female 'is female"
  
  // good
  let isBook = true // This is a Boolean type of book
  let bookList = [] // This is an Array collection of books
  let studentObj = {} // This is a student Object
  let ageNum = 18 // Clearly, the age variable is numeric
  let sexStr = 'male'// Explicitly, the gender variable is a string
Copy the code
3. Attribute naming:
  • Avoid redundancy
  // bad
  let studentObj={
    studyName: "Ma Dongmei" 
  }

  /* * studyName = studentObj; /* * studyName = studentObj So I don't have to write studyName. * * /
  
  // good
  let studentObj={
    name: "Ma Dongmei"
  }
Copy the code
4. Function naming:
  • Small hump nomenclature: behavior +XXX+ data type
  // This function is used to get an array of students
  function getStudentList(){... }// Select * from student; // Select * from student
  function queryStudentIsPass(){... }// This function is used to jump to a page
  function jumpPage(){... }Copy the code
5. Name the loop item
  • Named after the object in the current loop list:
  // bad
  studentList.forEach((item) = >{...// something.let list = item.books.map((e= >{...// something. }))...// something. })/* * item and e and studentList seem to have nothing to do with each other. When the logic inside the forEach is complex and needs to be changed, many people will use item, value, e, etc. to represent the current item in the loop. * When the logic inside the forEach is too complex and the context is too long, the readability of such naming becomes very poor. * You may also need to scroll up to see what item and e represent. We need a clear variable name. * This allows us to quickly understand what this variable represents when maintaining code, rather than having to navigate through the context of complex logic. * /

    // good
    studentList.forEach((student) = >{...// something.let list = student.bookList.map((book= >{...// something. }))...// something. })Copy the code

Function:

1. Set parameters to default values
  • When a function has an argument:
  // Bad code redundancy, increase reading volume
  function getStudentList(currentPage, pageSize) {
    currentPage = currentPage || 1
    pageSize = pageSize || 10.// something. }// Assign default value to good, one word: absolute!
  function getStudentList(currentPage = 1, pageSize = 10) {...// something. }Copy the code
2. Limit the number of parameters
  • If there are more than three parameters, you can combine the parameters into an object so that the meaning of each parameter can be clearly understood when calling the function. Such as:
  // Too many bad parameters, redundant code, increase reading volume
  function getStudentList(currentPage = 1, pageSize = 10, search = "", startTime = "", endTime = "") {
    currentPage = currentPage || 1
    pageSize = pageSize || 10.// something. }// good merge parameters, no need to remember the order, one word: absolute!
  let searchData = {
    currentPage: 1.pageSize: 10.search: "".startTime: "".endTime: ""
  }
  function getStudentList(searchData) {...// something. }Copy the code
3. Parameter structure assignment
  • The fewer parameters a function has, the better. If there are many parameters, you can use deconstruction, regardless of the order of parameters
   // good
   function createMenu({ title, body, buttonText, cancellable }) {... } createMenu({title: "Foo".body: "Bar".buttonText: "Baz".cancellable: true
   });
   
   // bad
   function createMenu(title, body, buttonText, cancellable) {... }Copy the code
4. Functional limitations of functions
  • A function should correspond to only one function. Creating a function based on a function is the right way to do it. It’s easy to understand and maintain, and it makes reading your code feel good
  // bad
  function init() {
    axios.get('/studentList').then((success) = >{...// something. })...// something. axios.get('/bookList').then((success) = >{...// something. })}// good
  function getStudentList() {
    axios.get('/studentList').then((success) = >{...// something. })}function getBookList() {
    axios.get('/bookList').then((success) = >{...// something. })}function init(){
    getStudentList()
    getBookList()
  }
Copy the code

Remarks:

1. Cases where comments are not necessary
  • Naming semantic code does not require comments. If your naming is standard, people will understand it without comments
  let studentList = ["Little,"."Abortion"."Xiao Ming"] // This is an array of student lists.
  function getStudentList(){} // This is an array of students.
Copy the code
2. Single-line comments
  • Js uses // single-line comments, usually written directly after the comment object or on a single line above the comment object. If there is a single line, it is best to insert a blank line before the comment so that the comment is at a distance from the previous line so that it can be seen that the comment refers to the code below
  // bad
  let sb = "j100" // What is this?
  function getUCData(){}  // What is this?

  // good
  let sb = "j100" // A cup of water is a cup of water

  // This function is used to get some data from UC
  function getUCData(){} 
Copy the code
3. Multi-line comments
  • Use the / * *…/ as a multi-line comment. Contains descriptions, types and values specifying all parameters, and return values. /*@ keyword description */ Mostly used to comment function examples:
  // Bad has no comment, so you need to read it completely to understand the current function
  function addTips(text="No content", time=1500) {
    let oldTip = document.querySelector(".window-new-tips")
    oldTip? document.body.removeChild(oldTip) : ' '
    let tip = document.createElement("p")
    tip.classList.add("window-new-tips")
    tip.innerText = text
      tip.style.cssText = "z-index: 9; position:fixed; top:40%; left:50%; transform: translate(-50%,-50%); Opacity: 0.6; background: #000000; Border - the radius: 0.06 rem; font-size: 14px; color: #FFFFFF; text-align: center; Padding: 0.1 rem 0.35 rem;"
    document.body.appendChild(tip)
    setTimeout(() = > {
        document.body.contains(tip)? document.body.removeChild(tip) : ' '
    }, time)
  }

  // Good writes a comment at a glance. You don't need to understand the function completely to know what it does
  / * * *@param Text: display text, time: display duration *@return No *@example FormatNumber (" No more ",1500); *@description You can customize the display text and display duration */
  function addTips(text="No content", time=1500) {
    let oldTip = document.querySelector(".window-new-tips")
    oldTip? document.body.removeChild(oldTip) : ' '
    let tip = document.createElement("p")
    tip.classList.add("window-new-tips")
    tip.innerText = text
      tip.style.cssText = "z-index: 9; position:fixed; top:40%; left:50%; transform: translate(-50%,-50%); Opacity: 0.6; background: #000000; Border - the radius: 0.06 rem; font-size: 14px; color: #FFFFFF; text-align: center; Padding: 0.1 rem 0.35 rem;"
    document.body.appendChild(tip)
    setTimeout(() = > {
        document.body.contains(tip)? document.body.removeChild(tip) : ' '
    }, time)
  }
Copy the code