千里之行始于足下,学好如何编程得先慢慢培养编码风格的好习惯。
就像我们小学时语文老师经常叫我们练字一般,我们不必懂得写的字是什么意思,而注重一笔一划的书写。写的一手漂亮的字会为你的人格增添魅力。
当然,写的一手好风格的代码也是程序员必须养成的习惯。
最近在看尼古拉斯的《如何编写可维护的javascript》。尼古拉斯,雅虎首页首席前端专家,可以说是js教父般的人物。
读完他的这本书,深深地被他的代码风格所吸引。我部门大佬也十分推崇。
如果说朋友们还在写着如下风格的代码:
var a=5;
var b=5;
var c;
function add(){
for(var i=0;i<a;i++){
for(var j=0;j<b;j++){
c+=i*j;
};
};
};
虽然这没什么错。但是风格不优美。请看下面。
var a = 5,
b = 5,
c;
function add() {
var i, j;
for(i = 0; i < a; i++) {
for(j = 0; j < b; j++) {
c += i * j;
};
};
};
有规则的使用空格还有留白。可以使代码可阅读性大大加强。
或许在这里你看不出来效果,那么建议复制下来放进编辑器里,那样会明显的多。当代码长度成百上千之后,你会发现这样的格式对你的眼睛是一种保护。
尼古拉斯在升任首席前端工程师后,就是在部门内倡导这样的代码风格,此后他们的团队工作效率大大提升。
如果说你现在才刚开始学习JS。养成这样的好习惯对你有益无害。因为你迟早会融入一个团队。
团队的每个人的编码风格要趋向统一。而这样的风格在大大小小的团队里相差无几。
在尼古拉斯的这本书里,我总结了以下的编码风格,如果大家并没有看过这本书我向大家推荐。
/*
* 缩进 一个层级 = 4个空格 避免用tab缩进
*/
//好的写法
if (true) {
doThing();
};
/*
* 行长不超过80字符,如超过则应在一个运算符(逗号,加号等)后换行。
* 下一行增加两级缩进 = 8个空
*/
//好的写法
doThing (ag1, ag2, ag3, ag4,
ag5);
//不好的写法
doThing(ag1, ag2, ag3, ag4,
ag5);
/*
* 原始值 字符串始终双引号且保持一行。避免使用斜线另起一行。
*/
//好的写法
var name = "zhanglinfeng";
var name = "zhanglin" +
"feng";
//不好的写法
var loacal = "here is my work \
name body";
/*
*数字应当使用十进制整数,科学计数法表示整数,十六进制整数, 或者十进制浮点小数,小数点前后应当至少保留一位数字。避免八进制直接量。
*/
//好的写法
var count = 10;
var price = 10.0;
var price = 10.00;
var num = 0xA2;
var num = 2e23;
//不好的写法
var price = 10.;
var price = .1;
var num = 010;
//特殊值null除了以下情况避免使用
/*
* 用来初始化一个变量,这个变量可能被赋值为一个对象
* 用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象
* 当函数的参数期望是对象时,被用作参数传入
* 当函数的返回值期望是对象时,可用作返回值传出
*/
//好的写法
var person = null;
function getPerson() {
if (condition) {
return new Person("zhanglinfneg");
} else {
return null;
};
};
var person = getPerson();
if (person !== null) {
doThing();
};
//不好的写法 和一个未被初始化的变量比较
var person;
if (person != null) {
doThing();
}
//不好的写法: 通过测试判断某个参数是否被传递
function doThing(a1, a2, a3) {
if (a1 != null) {
doThing();
}
};
//避免使用undefined。判断变量定义该用typeof
//好的写法
if (typeof va == "undefined") {
doThing();
}
//不好的写法:使用直接量
if (va == undefined) {
doThing();
}
/*
* 运算符间隔
* 二元运算符前后一个空格保持整洁。操作符包括赋值运算符和逻辑运算符
*/
//好的写法
var a = (value === item) ;
if (found && (count > 10)) {
doThing();
};
for(var i = 0; i < conunt; i++) {
doThing();
};
//括号间距。左括号和右括号前不能有空格 例子同上
//对象直接量
/*
* 起始左花括号应当同表达式保持同一行
* 每个属性的名值对应当保持一个缩进,第一个属性在左花括号后另起一行
* 每个属性的名值对应应当使用不含引号的属性名,后紧跟: 后值
* 倘若属性为函数类型,函数体应当在属性名之下另起一行,而且前后均应保留一个空行
* 一组相关的属性前后可以插入空行以提升代码的可读性
*/
//好的写法
var object = {
kery: 12,
ker2: 21,
func: function() {
doThing();
},
kery3: 21
};
doThing({
key1: 12,
key2: 21
});
//注释
/*
* 单行注释用来说明一行代码或者一组相关的代码。三种使用方式
* 独占一行,用来解释下一行
* 在代码尾部的注释,用来解释之前的代码
* 多行,用来注释掉一个代码块
*/
//好的写法
if (condition) {
//dasdsds
allowed();
}
var result = dad + mod; //sdsds
/*
* 多行注释应当在代码需要更多文字去解释时使用。
* 每个多行注释至少有三行
*/
/*
* 注释声明可以用来给一段代码申明额外的信息。这些申明以单个单词打头并紧跟一个冒号。
* 可使用如下声明
*/
TODO//说明代码未完成。应当包含下一步要做的事。
HACK//表明代码实现走了一个捷径。应当包含为何使用hack的原因
XXX//说明代码有问题应当尽快修复
FIXME//说明代码有问题需要尽快修复。重要性次于XXX。
REVIEW//说明代码任何可能的改动需要评审
//好的写法
//TODO:我希望找到更好的办法
/*
* HACK:不得不用特殊处理
* 后续改
*/
//REVIEW
/*
* 变量声明。所有变量在使用前应当事先定义。放在函数开头,使用一个var。
* 初始化的变量要放在未初始化之前。
*
*/
//好的写法
var count = 10,
name = "zhanglinfneg",
found = true,
age;
//函数申明
/*
* 使用前先定义,格式如下
* 在函数内部的定义函数应当在var后立刻定义
*/
function doThing() {
doThing();
};
object.say = function() {
//代码
};
//立刻被调用的函数应当在函数调用的外层用圆括号包裹
var value = (function() {
//代码
} ());
//命名。不要在任何命名中使用$\。
//驼峰式.函数中最好不要下划线。变量用名词首字母小写后面单词首字母大写。函数第一单词动词首字母小写 如isArray isFunction setMuneu
var countNumber = 10;
function doThing() {
//代码
};
//构造函数首字母大写 。非动词开头。首字母均大写
function MyObject() {
//代码
};
//常量 所有字母大写。单词间下划线分开。
var TOTAL_NUMBER = 10;
//对象私有属性同变量规则一样。加下划线
var object = {
_name: 10,
_getCount: function() {
//代码
}
};
//严格模式仅限在函数内部使用,不要在全局使用。
//三元操作符要用在赋值语句中
//尽量用=== 和!==代替==和!=
//for里尽量不声明变量。ffor-in用hasOwnProperty双重检查过滤对象成员。
//switch while do for try 前留白。
switch(value) {
case 1:
case 2:
doThing();
break;
case 3:
return true;
};
try {
//代码
} catch (vaf) {
//代码
};
/*
* 留白两行空行:
* 不同的源代码文件
* 类和接口定义
*
* 单行空行:
* 方法之间
* 方法中局部变量和第一行语句之间
* 多行注释和单行注释之前
* 方法中逻辑代码块之间
*
* 空格出现的地方:
* 关键词后很括号的情况
* 参数列表逗号后
* 所有除了.的二元运算符。一元运算符不用
* for中的表达式应当空格隔开
*
* 避免字面量包装类型,eval(), with()
*/
来自尼古拉斯的编码风格
最新推荐文章于 2025-05-02 16:45:26 发布