转载/NEC:更好的CSS样式解决方案之三/工程师规范篇

前言：特色功能Nice+Easy=Better，读规范，让你的代码更具智慧和美丽的方法用框架，选择一份合适的HTML和CSS基础代码找代码，在这里找到她，或给你启发，或她就是你的装插件，帮助你快速有效的使用代码库。

规范

你是否常常碰到以下问题：你总是看不懂他写的代码，或者读起来很吃力；你需要改他的代码却无从下手，或总是要去问他这里是什么改了会不会影响其他代码；你和他一起开发一个产品，你总是怕代码和他有冲突或相互影响；你的代码在多次维护任务之后变得越来越臃肿，越来越难以维护。

解决以上问题只需一种方法一读我们的规范！

工程师规范--前端页面开发工程师的工作流程和团队协作规范

（1）工程师规范--开发准备

①了解产品和设计

• 参加需求、交互、视觉会议，了解产品设计和项目成员。

• 了解产品面向的设备和平台。

• 了解产品对兼容性的要求以及是否采用响应式设计等。

• 了解产品要使用的技术（WEB技术、桌面技术、APP技术、模板语言、混合模式等）。

②提出疑问和见解

• 在交互或视觉会议中结合技术要求，提出疑问和见解。

• 提出可能存在的问题（技术实现问题、性能问题等），协商解决方案（如优雅退化）并达成共识。

• 提出已有新技术可能在产品中的应用场景，协助产品创新。

③技术调研和培训

• 是否需要技术调研，提出可能存在的风险。

• 进行技术调研，产出技术demo，展示demo，反馈调研结果。

• 技术调研的内容可以先咨询经验丰富的前端工程师或前端技术组。

• 经验不足或新入职员工，可提出培训申请。

• 你可以把难以解决的技术问题提交给NEC，NEC将帮助你解决问题。

• 了解NEC,特别是代码规范和技术demo。

④预算人力和时间

• 根据项目时间要求及工作量，预算人力和时间。

• 预算开发周期和阶段性产出。

• 提醒需求方在项目管理平台中创建项目并加入项目成员，创建SVN并设置成员权限。

（2）工程师规范--开发过程

①职责任务

• 确定一个页面工程师负责人，他将负责对整个页面开发工作做统筹规划、分配协调等管理工作和主开发职责。

• 确认交互原型或视觉效果已经定稿，再开始开发工作。

• 如果采取并行模式（视觉设计和页面开发同时进行），则以交互原型定稿为准（当视觉效果定稿后，页面工程师再补充细节），开始分配。

• 按页面类型分配，同一类型页面分配给同一个人。

• 每个人都要了解页面公共元素（多个页面中相同或相似部分），一个公共元素只分配到一个人，每人完成自身页面的同时完成“提取剥离”，你可能需要了解“分类方法规范”。

• 由于图片无法使用SVN合并和解决冲突，切图需要统筹分配。

• 在项目管理平台中创建细分的开发任务，填写任务详情和时间，如果任务间存在关系，则设置好关联或从属关系。

②页面开发

• 创建前端目录，包含“页面开发”目录(如：js、css、html、img)及“提取剥离”目录(如：demo)。

• 使用NEC框架创建前端文件，如：css/*.css、html/*.html、demo/grid.html、demo/module.html、demo/unit.html。

• 使用NEC代码库和插件，高效开发页面。

• 和交互、视觉及其他前端工程师或后端工程师保持良好的沟通。

• 及时反馈问题和建议：对效果疑问的确认、对状态缺失的补充、对优雅退化的建议、对行为结构的说明等等。

• 如果采取并行模式（页面开发和JS开发同时进行），则以交互原型定稿为准，JS开发工程师可并行开发业务逻辑层，当页面开发完成后再嵌入UI层。

③提取剥离

• 页面开发的同时提取布局(grid)、模块(module)、元件(unit)至对应的HTML文件。

• 避免重复劳动，对页面元素一目了然，在增加元素时首先来此目录查找是否已经实现或有相似实现而只需扩展。

• “提取剥离”目录中的HTML文件和“页面开发”目录中的HTML文件需要同步维护。

（3）工程师规范--开发产出

①自测联调

• 更新、合并、解决冲突、提交。

• 对自己的代码进行全面的多设备测试和兼容性测试。

• 如果自测过程中发现别人写的代码有问题，及时反馈。

②提交验收

• 当有阶段性产出后，页面工程师将页面提交给设计师，进行效果验收。

• 效果验收将主要检查视觉效果符合度（尺寸、位置、颜色、切图等）。

• 如有必要，可以同时提交给经验丰富的前端工程师或前端技术组，进行代码验收。

• 代码验收将主要检查兼容性、HTML规范和CSS规范。

③交接说明

• 当完成验收后，通知并交给后续的开发工程师，进行模板层开发和行为逻辑开发，页面工程师需要交代可能需要他们注意的地方或者对代码的解释说明。

• 如果你的工作需要与别人交接，也需要交代清楚整体架构部署和代码解释。

④总结分享

• 分享内容可以包括：架构思想、协作心得、使用NEC体会、设备特性介绍、新技术应用、调研展示、遇到的问题和解决方案等。

• 分享对象不限于：交互、视觉、前端及所有感兴趣的人。

• 你可以把总结中的技术demo提交给NEC，我们会发布到代码库，以帮助你积累这些技术并分享给别人。

⑤变更维护

• 如果未经过需求变更和设计变更，原则上不允许直接进行开发变更。

• 变更前应了解变更原因，变更后应该及时通知后续开发工程师。

• 如果静态资源的版本号不是自动完成更新， 你可能需要手动更新版本号。

• 变更和维护使用本规范中所有流程，即你可能需要重复之前部分流程。