仿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。

原文地址：https://www.cnblogs.com/yangzhou33/p/8542759.html