曾幾何時Web前端界寫的不再是單純html、css、js，許多Preprocess(前處理)工具跟框架不斷的冒出來，不斷拉高前端門檻，導致出現了許多斷層，可能你聽過 es6、pug、sass、vue、reactjs (沒聽過的可以參考之前我寫的另外一篇文章 - 在開始寫Code之前？) ，這些東西可以說是現在前端界必須要了解的，可是問題來了!? 即使寫了這些Preprocess，但是瀏覽器還是無法識別，看不懂啊，所以也出現了許多前端自動化的工具出來，編譯這些Preprocess然後打包成瀏覽器看得懂的內容，例如我們等一下會仔細提到的webpack、或是不太會提到的gulp、Parcel等……或許你打開104或是其他找工作的平台都會寫說需要有webpack打包的使用經驗或是其他第三方的自動化工具使用經驗，但是到底什麼是webpack? 到底webpack可以幫我們做什麼事情？ 其實webpack幫我們做的事情很簡單，就是幫我們編譯我們的Preprocess成瀏覽器看得懂的內容然後打包成一包的完成檔案然後拿去server 上傳上去。 專案結構一般我們的專案會有兩個很重要的資料夾src與dist，這兩個資料夾是什麼？src : 專門放我們Preprocess的檔案，包括es6、pug、sass、vue、jsx等檔案，這個資料夾不會丟上去server部署。dist : 經過webpack編譯打包後，產生出瀏覽器看得懂的html、css、js，要部署也是這個資料夾去部署。 會看到src的資料夾裡面有許多資料夾，這個是我自己的分類方式，每個人的都多少會不一樣，僅供參考啦～像這樣的開發方式就像是現代前端的開發方式，我們就可以專心的用去多好用的Preprocess，不用去管最後的編譯成果！前面說了這麼多觀念，接下來我們來說些比較入門偏技術的部分～ (more…)
在這邊我們預計實現團隊中使用 sublime + Atom 的開發人員都能夠對 .scss 做自動縮進，並且效果必須一樣。 縮進書寫規範：兩格空白 每個團隊或個人使用的 CSS 規範不盡相同，可以在細節部分自行調整，也可以參考一些CSS编码规范 有的人喜歡四格縮進，也有喜歡兩格的。 (more…)
歷史上，JavaScript 沒有 module 的體系，無法將一個大程序拆分成互相依賴的小模組在用更簡單的方式拼湊起來。 ruby 有 require python 有 import CSS 有 @import 在一個檔案內 export default 只能有一個，而 export 可以有多個 如果只透過 export 時，在 import 必須加入花刮號 {} 來導入 兩者都可以導入常量、函數、檔案、模組 export 對應的 import…
會慢基本都是慢在 render function，如果巢狀 components 從父節點開始重新渲染，導致下面的子節點跟著重新 render 就會不必要的效能浪費。 所以基本招大致上是兩招， 區分何時用 Component 和 PureComponent 的時機 shouldComponentUpdate 阻擋不必要渲染 (more…)