iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 22
1
Modern Web

忍住不打牌位,只要30天VueJS帶你上A牌系列 第 22

Day 22介紹vue風格指南-寫作規範

寫作規範(Coding guideline)

組件數據必須是函數

當在組件中使用data property的時候(除了new Vue外的任何地方),它的值必須是返回一個對象的函數。

Vue.component('todo-List',{
    data () {
        return{
            foo: 'bar'
        }
    }
})
// or 
export dafault {
    name: 'todo-List',
    data () {
        return{
            foo: 'bar'
        }
    }
}

Props 定義應該盡量詳細

props 的定義應該盡量詳細,至少需要指定其類型,更好有其默認值、自定義的驗證函數、是否為必要。

...
props: {
    status: {
        type: Boolean,
        default: false,
        required: true
    }
}
...

總是用 key 配合 v-for,避免v-if和v-for用在一起

我們在v-for遍例元素時,總是必須用Key配合v-for,以便維護內部元件及其子樹的狀態。
避免v-if和v-for用在同一元素上是因為v-for比v-if具有更高的優先級,在渲染時會先遍例元素才來條件渲染。
重新渲染時為了更好的效能,你可以參考如下,先條件渲染在遍例元素。

<ul v-if="isActive">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
// or...
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
...
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

模板(template)每個屬性單獨一行

多個 attribute 的元素應該分多行撰寫,每個 attribute 一行,因為這樣更易讀。

<b-pagination
    v-model="currentPage"
    :total-rows="totalRows"
    :per-page="perPage"
    align="fill"
    size="sm"
    class="my-0"
  ></b-pagination>

模板(template)中簡單的表達式

組件模板應該只包含簡單的表達式,複雜的表達式則應該重構為計算屬性或方法。

<ul>
  <li data-title="性別">
    {{ gender }}
  </li>
  <li data-title="測驗開始日期">
    {{ toLocaleDateString(applicantInfo.examStart) }}
  </li>
</ul>
...
methods: {
    toLocaleDateString (str) {
      const date = new Date(str)
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      if (isNaN(date.getTime())) {
        return '-'
      }
      return date.toLocaleDateString(undefined, options)
    }
},
computed: {
    gender () {
        return this.applicantInfo.gender === 1 ? '男' : '女'
    }
}
...

模板(template)中指令縮寫

你可以不縮寫,也可以縮寫,但請統一一種寫寫作方式,用 : 表示v-bind:,用 @ 表示v-on:,用 #表示v-slot:

<button :disabled="isDisable"
        @change="onSubmit">
    <template #text>
        <span>提交</span>
    </template>
</button>

模板(template)中attribute 值帶引號

在HTML中不帶空格的attribute值是可以沒有引號的,但是這種做法通常會導致因避免使用空格,從而使屬性值的可讀性降低。

// bad
<input type=range 
       min=1 
       max=100 
       :value=minScore 
       class=compare>

//better
<input type="range" 
       min="1" 
       max="100" 
       :value="minScore" 
       class="compare">

模板(template)中盡可能在v-if/v-if-else/v-else使用key

如果一組v-if+ v-else的元素類型相同,最好使用key

<div
  v-if="error"
  key="search-status"
>
  Error:{{ error }}
</div>
<div
  v-else
  key="search-results"
>
  Result:{{ results }}
</div>

為元件樣式設置作用域

對於整體應用來說,我們可以設定樣式全局,但是在其它元件樣式都應該是有作用域的。

<style scoped>
    code...
</style>

對於樣式的開發,可以延伸閱讀BEM、OOCSS、SMACSS,或是CSS in JS 的方式。

有任何問題歡迎下方留言,如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang


上一篇
Day21 製作一個過濾器(filter)
下一篇
Day23 介紹vue風格指南-命名原則
系列文
忍住不打牌位,只要30天VueJS帶你上A牌30

尚未有邦友留言

立即登入留言