sharon.li(ixuan.lee@gmail.com)

jslint和jshint的区别，并且对jshint的选项进行解释

Transcript

1. JSHINT那些事儿  by lixuan
2. 故事还得从Lint说起  ¨  lint产生的原因 ¤  C 催生了lint ¨  lint可以干什么 ¤  检查C在可移植性性上存在的问题 ¤  监测语法正确但是很可能是错误的特性（可疑的类 型组合、未使用的变量、不可达的代码等） ¨  PC-lint………JSLint
3. JSLint vs JSHint  ¨  联系 ¤  都可以对js代码进行错误检查 ¤  可以通过options进行配置 ¤  支持多种编译器（apatana、sublime等） ¤  JSHint is a fork of JSLint ¨  区别 ¤  JSHint开源，可以自己修改源码 ¤  JSLint（35个选项），JSHint（>35个选项） ¤  JSHint更灵活
4. JSHint  ¨ Enforcing Options(强制性的) ¤ 使检查更严厉 ¨ Relaxing Options(宽松的) ¤ 使检查更宽松 ¨ Environments(环境参数) ¤ 预先提供的全局变量 ¨ Legacy(遗留的) ¤ JSLint遗留的
5. Enforcing Options(1)  ¨  bitwise ¤  禁止js中使用位操作符（^、|、&） ¤  原因：使用较少、易于逻辑操作符（||、&&）混 淆 ¨  camelcase ¤  命名规则：驼峰(camelCase)或者UPPER_CASE 格式 ¤  原因：提高代码可读性，保持统一 ¨  curly ¤  条件、循环语句必须用大括号 ¤  原因：多条语句后易错，不易排查 while (day) shuffle(); while (day) shuffle(); sleep(); 
6. Enforcing Options(2)  ¨  eqeqeq ¤  禁止使用==和!==，使用===和!==替代 ¤  原因：!==和==会进行类型转换 toBolean，toNumer ¨  forin ¤  使用forin的时候添加过滤函数 ¤  原因：forin会遍历对象本身和原型对象，可能出现问题， 推荐添加obj.hasOwnProperty(key) ¨  immed ¤  立即执行的函数用小括号包起来 ¤  原因：提高可读性，知道需要的是函数本身还是函数的 执行结果【code】 
7. Enforcing Options(2)-curly  (function (){ //.... })(); 最好写成 (function(){ //... }()); var s = ( function() {}()); /*第二种写法明显可以很清楚的知道，s的值是function的执行结果，而不是 function本身*/
8. Enforcing Options(3)  ¨  indent ¤  用tab缩进时，设置tab的宽度，默认为4个空格 ¤  原因：多种平台、开发工具下保持代码的缩进统一 ¨  latedef ¤  禁止在变量声明前使用该变量 ¤  原因：因为JavaScript是function scope，不这样会出现问 题【code】【further reading】 ¨  newcap ¤  所有的构造函数第一个字母大写 ¤  原因：很清楚的可以分清哪些函数是构造函数，哪些仅 仅是普通函数【further reading】
9. Enforcing Options(3)- latedef  var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); //10 var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a);//1
10. Enforcing Options(4)  ¨  noempty ¤  禁止有空的代码块 ¤  原因：仅仅是建议，没有特殊原因 ¨  nonew ¤  禁止不适当的使用new来调用构造函数 ¤  原因：new MyConstructor(); 类似于这种形式的调用没有 意义，创造的对象并没有被引用； ¨  plusplus ¤  禁止使用一元操作符++和— ¤  原因：++很容易和+ +混淆，由于+等操作符可以隐式 的类型转换，所以不建议。【code】 
11. Enforcing Options(4)-plusplus  var subtotal = 1; var myInput = {value : ‘1’}; var total = subtotal + +myInput.value; total;//2 var str = '1'; var tmp = +str typeof str ;//string typeof tmp;//number 
12. Enforcing Options(5)  ¨  quotmark ¤  代码中的引号保持统一，true，保持统一就好， single，必须是单引号，double，必须双引号 ¤  原因：为了追求统一 ¨  regexp ¤  禁止在正则中使用”.” ¤  原因：.号在正则中表示匹配除换行符外任何单个 字符，但是在[]中.号仅仅表示.号，很容易出错哦 
13. Enforcing Options(5)  ¨  undef ¤  禁止在js中使用未声明的变量 ¤  原因：防止内存泄露，这些错误在运行时也可以发 现【code】 ¨  unuse ¤  禁止在代码中声明没有使用的变量 ¤  原因：配合undef使用，使代码整洁【code】 
14. Enforcing Options(5)-undef&unuse  function test() { var myVar = 'Hello, World'; console.log(myvar); } function test(a, b) { var c, d = 2; return a + d; } test(1, 2); 
15. Enforcing Options(6)  ¨  trailing ¤  禁止在行尾出现空格 ¤  原因：在多行字符串时，结尾的空格会出现错误 【code】  var str = “Hello \space World"; 
16. Enforcing Options(7)  ¨  maxparams ¤  设置函数的参数最大个数 ¨  maxdepth ¤  设置函数内部block的嵌套最大数 ¨  maxstatements ¤  设置函数的最多语句数，函数声明算1条function foo(){} ¨  maxcomplexity ¤  Cyclomatic complexit 的最大数【futher reading】 ¨  maxlen ¤  一行的最大长度 
17. Relaxing Options(1)  ¨  asi ¤  设置true后，不写分号不报错。 ¤  评论：JS有一套机制来保障换行作为一个语句的结 束，但是仍然建议写分号【further reading】 ¨  boss ¤  设置true后，在条件判断的地方使用赋值语句不会 报错if (a = 10) {} ¤  评论：一句代码多个用途for (var i = 0, person; person = people[i]; i++) {}
18. Relaxing Options(2)  ¨  debug ¤  设置true后，代码中允许出现debug语句。 ¤  评论：主意ie不支持debug ¨  eqnull ¤  设置true后，==null的使用不会报错 ¤  评论：根据真值表，null==null 和undefine==null， 所以在判断一个变量是null或者undefine时有用 ¨  eval ¤  设置true后，可以在代码中直接使用eval ¤  原因：eval有时很有用
19. Relaxing Options(3)  ¨  expr ¤  设置true后，在需要使用赋值语句或函数调用等操作时， 使用了表达式，也不会报错 ¤  评论：经常使用，a&&alert(10); ¨  funcscope ¤  设置true后，在block外部使用block内部的参数不会进行 提示。 ¤  评论：满足即用即var的规则，但是最好别这样 ¨  iterator ¤  设置true后，代码中出现__iterator__不会报错 ¤  评论：很少人使用这个，但是__iterator__不是所有浏览 器都支持
20. Relaxing Options(4)  ¨  lastsemic ¤  设置true后，一行的代码中最后一条语句不写”;”不提示 ¤  评论：可有可无var name = (function() { return 'Anton' }()); ¨  laxbreak ¤  设置true后，可抑制大部分的不合理换行报警。 ¤  评论：对于comma first的编程习惯这个选项还会报警 ¨  laxcomma ¤  设置true后，comma first也不会报警了 ¤  评论：如果是comma first的编程习惯，可以使用这个选 项 var obj = { name: 'Anton‘ , handle: 'valueof‘ , role: 'SW Engineer' }; 
21. Relaxing Options(5)  ¨  loopfunc ¤  设置true后，循环中调用函数不会报错 ¤  评论：通过使用立即执行的函数避免出现问题【code】 ¨  multistr ¤  设置true后，可以使用多行字符串”\”。 ¤  评论：主意多行字符串很容易出错，尤其是\后有空格 ¨  onecase ¤  设置true后，swith语句即使只有一个case也不报错 ¤  评论：有时候为了拓展性，愿意这么写
22. Relaxing Options(5)- loopfunc  var nums = []; for (var i = 0; i < 10; i++) { nums[i] = function (j) { return i + j; }; } nums[0](2); // Prints 12 instead of 2 解决办法 var nums = []; for (var i = 0; i < 10; i++) { (function (i) { nums[i] = function (j) { return i + j; } }(i)); } 
23. Relaxing Options(6)  ¨  proto ¤  设置true后，可以使用__proto__ ¤  评论：火狐chrome支持，ie不支持 ¨  regexdash ¤  设置true后，正则表达式最后出现未转义的”_”也不 报错。 ¤  评论：无 ¨  scripturl ¤  设置true后，url是以javascript..开头的也不会报错 ¤  评论：无
24. Relaxing Options(7)  ¨  smarttabs ¤  设置true后，用spaces来缩进时，允许spaces和tab的混 用。 ¤  评论：设置吧，不然会出现满篇都是错误的情况 ¨  shadow ¤  设置true后，允许变量的覆盖 ¤  评论：避免变量覆盖 ¨  sub ¤  设置true后，使用o[‘key’]替代o.key来访问对象的属性不 报错 ¤  评论：很有必要哦
25. Relaxing Options(8)  ¨  supernew ¤  设置true后，不常规的使用new来创建对象不会报错 ¤  评论：用来创建单例很管用 var singleton = new function() { var privateVar; this.publicMethod = function () {}; this.publicMethod2 = function () {}; };
26. Environments(1)  ¨  browser ¨  couch ¨  devel ¨  dojo ¨  jquery ¨  mootools ¨  node ¨  nonstandard ¨  prototypejs ¨  rhino ¨  worker ¨  wsh ¨  yui
27. Legacy(1)  ¨  nomen ¤  变量声明时，不允许使用_ ¨  onevar ¤  一个函数内只允许一个var ¤  原因：在顶部将function需要的变量一次性都声明好。 ¨  passfail ¤  使jshint停在第一个出错的地方
28. JSHint调用  ¨  var result = JSHINT(source, options, globals); ¤  source 字符串形式会用\n或者\r 分割，数组形式， 最好一个item为一行 ¤  options，配置项 ¤  globals，key ，value的对象，来表示希望那些全局 变量默认已经被设置过了 ¨  通过JSHint.errors()获得错误信息 和JSHint.data() 获得全部信息 
29. THANKS