認識 ES6 Decorator

在這篇文章中我們將要探討如何使用 ES7 的新功能.

ES6 新增了一個簡單更具可讀性的語法讓我們可以建立類別(class). 搭配 ES6 匯入匯出模組的語法讓我們的程式更加清楚易懂.

而 Decorators 讓我們可以在設計時期透過註記的方式修改類別與屬性.
在 ES5 物件實字(Object Literal)支援可以使用任意的表達式(Expression)
而 ES6 類別單純只支援使用函式表達式或稱作函式常量(Function Literal)
現在 Decorator 讓 JS 具備了可維護性與可讀性的宣告式語法

繼續閱讀

第一次用 jspm 就上手

何謂 jspm ?

jspm (javascript package manager) 號稱是完全支援(無摩擦)瀏覽器載入的套件管理工具

繼續閱讀

參透 OOCSS

OOCSS 的兩個核心觀念

  • 分離結構(html tag 結構)與樣式(ui 的樣式) Separate structure and skin
  • 分離容器(layout 佈局)與內容(直接包 content 的 tag) Separate container and content
    最後達到重複使用樣式的最高原則
繼續閱讀

再讀一遍 BEM

前言

BEM 不是什麼新東西了,會有這一篇純粹是因為之前都只是依樣畫葫蘆的去使用 BEM 看了幾篇 slider 就上沒有認真理解過。當然寫起來就滿頭包。
這一篇花了一點時間歸納總結這個看似簡單卻實用的 css 組織的方法

繼續閱讀

Webpack 筆記

動機

今時今日所謂的網站正進化成網路應用程式,它不再只是單純的顯示圖片文字資訊,而包含著更多互動與操作行為,同時也意味著一個網站:

  • 具有更多的 Javascript
  • 可以在現代的瀏覽器上做更多事
  • 較少全頁重新載入的行為 ➞ 甚至更多程式碼在單一頁面
繼續閱讀

Javascript Unicode

為了理解 ES6 到底對於 Unicode 萬國碼有哪些新的支援。我們得從原因理解起。

繼續閱讀

ES6 Generators 基礎

在 Javascript ES6 的新功能中,有一個新品種的 function 稱為 generator 這個名字有點奇怪,不過它的行為在第一次看到的時候似乎更加奇怪。這篇筆記目的在解釋關於 generator 基本的運作原理。

繼續閱讀