web开发

HTML

1. 标签的使用（选择合适的标签去时候，可以有意识的去使用语义化的标签，但是如果语义化标签不合适则使用通用的div格式去实现）
2. 结构的拆分和复用（先对UI界面进行分析，拆解出复用的部分，针对复用部分进行开发，减少重复编码，提高效率，同时要有意识的去考虑组件化，虽然目前的项目结构不合适，但是之后会使用MVVM框架去做开发，组件化的思想要有意识培养）

CSS

1. 命名规范（使用驼峰命名法，基本不超过三个单词，超过三个单词的用后面两个单词做命名，命名要有意义，可以直观的看出是什么意思，对于通用的样式可以抽象出来，不同的地方再单独写样式，即基础样式+特定样式）
2. 减少浮动跟定位的使用，除非在必要的地方。可以使用flex布局去实现效果，使用flex布局的时候需要注意浏览器兼容性的问题，解决方案为加上对应浏览器的前缀即可。对于移动端暂时只需要考虑兼容webkit内核的浏览器，目前ios端的Safari浏览器，还有安卓端的微信内置浏览器都是基于webkit内核，所以暂时只考虑webkit内核的兼容。
3. 对于可点击的部分，最小点击范围为30*30。绝大部分点击范围均为块级样式，不使用内联样式去做点击，除非特定需求要实现点击链接跳转，则使用a标签，或者其他内联元素。否则可点击模块均为块级样式，可以直接使用块级元素或者使用内联元素（display更改成块级）
4. 对于图片显示，如果是本地图片的显示，作为icon或者其他的，均使用background-image去实现，如果是动态添加的，则根据情况考虑使用img标签还是background-image

JavaScript

1. 所有的JavaScript的执行代码均放在下面代码段中，除了声明定义函数放在外部，其余执行代码均放在里面，对于一个js文件有且仅有一个下面的初始化函数。

   $(function(){
   })
   
   等同于 原生JavaScript中的
   
   window.onload = function(){
   }
   

2. 移动端的事件绑定均有addEventListener去实现，不使用on()方法去绑定事件，元素内部的onclick这类的依旧可以使用。动态添加事件绑定的均用addEventListener的方法。因为有些ios端使用on()方法会出现事件触发不了的问题。所以移动端最好统一使用addEventListener的方法去添加事件句柄。如果可以的话，对于只触发一次的事件句柄，在事件触发完成后解除该事件句柄的绑定。
3. 如果需要重复使用某一个ajax请求的话，抽象封装成一个函数去执行，所需要的变量以参数的形式传入。如果ajax请求需要传入data参数，并且data参数中的值由用户输入所获取的话，则需要对用户输入进行判断，是否为空字符串，并且要去除前后的空格（即trim()方法）。因为用户输入是不可相信的，所以需要对所有用户输入都进行空字符串的判断并且除去前后的空格，保证请求所带参数是有意义的。
4. 变量命名需要规范，如果可以，最好是养成对不再使用的变量赋值null，触发浏览器去回收该部分的内存。
5. 对于href上面的参数截取，最好是保存成object的形式，并且增加处理保证当href无参数的时候不影响其他部分的代码的执行。获取href上面的参数时，使用location.search去获取url里面的?后面的部分
6. 对于页面跳转，除去a标签直接跳转，在事件中触发进行跳转的均为window.location.href = url。如果界面跳转需要带参数的情况，对于只有少于3个参数的并且参数的内容不涉及安全内容，可以直接以query的形式跟在url后面。如果多于三个，则考虑用localstorage或者cookies去存储，然后在跳转后的页面去获取。
7. 对于引入的第三方，尽量使用cdn，如果cdn不行的情况下再去用本地文件。
8. 在没有接口可接入的情况下，在test.js文件里面定义模拟接口数据写入的方法。（先通过手动延时去模拟接口调用的过程）

开发原则

1. 严格遵守UI设计，保证复刻UI的显示效果。完成静态界面后，先给UI过目，确定没问题后再进行后续开发。
2. 保证实现所需功能（正常流程下，无错误）。如有难以实现的功能需提早提出，待产品确认后确定替代方案。
3. 在正常流程保证无错误的情况下，加入请求错误，失败，数据获取失败，用户填写错误等异常情况的处理。保证基本情况下无错误。
4. 完成接口以及界面开发后，进行完整的测试，根据测试用例去执行，确保所有测试用例均通过无异常。
   （待补充。。。）