切图规范

主要围绕——还原设计稿

• 元素的维护 全局角度审查——公用、专用

• 明确元素属性

修饰性图片：专业ui设计师给出，不用css实现。注意把相关信息用html注明
内容性图片：用img占位，一般根据服务端返回值填充
提取图片信息：长度单位、颜色、是否有变量系统。询问团队规范

• 图片拼合，以减少请求

HTML规范

• 内容语义化：用正确的标签表达对应的内容，提高SEO和可访问性 补充资源型标签的描述，为了让搜索引擎抓取，应该将内容在html结构上先注明，css表现可以置后。 e.g：img标签的alt、meta标签description、keywords
• 正确的标签嵌套结构 行内元素不要嵌套块级元素 a>div a>span，然后span display: block

表单
label+input
select>option
form>filedset>legend
表格
table>tr>td
列表
ul>li
ol>li
dl>dt/dd

• 善用meta标签 name/http-equiv+content搭配使用

<meta name='description' content='hhhh'/>

• html字符实体 保留字符的显示

• CSS在head引入，JavaScript在body底部引入

CSS规范

css的书写上也要体现工程性、可扩展、简洁可复用

• 选择器命名考虑其复用
• 书写顺序：先布局定位、后细节样式、背景图、过渡效果等花销大的样式垫底
• z-index层级，一般以1000划分遮罩层
• 实际项目中往往通过autoprefixer插件去生成——浏览器前缀，无需实际各自书写

开发流程规范

• 功能+页面设计
• 建立前端项目架构：选择一套成熟的开发框，集开发大包发布一体的开发方案
• 定义接口文档 同步接口：页面
  异步接口：ajax接口
• 在一些基础功能上，选择适当的三方库。e.g:数据响应视图框架

JavaScript clean code

• DRY-don't repeat yourself
• function

1. 不断抽象，直到不能抽象为止
2. 参数最好不要超过三个，超过就采用object传参
3. 行数不要超过20行：抽象划分总结
4. 相比在一个函数内部条件判断执行，不如直接拆分成多个函数

• 命名 github.com/Microsoft/T…

1. 动词命名function
2. 变量的作用域越小，名称长度越小
3. function的作用域越大，名称长度越大

基建需求

用户埋点

tech.youzan.com/track-1/

常用的

document.visibilityState
navigator.sendBeacon(url, data);

错误监管处理

sentry，一个开源的监控系统,能支持服务端与客户端的监控,还有个强大的后台错误分析、报警平台。

程序有统一的异常处理机制，最好是全局的，这样只需要将Sentry写在全局的异常处理器

monorepo

lerna多包管理工具 避免子包安装一样的依赖包 包之间的依赖管理 高效的版本更新

.npmrc文件