第一部分

一、基本规范

1.缩进：一般以四个空格为一个缩进。

2.语句结尾：最好加上分号，因为虽然“自动分号插入（ASI）”机制在没有分号的位置会插入分号，但是ASI规则复杂而且会有特殊情况发生

  1. // 源代码
  2. function aaa() {
  3.     return
  4.     {
  5.          title: 'aaaa',
  6.          id: '2222'
  7.     }
  8. }
  9.  
  10. // ASI解析
  11. function aaa() {
  12.     return;
  13.     {
  14.          title: 'aaaa',
  15.          id: '2222'
  16.     }
  17. }
  18.  
  19. 此时return换行会返回undefined

3.行的长度：不应超过80个字符

4.换行：一般在运算符（比如逗号）后换行，然后增加两个层级（一个层级为四个空格的话，增加的就是八个空格）。

当给变量赋值时，第二行位置应当和赋值运算符位置保持对齐

  1. var result = aaaa + bbbb + ccccc + dddd + eeee +
  2.              fffffffff + gggggg + hhhh

5.空行：适当空行增加代码可读性

  • 在方法之间
  • 在方法中的局部变量和第一条语句之间
  • 在多行或单行注释前
  • 逻辑片段间

6.命名方法：驼峰式

变量：应用名词进行命名  var name = "skq"

函数：应以动词为函数名前缀 function doSomething(){}

常量：使用大写字母和下划线命名  var MAX_COUNT = 10;

7. 注释

  • 单行注释后要有一个空格  // 注释
  • 多行注释，要与前一段代码前有一个空行
  1. // 这是一个数组
  2. var aaa = [1,2,3,4];
  1. /*
  2.  * 这是一个函数
  3.  * 有一个变量为aaa
  4.  */ 
  1. function aaa() { 
    　　var aaa = [1,2,3,4]; 
    }

二、语句和表达式

1.switch - default

default可省略

2.for - break&&continue

break: 终止本次循环

continue: 跳出本次循环

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript">
  7.         var arr = [1, 2, 3, 4];
  8.         var len = 2;
  9.  
  10.         function aaa(data) {
  11.             console.log(data);
  12.         }
  13.  
  14.         for (var i = 0; i < arr.length; i++) {
  15.             if (i === len) {
  16.                 break;
  17.             }
  18.             aaa(arr[i]); // 1,2
  19.         }
  20.  
  21.         for (var i = 0; i < arr.length; i++) {
  22.             if (i === len) {
  23.                 continue;
  24.             }
  25.             aaa(arr[i]); // 1,2,4
  26.         }
  27.  
  28.     </script>
  29. </head>
  30. <body>
  31.  
  32. </body>
  33. </html>

避免使用continue，尽量使用if语句

3.for-in

在使用for-in时，它不仅遍历对象的实例属性，同样还遍历从原型集成来的属性。当遍历自定义对象属性时，往往会因为意外的结果终止。所以用hasOwnProperty()在来for-in循环过滤出实例属性。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript">
  7.     var obj = {
  8.         name: 'aaa',
  9.         age: 11
  10.     }
  11.     for (attr in obj) {
  12.         if (obj.hasOwnProperty(attr)) {
  13.             console.log(obj[attr]);
  14.         }
  15.     }
  16.  
  17.     </script>
  18. </head>
  19. <body>
  20.  
  21. </body>
  22. </html>

　　

三、变量、函数和运算符

1. var的使用

建议var合并成一条语句

  1. var aaa = 10,
  2.     bbb = aaa + 10,
  3.     ccc,
  4.     ddd;

2.具有强制类型转换机制： 等号（==）

推荐使用 === 和！==，不会涉及强制类型转换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript">
  7.     alert(false == 0); // true
  8.     alert(true == 1);  // true
  9.     alert(true == 2);  // false
  10.     </script>
  11. </head>
  12. <body>
  13.  
  14. </body>
  15. </html>

　　

3. eval(), setIterval(), setTimeout(), 和 Funtion中传入字符串时，都可当做代码来执行，避免传入字符串

  1. var myfunc = new Function("alert('Hi')");

四、编程实践

1. 将css从JavaScript中抽离

用className替代style（除了定位的情况）

五、事件处理

1.隔离应用逻辑

把应用逻辑单拎出来，这样就可复用于很多地方了

2.不要分发事件对象（event）

最佳办法是让事件处理程序使用event对象来处理事件，然后拿到所有需要的数据传给应用逻辑

六、避免空比较

1、检测原始值

检测类型：Boolean、Number、String、null、undefined

方法：typeof

注意： null不应用于检测语句，如果要对比的确实为null，用 === 或者==!来精确判断

2、检测引用值（object）

内置引用类型：Object、Array、Date、Error

方法：instanceof (不仅检测对象的构造器，还检测原型链)

* instanceof不使用函数和数组

3、检测函数

方法：typeof

* typeof 可以跨帧（frame），但是IE8及更早版本有问题（返回Object）

  1.   /**
    　　*  underscore源码
       */
      if (typeof /./ != 'function' && typeof Int8Array != 'object') {
  2.     _.isFunction = function(obj) {
  3.       return typeof obj == 'function' || false;
  4.     };
  5.   }

　　

4、检测数组

  1. /**
     * underscore给出的方案
     */
     var nativeIsArray  = Array.isArray;
  2.  _.isArray = nativeIsArray || function(obj) {
  3.     return toString.call(obj) === '[object Array]';
  4.  };
  1. // 书中给出方案　　
    function isArray(value) {
  2.  
  3.    　　 if (typeof Array.isArray === “function”)  {
  4.  
  5.         　　return Array.isArray(value);
  6.  
  7.     　　} else {
  8.  
  9.        　　 return Object.prototype.toString.call(value) === "[object Array]"
  10.  
  11.    　　 }
  12.  
  13. 　　}

　　

四、将配置数据从代码中分离

1、配置数据类型

  • 写死在代码里的值
  • URL：比如API的url
  • 展现给用户的字符串：比如报错提示
  • 重复的值
  • 任何可能变化的值

2、抽离配置文件

3、把配置数据放在一个独立的文件里

五、文件和目录结构

基本目录结构

  • build  放置最终构建后的文件，理想情况下不应该提交
  • src     放置所有源文件，包括用来进行文件分组的子目录
  • test或tests    放置所有的测试文件

六、附录总结

1. 缩进为4个空格（？可能因为这本写的时间比较长了？现在多个比较有名的框架都是两个空格为一个缩进，不过这个我搜了一下，也看个人习惯和团队规范）

2.一行不超过80个字符

《编写可维护的Javascript》学习总结的更多相关文章

  1. mongoDB权威指南学习笔记

    //mongoDB第1-3章节添加,修改,修改器的笔记: //备注:和MySQL查询一样,时刻想着优化查询数据的时间和性能 //db.help() //数据库帮助信息 //db.blog.help() ...

  2. Hadoop权威指南学习笔记二

    MapReduce简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.n ...

  3. 《JS权威指南学习总结》

    JS权威指南学习总结:http://www.cnblogs.com/ahthw/category/652668.html

  4. 《JS权威指南学习总结--开始简介》

    本书共分成了四大部分: 1.JS语言核心 2.客户端JS 3.JS核心参考 4.客户端JS核心参考 其中 <JS权威指南学习总结--1.1语法核心> 是:第一部分JS语言核心 各章节重点 ...

  5. Hadoop权威指南学习笔记一

    Hadoop简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出.一起学习一起进步. 转载请注明:http://blog.csdn.net/ ...

  6. Hadoop权威指南学习笔记三

    HDFS简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考.有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.net/my ...

  7. HTTP权威指南-学习笔记

    目录 HTTP权威指南-学习笔记 HTTP: Web的基础 URL与资源 HTTP报文 连接管理 HTTP结构 Web服务器 代理 缓存 集成点: 网关,隧道及中继 Web机器人 识别,认证与安全 客 ...

  8. JavaScript 权威指南-学习笔记（一）

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  9. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  10. Node.js权威指南学习记录

    学习nodeJS权威指南的学习记录 导航: 1.console模块 2.全局变量 3.Buffer对象 4.事件对象 5.网络请求 6.文件操作对象 一. COMMON.js的学习.(commonJS ...

随机推荐

  1. 2017-10-02-afternoon

    T1 最大值(max) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK有一本书,上面有很多有趣的OI问题.今天LYK看到了这么一道题目: 这里有一个长度 ...

  2. 前端自动化测试工具--使用karma进行javascript单元测试(转)

    Karma+Jasmine+PhantomJS组合的前端javascript单元测试工具. 1.介绍 Karma是由Google团队开发的一套前端测试运行框架,karma会启动一个web服务器,将js ...

  3. 七牛云上传图片到cdn，cdn返回的是一个只有图片的url

    如:

  4. atom的react自动补全插件

    atom-react-autocomplete–项目内,组件名及状态的自动补全 autocomplete-js-import–模块导入智能提示 emmet-jsx-css-modules– React ...

  5. mvn打包源码的方法：maven-source-plugin

    maven-javadoc-plugin可以打包 dubbo-demo-provider-2.6.1-javadoc.jar maven-jar-plugin 打包插件 dubbo-demo-prov ...

  6. C#.NET如何将cs文件编译成dll文件 exe文件 如何调用dll文件

    比如我要把TestDLL.cs文件编译成dll文件,则在命令提示符下,输入下面的命令,生成的文件为TestDLL.dll csc /target:library TestDLL.cs 注意前提是你安装 ...

  7. [tarjan] 1827 Summer Holiday

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1827 Summer Holiday Time Limit: 10000/1000 MS (Java/ ...

  8. kvm 安装

    一.  虚拟化 是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机.在一台计算机上同时运行多个逻辑计算机,每个逻辑计算机可运行不同的操作系统,并且应用程序都可以在相互独立的空间内运行而互相不影响,从而 ...

  9. 量化分析师的Python日记【第1天：谁来给我讲讲Python？】

    量化分析师的Python日记[第1天:谁来给我讲讲Python?]薛昆Kelvin优矿 001 号员工2015-01-28 15:48 58 144克隆 ###“谁来给我讲讲Python?” 作为无基 ...

  10. 网页设计中11 款最好CSS框架

    网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计.网页编码一定要合适.精确,才能保证不发生 ...