Web前端开发规范手册

Web前端开发规范手册1Web前端开发规范手册文档修订历史记录修订日期修订人修订内容2013-11-27XXX文档创建，有李银磊、盛旭华分别整理文档共同合并而成。2013-12-23XXX内容完善，格式规范2013-12-25XXX内容修改，在内容，格式，目录结构各方面都有调整，涉及各章节。2014-02-27XXX模板中现存代码img问题、图标合并一张摆放位置、textarea默认可拖动造成页面混乱等方案添加。Web前端开发规范手册21目录一、规范目的...........................................................................................................................3二、基本准则...........................................................................................................................3三、文件规范...........................................................................................................................33.1基本要求.......................................................................................................................33.1.1容器/布局/组件关系说明...............................................................................93.1.2文件存放位置规范...........................................................................................33.1.3文件命名原则...................................................................................................43.2HTML书写规范..........................................................................................................73.2.1head区代码规范............................................................................................83.2.2body区代码规范............................................................错误!未定义书签。3.2.3布局.................................................................................................................113.2.4组件.................................................................................................................143.3CSS书写规范............................................................................................................173.3.1css链接规范....................................................................错误!未定义书签。3.3.2css命名规则..................................................................................................183.3.3css组合使用..................................................................................................193.4静态页面命名规范.......................................................................错误!未定义书签。3.5JavaScript书写规范.................................................................................................193.6图片规范.......................................................................................错误!未定义书签。3.7注释规范.....................................................................................................................213.7.1html注释.......................................................................................................213.7.2css注释..........................................................................................................213.7.3JavaScript注释.............................................................................................22四、常见BUG.......................................................................................................................22五、兼容性.............................................................................................................................24六、测试.................................................................................................................................24七、待解决问题.....................................................................................................................25八、执行模式.........................................................................................................................26Web前端开发规范手册3一、规范目的本文档是将通用的前端规范结合本系统的特色要求整合而成，意在：提高团队协作效率便于前端开发以及后期优化维护方便新进的成员快速上手输出高质量的代码本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后可以更新此文档。本规范文档同时将用于绩效考核参考标准，加（★）项为考核点。二、基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良。代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。开发时需要遵循如上基本准则，特殊情况可以有所宽限，如一些老项目的页面改造。三、文件规范3.1基本要求3.1.1文件存放位置规范文件夹说明备注images存放图片文件css存放css文件1.base.css：是放整站公共部分的样式，如网站的头尾，各元素值的初始化样式等；任何页面都要加载base.css，调用放在最上层且要优先加载。2.各组件都有自己的样式表命名JS存放javascript脚本Web前端开发规范手册4flash存放flash文件暂不考虑，若后期有此应用就按此标准扩展inc存放include文件library存放DW库文件inc存放include文件media存放多媒体文件3.1.2文件命名原则[使用场景：在新建网页、图片、脚本、CSS文件时，根据此规则给文件命名并放入指定位置]文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字空格和特殊字符。命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。3.1.2.1HTML的命名原则每一个目录中应该包含一个缺省的html文件，文件名统一用index.html文件名。各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。如果栏目名称多而复杂时用两个写英文单词并用“-”连接。目前每套模板必须包含的预置页面为：分类中文名称静态文件名Web前端开发规范手册5公共部分文件网站头部header网站尾部footer网站主页面首页home商品列表product-list（有商品）product-listNull（无商品时）商品单页product-details文章列表articleitem-list文章详情articleitem-details关于我们about-us联系我们contactus-us在线咨询online-consulting登录、注册流程登录login注册registere-s1（填写账号信息）registere-s2（验证账号）registere-s3（完成）找回密码lost-passwordEmail找回密码：lostpassword_email手机找回密码：lostpassword_telephone购物流程购物车shopping-car1订单信息页shopping-car2订单成功页shopping-car3支付失败页order-fail会员中心会员中心公共会员中心头member-header会员中心尾member-footer会员中心首页member-center交易管理我的订单member-center-myorder订单详情member-center-orderdetails我的关注我的收藏member-center-collect我的咨询member-center-myask账号信息个人资料member-center-personal收货信息me