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
430
解读HTML
cssrain
0
130
解读HTML5
cssrain
2
150
基础CSS(1)
cssrain
0
130
基础CSS(2)
cssrain
0
96
高效的CSS
cssrain
0
150
高级CSS—继承
cssrain
0
110
PhoneGap分享和交流
cssrain
0
85
PhoneGap实践
cssrain
0
67
Other Decks in Technology
See All in Technology
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
110
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
1
570
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.9k
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.9k
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
360
AWSにおけるTrend Vision Oneの効果について
shimak
0
130
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
130
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
190
許しとアジャイル
jnuank
1
130
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
220
Azure Well-Architected Framework入門
tomokusaba
1
310
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Thoughts on Productivity
jonyablonski
70
4.9k
Code Reviewing Like a Champion
maltzj
525
40k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Visualization
eitanlees
148
16k
RailsConf 2023
tenderlove
30
1.2k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
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
感 谢 聆 听