仿B站項目——(1)計劃，前端工程

計劃

現打算：

1. 計劃用webpack打包 + 模板語言 + jquery + jquery ui + bootstrap作一個仿B站的靜態網站。
2. 網站兼容手機瀏覽器端。
3. 部分模塊打算仿照SPA用js加載的方式實現。
4. 數據結構要有方便配置的形式。(便於網站更新)
5. 網站優化，目前打算用圖片懶加載等方法。
6. 最終結果要與B站90%相同，包括動畫，互動等，不包括用戶登陸，視屏播放等(由於要服務器支持)。

後續打算：

1. 網站用vue重構。
2. 把網站作成一個webapp。
3. 添加服務端。

前端工程

參考前端工程說明的方法來用工程方法構建項目。

項目目的與需求

1. 熟悉前端工程化流程。
2. 沿路學習前端工程化所須要的知識。

技術選型

html模板引擎

若是項目使用到 React/Vue/Angular 其中一個，則徹底不須要HTML模板引擎。不然能夠選擇 ejs pug(jade) handlebars 等模板引擎。

我的考慮：我打算先學習一下模板引擎，因此先不用React/Vue/Angular，等以後熟悉了模板引擎以後再重構。我選擇ejs模板引擎，緣由是它很小巧，我也只須要它來向html中填充數據而已。

css預處理

主流的有 less sass stylus

因爲sass(scss)用的人更多，並且騰訊Alloy團隊代碼規範用的scss，因此我打算用scss。

css框架

毫無疑問用Bootstrap，我也想深刻學習一下Bootstrap。

js框架

因爲先不使用React/Vue/Angular，我選擇使用jQuery。

es6和js超集

用es6是確定的了。先不打算用js超集，由於用的人還不多，不是太穩定。

兼容性

並不打算兼容ie8及如下，也不打算兼容低版本瀏覽器。

流程規範

規範選擇

1. 除了縮進，其它使用騰訊Alloy團隊的代碼規範。(個人js縮進是2個空格)
2. 使用基於樹結構的CSS命名規範。
3. 使用normalize.css而不是reset.css。
4. 使用nec的命名規則

(另外參考姓氏命名法和經常使用css命名規則)

實際狀況制定規範

(1)全部m/文件夾下的css都要以.m-做爲前綴。這樣看到一個class若是是.m-box則直接去找m/box/index.css，看到.some則直接找HTML同級目錄的css文件。

(2)約定徹底不要使用ID選擇器，class 選擇器使用 .m-box-hd-title {} 這種結構命名法下降權重。保持大部分選擇器權重都是 0, 0, 1, 0。

(3)有時刪除了一個 class ，JS 綁定的事件就失效了，則能夠將全部用於 JS 選擇的 class 都以 .js- 做爲前綴。例如： .js-submit .js-list-remove。