js--编写可维护的JavaScript-1.编程风格

阅读编写可维护的JavaScript一书,写了一些笔记
1.本篇文章:编程风格
2.编程实践
http://blog.csdn.net/github_34514750/article/details/51221995

第一章:基本的格式化

1.缩进层次:每个层次缩进一个tab键
2.语句结尾记得加上分号,虽然js有ASI(automatic semicolon insertion)自动分号机制,但很可能出错。
3.当一行的长度超过单行最大限制字符数时,可以手动拆成两行。通常我们会在运算符后换行,下一行增加两个层级的缩进
例外:给变量赋值时,第二行的位置和赋值运算符的位置保持对齐

callAFunction(document,element,window,"some string value",true,123,
        navigator);

4.适当加入一些空行
5.命名(变量、常量、构造函数):
js核心是ECMAScript,遵照驼峰式大小写(Camel case)命名法。
变量用名词,函数前缀应当是动词

var myName;
//这是动词,不好的写法,变量看起来像函数
var getCount = 10;

function setName() {
}

常量:使用大写字母和下划线来命名,下划线分隔不同的单词

var MAX_COUNT = 10;

构造函数:遵循大驼峰(Pascal Case),首字母大写

function Person(){
}

6.直接量(直接量是很推荐的做法)
字符串
字符串可以用”“或者‘’,但一般我喜欢用”“,因为java中都是”“,但是”“中的”则需要转义符
多行字符串使用+将字符串分成多行

var name = "wanghuan says \"hello.\"";
var name = 'wanghuan says "hello."';//不需要转义符
var longString = "wmnsdfiwheradm,lajsrrbvmsqwm," + 
                "qwerfsdf.";

null 和 undefined
二者联系:
null和undefined是js的两个原始 类型
null这种基本类型只有一个值null
undefined这种基本类型只有一个值undefined
二者区别:
null
null表示尚未存在的对象,可以理解成对象的占位符。
用处:
1.用来初始化一个变量,这个变量可能赋值成一个对象。
2.用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象。
3.当函数的参数期望是对象时,用于参数传入。
4.当函数的返回值期望是对象,用作返回值传出。

var person = null;
function getPerson() {
    if(condition) {
        return new Person("wanghuan);
    } else {
        return null;
    }
}

undefined
undefined表示”缺少值”,就是声明的变量还未被初始化
下面是返回undefined的典型场景。

// 变量声明了,但没有赋值
var i;
i // undefined

// 调用函数时,应该提供的参数没有提供,该参数等于undefined
function f(x) {
  return x;
}
f() // undefined

// 对象没有赋值的属性
var  o = new Object();
o.p // undefined

// 函数没有返回值时,默认返回undefined
function f() {}
f() // undefined

对象直接量

var book = {
    title:"JavaScript",
    author:"wanghuan"
};

数组直接量

var numbers = [1,2,3,4];
第二章:注释

单行注释
1.独占一行的注释,双斜线后敲入一个空格,注释前总有一个空行,且缩进层次和下一行代码保持一致

if (condition) {

    // 注释
    allowed();  
}

2.在代码行尾部加入注释,双斜线后敲入一个空格,注释前总有间隔

if (condition) {    
    allowed();  // 注释
}

多行注释
注释和代码之前有一个空行,缩进层次和描述的代码一致,星号后有空格

if (condition) {    

    /*
     * 注释
     * 注释
     * 注释
     */
    allowed();  
}
第三章:语句和表达式

with
with可以用局部变量和函数的形式来访问特定对象的属性和方法,可以省略掉对象的前缀,但是不推荐使用。

// 很难分辨title和author在什么位置,也很难分辨message是一个局部变量还是book的属性,则不推荐使用
var book = {
    title:"wa";
    author:"wanghuan";
};

var message = "The book is";

with (book) {
    message += title;
    message += "by" +author;
}

for循环
尽量避免使用continue,使用if代替,这样可以增加可读性

var values = [1,2,3,4],
    i,
    len;
for(i = 0,len = values.length;i < len;i++) {
    if (i==2) {
        continue;
    }
    process(values[i]);
}
// 较好的写法
var values = [1,2,3,4],
    i,
    len;
for(i = 0,len = values.length;i < len;i++) {
    if (i!=2) {
        process(values[i]);
    }   
}

for-in和for比较
http://blog.csdn.net/github_34514750/article/details/51072812

第四章:变量、函数和运算符

1.变量
需要特别注意变量提升(hoisting)
JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。

console.log(a);//undefined,因为变量提升,声明解读到前边
var a = 1;

相当于:

var a;
console.log(a);
a = 1;

但是,变量提升只对var命令声明的变量有效,如果一个变量不是用var命令声明的,就不会发生变量提升。

console.log(b);//error
b = 1;

函数内部任意地方定义变量和在函数顶部定义变量是完全一样的。原因如下

function test (items) {
    for(var i = 0,len = items.length;i < len;i++) {
        doSomething(item[i]);
    }
}
//上述等价于下面代码,因为ECMAScript5之前没有块级变量声明,所以让所有函数声明都放在函数头部,更明了清楚
function test (items) {

    var i,len;

    for(i = 0,len = items.length;i < len;i++) {
        doSomething(item[i]);
    }
}

var 语句合并,并且没有初始化的变量放在var语句的尾部,合并的语句下载更快,代码更短

var value  = 10,
    result = value + 10;//初始化的赋值运算符对齐,
    i,
    len;//没有初始化的变量放在var语句后 

2.函数
函数声明
函数声明和变量声明一样,可以被JavaScript引擎提前,所以可以在代码中函数的调用放在函数声明之前。由于这样,我们为了减少JavaScript引擎的工作,我们推荐先声明函数在使用函数。
并且函数声明不应当出现在语句块内

// 函数声明不应当出现在语句块内,可能不按照我们的意图执行
if (condition) {
    function doSomething() {
        alert("hi");
    }
} else {
    function doSomething() {
        alert("ha");
    }
}

函数调用
函数调用括号左右不用空格,和块语句区分开
立即执行函数

// 不好的写法
// 函数会立即执行,value被赋值为一个对象,但这样会让人忽略后边的括号而误认为函数一个函数赋值给了这个变量
var value = function(){
}();
// 好的写法,函数用括号包裹起来
var value = (function(){
}());

严格模式
ECMAScript5引入了严格模式,通过这种方式来谨慎的解析执行js,以减少错误

// 不好的写法-全局的严格变量
"use strict";
function dosomething{
    // code
}
// 好得写法
function dosomething{

    "use strict";
    // code
}
// 想在多个函数下应用严格模式,但是不想写多个"use strict",则用立即函数呀~
(function(){
    "use strict";
    function dosomething1{
    // code
    }
    function dosomething2{
    // code


    }
})();

3.运算符
js具有强制类型转换机制

== 和 != 都会强制类型转换,所有有时候我们为了避免强制转换,提高效率,尽可能使用=== 和!==
原型包装类型
原型包装类型的主要作用是让原始值具有对象般的行为,例子如下:

// name其实是一个原始类型不是对象,但却有了和对象一样的行为,可以使用toUpperCase()
//其实是js引擎创建了String类型的新实例,紧接着就销毁了,在此需要时在进行创建
var name = "wanghuan";
consolde.log(name.toUpperCase());//WANGHUAN
// 可见创建新实例之后马上销毁
var name = "wanghuan";
name.first = "ya";
console.log(name.first);// undefined

并且我们应该尽量避免使用原始包装类型,当使用String,Number,Boolean创建对象时,JSHint和JSLint会给出警告

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值