仿B站項目——(1)計劃，前端工程
阿新 • • 發佈：2018-03-11
normalize http 而不是 onf git 填充 boot vue 部分
計劃
現打算：
- 計劃用webpack打包 + 模板語言 + jquery + jquery ui + bootstrap做一個仿B站的靜態網站。
- 網站兼容手機瀏覽器端。
- 部分模塊打算仿照SPA用js加載的方式實現。
- 數據結構要有方便配置的形式。(便於網站更新)
- 網站優化，目前打算用圖片懶加載等方法。
- 最終結果要與B站90%相同，包括動畫，互動等，不包括用戶登錄，視屏播放等(因為要服務器支持)。
後續打算：
- 網站用vue重構。
- 把網站做成一個webapp。
- 添加服務端。
前端工程
參考前端工程說明的方法來用工程方法構建項目。
項目目的與需求
- 熟悉前端工程化流程。
- 沿路學習前端工程化所需要的知識。
技術選型
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及以下，也不打算兼容低版本瀏覽器。
流程規範
規範選擇
- 除了縮進，其它使用騰訊Alloy團隊的代碼規範。(我的js縮進是2個空格)
- 使用基於樹結構的CSS命名規範。
- 使用normalize.css而不是reset.css。
- 使用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。
仿B站項目——(1)計劃，前端工程