前端编码规范Word下载.docx
- 文档编号:16648038
- 上传时间:2022-11-25
- 格式:DOCX
- 页数:15
- 大小:23.50KB
前端编码规范Word下载.docx
《前端编码规范Word下载.docx》由会员分享,可在线阅读,更多相关《前端编码规范Word下载.docx(15页珍藏版)》请在冰豆网上搜索。
select>
等;
p>
里不可以嵌套块级元素<
div>
h1>
~<
h6>
/<
form>
等。
HEAD
apple-touch-icon图片自动处理成圆角和高光等效果;
apple-touch-icon-precomposed禁止系统自动添加效果,直接显示设计原图;
文档类型<
!
DOCTYPEhtml>
语言属性<
lang="
zh-cmn-Hans"
>
字符编码(必须是<
head>
标签的第一个子元素)<
metacharset="
utf-8"
优先使用最新内核<
metahttp-equiv="
X-UA-Compatible"
content="
IE=edge,chrome=1"
SEO优化<
metaname="
keywords"
yourkeywords"
description"
yourdescription"
author"
author,emailaddress"
viewport<
viewport"
width=device-width,initial-scale=1.0"
iOS图标
favicon<
linkrel="
shortcuticon"
href="
path/to/favicon.ico"
HEAD模板
htmllang="
title>
StyleGuide<
/title>
不超过150个字符"
"
name,email@"
--为移动设备添加viewport-->
--iOS图标-->
apple-touch-icon-precomposed"
/apple-touch-icon-57x57-precomposed.png"
alternate"
type="
application/rss+xml"
title="
RSS"
/rss.xml"
/>
/head>
HTML标签语义化
标签语义
段落
h2>
h3>
...标题
无序列表
有序列表
blockquote>
大段引用
cite>
一般引用
b>
为样式加粗而加粗
storng>
|为强调内容而加粗
i>
|为样式倾斜而倾斜
em>
|为强调内容而倾斜
code>
|代码标识
abbr>
|缩写
CSS
以组件为单位组织代码
组件块和子组件块以及声明块之间使用一空行分隔,子组件块之间三空行分隔;
如果使用了多个CSS文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动;
避免选择器嵌套层级过多,尽量少于3级
避免ClassID叠加使用
声明块
选择器分组时,保持独立的选择器占用一行
声明块的左括号{前添加一个空格;
声明块的右括号}应单独成行;
声明语句中的:
后应添加一个空格;
声明语句应以分号;
结尾;
一般以逗号分隔的属性值,每个逗号后应添加一个空格;
rgb()、rgba()、hsl()、hsla()或rect()括号内的值,逗号分隔,但逗号后不添加一个空格;
对于属性值或颜色参数,省略小于1的小数前面的0(例如,.5代替0.5;
-.5px代替-0.5px);
十六进制值应该全部小写和尽量简写,例如,#fff代替#ffffff;
避免为0值指定单位
声明顺序Positioning>
Boxmodel>
Typographic>
Visual
url()、属性选择符、属性值使用双引号。
将媒体查询(Mediaquery)放在尽可能相关规则的附近
不要使用@import
链接样式顺序a:
link->
a:
visited->
hover->
active(LoVeHAte)
使用Autoprefixer自动添加浏览器前缀,书写CSS无需添加浏览器前缀
/*==========================================================================
组件块
============================================================================*//*子组件块
============================================================================*/
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(boxmodel)相关的样式,因此排在首位。
盒模型决定了组件的尺寸和位置,因此排在第二位。
其他属性只是影响组件的内部(inside)或者是不影响前两组属性。
.declaration-order{/*Positioning*/
position:
absolute;
top:
0;
right:
bottom:
left:
z-index:
100;
/*Boxmodel*/
display:
block;
box-sizing:
border-box;
width:
100px;
height:
padding:
10px;
border:
1pxsolid#e5e5e5;
border-radius:
3px;
margin:
float:
right;
overflow:
hidden;
/*Typographic*/
font:
normal13px"
HelveticaNeue"
sans-serif;
line-height:
1.5;
text-align:
center;
/*Visual*/
background-color:
#f5f5f5;
color:
#fff;
opacity:
.8;
/*Other*/
cursor:
pointer;
}
CSS网页字体排版
字体
内文字体
p{font-family:
"
Georgia"
"
TimesNewRoman"
SongtiSC"
SimSun"
serif;
}
标题字体
h1,h2,h3,h4,h5,h6{font-family:
LucidaGrande"
Arial"
HiraginoSansGB"
NotoSansCJKSC"
HeitiSC"
MicrosoftYaHei"
WenQuanYiMicrohei"
字号
将内文以16px作为字号
标题h1,h2,h3,h4,h5,h6以16px作为字号基础,按同比例的递减
p{font-size:
16px;
}h1{font-size:
2em;
}h2{font-size:
1.8em;
}h3{font-size:
1.6em;
}h4{font-size:
1.4em;
}h5,h6{font-size:
1.2em;
行高
将内文以1.7em作为行高
标题h1,h2,h3,h4,h5,h6以1.5em作为行高.
p{line-height:
1.7em;
}h1,h2,h3,h4,h5,h6{line-height:
1.5em;
段落间距
p{margin-bottom:
}h1,h2,h3,h4,h5,h6{margin-top:
.7em;
margin-bottom:
0.2em;
齐头尾
p{text-align:
justify;
text-justify:
inter-ideographic;
断词使中英文混排时字符间距不会被齐头尾拉的不均匀
p{word-break:
break-all;
Less
代码顺序@import>
变量声明>
样式声明
@import.less不得省略,用双引号
Mixin
在定义mixin时,如果mixin名称不是一个需要使用的className,必须加上括号,否则即使不被调用也会输出到CSS中。
如果混入的是本身不输出内容的mixin,需要在mixin后添加括号(即使不传参数),以区分这是否是一个className。
避免嵌套层级过多,限制在2层
可以使用字符串插值使变量嵌入字符串中@base-url:
;
background-image:
url("
@{base-url}/images/bg.png"
);
命名(从组件方式思考命名)
Components至少以两个单词命名,通过-分离.like-button.search-form.article-card
Elements(Element是Components中的元素)
类名尽可能仅有一个单词
多个单词应直接连接
避免标签选择器(性能稍弱,表意不明)
Variants(变体)带有前缀-
Positioning(position,top,left,right,bottom)
Floats(float,clear)
Margins(margin)
Dimensions(width,height)
.-wide.-short.-disabled.title.-small
避免定位属性
头像logos等元素应设置固定尺寸
在父元素中设置定位
避免过分嵌套
className命名
常见class关键词:
布局类:
header,footer,container,main,content,aside,page,section
包裹类:
wrap,inner
区块类:
region,block,box
结构类:
hd,bd,ft,top,bottom,left,right,middle,col,row,grid,span
列表类:
list,item,field
主次类:
primary,secondary,sub,minor
大小类:
s,m,l,xl,large,small
状态类:
active,current,checked,hover,fail,success,warn,error,on,off
导航类:
nav,prev,next,breadcrumb,forward,back,indicator,paging,first,last
交互类:
tips,alert,modal,pop,panel,tabs,accordion,slide,scroll,overlay,
星级类:
rate,star
分割类:
group,seperate,divider
等分类:
full,half,third,quarter
表格类:
table,tr,td,cell,row
图片类:
img,thumbnail,original,album,gallery
语言类:
cn,en
论坛类:
forum,bbs,topic,post
方向类:
up,down,left,right
其他语义类:
btn,close,ok,cancel,switch;
link,title,info,intro,more,icon;
form,label,search,contact,phone,date,email,user;
view,loading…
简单规则
以中划线连接,如.item-img
使用两个中划线表示特殊化,如.item-img.item-img--small表示在.item-img的基础上特殊化
状态类直接使用单词,参考上面的关键词,如.active,.checked
图标以icon-为前缀(字体图标采用.icon-font.i-name方式命名)。
模块采用关键词命名,如.slide,.modal,.tips,.tabs,特殊化采用上面两个中划线表示,如.imgslide--full,.modal--pay,.tips--up,.tabs--simple
js操作的类统一加上js-前缀
不要超过四个class组合使用,如.a.b.c.d
JavaScript
注释如无必要勿增注释,如有必要尽量详尽,只使用//,避免使用/*...*/
函数方法注释包含函数说明参数和返回值及返回值类型,如果函数是内部函数可以使用@inner标识
文件注释应该提供文件的大体内容,它的作者,依赖关系和兼容性信息。
如下:
/**
*函数描述
*
*@param{string}p1参数1的说明
*@param{string}p2参数2的说明,比较长
*那就换行了.
*@param{number=}p3参数3的说明(可选)
*@return{Object}返回值描述
*/
*@fileoverviewDescriptionoffile,itsusesandinformation
*aboutitsdependencies.
*@authoruser@(FirstnameLastname)
*Copyright2009MeizuInc.AllRightsReserved.
命名
变量驼峰命名法
私有属性变量方法_开头
常量全部字母大写,_分隔
函数及函数的参数驼峰命名法
类单词首字母大写,类的方法及属性驼峰命名法
枚举变量单词首字母大写,枚举属性全部字母大写,_分隔
多个单词组成的缩写词,在命名中,根据当前命名法和出现的位置,所有字母的大小写与首字母大小写保持一致
命名词法
类名使用名词functionEngine(options){}
函数名,使用动宾短语。
functiongetStyle(element){}
boolean类型的变量使用is或has开头。
varisReady=false;
varhasMoreCommands=false;
Promise对象用动宾短语的进行时表达。
varloadingData=ajax.get('
url'
loadingData.then(callback);
接口命名规范(1.可读性强2.不与jQuery社区习惯冲突3.尽量写全不用缩写,除非下表中已经约定的)
常用词说明
options表示选项,与jQuery社区保持一致,不要用config,opts等
active表示当前,不要用current等
index表示索引,不要用idx等
trigger触点元素
triggerType触发类型、方式
context表示传入的this对象
object推荐写全,不推荐简写为o,obj等
element推荐写全,不推荐简写为el,elem等
length不要写成len,l
prevprevious的缩写
nextnext下一个
constructor不能写成ctor
easing示动画平滑函数
minminimize的缩写
maxmaximize的缩写
DOM不要写成dom,Dom
.hbs使用hbs后缀表示模版
btnbutton的缩写
link超链接
title主要文本
img图片路径(img标签src属性)
datasethtml5data-xxx数据接口
theme主题
className类名
classNameSpaceclass命名空间
TrueFalse
类型检测优先使用typeof
对象检测使用instanceof
null或undefined检测使用==null
返回falsenullundefined'
'
0
返回true'
0'
[]{}
for-in循环只用于object/map/hash遍历,因为Array上使用for-in循环会对所有出现在原型上的对象进行遍历
二元及三元操作符始终写在前一行
三元操作符替代if...else
&
||设置默认值和替代多个if嵌套判断
正则表达式仅准用.test()和.exec()。
不准用"
string"
.match()
多个参数使用对象字面量存储
jQuery
使用最新版本的jQuery
jQuery变量以$开头,并缓存到本地变量中复用,使用驼峰命名法命名
jQuery选择器
尽量使用ID选择器
父元素选择子元素用.find()方法性能会更好
DOM操作,尽量先与节点分离,操作结束后再插入节点
字符串连接array.join('
)>
+>
.append()
事件
如果需要,对事件使用自定义的namespace,这样容易解绑特定的事件,而不会影响到此DOM元素的其他事件监听;
对Ajax加载的DOM元素绑定事件时尽量使用事件委托。
事件委托允许在父元素绑定事件,子代元素可以响应事件,也包括Ajax加载后添加的子代元素;
$("
#myLink"
).on("
click.mySpecialClick"
myEventHandler);
).unbind("
//Notrecommended$("
#lista"
click"
myClickHandler);
//Recommended$("
#list"
a"
链式写法1.尽量使用链式写法而不是用变量缓存或者多次调用选择器方法;
2.当链式写法超过三次或者因为事件绑定变得复杂后,使用换行和缩进保持代码可读性;
CSS不要写在jQuery里面
避免使用jQuery实现动画
禁止使用slideUp/Down()fadeIn/fadeOut()等方法;
尽量不使用animate()方法;
jQuery插件模板
//jQueryPluginBoilerplate//AboilerplateforjumpstartingjQuerypluginsdevelopment//version1.1,May14th,2011//byStefanGabos//remembertochangeeveryinstanceof"
pluginName"
tothenameofyourplugin!
(function($){//herewego!
$.pluginName=function(element,options){//plugin'
sdefaultoptions
//thisisprivatepropertyandisaccessibleonlyfrominsidetheplugin
vardefaults={
foo:
'
bar'
//ifyourpluginisevent-driven,youmayprovidecallbackcapabilities
//foritsevents.executethesefunctionsbeforeoraftereventsofyour
//plugin,sothatusersmaycustomizethoseparticulareventswithout
//changingtheplugin'
scode
onFoo:
function(){}
}//toavoidconfusions,use"
plugin"
toreferencethe
//currentinstanceoftheobject
varplugin=this;
//thiswillholdthemergeddefault,anduser-providedoptions
//plugin'
spropertieswillbeavailablethroughthisobjectlike:
//plugin.settings.propertyNamefrominside
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 编码 规范