前端开发命名规范

《前端开发命名规范》由会员分享，可在线阅读，更多相关《前端开发命名规范（3页珍藏版）》请在金锄头文库上搜索。

1、前端开发工作规范前端开发工作规范为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档， 特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。【写在规则前面的话】 项目的可维护性第一。你不是一个人在做事，项目的维护和二次开发可能是直接的或间接 的团队合作。好的可维护性，从四个方面下手： 1）代码的松耦合，高度模块化，将页面内的元素视为一个个模块，相互独立，尽量避免耦 合过高的代码，从 html,css,js 三个层面都要考虑模块化。 2）良好的注释。 3）注意代码的弹性，在性能和弹性的选择上，一般情况下以弹性为优先考虑条件，在保证 弹性的基础上

2、，适当优化性能。 4）严格按照规范编写代码。【命名规则】 为避免命名冲突，命名规则如下： 1）公共组件因为高度重用，命名从简，不要加前缀； 2）各栏目的相应代码，需加前缀，前缀为 WD 姓名拼音的首字母，例如：杰夫前缀为“jf_”， 分隔符为下划线“_”，例如：“jf_imgList”; 3）模块组件化，组件中的 class 或 id 名采用骆驼命名法和下划线相结合的方式，单词之间 的分隔靠大写字母分开，从属关系靠下划线分隔。例如： html:1)XXXXXXXXXXXXXX 2)XXXXXXXXXXXXXX 3)XXXXXXXXXXXXXXcss: .textList .text_list

3、X .textList_firstItem .textListFirstItem X4）命名清晰，不怕命名长，怕命名容易冲突，长命名可以保证不会产生冲突，所以 css 选 择时可以尽量不使用子选择符，也能确保 css 优先级权重足够低，方便扩展时的覆盖操作：.textList_firstItem .textList .firstItem5) 命名要有意义，不要使用没有意义的命名。用英语命名，不要用拼音。【分工安排】 1)分工原则为公共组件（包括 common.css 和 public.JS）一人维护，各栏目其他人负责，每 个栏目正常情况下一人负责，要详细写明注释，如果多人合作，维护的人员注意添

4、加注释 信息，具体注释细则，详见注释规则； 2)VD 设计完设计图后，先和交互设计师沟通，确定设计可行，然后先将设计图给公共组件 维护者，看设计图是否需要提取公共组件，然后再提交给相应栏目的 WD。如果有公共组件要提取，公共组件维护者需对栏目 WD 说明。 3)如果确定没有公共组件需提取，交互设计师直接和各栏目的 WD 交流，对照着 VD 的设计 图进行说明，WD 完成需求； 4)WD 在制作页面的时候，需先去 common 文件中查询是否已经存在设计图中的组件，如 果有，直接调用；没有，则在 app.css 和 app.JS 中添加相应的代码。 5)WD 在制作过程中，发现有高度重用的模块，

5、却未被加入到公共组件中，需向公共组件 维护人进行说明，然后工作组件维护人决定是否添加该组件。如果 确定添加，则向 WD 们 说明添加了新组件，让 WD 们检查之前是否添加了类似组件，统一更新成新组件的用法， 删除之前自定义的 css 和 js。虽然麻烦，但始终 把可维护性放在首位。 6)公共组件维护者的公共组件说明文档，需图片和说明文字配套，方便阅读。【注释规则】 1.公共组件维护者和各栏目 WD 都需要在文件头部加上注释说明： /*文件用途说明 *作者姓名、联系方式（旺旺） *制作日期 */2.大的模块注释方法： /=/ 代码用途 /=3.小的注释； /代码说明 注释单独一行，不要在代码后的

6、同一行内加注释。 例如： /姓名 var name = “abc”; Vvar name =”abc”; /姓名 X 4.维护人员的注释方法：尽量根据注释说明，找到代码的原作者，让原作者进行维护，原 作者进行维护可以无需添加额外说明，直接进行修改。如果因为特殊原因，无法让原作者 进行维护，需添加额外说明进行注释。说明文字为：“/*change by xxx) 原代码如下： .新代码如下:*/ 新代码： 如：var name = “abc”;这段代码，要将 name 由“abc”变成“123”，原作者可直接改 var name=” 123”;非原作者修改，需改成： /*(change by 杰夫

7、) 原代码如下：新代码如下：*/ var name =”123”;修改时添加的注释，在项目通过测试之后，上线前，可以优化掉。【js 规范】 1)底层 JS 库采用 YUI 2.6.0；2)统一头部中只载入 YUI load 组件，其他组件都通过 loader 对象加载； 3)js 尽量避免使用全局变量，复杂应用写成组件，通过构造函数实现多态，写在公共组件 或外部 js 中，简单应用直接写在 init 函数中，通过命名空间或匿名函数将变量包进闭包中。【切图规范】 1尽量把页面的背景图及小图标整合到一张图片，用 CSS 定位方法。 （这样以减少 http 请求，从而降底网站的下载速度。 ） 2尊从

8、内容与页面样式的脱离，如需要，同样也要做到布局与 color 的脱离。 （什么样的 图片属于内容：从数据库里取出来的图片。凡是不属于内容的图片请都用背景。 ） 1）页面代码，做到精简，逻辑性清楚；（公用部位可以引入进来，比如头部，脚部） 2）CSS 逻辑清析，精简。可在不改变功能的前提内，做到能更换页面布局及换色。 CSS 样式每个页面引入不超过两个文件，一个是 common：它包含整个站点都需用到的公 用部分，如整体布局，头部，脚部，框，按扭等。另一个是当前页的 CSS。 （CSS 文件引 入在 2 个之内，减少 http 请求）避免 CSS 的表达式。 3将脚本放在底部。 （这样页面就可以

9、逐步呈现，而且页面中的可视组件可以尽早下裁。 ）配合程序开发人员我们需要注意的（xhtml）： 1了解用户可编辑上传修改的“图片”， “文字”区域的需求。根据需求来定位控制，以保证页 面的稳定显示。如图片，需了解： 1）宽度是否是固定大小， 2）宽度最大限度， 3）大小不一样时的居中显示如文字，需了解： 1)文字的最大长度。及加“”省略号区域, 2)在测试中经常也会碰到英文无空格情况，得用 overflow: hidden 的方法隐藏溢出部分。2每个页面加上正确显示的 TITLE。（这个是我经常容易忽视的） 3在页面中尽量完成每步交互效果，包括既时响应的。 4提交程序员的 demo 必须是连贯的，交互效里齐全，而且经过自已在 IE6.0，IE7.0，IE8.0，FIREFOX 等浏览器的一次以上的整体测试。用户体验方面需要注意的： 1每个连接，按钮要做上鼠标 hover 时的一个变化效果（如果 hover 时是换一张背景图 片，请把这两张图片整合在一张图片中，以防止在 hover 时，页面还在 download 变化的 那张图片，这样会出现那个按钮无图的间隔）； 2Input 有个 label，可以让用户在点击字时，光标自动跳入相应 input 中； 3图片应该有 alt 属性，以备图片阻止时，文字的替换。文章有合肥卷闸门http:/整理