在团队中只有每个人的编程风格一致,大家才能方便的互相看懂和维护对方的代码。

1. 层级缩进

对于层级缩进目前有两种主张:
1)使用制表符
这种方法有两种好处,第一,制表符和缩进层级之间是一一对应关系,符合逻辑;第二是文本编辑器可以配置制表符的展现长度。
缺点是系统对制表符的解释不一致。
2)使用空格符
目前主要有三种具体的做法:2个空格表示一个缩进,4个空格表示一个缩进,8个空格表示一个缩进
优点:在所有的系统和编辑器中,文件的展现格式不会有任何差异;
缺点:对于单个开发者来说,使用一个没有配置好的文本编辑器创建格式化的代码的方式非常原始。

2. 语句结尾

JavaScript的语句要么独占一行, 要么以分号结尾。但是有赖于分析器的自动分号插入机制(Automatic Semicolon Insertion,ASI)会在应该有分号而实际没有的地方自动插入分号。
大多数场景不会出错,但是有写场景有可能会出现问题,导致出错:

  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
  1. //原始代码
    function data(){
    return
    {
    name : "xiaoming",
    age : 18
    }
    }
    //分析器会理解成:
    function data(){
    return;
    {
    name : "xiaoming",
    age : 18
    };
    }

所以推荐在每一句代码的结束都加上分号,减少出现问题的几率。

3. 行的长度

建议将每行长度限定在80个字符

4. 换行

当单行字符达到最大值(例如80个字符)的时候要手动拆成两行。
一般规则是 : 在运算符后换行,第二行追加两个缩进

  1. 1
    2
  1. doSomething ( value1, value2, document, window,
    element );

特例:

特例1 : 在if语句中换行可以保持一个缩进,这样更容易阅读:

  1. 1
    2
    3
    4
  1. if ( isLong && isShow && number == 1 &&
    children.length > 0 ) {
    //do something...
    }

特例2 :当给变量赋值时,第二行的位置应该和赋值运算符的位置保持对齐:

  1. 1
    2
  1. var result = something + anotherThing + yetAnothering + someThingElse +
    anotherSomethingElse;

5. 空行

有时一段代码的语义和另外一段代码不相关,这时就应该使用空行分割,确保有关联的代码展现在一起。
一般规则 :
在每个控制流语句(if,for语句等)之前添加空行;
在方法之前;
在方法中的局部变量和第一条语句之间;
在多行或但行注释之前;
在方法内的逻辑片段之间插入空行,提高可读性。

  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
  1. //不实用空行
    if ( wl && wl.length ) {
    for ( var i = 0;i < wl.length; i++ ) {
    p = wl[i];
    type = Y.Lang.type( r[p] );
    if ( s.hasOwnProperty(p) ){
    if ( merge && type == 'object'){
    //do something...
    }
    }
    }
    }
    //使用空行
    if ( wl && wl.length ) {
  2.  
  3. for ( var i = 0;i < wl.length; i++ ) {
    p = wl[i];
    type = Y.Lang.type( r[p] );
  4.  
  5. if ( s.hasOwnProperty(p) ){
  6.  
  7. if ( merge && type == 'object'){
    //do something...
    }
    }
    }
    }

6. 命名

  1. 1
  1. “计算机只存在两个难题:缓存失效和命名。” --- Phil Karlton

JavaScript语言的核心ECMAScript是遵守驼峰式大小写命名法。

一般命名规则:
命名长度尽可能短,并要抓住重点;
避免没有任何意义的命名;
变量名遵守驼峰大小写命名法,前缀应当是名词;
函数名遵守驼峰大小写命名法,前缀应当是动词;
常量使用大写字母和下划线命名,下划线用以分割单词;
构造函数的命名遵守大驼峰(以大写字母开始)命名法,通常是名词(因为是用来创建某个类型的实例);
字符串可以用双引号也可以使用单引号括起来(上下文要保持同一种风格);

7. null

null的使用场景 :
用来初始化一个变量,这个变量可能赋值为一个对象;
用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象;
当函数的参数期望是对象时,用作参数传入;
当函数的返回值期望是对象时,用作返回值传出;

理解null最好的方式是将它当作对象的占位符

[参考资料]:
编写可维护的JavaScript,Nicholas C. Zakas 著,李晶 郭凯 张散集 译, Copyright 2012 Nicholas Zakas,978-7-115-31008-8

编写可维护的JavaScript之编程风格的更多相关文章

  1. 【读书笔记】读《编写可维护的JavaScript》 - 编程风格(第一部分)

    之前大致翻了一遍这本书,整体感觉很不错,还是不可追求快速,需要细细理解. 这篇随笔主要对本书的第一部分中对自己触动比较大的部分及与平常组织代码最为息息相关的部分做一个记录,加深印象. 主要讲述五点内容 ...

  2. 【读书笔记】读《编写可维护的JavaScript》 - 编程实践(第二部分)

    本书的第二个部分总结了有关编程实践相关的内容,每一个章节都非常不错,捡取了其中5个章节的内容.对大家组织高维护性的代码具有辅导作用. 5个章节如下—— 一.UI层的松耦合 二.避免使用全局变量 三.事 ...

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

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

  4. 《编写可维护的javascript》读书笔记(中)——编程实践

    上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...

  5. 《编写可维护的javascript》读书笔记(上)

    最近在读<编写可维护的javascript>这本书,为了加深记忆,简单做个笔记,同时也让没有读过的同学有一个大概的了解. 一.编程风格 程序是写给人读的,所以一个团队的编程风格要保持一致. ...

  6. 编写可维护的JavaScript 收纳架

    如果你看过Nicolas C.Zakas写过的任何作品,你必须承认他是个不折不扣的天才.也只有天才级的才能写出<JavaScript高级程序设计>让所有的前端攻城师人手一本.Nicolas ...

  7. 拯救一切强迫症 - 读《编写可维护的 JavaScript》(一)

    拯救一切强迫症 - 读<编写可维护的 JavaScript>(一) 本文写于 2020 年 4 月 24 日 我在小学的时候就有接触过编程,所以读大一的时候 C 语言还算是轻车熟路.自然会 ...

  8. 编写可维护的Javascript读书笔记

    写在前面:之前硬着头皮参加了java方面的编程规范培训,收货良多,工作半年有余的时候,总算感觉到一丝丝Coding之美,以及造轮子的乐趣,以至于后面开发新功能的时候,在Coding style方面花了 ...

  9. 《编写可维护的JavaScript》 笔记

    <编写可维护的JavaScript> 笔记 我的github iSAM2016 概述 本书的一开始介绍了大量的编码规范,并且给出了最佳和错误的范例,大部分在网上的编码规范看过,就不在赘述 ...

随机推荐

  1. html5可拖动的进度条

    总结:拖动显示进度的进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. mysql无法连接Can't create a new thread (errno 11)

    问题描述: 今天本地navicat连接服务器mysql出错 ,提示ERROR 1135: Can't create a new thread (errno 11); if you are not ou ...

  3. Django——CBV与FBV

    一.FBV FBV(function base views) 就是在视图里使用函数处理请求. 二.CBV CBV(class base views) 就是在视图里使用类处理请求. Python是一个面 ...

  4. ECharts动态数据加载

    最近有用到ECharts做可视化报表,小结一下 一.准备数据 1.官网下载echarts.min.js 2.引入jquery.js 3.请求用的json数据 { "list":[ ...

  5. 在C#中生成GUID的方法

    var guid = Guid.NewGuid();Debug.WriteLine(guid.ToString());   //1f3c6041-c68f-4ab3-ae19-f66f541e3209 ...

  6. SmartUpload控件 中文乱码问题解决办法

    (乱码一般是三码不统一,但是当我们使用插件的时候,我们页面,后台,还有插件之间的转码不一定统一,导致了乱码这一问题) 首先,SmartUpload 的使用网上多的很,在这里就不在赘述,主要解决为什么乱 ...

  7. 关于String s = new String("xyz");创建了几个字符串对象?的问题

    引用自这位朋友:http://blog.sina.com.cn/s/blog_6a6b14100100zn6r.html 首先让我们了解几个概念: 栈:由JVM分配区域,用于保存线程执行的动作和数据引 ...

  8. HTML <meta> Attribute

    HTML <meta> Attribute http-equiv 定义和用法 The http-equiv attribute provides an HTTP header for th ...

  9. Vue2自定义指令改变DOM值后未刷新data中绑定属性的值

    标签(空格分隔): Vue 自定义指令用于过滤输入框,只允许输入数字: Vue.directive('numberOnly', { bind: function (el, binding) { el. ...

  10. PL/SQL Developer import and export database method and illustrate

    PL/SQL Developer import and export database method and illustrate   HOW WELL DO YOU KNOW THE APPLE U ...