读《编写可维护的JavaScript》的收获

原创 2016年06月07日 16:42:57

第一部分 编程风格

第一章 基本的格式化

1.使用tab/4个空格作为一个缩进层级

2.不要省略分号

3.单行长度不超过80个字符
若单行长度超出,则手动拆成两行,通常在运算符后换行,下一行增加两个层级的缩进
在给变量赋值的时候若超出,拆分之后第二行的位置应该跟赋值运算符对齐,例如:

var a = heheda + memeda +
        lalada + heiheida;

4.变量名应该使用小驼峰法进行命名,且应该是名词。以区别变量和函数。

5.函数名实用小驼峰法进行命名,且第一个词应该是动词,以表明他是函数。

6.使用大写字母和下划线来命名常量,其实JavaScript中没有严格的常量,我们用命名来表明该量是常量:

var MAX_COUNT = 10;

7.构造函数(用于创建对象的new后边的)用大驼峰法命名。

8.使用双引号来包裹字符串,如果字符串中需要用到双引号,要进行转义:

var name = " ta shuo, \"hehe\"";
var name = 'ta shuo, "hehe"';  //这样也可以,但是推荐双引号
//多行字符串像下边这样写
var longstring = "Here's the story,of a man" +
                 "named Creabine.";

9.null作为对象的占位符。初始化一个可能被赋值为对象的变量的时候,可以使用null

10.避免使用undefined

11.定义对象时不要使用先显式创建对象实例然后添加属性的做法,而是推荐直接写出:

var book = {
    title:"hehe",
    author:"creabine"
}

12.创建数组的时候,同样不要使用显式Array,而是直接:

var colors = ["red","yellow","blue","green"];

第二章 注释

单行注释
1.单独成行的注释前边加一行空行,并且注意缩进。

2.跟在语句后边的注释,跟语句之间加空格。

多行注释
3.多行注释前也应该插入一个空行。

4.推荐的写法:注释上边加一行空行,多行注释的开头结尾独立成行:

if(a == 1){

    /*
    allowed();
    */
}

5.显而易见的代码不要加注释,难以理解的才需要加。不要滥用

6.可能被认为是错误的代码,要加上注释,以防止其他人看到误解并顺手“改正”

第三章 语句和表达式

1.所有的块状语句都应该使用花括号,包括:if for while do…while try…catch…finally

2.花括号的对齐方式:

if(a==1){
    dosomething();
}

3.使用switch语句的时候,如果是有意为之并且加了注释,就可以使用case语句连续执行,否则不建议。在没有默认行为且写了注释的情况下,可以省略default。

4.避免使用with语句

5.for循环中可以使用continue来终止单次循环,进入下一次循环;还可以使用break来一次性跳出整个循环。这里建议少使用continue,而采用if条件判断来代替它,以提高可读性。但也不完全禁止。

6.for-in循环用来遍历对象的属性。但是它不仅遍历对象的实例属性,海惠便利从原型继承来的属性,这样有可能因为意外的结果而终止遍历。所以推荐使用hasOwnProperty()方法来为for-in属性过滤出实例属性

var prop;
for(prop in object){
    if(object.hasOwnProperty(prop)){
        console.log("Property name is " + prop);
        console.log("Property value is " + object[prop]);
    }
}

注意:for-in循环使用来遍历对象的,不要用它去遍历数组。

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

1.JavaScript引擎会把变量声明提前,写在后边也可以。但是建议总是将局部变量的定义作为函数内第一条语句。

2.将很熟内所有的var合并为一个语句,每个变量初始化独占一行,赋值运算符对齐,没初值的变量放在最后写:

function todosomething(items){
    var value = 10,
       result = value + 10,
       i,
       len;
}

这样可以保持成本最低,让代码更短下载更快。但是不习惯的时候注意别写错了。

3.跟变量一样,JavaScript引擎会把函数声明也提前,但是依然要先声明再调用。

4.因为JavaScript的强制类型转换机制,使得比较的时候不用类型的值会先转换类型再进行比较。这里推荐不要使用 == 和 != ;而是使用 === 和 !== 来进行比较。后者不会强制类型转换,这样可以让你的比较语句执行时行为一致。

//数字5和字符串5
console.log(5 == "5"); //true
console.log(5 === "5"); //false

5.尽量避免使用eval()

6.禁止使用原始包装类型

第二部分 编程实践

第五章 UI层的松耦合

1.让不用的组件之间不需要相互依赖,修改其中一个组件的时候,不需要更改其他组件,就做到了松耦合。如果一个web UI是松耦合的,就很容易调试,文本结构的问题去找html,样式去找css,行为去找JavaScript,这是web界面的可维护性的核心部分。

2.将css从JavaScript中抽离:
经常需要通过JavaScript改变css的属性,这里的抽离,建议将所有的样式信息都保存在css中,当需要通过JavaScript来修改元素样式的时候,最好的方法是操作css的classname,通过给html标签动态增删classname来达到改变样式的效果。这样JavaScript不直接操作样式,保持了和css的松耦合
这里注意,当需要通过JavaScript给元素重新定位的时候,是无法通过改变classname来完成的。这种情况下允许在css中定义这个元素的默认属性,再用JavaScript来改变默认的值。

3.将JavaScript从HTML中抽离:不要在html标签中使用onclick=”todosomething()” 这种,而是在外部绑定事件函数。

//未抽离
<div id="div1" onclick="todosomething" ></div>
//抽离
$("#div1").on("click",todosomething);

4.将HTML从JavaScript中抽离:使用JavaScript改变html结构也要尽量避免,但是实际项目中很可能会经常用到。此时有很多方法可以低耦合的完成这项工作。
当需要注入大段HTML标签到页面中的时候,使用远程调用的方式来加载标签,jQuery已经封装的一个load()方法
另外还有客户端模板的方式:这种方式简单来说就是把要用到的html标签部分写出来,再注释掉。JavaScript也可以用过dom取得注释,然后再修改插入,就可以了。

第六章 避免使用全局变量

1.全局变量可能带来的问题:1.随着代码量的增加,可能重名,且不利于维护。2.依赖于全局变量的函数会深度耦合于上下本环境中,若环境改变,函数很可能就会失效。3.依赖全局变量,测试变得困难。

2.如果给未被var声明过的变量赋值,JavaScript就会自动创建一个全局变量,所以一定要记得用var声明变量,以免不小心创造全局变量引起麻烦。

3.当需要创建全局变量的时候,可以选择创建一个唯一的全局对象。在需要的时候,只要把全局变量作为该对象的唯一属性。这样便于管理,可以避免全局污染。

第七章 事件处理-

1.隔离应用逻辑:
应用逻辑是和应用功能相关的逻辑部分,而不是和用户行为相关的。最好把应用逻辑从事件处理程序中抽离出来。例如当需要多个不同的事件触发同一应用逻辑的时候,不抽离的话,就要复制多分应用逻辑,代码冗余。另外,抽离出来也方便测试。

2.应用逻辑尽量不要依赖于event对象。

第八章 避免“空比较”

1.学会使用typeof运算符来检测4中原始类型(字符串,数字,布尔值,undefined)。
基本语法是:typeof variable,它会返回一个表示值的类型的字符串。不推荐带括号,因为他是运算符不是函数。

//检测数据类型的举例
if( typeof name === "string" ){
    anotherName = name.substring(3);
}

2.学会使用instanceof运算符检测引用值,也就是对象。

if( value instanceof Date ){
    console.log(value.getFullYear());
}

3.学会使用in来检测对象的属性是否存在:
使用in运算符,只会简单的判断属性是否存在,而不会去读取该属性。

var object = {
    count : 0,
    related : null
}
//判断是否存在
if( "count" in object ){
    //这里的代码会执行
}
if( "hehe" in object ){
    //这里的代码不会执行
}

第九章 将配置数据从代码中分离出来

1.配置数据指的是应用中写死的值。例如:URL,需要展现给用户的字符串,重复的值,设置(比如每页的配置项),任何可能发生变更的值。
配置数据是可发生变更的,我们不希望有人突然想改页面中的信息,导致程序去修改JavaScript源码。

2.可以将这些可能改变的配置数据单独抽离出来保存在config当中(目前公司的项目也是这样做的,读到这里才明白为什么这样)。配置数据抽离出来意味着任何人都可以修改它们,而不会导致应用逻辑出错。同样我们可以将整个config对象放到单独的文件中,这样数据修改就可以完全跟代码根离开来。

//将配置数据抽离出来
var config = {
    MSG:"Invalid value",
    URL:"/errors/incalid/php",
    CSS:"selected"
};
function validate(value,element){
    if(!valyue){
        alert(config.MSG);
        location.href = config.URL;
        addClass(element,config.CSS)
    }
}

3.配置数据最好放在单独的JavaScript文件中,以便清晰地分隔数据和应用逻辑。

4.书中推荐使用java属性文件(java properties file)来存放配置数据。不是很懂。

第十章 抛出自定义错误

1.再觉得可能会发生很麻烦的错误的地方,手动抛出错误提示,会有助于调试。

第十一章 不是你的对象不要动

1.在多人开发的时候,不是你创建和维护的对象(例如jQuery中的对象,JavaScript原生对象,其他人的模块中的对象等等),不要去做任何改动,其他人不知道你的改动的情况下,很可能会导致错误。

2.对于不是你的对象,不覆盖,删除,新增方法。

3.如果需要扩充对象,比较好的实现方法是继承。即根据原对象创建一个新的对象,新对象就有用原对象的所有属性和方法,再为新对象追加需要的属性和方法来使用。这样就不会影响到原对象。

var person = {
    name:"Bob",
    sayName: function(){
        alert(this.name);
    }
}
//Object.create()方法可以指定第二个参数,这个参数是一个对象,该对象中的属性和方法将添加到create出来的对象当中
var myPerson = Object.create(person,{
        name:{
            value:"Greg"
        }
});
person.sayName();  //弹出“Bob”
myPerson.sayName();  //弹出“Greg”

第十二章 浏览器嗅探

见书

第三部分 自动化

第十三章 文件的目录结构

1.构建目录的最佳实践:

  • 一个文件只包含一个对象,或者多个互相关联的对象。
  • 保持第三方代码的独立,单独放在一个目录中。最好的方式是根本不引入,直接从CDN加载它。
  • 确定创建位置,创建后的JavaScript文件应该放在一个完全独立的目录里。
  • 其他见书本。

第十四—二十章讲了Ant和一些自动化的工具,现在有了很多新的而工具,而且各个公司使用的工具也不尽相同,目前我也没有用到,就先不看了。之后要专门了解一下。

书末尾的附录有JavaScript的编码风格指南,作者是4个空格党,不推荐使用Tab…

最后,本书封面是希腊陆龟….

版权声明:本文为博主原创文章,未经博主允许不得转载。原账号CreabineChen现已不用,所有博客均已迁移过来。

相关文章推荐

编写可维护的JavaScript

  • 2014-12-22 16:28
  • 20.34MB
  • 下载

编写具有可维护性的JavaScript代码

首先可定是缩进的问题了,有的人喜欢使用空格键,有的人喜欢使用tab键,不管是使用空格键还是使用tab键,在项目开始前,只要统一规范就可以了。 其次,确保只要通过变量或者函数的名字就能知道这段代码是干...

编写可维护的javascript.pdf

  • 2015-09-24 10:34
  • 20.34MB
  • 下载

编写可维护的JavaScript

  • 2014-09-02 09:34
  • 8.78MB
  • 下载

《编写可维护的JavaScript》之编程实践

最近读完《编写可维护的JavaScript》,让我受益匪浅,它指明了编码过程中,需要注意的方方面面,在团队协作中特别有用,可维护性是一个非常大的话题,这本书是一个不错的起点。本书虽短,却五脏俱全,主要...

编写可维护的JavaScript

  • 2015-05-02 03:36
  • 19.80MB
  • 下载

编写可维护的JavaScript

  • 2014-03-13 10:49
  • 20.34MB
  • 下载

如何编写可维护的面向对象JavaScript代码

如何编写可维护的面向对象JavaScript代码  英文原文:How to Write Maintainable OO JavaScript Code   能够写出可维护的面向对象 JavaS...

编写可维护的JavaScript

  • 2015-05-20 14:11
  • 2.86MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)