Standardization of Front End Engineering

Posted by x_maras on Mon, 09 Sep 2019 09:07:34 +0200

Preface

The main purpose of the front-end engineering is to improve the team's productivity. It can be understood that all the norms, guidelines, tools that can improve the team's development efficiency can be summarized into the front-end engineering. Recently, it took some time to sort out the basic norms of the front-end team. Here is a summary.
At the present stage, I divide engineering into three parts: standardization, modularization and componentization; corresponding practical measures should be taken for each part. This article mainly introduces standardization.

Team Code Specification Construction

Naming specification

1. Naming directories (lowercase, plural, connector)

  Project Naming: project-name
  Style folder: styles
  Picture folder: images
  Third party library folder: libs
  Other resources: assets
  Catalog names of multiple words are linked using horizontal bar characters, such as project-name

2. File Naming (Small Hump)

  index.js, 
  commen.css, 
  myTool.js

3. Naming of Picture Resources (lowercase, meaningful, underlined)

  icon.png
  home_logo.png

4.vue component naming (lowercase, connector, try to use more than one word, avoid tag renaming, there is a hierarchical relationship with the parent prefix)

  news.vue
  news-list.vue
  news-list-item.vue
  //Import: import NewsListItem from'components/news-list-item.vue'
  //Use: <news-list-item> </news-list-item>.

Code specification

eslint tool: check javascript code, add configuration to vue project
Configuration Item Reference: https://cn.eslint.org/docs/ru...
Styllint Tool: Specification checks for css.scss,less, etc. Configuration in vue project
Configuration Item Reference: https://www.npmjs.com/package...

HTML Writing Specification

Keeping the function intact, using the least, least and least labels, writing documents conforming to HTML standards and semantics

1. Use semantic tags to plan the overall layout of the page (clear hierarchy, good readability, good for machine reading)
2. The structure should be as brief as possible, and the simple expression should not be nested with meaningless tags.
3. First the whole, then the part.
4. Some content remains unchanged or icon classes may consider using pseudo-elements

5. Adding annotations to an html module

  // Examples are as follows:
  <body>
    <!-- Header Bar Module-->
    <header>
        <nav></nav>
    </header>
    <!-- Side Bar Module -->
    <aside>
        <nav></nav>
    </aside>
    <!-- Subject module: Global matching only one main Label -->
    <main>
        <!-- Independent articles,News Consideration article -->
        <article>
            <header>......</header>
            <section>......</section>
            <section>......</section>
            <section>......</section>
            <footer>......</footer>
        </article>
        <section>......</section>
        <section>......</section>
    </main>
    <!-- Bottom Bar Module -->
    <footer></footer>
  </body>

css Writing Specification

Class names are unified in the form of connectors, and hierarchical relationships are connected by connectors.

// Examples are as follows:
<div class="home">
  <img class="home-logo" src="home_logo.png" alt="homepage logo">
</div>

Layout attribute declaration order

1.Positioning     Location
2.Box model       Box model
3.Typographic     Typeface
4.Appearance      Appearance
5.Other           Other
// Example
  .block {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    
    /* Box model */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    margin: 10px;
    overflow: hidden;
    
    /* Typographic */
    font-size: 14px;
    line-height: 1.5;
    text-align: center;

    /* Appearance */
    background-color: #f5f5f5;
    color: #fff;
    opacity: .8;
    
    /* Other */
    cursor: pointer; 
  }

JavaScript Writing Specification

Variable and function declaration: uniform use let,const,class,function

Naming conforms to semantics

Can determines whether an action can be performed
 has judges whether a value is contained
 Is judges whether it is a value
 Get to get a value
 Set to set a value

Examples:
  // Readability 
  function canRead(){ 
    return true; 
  } 
  // Get a name 
  function getName{
    return this.name 
  }

Variable Naming: Use meaningful variable names, uniform use of hump naming, constant use full capitalization + underscore
```
let homeTitle = 'homepage'
const SECONDS_IN_ONE_DAY = 24 * 60 * 60
```

Object abbreviation, recommended literal quantification

const name = 'leo'
const age = 26
function work() {...}

const person = { 
  name, 
  age,
  work
}

When you need to use multiple attributes of an object, use deconstruction assignment

const obj = {
  foo: 'foo',
  bar: 'bar',
  baz: 'baz'
}
const { foo, bar, baz } = obj

File annotations are used to tell readers unfamiliar with the code what is contained in the file, to provide the general content of the file, its authors, dependencies, and compatibility information.
```
Example: For example, filter.js file
/**
*@ description {Business Tool Functions in Project, Handling Character Filtering, Format Conversion}
* @author {huhua}
* @date {2019-08-30}
```

Functions, methods, class annotations contain parameter descriptions, return values, and roles and usages

 Examples:
  *@ sum of description s
  *@ Explanation of param {number} x parameter
  *@ Explanation of param {number} y parameter
  *@ Description of return {number} return value

function sumOfTwoNumber(x,y) {
   return x + y
}

Functional programming is recommended

const programmerOutput = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500
  }, {
    name: 'Suzie Q',
    linesOfCode: 1500
  }, {
    name: 'Jimmy Gosling',
    linesOfCode: 150
  }, {
    name: 'Gracie Hopper',
    linesOfCode: 1000
  }
];
const totalOutput = programmerOutput
  .map(output => output.linesOfCode)
  .reduce((totalLines, lines) => totalLines + lines, 0)

vue Component Writing Specification (Ensuring Necessary Business Logic Annotations)

vue component template label order

  <template>
     Remember to add comment distinctions between modules
  </template>

   <script>
     Business logic in methods remember to add comments
   </script>

  <style>
     Add comments to distinguish according to template module. 
     Attention should be paid to adding annotations (dynamically imported in the template)
  </style>

Component property line wrapping, attribute writing order
Order: class name > ref > V-model > attribute value passing > method

 Example:
  <photo-upload
    class="photo-upload"
  ref="upload"
  v-model="files"
  :max="4"
  :auto="false"
  :action="action"
  :simultaneous-uploads="1"
  @files-added="handleAdded"
  @file-success="handleSuccess"
  @file-click="handleClick"
  @file-error="handleError"
  >
  </photo-upload>

script tag internal declaration order; declaration specification; props integrity

Example:
  import NewsListItem from "@/components-base/news-list-item";
  import { scrollMixin } from "@/mixins/scrollMixin";
  const COMPONET_NAME = 'news-list';

  export default {
    name: COMPONET_NAME,
    props: {
      name: {
        type: String,
        default: 'huahua',
        required: false
      }
    },
    mixins: [scrollMixin],
    components: { NewsListItem },
    data() { return {} },
    //Life cycle hook order: create > mounted > destroyed
    methods: {},
    computed: {},
    watch: {},
    //Component routing hook function
  }

Use scoped attributes as much as possible in style tags
```
   <style lang="scss" scoped></style>
```

props configuration: each configuration item must be annotated

 props: {
     // User name
     name: { 
       type: String,
       default: 'huahua',
       required: false
     },
    // Age
    age: {
      type: Number,
      default: 18
    }
 },

git usage specification

- Branch management:
  master:Main branch;
  online: Online Publishing Branch;  
  dev: Test Environment Branch; 
  huhua_dev: Local Personal Development Branch: My name_dev;
  
- Multi-person cooperation: Note that before submitting, pull the updated code from others and merge the submissions!

- commit message Standard(Submission pre-inspection can be mandatory)
  add: 'Add new functions'
  fix: 'Repair bug'
  docs: 'Documentation( documentation)'
  refactor: 'Refactoring (neither new functionality nor modification) bug Code changes,  Overthrow rewriting'
  test: 'Increase testing'
  update: 'Change code'

Vue SPA Project Specification

1. Project creation (using vue-cli3)
vue create project-name
Configuration options: Babel, Router, Vuex, CSS-Pre-processors, Linter, Unit Testing
Project address: Scaffold directory configuration

2. Directory structure creation, see project

Topics: Programming Vue Attribute Javascript less

Programmer Think