深圳网站的做网站公司,网站空间合同,南通网站建设seo,wordpress不登录看不到文章由于移动应用的盛行和HTML5的广泛运用#xff0c;JavaScript正越来越流行。JavaScript受欢迎的部分原因是因为它的灵活便捷#xff0c;你可以快速上手#xff0c;它不需要重量级的开发环境#xff0c;也不需要第三方应用支持#xff0c;只要你打开一个文本编辑器#xff…由于移动应用的盛行和HTML5的广泛运用JavaScript正越来越流行。JavaScript受欢迎的部分原因是因为它的灵活便捷你可以快速上手它不需要重量级的开发环境也不需要第三方应用支持只要你打开一个文本编辑器然后保存最后通过网页浏览器运行即可。 但是对于新手而言使用JavaScript处处存在陷阱。在一段复杂的脚本中JavaScript语言的延展性常常引起怪异的bug。例如未声明的局部变量可能会不知不觉修改全局变量。 现在打开JSLint网站正如其网站所言它是“JavaScript代码质量工具”。JSLint的作者是Douglas Crockford因其对JavaScriptECMAScript和JSON的贡献而著名。 译注Douglas Crockford是 web领域技术权威之一他是JSON、JSLint、JSMin和ADSafe的创造者也是名著《JavaScript: The Good Parts》中文版《JavaScript语言精粹 》的作者。撰写了许多广为流传、影响深远的技术文章包括“JavaScript:世界上最被误解的语言”。 JSLint帮助JavaScript程序员在编程过程中遵循一定的编码规范。JSLint是以基于严格模式Strict Mode为前提参考第5版ECMAScript标准。与一般模式相比严格模式下你的代码需要按照更严格的规则运行。 译注对严格模式不了解的童鞋可以参考这两篇文章《ECMAScript 5.1简介》《是时候使用JavaScript严谨模式(Strict Mode)提升团队开发效率》 使用JSLint 我们来用JSLint运行一个示例。写一个简单的jQuery插件通过prefix显示msg接收的信息如果传给type的值为false则不显示prefix。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 (function ($) { $.fn.loading function(msg, type, cssClass){ var prefixes { warning: Warning: msg, error: Error: msg, info: Info: msg, warning: Caution: msg, }; if (type) { concatMsg prefixes[type]; } else { concatMsg msg; } $(this).each(function() { var tis $(this) if (msg false) { tis.html(); } else { tis.html(concatMsg); } }); } })(jQuery); 尽管这段代码作为jQuery的插件运行还算正常但当你用Firefox或Chrome运行时会发现有几处明显的错误以及一些不易察觉的问题。与其耗费脑力解决这些问题不如通过JSLint来帮助我们。将上面这段代码拷贝至JSLint网站的文本框内然后点击”JSLint”按钮代码建议和错误提示会出现在下方。 JSLint指出的第一个错误是丢失“use strict”声明。这个错误表示该函数未在严格模式下执行。为纠正该错误我们在函数主体的头部添加“use strict”语句以启动严格模式。 1 use strict; 加入严格模式声明语句后再次点击“JSLint”按钮提示丢失“use strict”的错误信息将消失。现在我们可以继续看下一个错误。接下来的这个错误是关于空格的问题鉴于它不能算个真正的错误我们可以放心地忽略它。 你可以将页面最下方的“messy white space”选项改为true这样你就可以保留function关键字后不留空格的写法。但是现在我们保留“messy white space”选项的default属性因为这个功能也会帮助我们检查其他空格问题这个我们之后再说。 同样需要注意的是虽然JSLint指出的第二个和第三个错误指向同一行代码但错误点并不一样。后者JSLint建议在右括号“”和左大括号“{”之间空一格现在我们纠正下这个错误。 插入空格后再次点击“JSLint”按钮下一个错误出现在第8行第39个字符处。prefixes对象包含了两个一模一样的warning属性将第二个warning修改为caution。 这次就不再点击“JSLint”按钮直接看下一个错误吧。定义对象的代码块的最后多了一个逗号。像这类错误Chrome和Firefox这些浏览器也许会忽略但IE就不会那么友好了所以我们把这个逗号移除掉。 之后的两个错误指向未定义的变量concatMsg。如果一个变量在当前作用域中没有被定义JavaScript就会全局查找看是否有在别处定义过。若这时你还引入了外部代码并碰巧在全局中定义过该变量那么一旦出错你很有可能要抓破头皮费尽心力地寻找bug原因。所幸有了JSLint我们可以将这类错误扼杀在摇篮中。 现在纠正这个错误并重构代码。因为concatMsg的默认值为msg所以我们可以将msg先赋给它待需要时再修改。如下所示关于concatMsg的代码为 1 2 3 4 var concatMsg msg; if (type) { concatMsg prefixes[type]; } 继续往下有一个与之前类似的空格问题纠正它。紧接着JSLint指出丢失了一个分号如下图所示。JSLint会假设没有分号结尾的命令行永远不会被终止。所以当下面出现if时JSLint认为这里应该有个分号。尽管根据语言规范结束的分号可有可无但是加上它是一个良好的习惯。因为这类不良代码在大项目协作中很容易引起莫名的bug。所以平常编码过程中应顺手避免此类问题。 接下来又是一个很好的错误例子。JavaScript中有‘相等’和严格的‘相等’比较。在这段案例代码中如果不采用严格‘相等’比较那么不管msg为空字符串还是false值if内都为true。所以这里我们采用严格‘相等’比较。 好了让我们再次点击“JSLint”按钮吧。如下图所示错误出现在第10行JSLint认为合并变量声明也是一个良好的编码规范。尽管concatMsg变量的声明紧随prefixes之后但JSLint认为用逗号隔开在一个命令语句中完成变量声明更好。 下一个错误则又是关于格式的问题。咋一看不就是多空了一格嘛实在是太鸡毛蒜皮了。但是如果在大量的脚本中这种缩进问题搞不好也会引起难以发现的bug。所以为了代码的统一性我们还是往前移一格吧。 下一个问题又和之前遇到的类似但形式不一样。JavaScript的函数也可归属为变量所以和其他变量赋值语句一样JSLint希望在末尾加个分号。 最后如下所示有两个错误出现在最后一行。第一个问题JSLint建议将闭括号移至jQuery之后因为这样不会使闭包函数定义产生歧义。第二个问题JSLint认为jQuery变量不存在。但事实上你可能在实际页面中已引入了jQuery文件所以我们可以在页面最下面的文本框内输入“jQuery”来解决这个问题译者JSLint Directive上面的文本框。 再次运行JSLint它提示该函数需要接收三个参数。但是在本示例中我们从未使用过第三个参数。因此此处我们有两种方法解决这个问题。第一种删除第三个参数。第二种将下方的“unused parameters”项改为true。如果你确实是因为某些原因需要保留这个参数则用第二种方法。 好了用JSLint改进后的代码如下所示 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 (function ($) { use strict; $.fn.loading function (msg, type, cssClass) { var prefixes { warning: Warning: msg, error: Error: msg, info: Info: msg, caution: Caution: msg }, concatMsg msg; if (type) { concatMsg prefixes[type]; } $(this).each(function () { var tis $(this); if (msg false) { tis.html(); } else { tis.html(concatMsg); } }); }; }(jQuery)); JSLint 指令 你可以通过JSLint指令在你的源代码中直接定义JSLint变量。这样你就不用在页面上来回操作。如下示例注释中定义了jQuery全局变量并将“unparam”设为true。 1 2 3 4 5 6 /*global jQuery*/ /*jslint unparam: true */ (function ($) { ‘use strict’; … }(jQuery)); 总结 在这个简短的例子中JSLint指出了一些明显的和一些容易忽视的错误。在实际运行代码之前通过JSLint帮我们查找一些错误可以有效的提高我们的开发效率和代码质量。如果你真的是认真地想写出优质的代码那么在放到服务器上运行之前先用JSLint检查一遍吧。JSLint还提供一个独立的JS文件版本所以你也可以把它下载下来在线下运行 译者 严格模式并不是所有的浏览器都支持这是一个浏览器支持统计表。网页前端可能暂时甚至很长时间内还不能遵循严格模式但是在移动开发中显然采用严格模式更佳。不管目前是否能用上我觉得前端工程师们都应该利用这些工具帮助自己养成良好的编码习惯好的习惯会让你受益匪浅在这里略矫情略夸张的引用一下电影《铁娘子》中的一句话Watch your habits, for they become your character 英文原文Using JSLint to Refine Your Code编译伯乐在线 - 胡蓉转载于:https://www.cnblogs.com/xuweili/articles/3385322.html
