前端工程化之規範化

時間 2019-11-06

標籤前端工程規範化简体版

原文原文鏈接

前言

前段工程化主要目的就是提升團隊的生產效率,能夠理解爲凡事能提高團隊開發效率的規範,準則,工具啥的均可以概括到前端工程化裏面來; 最近也花了點時間把前端 team 的基本規範梳理了一下, 這裏作一下總結.
現階段我把工程化主要分爲三大部分: 規範化, 模塊化, 組件化; 針對每一個部分都要有相應的實際措施. 這一篇主要介紹規範化.javascript

團隊代碼規範建設

命名規範

1.目錄命名(小寫,複數,鏈接符)css

項目命名:            project-name
  樣式文件夾:          styles
  圖片文件夾:          images
  第三方庫文件夾:       libs
  其餘資源:            assets
  多個單詞的目錄名使用橫槓字符鏈接: 如 project-name

2.文件命名(小駝峯)html

index.js, 
  commen.css, 
  myTool.js

3.圖片資源命名(英文小寫,有意義,下劃線鏈接)前端

icon.png
  home_logo.png

4.vue 組件命名(小寫,鏈接符,儘可能使用多個單詞,避免與標籤重名,存在層級關係加上父級前綴)vue

news.vue
  news-list.vue
  news-list-item.vue
  導入: import NewsListItem from 'components/news-list-item.vue'
  使用: <news-list-item></news-list-item>

代碼規範

eslint工具: 對 javascript 代碼進行檢查, vue項目中添加相關配置
配置項參考: https://cn.eslint.org/docs/ru...
stylelint 工具: 對 css.scss,less 等進行規範檢查, vue項目中配置
配置項參考: https://www.npmjs.com/package...

HTML書寫規範

在保持功能完整的狀況下，使用最少,最少,最少的標籤，書寫遵循HTML標準，符合語義化的文檔java

1.使用語義化標籤來規劃頁面總體佈局(井井有條,可讀性好,利於機器閱讀)
2.結構儘可能簡要, 能簡單化表達的就不要嵌套一些無心義的標籤
3.先總體,後局部
4.一些內容不變或者圖標類能夠考慮使用僞元素

5.一個 html 模塊添加註釋備註git

// 示例以下:
  <body>
    <!-- 頭部欄模塊-->
    <header>
        <nav></nav>
    </header>
    <!-- 側欄模塊 -->
    <aside>
        <nav></nav>
    </aside>
    <!-- 主體模塊: 全局只配一個 main 標籤 -->
    <main>
        <!-- 獨立文章,新聞類考慮使用article -->
        <article>
            <header>……</header>
            <section>……</section>
            <section>……</section>
            <section>……</section>
            <footer>……</footer>
        </article>
        <section>……</section>
        <section>……</section>
    </main>
    <!-- 底部欄模塊 -->
    <footer></footer>
  </body>

css 書寫規範

類名統一採用鏈接符形式,帶層級關係使用鏈接符進行鏈接github

// 示例以下:
<div class="home">
  <img class="home-logo" src="home_logo.png" alt="主頁logo">
</div>

佈局屬性聲明順序vue-cli

1.Positioning     定位
2.Box model       盒模型
3.Typographic     字體
4.Appearance      外觀
5.Other           其餘
// 示例
  .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書寫規範

變量及函數聲明: 統一採用 let,const,class,function

命名符合語義化npm

can    判斷是否可執行某個動做
has    判斷是否含有某個值
is    判斷是否爲某個值
get    獲取某個值
set    設置某個值

示例:
  //是否可閱讀 
  function canRead(){ 
    return true; 
  } 
  //獲取姓名 
  function getName{
    return this.name 
  }

變量命名: 使用有含義的變量名,統一採用駝峯命名,常量使用全大寫+下劃線
```
let homeTitle = '主頁'
const SECONDS_IN_ONE_DAY = 24 * 60 * 60
```

對象簡寫,推薦字面量寫法

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

const person = { 
  name, 
  age,
  work
}

在須要使用對象的多個屬性時，使用解構賦值

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

文件註釋用於告訴不熟悉這段代碼的讀者這個文件中包含哪些東西, 提供文件的大致內容, 它的做者, 依賴關係和兼容性信息
```
示例: 如 filter.js 文件
/**
* @description {項目中的業務工具函數, 處理字符過濾,格式轉化}
* @author {huhua}
* @date {2019-08-30}
```

函數,方法,類註釋包含參數說明，返回值以及做用和用法

示例:
  * @description 兩數之和
  * @param {number} x 參數的說明
  * @param {number} y 參數的說明
  * @return {number} 返回值的說明

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

推薦使用函數式編程方式

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 組件書寫規範(保證必要的業務邏輯註釋)

vue組件模板標籤順序

<template>
     模塊之間記得添加註釋區分
  </template>

<script>
     methods中的業務邏輯記得添加註釋
   </script>

<style>
     根據 template 模塊添加註釋區分; 
     交互樣式注意添加註釋(在模板中動態導入的)
  </style>

組件屬性換行,屬性的書寫順序
順序: 類名 > ref > v-model > 屬性傳值 > 方法

示例:
  <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 標籤內部聲明順序; 聲明規範; props 完整性

示例:
  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 {} },
    生命週期鉤子順序: created > mounted > ... > destroyed
    methods: {},
    computed: {},
    watch: {},
    組件路由鉤子函數
  }

style 標籤內儘可能使用 scoped屬性
```
<style lang="scss" scoped></style>
```

props配置: 每一個配置項必須有註釋說明

props: {
     // 用戶名字
     name: { 
       type: String,
       default: 'huahua',
       required: false
     },
    // 年齡
    age: {
      type: Number,
      default: 18
    }
 },

git 使用規範

- 分支管理:
  master:主分支;
  online: 線上發佈分支;  
  dev: 測試環境分支; 
  huhua_dev: 本地我的開發分支: 本身的名字_dev;
  
- 多人合做: 注意提交以前先拉取其餘人更新的代碼再合併提交!

- commit message規範(能夠強制作提交預檢)
  add：'添加新功能'
  fix：'修補bug'
  docs：'文檔（documentation）'
  refactor：'重構（即不是新增功能，也不是修改bug的代碼變更,  推翻重寫'
  test：'增長測試'
  update：'更改代碼'