其實樣式這件事情,是不是有動態載入好像不是那麼重要。除非你像是 AMP
那樣嚴格規範你的樣式使用範圍,不然通常我們都是全部打一包丟上去。然後就大家都用那一包了,你看看精美的 Bootstrap
,你會因為沒有使用到什麼設定而把他拿掉嗎?通常不會。
或者是你可以做一個客製化的 Bootstrap ,然後拿去偽裝成 bootstrap.min.css
,你這樣試試看後續接手的人會不會叫你出來,然後保證不打死你?
--------------------------------------------------------------------------------
樣式區塊
我們在 Vue 裡面其實有支援 CSS Modules 的作法:
> Vue.js 與 CSS Modules
[https:
昨天又再次說到動態載入元件,今天則來聊一下 Vue App 是不是也能做這種事情。我們之前在 第七天
[https://blog.hinablue.me/2019-ithome-ironman-day-7/] 的時候有稍微提了一下。基本上就是 90% 以上的人不會做這種事
,然後我大概就是那個 10% 會做這種蠢事的人。
我說過了,如果是兩組 App 想要綁定在不同的地方,溝通上會是個問題。根據昨天我尚未釋出的 Webpack
的結構來說,也不是一件不能做到的事情。至於什麼時候會釋出,大概就是等 Day 24 我聊到
我們又回到動態載入系列了,如果覺得我很煩的話可以先行離席沒關係。由於我昨天整理 Dockfile
的時候有點過於厭世,所以今天我這邊一樣會帶入一些昨天的結構,至於說 Dockfile 的話還沒好,如果想要先看結構的,可以先去我的 Github 上面看。
> ITHome Ironman 2019 Hybrid App
[https://github.com/hinablue/ithomeironman-2019-hybrid]
--------------------------------------------------------------------------------
混合模式的動態載入
其實我比較偷懶,上面的例子我直接掃全部的資料夾,然後將檔案加入樣版中。不過這個將來一定會 壞調 壞掉,所以小朋友不要亂學。
$jsFiles
昨天提到了後端與前端的混和( Hybrid )模式,我們今天就會提出比較完整的例子,來說明一下我自己目前比較喜歡的方式。由於 Phalcon
實在有點冷門,所以我今天會用一個更冷門的 Slim PHP Framework 來介紹( 你是故意的嗎 )。
對了,今天也會有 Docker 會分享給各位,方便大家不用處理環境問題。
--------------------------------------------------------------------------------
後端的設計
我們昨天有提到後端的作法,今天我們來實作一些關於後端的操作方式。首先,我們需要準備一些需要的工具:
* PHP 7.3 with PHP-FPM
* Nginx
* Slim PHP
我們昨天看完了 SSR 的部分,有沒有覺得 我好興奮!我好興奮啊!(並沒有好嗎)。聊了那麼多前端的事情,我們今天來聊一下關於後端的部分。我之所以沒有採用
SSR,最主要還是因為我不太會寫 JavaScript,所以我還是繼續使用 PHP 比較妥當(欸)。
接下來的後端我大概都會用 PHP 當例子,當然你要換成其他的也可以。但是,如果你要用 NodeJS 的話,那你還是回去 SSR 好了(慢走不送)。
--------------------------------------------------------------------------------
index.xxx 樣版