【开发】【提测】前端注意事项（更新中）

⚠️ 线上BUG：

1、注意适配（不同环境 / 老版本），19年2月发现一个线上bug是重写一个方法，但是疏忽了原有方法的老版本适配（调用一个函数的一行代码），导致旧版本有问题，测试没有测旧版本。

---

一、开发时

⚠️⚠️项目运行不起来（前端／后端），首先看node版本对不对！！！
⚠️⚠️服务器渲染项目，新建页面／模块，500，重新启一下npm run dev / npm run dev-js ！！！

开发原则

相同交互、样式的模块合并成一个组件，“一旦发现重复代码，都是有问题的”

Git

1. 开发过程中遇到难解问题，开发完功能提交一下，再解决问题（避免解决过程与开发内容混在一起，不好回退）

切图

1. 页面结构需要考虑，比如一个模块的左右两部分，因为在一个模块中，所以根节点应该只有一个，然后采用flex布局；
2. 行内元素和块级元素应该不在同一级放置，将行内元素用<div>包起来；
3. 设计图 --> rem：/2/100；
4. 注意细节！注意细节！注意细节！比如一个条目右下角有个小三角等。
5. ⚠️如果是已有的页面加一个模块，尽量与原有模块结构、类名一致，尤其注意有没有锚点等（可能是js使统一类名控制）。

JS

1. 锚点可通过JS实现（对于块级元素，行内可以使用padding-top）:

   $(".link").on("click", function(e){
           e.preventDefault();
           var scrollToAnchor = $(".comment_box").offset().top - 45;
           window.scrollTo(0, scrollToAnchor);
       })

---

二、提测前

文字内容

1. 标题过长、内容过长，有没有截字处理（ellipsis写法见ellipsis 一行/两行省略）。

前后端接口

1. 后端没有返回内容时界面显示异常问题。

兼容性

1. ios8等兼容问题，比如flex兼容问题；
2. 字体粗细问题（ios8区分lighter，有的系统不区分）；
3. includes在ios8等系统上报错，使用indexOf替代（存疑）。

其他检查

1. 命名重名现象，比如“预订按钮”和“预订锚点”，会影响触发事件；
2. 页面跳转链接是否都加上了；页面跳转链接是否都加上了。