CMS前端代码评审

CMS前端代码评审

Transcript

1. 单东林 2012年08月 CMS前端代码规范&禁忌 UED分享 · 交流 http://cssrain.github.io
2. 1，目录规范 2，代码规范&禁忌 3，代码的实现方式改进 4，好的代码 内容：
3. 目录规范
4. 先看文件目录 • CMS： • 规范：
5. • CMS： • 规范： 样式CSS和image必须处于同一目录，Images文件夹里的图片需要分模块放： tree的图片应该放于images下： 再看样式目录
6. • CMS： • 规范： 项目中所有使用的类库，目录命名必须是： 脚本名 / 版本号 / 脚本名.js。 如引入1.7.2版的jQuery: res/lib/jquery/1.7.2/jquery.js 类库分为压缩版和未压缩版，压缩版请以 “类库名.min.js” 命名。 res/lib/ie6/DD_belatedPNG_0.0.8a.js 再看类库目录
7. 代码规范&禁忌
8. HTML代码 • CMS： • 规范： <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
9. HTML代码 • CMS： • 规范： <a class="mr4" href="#nogo" onclick="addTemplate()"> <img src="res/theme/default/images/tree_ctrl_icon.jpg" alt="新增模板" /></a> Html所有标签用小写； <a class="mr4" href="#nogo" OnClick="addTemplate()"> <img src="res/theme/default/images/tree_ctrl_icon.jpg" alt="新增模板" /></a>
10. • CMS： <a class="mr4" href="#nogo" OnClick="addTemplate()"> <img src="res/theme/default/images/tree_ctrl_icon.jpg" alt="新增模板" /></a> …… • 规范： <a href=“#nogo”onclick=“addTemplate()“ class=”addNewTpl”></a> …… 用class+背景图控制，而不是用img标签控制； CSS代码
11. CSS代码 • CSS的名字不要取关键字，也不要随便使用全局样式： .layout { width: 100%; height: 100%; margin:0 auto; } button { border:none; cursor:pointer; } .highlight { display:block; } .bold { font-weight:700; }
12. JS代码 • JS的凼数名字不要取关键字： • 不要随便定义全局变量： function change(changeBtn)｛ … … ｝ function ok(okBtn){ … … }
13. 代码实现方式改进
14. 伸缩效果的实现 • 伸缩效果： 代码结构： 点击隐藏显示不同的元素； <div class="select_up"></div> <div class="select_down hide"></div> 改进： 实际只要切换元素的class即可。 <div class="select_up select_down"></div>
15. 好的代码
16. 代码实现 • 脚本钩子： <input id="JS_search" type="text" value="请输入关键字查找" /> 以JS_前缀开头，说明这个是js操作，不能去掉；
17. 代码实现 • 注释比较好：
18. 代码实现 • 使用组件： 树 ， 弹出层 ， 分页 ， Tab ， 1 2 3 4
19. 笔记 • 笔记：开发中遇到的一些问题 ：
20. Q&A
21. 感 谢 聆 听