前端代码规范
前端代码规范
第一章：规范目的
为提高团队协作效率,利于代码维护,方便新人快速了解代码结构和功能划分,也利于自身代码质量的提高,没别的意思就是大家一起进步一起提高,希望前端同学看看，如果有更好的想法可以直接修改这个文件,把自己的想法加上,在然后前端同学一致通过,咱们就按照规范走,贵在坚持,坚持就会有好的结果。
一个好的项目，它的代码文件结构很清晰，也利于新人很快了解项目的大致功能，也利于后期的维护与开发。
第二章：前端文件夹结构规范
2.1 view
view [//前端代码父级目录
common[//公共文件夹
head[//公共组件
head.html
head.less
head.js
img
]
footer[//公共组件
footer.less
footer.html
footer.js
img
]
等等等。。。。
widget[//公共插件
tab.js //tab切换插件
page.js //分页插件
…
]
]
2.2 js
js[//这里只能防置js库文件,第三方js库以及前端模板库
jquery.js
artTemplate.js
iscroll.js
]
2.3 css
css [
reset.less
varibel.less
bese.less
common.less
img 文件夹 放置公共的图片如logo之类的
]
2.4 page
page[//业务级别文件夹
index[//首页
index.html
index.less
index.js
img
]
bindcard[
bindcard.html
bindcard.less
bindcard.js
img
]
等等等 都是按照业务功能分的一些频道
]
]
第三章 css书写规范
css书写规范
1.协作开发及分工:根据各个模块,同时根据页面相似程序, 事先写好大体框架文件,分配给前端人员实现内部结构&表现&行为;协作开发过程中,每个页面请务必都要引入,此文件包含reset及头部底部样式,此文件不可随意修改。
2.为JavaScript预留钩子的命名,请以js_起始,如:js_hide,js_show, 就是让大家一看 这个只是为js服务的 没有样式的。
3.class与id命名:大的框架命名比如header/footer/wrapper/left/right之类的统一命名要语义化,简明化,两个词以上之间要用‘-’中间连接符链接。
4.开发过程中严格按分工完成页面,以提高css复用率,避免重复开发。
5.样式表中中文字体名,请务必转码成unicode码,以避免编码错误时乱码。
6.背景图片请尽可能使用sprite技术,减少http请求,考虑到多人协作开发,sprite按模块制作
7.z-index这个属性要按照一定的规范去写,不然后期会很混乱,要按照定义的级别去书写
8. 页面规范严格按照psd文档来,色值,间距神马的,尽量还原设计图
9.css注释块级别
10.代码书写格式 段
第四章 JavaScript书写规范
JavaScript书写规范
1.库引入:如引jQuery库,若需引入第三方库,须与团队其他同学一起讨论决定
2.变量命名:建议驼峰式命名,原生JavaScript变量要求是纯英文字母, 首字母须小写,如iTaoLun另,要求变量集中声明,避免全局变量
3.代码结构明了,加适量注释,代码缩进,提高函数重用率
4.注重与html分离,减小沉冗代码,书写所有人都可以看的懂的代码
5.如渲染html元素需要过多的字符串拼接，可以用前端模板处理或者
var tpl = [
‘<div>’,
‘<div>M</div>’,
‘<p>o</p>’,
‘</div>’
].join(‘’);
也不要str+= 一直拼写下去
第五章 文件命名方式例子
1.index.html index-room.html
2.index.css index-room.css
3.index.js index-room.js
附录
1. 当更改公共东西的时候，要告诉别人，都改了什么。如果是js要告诉别人js如何使用。
2.用代码编辑工具保存代码时候最好能把没用的前后空格去掉，要不合并代码会有空格冲突，代码缩进等都要按照一定规则缩进。
3.最后想提倡用前端集成部署方案如百度的fis国外的grunt等,可以为前端节省不少开发时间和优化的考量,比如说代码压缩、打包、图片资源优化合成、js静态代码检查等。
