码迷,mamicode.com
首页 > 其他好文 > 详细

仿B站项目——(1)计划,前端工程

时间:2018-03-11 02:32:21      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:填充   服务   手机浏览器   set   stand   ack   blog   服务器   模板   

计划

现打算:

  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)有时删除了一个 classJS 绑定的事件就失效了,则可以将所有用于 JS 选择的 class 都以 .js- 作为前缀。例如: .js-submit .js-list-remove

仿B站项目——(1)计划,前端工程

标签:填充   服务   手机浏览器   set   stand   ack   blog   服务器   模板   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!