[IT 鐵人賽] 動態載入 Vue App Day 22

昨天又再次說到動態載入元件,今天則來聊一下 Vue App 是不是也能做這種事情。我們之前在 第七天 的時候有稍微提了一下。基本上就是 90% 以上的人不會做這種事 ,然後我大概就是那個 10% 會做這種蠢事的人。

我說過了,如果是兩組 App 想要綁定在不同的地方,溝通上會是個問題。根據昨天我尚未釋出的 Webpack 的結構來說,也不是一件不能做到的事情。至於什麼時候會釋出,大概就是等 Day 24 我聊到 Webpack 設定的時候吧( 奸詐 )。


Hybrid 加上多個 App

一般專案請勿這樣使用,使用前請詳閱公開說明書。

這裡沒有什麼難度,就是多綁一個 #app2 進去而已。但是,如果你只是一人團隊,一人開發的話,這樣用老實說沒有什麼好處。不過,當你的 #app2 是另外一個人在製作,那麼這件事情就會變得比較有趣一點。

當然,我們之前也提過關於溝通的問題。這個時候就丟給 EventBus 去解決即可。

<template>
  <div class="about">
    <h1>My Component</h1>
  </div>
</template>

<script>
import EventBus from '@/utils/EventBus'

export default {
  name: 'MyComponent',
  mounted () {
    setTimeout(() => {
      console.log('Call App 1')
      EventBus.$emit('callApp1')
    }, 1000)
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>

實際上這樣做的好處?

就是你的客戶要你先做兩個版給他,然後對方又有選擇性障礙,你只好找一堆人一起開發 #app1, #app2, #app3 ,只要客戶不要回頭選第一個,大家就平安喜樂、好聚好散。

不過在我這邊的需求,除了可以透過昨天所說的動態元件來解決外,切割不同的 App 也是一個作法。我們主要的訴求在於:

  1. 徹底撤回修例。
  2. 收回暴動定義。
  3. 撤銷對今為所有反送中抗爭者控罪。
  4. 徹底追究警隊濫權情況。
  5. 立即實行雙真普選。

五大訴求,缺一不可( 靠么不是這五個 )!

  1. 一個網站、各自表述。
  2. 你跟我跟他可以共用,他跟我跟你不行。
  3. 快速切換 人頭帳號 視覺外觀。
  4. 兩個樣式,一邊一版,不互相干涉。
  5. 獨立入口。

五大訴求,有缺再補。


當我們在製作所謂的「樣版」的時候,比較常見到的幾種操作方法,多是針對一個網站的骨幹,再次重新的長出新的樣貌出來。那麼,我們每次針對這樣的「樣版」,要去操作的 Vue App 是不是就變得很冗餘。

vue create template-1
vue create template-2
vue create template-3
vue create template-4
vue create template-5

然後你就有了五套。

所以,我在這邊的作法大致上是使用同一套 Vue App 的基底,然後針對同一個骨幹長出不一樣的 外觀樣式 App 來套用。所以說,最根本的 node_modules 我也只有一套,我的 package.json 也只有一個。最終這個 Vue App 可以依據不同的設定,指定不同的 App 來達到不同的外觀。

順手工商一下,

獎金獵人小酒館第二屆奇幻獎-服裝繪圖大賽
獎金獵人小酒館第三屆奇幻獎|故事寫作大賽
獎金獵人小酒館第四屆奇幻獎 繪圖組
獎金獵人小酒館第四屆奇幻獎 文學組
獎金獵人小酒館第五屆奇幻獎:新東方異獸檔案
【小酒館名酒爭霸】獎金獵人第六屆奇幻獎:酒標設計大賽

以上全部都是用同一個 Vue App 骨幹,搭配不同的 App/Components,來達到完全不一樣的網站模版以及功能。現在知道我為何一直在聊動態載入了嗎?其實,就是因為複雜以及多變的需求,所以身為工程師,總是得在這種地方省點時間、空間,以及省點事。

雖然說前置作業撞牆的時間很多,但是終究還是可以找到幾個方法來面對這些改變。這大概就是身為一個渺小的工程師存在的價值吧。


再談全域註冊

為何我們會把元件或是某些 App 所使用的東西做 全域註冊 ,也就是昨天所提及的 Vue.component(...) 這種方式?到底這麼做的好處是什麼?

https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js
昨天文末我有推薦一個 Github,這裡面有個小巧思,我覺得很實用。利用 require.context 來讀取資料夾當中的檔案,然後把他做成全域註冊元件。這麼一來你就不用每次都在那邊 require 或是 import 一堆東西,也不需要在元件裡面一直重複引用。

或許你會覺得,把元件註冊到全域不是挺麻煩的,要用到再引入就好了啊?其實主要的目的與好處,我們可以整理出這幾個面向:

  • 這個元件使用頻率非常的高。
  • 這個元件使用頻率非常的高。
  • 這個元件使用頻率非常的高。

我們以 BootstrapVue 為例子,他所提供的元件,通常你都是需要用到的時候,可能才會用 import 把他拿進來。或者是,直接使用 Vue.use(...) 的方式來做。而,其實,對於這種套件來說,通常都直接建議你使用 Vue.use(...) 的方式。而這種方式,其實就跟我們註冊在全域的元件,是大同小異的事情。

差別只在於,當你不是 每一個 BootstrapVue 的元件都會用到,爾或是你只想要用某幾個東西的時候,那麼,使用 import 會比直接整包拿進來要好。這件事情當你在打包正式環境使用的檔案時,你就會看出差異。


小結

其實重點是 $mount('#app') 有第二個參數可以用, 亦即 $mount('#app', true) 。但是在這種 Hybrid 模式底下,因為你不是真的使用 SSR,所以即便你第二個參數傳入 true ,其實影響不大。再者,如果在正式環境底下,你可能會因為後端所產生的 DOM 與 VDOM 結構不符,而造成 App 無法渲染。

官方其實有寫,我這邊再次提醒一下。

Client Side Hydration

ITHome 鐵人賽同步刊登 動態載入 Vue App Day 22

Hina Chen
偏執與強迫症的患者,算不上是無可救藥,只是我已經遇上我的良醫了。
Taipei