清除。8、用来显示动态文本输入的地方,样式里必须加上强制英文换行:
word-break: break-all; word-wrap: break-word; overflow-x: hidden;
如果要显示省略号加上:text-overflow: ellipsis;
9、上下相邻的两模块尽量避免混用margin-bottom,margin-top,否则会产生重叠现象。
三、 JavaScript规范
3.1 JS文件引用
1、引入格式:
脚本语言发展至今,也只有js混的最好了,所以type="text/javascript"类型指定可以省去。
2、引入位置: body标签内最后部(非body外面), 减少因载入脚本而造成其他页面内容阻塞的问题(js单线程)。
页面内容….
3、引入方式:html页面中禁止直接编写js代码,统一使用
外部引用方式,以便打包压缩和缓存。
3.2 JS代码缩进
3.2.1 整体层次
使用 Tab 键进行代码缩进 (4个空格宽度) 。
(function() {
var i = 0;
function innerFun() {
var j = 0;
……
}
});
运算符(=、==,&&、+/-等)两侧应各空一个格,块级{}左侧也应该空出一格
3.2.2 局部间隔
// 不推荐
var arr=[1,2],str='hello'+'Lucy';
var myfun=function(arg){
//todo…
}
// 推荐
var arr = [1,2],
str = 'hello' + 'Lucy';
var myfun = function(arg) {
//todo…
}
3.3 JS注释规则
3.3.1 文件头部注释
/**
* @created : 2017/09/15
* @author : Mr.Wang
* @version : v1.0
* @desc : 当前js模块功能描述
* @e.g. : 方法用例,如:$('.title').tip();
*/
3.3.2 方法注释及单行注释
1、对于一个较复杂的方法和函数,可用采用多行注释,以便作详情的描述。
/**
* 此方法是用于解析tpl模块
* 通过分析html中结构…
*/
2、单行注释
var funName = function(arg1, arg2) {
this.arg1 = arg1;
// 单行注释说明(上面添加一空行, //与说明之间空一格)
this.arg2 = arg2;
};
3.4 命名规则
变量名应由 26 个大小写字母(A..Z,a..z),10 个数字(0..9),和“_”(下划线)组成。
1、通常, 使用”驼峰式”写法,对象、函数和实例时尤其如此。
// 不推荐
var is_my_object = {};
var is-my-object = {};
// 推荐
var isMyObject = {};
2、构造函数或类时使用驼峰式大写
// 不推荐
var
bad = new user({
name: 'nope'
});
// 推荐
var good = new User({
name: 'nope'
});
3、常量大写,并用下划线分隔,形式如:NAMESLIKETHIS
3.5 编码模式
为了规范代码严谨风格,推荐严格模式(Strict Mode),即总是在模块顶部声明 'use strict';
(function(){
'use strict';
function innerFun(){
var j = 0;
……
}
});
严格模式的一大目标是显性的抛出错误,让你能更方便更快的调试一些隐性的错误。
1、防止意外的创建了全局变量。
非严格模式下,为一个未申明的局部变量赋值时会自动创建一个同名的全局变量,这是Js程序中最容易出现的错误之一,在严格模式下这么做会显性的抛出异常。
// 严格模式下会抛出异常
(function() {
some = 'foo';
}());
2、防止函数中的this指针意外指向全局。
非严格模式下,函数中未被定义或为空( null or undefined)的this会默认指向全局环境(global)。
window.color =
'red';
function getColor() {
console.log(this.color);
}
// 在严格模式中会报错, 非严格模式中则提示red
getColor();
3、防止重名。
当编写大量代码时,对象属性和函数参数很容易一不小心被设置成一个重复的名字。严格模式在这种情况下会显性的抛出错误
// 重复的变量名,在严格模式下会报错。
function doSomething(value1, value2, value1) {
//code
}
// 重复的对象属性名,在严格模式下会报错。
var object = {
foo: 'bar',
foo: 'baz'
};
4、对只读属性修改/删除时会抛出异常。
ES5中可为对象特定属性设为只读或让整个对象不可修改。 但在非严格模式中尝试修改一个只读属性只会默不做声的失败。
var person = {};
Object.defineProperty(person, 'name' {
writable: false,
value: 'Nicholas'
});
// 在非严格模式时,沉默的失败,在严格模式则抛出异常
person.name = 'John';
5、不要在全局环境下启用严格模式。
为了兼容第三方代码可能没有为严格模式做好准备而引发的问题,最好把开启严格模式的指令作用于自己独立的模块/函数里。
3.6 推崇建议
—— 变量
声明变量必须加上 var 关键字. 否则变量就会暴露在全局上下文中, 这样很可能会和现有变量冲突(es6中let修复了这个问题)。
—— 逗号
不要加多余的逗号,这可能会在IE下引起错误,同时如果多一个逗号某些ES3的实现会计算多数组的长度。
// 不推荐
var hero = {
firstName: 'Kevin',
lastName: 'Flynn',
};
// 推荐
var hero = {
firstName: 'Kevin',
lastName: 'Flynn'
};
—— 分号
如果仅依靠语句间的隐式分隔, 有时会很麻烦.而且有些情况下, 漏掉分号会很危险.
;(function(){
var i = 0;
function innerFun(){
var j = 0;
……
}
});
—— {},[]
// 不推荐
var item1 = new Object(), item2 = new Array();
// 推荐
var item1 = {}, item2 = [];
(解释:new关键字的使用 除了在需要实例化一个对象,或罕见的需要延时加载数据的情况外,基本上不需要使用new关键字。在Javascript里分配大量的new变量地址是一项很慢的操作,为了效率起见,应该始终使用对象符号。)
—— 字符串,统一用单引号
// 不推荐
var name = "Bob Parr"