Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CMS前端代码评审
Search
cssrain
September 02, 2014
Technology
0
130
CMS前端代码评审
CMS前端代码评审
cssrain
September 02, 2014
Tweet
Share
More Decks by cssrain
See All by cssrain
UED工作流程分享和交流
cssrain
1
420
解读HTML
cssrain
0
130
解读HTML5
cssrain
2
150
基础CSS(1)
cssrain
0
130
基础CSS(2)
cssrain
0
95
高效的CSS
cssrain
0
150
高级CSS—继承
cssrain
0
110
PhoneGap分享和交流
cssrain
0
84
PhoneGap实践
cssrain
0
65
Other Decks in Technology
See All in Technology
AIエージェント就活入門 - MCPが履歴書になる未来
eltociear
0
430
制約理論(ToC)入門
recruitengineers
PRO
2
250
浸透しなさいRFC 5322&7208
hinono
0
120
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
1
130
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
570
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
トヨタ生産方式(TPS)入門
recruitengineers
PRO
2
200
JavaScript 研修
recruitengineers
PRO
2
140
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
2
200
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
420
広島発!スタートアップ開発の裏側
tsankyo
0
240
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Writing Fast Ruby
sferik
628
62k
For a Future-Friendly Web
brad_frost
179
9.9k
What's in a price? How to price your products and services
michaelherold
246
12k
The Cult of Friendly URLs
andyhume
79
6.5k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Designing for Performance
lara
610
69k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Transcript
单东林 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
笔记 • 笔记:开发中遇到的一些问题 :
Q&A
感 谢 聆 听