博客首页前端开发分类

前端开发规范整理

发布时间:2016-05-31 11:33:52编辑:Mr.Co阅读(788)

Web前端开发


   最近刚整理了下前端相关的开发规范,包含HTML、JavaScript、CSS、Image等几类规范。这里分享给大家,有不足的地方欢迎大家补充和拍砖。

一、CSS样式表编码规范


CSS文件命名

1、文件名遵从 Camel 命名法,无特殊情况,扩展名小写

  文件的命名只能包含字母,不建议加入数字,除非数字是专有名词的一部分,例如 Int32。 习惯使用短线(-)或句点(.)作为分隔符号,最好使用小写英文字符,不要使用其他符号和 扩展字符(如中文字符)

2、使用统一而又通用的文件扩展名: .css

代码注释

/* 弹出层 start */ 
.diloag-box{  }
.diloag-box .diloag-icons{  }
/* 弹出层 end */

代码编写

1.classid命名时候请使用yahoo命名方式,比如header-main-logo

2.选择器两边请保留一个空格,比如nav > li

3.每个样式属性后面必须以;号结束

4.链式样式表声明尽量不要超过4级以上,越多性能越差。

5.推荐使用属性缩写。比如 font:12px/1.5 arial, san-serif;  margin:10px 5px;

6.属性的推荐书写顺序 = 布局方式 》尺寸 》文本 》效果

7.清除浮动尽量避免使用创建空元素的方式,推荐使用after:content方式

8.Important请不要滥用

9.当样式中的数值小于1时,可以省略0部分,比如opacity:.5

10.当样式中的宽度、高度等值为0时可不写px等单位

11.font-family属性中的字体值请使用英文值。中文值在编码异常的时候会出现乱码。

12.带私有兼容性的样式属性顺序,应该将标准的样式属性放置在末尾

13.避免使用Expression样式表达式

命名示例

头:header

内容:content/container

尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

登录条:loginbar

标志:logo

广告:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

注册:regsiter

状态:status


二、HTML编码规范


代码编写

1.保证代码的最简化,避免多余的空格空行,保持代码的语义化,尽量使用具有语义的元素,避免使用样式属性和行为属性任何时候都要用尽量简单尽量少的元素解决问题

2.页面中样式属性避免使用ID作为样式名称

3.优选H5新增属性做为页面布局

4.注意闭合标签是否处于闭合状态

5.对的标签做的对的事情,拒绝ul里直接套除li以外的任何标签

6.针对不同浏览器,推荐使用注释条件语句

7.页面中引入CSSJS时候可不写type属性。

8.避免box多层嵌套的情况

9.img元素必须添加alt属性

10.页面样式请放置在Head中,非加载前需执行的JS请将放在</body>前一行

11.推荐使用link[rel=dns-prefetch],提前加载需要请求的二级主机

12.页面中DOM元素的JS钩子推荐使用js-前缀命名

13.避免直接在HTML元素中直接写style代码块,以及scripts代码块

14.每个DOMJS操作以及数据绑定的时候需要考虑HTML性能

15.避免页面中的hrefurl重定向

16.拒绝使用Table作为模块布局

17.避免iframe的使用

代码注释

1.按模块编写注释,比如


<!--login start--> <div class=’login’>…</div><!—login end-->



三、JavaScript编码规范


JS文件命名

1、文件名遵从 Camel 命名法,无特殊情况,扩展名小写

  文件的命名只能包含字母,不建议加入数字,除非数字是专有名词的一部分,例如 Int32。 习惯使用短线(-)或句点(.)作为分隔符号,最好使用小写英文字符,不要使用其他符号和 扩展字符(如中文字符)

2、使用统一而又通用的文件扩展名: .js

文件注释

1、在每个文件头必须包含以下注释说明


/**
 * 脚本功能说明
 * CodeBy:作者名字
 * Date:2016-05-30
 *
 * UpdateBy:修改者名字
 * Date:2016-05-31
 * Desc:修改描述
 */


2、脚本功能说明只需简述,具体详情在类的注释中描述便可。

代码注释

1.   方法注释说明

/**
 * 获取数据列表
 * @pageSize    int     分页大小
 * @pageIndex   int     当前索引
 * @filter      string    查询条件
 * */
var getDataList = function(pageSize, pageIndex, filter){
    //.......
}

代码编写

1、全站JS代码请使用AMD规范开发。

2、全站将以RequireJs异步模块驱动开发,业务相关的每一个JS脚本请使用difine声明; 其它相关JS脚本根据需求而定。

3、页面脚本请以Require模块化加载方式引入。

4、语句末尾请使用;号结束,即使后面没有其他语句。

5、每行代码请使用Tab键来缩进,让代码层次清晰。

6、类于类定义之间、方法与方法之间、方法中不同的逻辑块之间请空一行。

7、左花括号请放置在方法名后面,比如:function A(){ //换行 }

8、方法声明尽量使用方法表达式编写(不强制要求),私有方法请以Camel命名法,公有方法请以Pascal命名法。

9、变量命名请使用 CamelPascal 命名法, 私有变量请在前面加_下划线, 全局变量不用添加。 常量及静态变量使用全大写命名,比如:ClassName.PAGE_SIZE = 10;  

10、 我们项目目前用到的是jQuery库,如果声明的是一个jQuery变量,请在变量前加上$号,比如var _$list = $(ul li);

11、 变量声明:如果我们预先需要定义很多变量,我们可以使用一个var来全部定义。比如:var name = 1age = 2, sex = 3;

12、 变量类型定义:

数组变量 = aValue

布尔型  = bValue

浮点型 = fValue

函数 = fnName

整型 = iValue

对象 = oType

正则表达式 = rePattern

字符串 = sValue

任何类型 = vValue

13、 变量提升法:我们在写代码的时候我发现很多童鞋习惯性的是在什么时候用到变量就在什么时候去声明一个变量,这样的做法是不好的,我们应该需要尽可能的将变量放置到代码块最顶部去做初始化声明。

14、 避免重复操作DOM,将一个DOM先存储到变量中,然后操作变量。

15、 通过JS大量重绘页面时,不要使用append类似方法,请先将需要重绘的DOM以字符串形式存储到变量中,最后将变量通过innerHTML方式追加到html里。

16、 JS中尽量避免直接拼接HTML元素,推荐通过template方式。

代码优化及注意事项

1尽量避免全局变量的使用。全局变量在引用时不得不一级一级查看作用域直到搜索到 全局作用域,尤其在嵌套的调用很多的时候。并且全局变量将始终存在在脚本生命周期中, 调用结束后无法被回收。

2eval 是恶魔。eval 函数效率特别低,由于事先无法知晓传给 eval 的字符串中的内容, eval 在其上下文中解释要处理的代码,也就是说编译器无法优化上下文,因此只能由浏览器 在运行时解释代码,这对性能影响很大。避免使用它。

3不要使用 Function 构造器。Function 构造函数比 eval 略好,因为使用此代码不会 影响周围代码,但其速度仍很慢。可通过创建匿名函数来代替。

4不要给 setTimeout 或者 setInterval 传递字符串参数。setTimeout() setInterval() 方法近似于 eval,当然其低效率也和 eval 一样。 可用 function(){xxx} 代替。

5仅在函数内使用 this

6不要在影响性能的关键函数中使用 try-catch-finally。由于此函数比较特殊,且是在运行时动态创建动态销毁,有些浏览器对其的处理并不高效。把 catch 语句放在关键循环中将极大影响性能。如果可能,应在脚本中不频繁被调用的地方进行异常处理,或通过检查某种动作是否被支持来避免使用。

7注意隐式对象转换。如果代码中常调用 literal 值的方法,你应考虑首先创建对象。因 为每次调用 literal 值的方法时,都会隐式的用相同的值创建新的对象。同样的情况适用于字 符串拼接。最好不要把两个 string 合并后赋于变量,而应该分别与变量合并。这在大部分浏 览器中都更快,而且消耗更少的内存。

8在关键函数中避免 for-infor-in 常被误用,特别是简单的 for 循环更合适时。for-in 循环需要脚本引擎创建所有可枚举的属性列表,然后检查是否存在重复。因此 for 循环无疑 会更高效。

9基本运算符比函数调用更快。典型的应用包括 push 方法,Math 对象的方法。其 效率低于直接赋值和运算。

10DOM。通常主要有三种情况引起 DOM 运行速度变慢。第一就是执行大量 DOM 操 作的脚本,如从获取的数据中建造新的 DOM 树。第二种情况是脚本引起太多的 reflow 或 重绘。第三种情况是使用较慢的DOM节点定位方法。

代码冗余、面向对象

1.代码实现高度抽象,禁止出现函数体内代码整片Copy情况。

2.系统的每一个功能都应该有唯一的实现。如果多次遇到同样的问题,就应该抽象出一 个共同的解决方法,不要重复开发同样的功能

3.当一个功能块频繁出现三次的时候,你应该想想如何封装该功能块。

4.我们在写一个功能块的时候应该先想清楚哪些功能是可以复用的,哪些功能是可以做封装的,只有我们出了面向对象的代码,我们的效率才会得以提升。


四、图片存储、命名规范


命名规则

1.图片命名需要以功能名称作为前缀,也可以加上尺寸等数据,然后逐级往后组合。比如:home-main-head-logo.png

2.ICON命名需要以icon作为前缀,也可以加上尺寸等数据,然后以功能名称逐级往后组合。比如:icon-home-main-head-close.png

3.Sprite命名需要以s作为前缀icons作为后缀,也可以加上尺寸等数据,然后以功能名称逐级往后组合。比如:s-home-index-icons.png

4.Form类图片命名以Form元素缩写作为前缀,也可以加上尺寸等数据,然后以功能名称逐级往后组合。比如:btn-submit-20-20.png ddl-city-20-20.png  txt-160-30.png

图片存储建议

1.普通的单个透明图片请用png代替gif存储,如果是单个无透明的小图片根据存储的文件大小可选用gif格式.

2.大体积透明背景图片优选选用PNG38格式存储.

3.多图标建议考虑使用Sprite存储.(注意:需在同一级目录保存PSD)

4.其它类商品图片、广告图片等请以JPG格式存储。存储时尽量将画质和体积压缩至最小最优。



转载请注明出自:http://www.mrco.cn/article/574d06219634ecd03ffa60c0.html

最新评论(0)

    我要评论

    *
    *
    *
    *
    *
    验证码