整 理：晋哲、雷媛 时 间：2015-11-12 说 明：前端在团队合作中如何与上下游紧密配合 ---------- 与后端配合须知 ---------- 一、HTML方面 1、不要通篇都是<div>标签，便于后端识别HTML代码。 比如：<ul><li>用于结构、样式相同的列表。 2、在需要结构、样式相同的列表时需注意：如果有个别列表上有特殊样式，尽量不去添加单独的class或内嵌style，选择使用伪类或伪元素选择器编写特殊的样式。保证列表的HTML代码结构的一致性。 比如<ul><li>列表，多个<a>标签列表等，往往需要设置最后一个元素的样式，可以使用伪元素选择器:last-child编写独立的样式。 3、注释很重要 当页面代码很多时，需用注释划分代码区块，注明用途，但也不宜文字过多。 4、前端需要会简单的php，if判断、for循环、include语句的改写 比如：一个列表一样的数据，无需写多个li标签，可以写一个li然后用for循环，精简代码；公共引用的header和footer部分使用include语句引入。 5、在Appserv中直接编写.php文件，利于查看生效的php代码，也方便后端改写。 6、需要后端for循环写入的list代码，前端在HTML中复制出两段以上，方便后端知晓，只有一段list代码不好找。 比如：<li>标签约定俗成地作为循环列表，后端人员看到<li>标签时也可引起注意。 7、需要后端if判断的代码，前端就不需要为了都显示出来而写多余的js代码。只需要显示一个代码段，其他代码段用style="display:none;"隐藏起来就可以了。 比如：下图弹出框有两个条件状态：领取成功、领取失败。将需要改变的代码段，一个显示，一个隐藏，之后后端只需if判断“popup-box”的部分即可。但需注意：选项卡的内容切换不需要后端if判断，所以还是属于前端js去控制显示和隐藏。 二、CSS方面 1、不要使用id选择器编写样式（编写js时可以设置id，建议jQuery用class选择器）。 2、交互切换性的部分，单独立一个特殊样式的class名，方便调取。 比如：<li>列表中需要一个凸显的样式，那么在<li>里面编写公共样式，再将变换的样式写在单独的class上。常提取出背景色background-color、背景图片background-image、字体颜色color、边框色border-color等样式。
3、切图过程中，所有的图片都需要优化，手机端的图片不能超过70KB，避免后期后端还需去单独优化图片。 4、项目页面的样式放置在统一的外部css文件中；多个页面引用的公共样式需提炼出来放置一处，不要多处复制。 5、独立的页面，如活动页面，因css代码较少，根据后端需求，一般内嵌至HTML页面的<head>中。 三、JS方面 1、js代码统一放置在页面代码最下面，位于</body>之上；引用的外部js放置在编写的js代码之前，利于js代码的加载。 2、每个模块区域作用的js代码要分段编写，并注明每段js代码的用途，不要将所有的js代码混合在一起或合并起来，方便后端快速修改、删除，并合并前后端代码。 3、交互性js效果都需前端实现，减少后端工作量；根据用户体验，交互效果尽量考虑周全，减少遗漏。 4、若前期已有现成的js效果代码可以直接采用，比自己现编写更实用、更效率。 四、调试页面 1、做完页面之后前端必须先对照设计稿调试页面，包括电脑上的页面显示以及各种型号的手机上的呈现效果。在确认没有页面结构、样式问题后，再提交到后端。尽量避免HTML结构代码的返工修改。 2、对照设计图调试的同时，需要考虑用户的可操作性，以及页面的美观效果，避免后期上线时需再次修改。 比如：字体的大小是否合适、弹框文字是否居中、弹框的遮罩层点击之后弹框是否关闭（包括确定按钮、关闭按钮）等等，一系列影响美观和用户操作的细节问题。 3、浏览器审查元素调试页面样式更便捷、更直观、更准确。得到属性值后再去编辑器里修改。 4、页面调试时使用PageSpeed插件分析页面性能，进行相应调整。 5、当后端生成出测试页面时，前端需再次测试页面，确保页面代码布局没有遗漏，根据后端需求、实际环境调整样式。 五、及时沟通 1、前端工作开始之前先确认自己的上下游，拿到设计稿后，将JPG效果图传给后端预先知晓。 2、在拿到设计图的同时，整个图的流程需要搞清楚，若不清楚需要和后端或者是负责人及时沟通，避免后端与前端的逻辑流程差异过大，交接时出现不必要的麻烦。 3、当页面交接时有需要特别交代的地方，文字表达不清楚时，当面交流更效率。 ---------- 与编辑、设计配合须知 ---------- 1、总览页面效果图，看到不确定元素时，需与负责人沟通，确定其想要的布局形式以及交互动态效果，避免与需求不符。 2、需要交互变换效果的元素，先确认设计稿里是否有隐藏图层。如果没有再与设计确认交互样式。 3、当页面完成之后，可以交于编辑确认是否有遗漏，再提交给后端或上线。 4、专题页面需编辑提供的信息： （1）专题项目命名 （2）网页标题：title （3）关键字(PC端)：keyword （4）关键描述(PC端)：description （5）微信分享的文案和图片 （6）cnzz代码 （7）“往期回顾”版块所需图片及链接 （8）视频文件：pc版需要flv格式，wap端需要MP4格式
