CMS前端代码评审

单东林 2012年08月 CMS前端代码规范&禁忌 UED分享 · 交流 http://cssrain.github.io

1，目录规范 2，代码规范&禁忌 3，代码的实现方式改进 4，好的代码内容：

目录规范

先看文件目录 • CMS： • 规范：

• CMS： • 规范：样式CSS和image必须处于同一目录，Images文件夹里的图片需要分模块放： tree的图片应该放于images下：再看样式目录

• 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 再看类库目录

代码规范&禁忌

HTML代码 • CMS： • 规范： <!DOCTYPE html> <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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>

• 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代码

CSS代码 • CSS的名字不要取关键字，也不要随便使用全局样式： .layout { width: 100%; height: 100%; margin:0
auto; } button { border:none; cursor:pointer; } .highlight { display:block; } .bold { font-weight:700; }

JS代码 • JS的凼数名字不要取关键字： • 不要随便定义全局变量： function change(changeBtn)｛ … … ｝
function ok(okBtn){ … … }

代码实现方式改进

伸缩效果的实现 • 伸缩效果：代码结构：点击隐藏显示不同的元素； <div class="select_up"></div> <div class="select_down hide"></div>
改进：实际只要切换元素的class即可。 <div class="select_up select_down"></div>

好的代码

代码实现 • 脚本钩子： <input id="JS_search" type="text" value="请输入关键字查找" /> 以JS_前缀开头，说明这个是js操作，不能去掉；

代码实现 • 注释比较好：

代码实现 • 使用组件：树，弹出层，分页， Tab
， 1 2 3 4

笔记 • 笔记：开发中遇到的一些问题：

感谢聆听

CMS前端代码评审

CMS前端代码评审

cssrain

More Decks by cssrain

Other Decks in Technology

Featured

Transcript

单东林 2012年08月 CMS前端代码规范&禁忌 UED分享 · 交流 http://cssrain.github.io

1，目录规范 2，代码规范&禁忌 3，代码的实现方式改进 4，好的代码内容：

目录规范

先看文件目录 • CMS： • 规范：

• CMS： • 规范：样式CSS和image必须处于同一目录，Images文件夹里的图片需要分模块放： tree的图片应该放于images下：再看样式目录

• CMS： • 规范：项目中所有使用的类库，目录命名必须是：脚本名 / 版本号 / 脚本名.js。

代码规范&禁忌

HTML代码 • CMS： • 规范： <!DOCTYPE html> <!DOCTYPE html PUBLIC

HTML代码 • CMS： • 规范： <a class="mr4" href="#nogo" onclick="addTemplate()"> <img

• CMS： <a class="mr4" href="#nogo" OnClick="addTemplate()"> <img src="res/theme/default/images/tree_ctrl_icon.jpg" alt="新增模板" /></a>

CSS代码 • CSS的名字不要取关键字，也不要随便使用全局样式： .layout { width: 100%; height: 100%; margin:0

JS代码 • JS的凼数名字不要取关键字： • 不要随便定义全局变量： function change(changeBtn)｛ … … ｝

代码实现方式改进

伸缩效果的实现 • 伸缩效果：代码结构：点击隐藏显示不同的元素； <div class="select_up"></div> <div class="select_down hide"></div>

好的代码

代码实现 • 脚本钩子： <input id="JS_search" type="text" value="请输入关键字查找" /> 以JS_前缀开头，说明这个是js操作，不能去掉；

代码实现 • 注释比较好：

代码实现 • 使用组件：树，弹出层，分页， Tab

笔记 • 笔记：开发中遇到的一些问题：

Q&A

感谢聆听