知识大全用JSLint精炼提升JavaScript代码

Posted 2022-07-20 知

篇首语：落花踏尽游何处，笑入胡姬酒肆中。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全用JSLint精炼提升JavaScript代码相关的知识，希望对你有一定的参考价值。

用JSLint精炼提升JavaScript代码 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　由于移动应用的盛行和HTML 的广泛运用 JavaScript正越来越流行 JavaScript受欢迎的部分原因是因为它的灵活便捷你可以快速上手它不需要重量级的开发环境也不需要第三方应用支持只要你打开一个文本编辑器然后保存最后通过网页浏览器运行即可

　　但是对于新手而言使用JavaScript处处存在陷阱在一段复杂的脚本中 JavaScript语言的延展性常常引起怪异的bug 例如未声明的局部变量可能会不知不觉修改全局变量

　　现在打开JSLint网站正如其网站所言它是 JavaScript代码质量工具 JSLint的作者是Douglas Crockford 因其对JavaScript（ECMAScript）和JSON的贡献而著名

　　JSLint帮助JavaScript程序员在编程过程中遵循一定的编码规范 JSLint是以基于严格模式（Strict Mode）为前提参考第版ECMAScript标准与一般模式相比严格模式下你的代码需要按照更严格的规则运行

　　使用JSLint

　　我们来用JSLint运行一个示例写一个简单的jQuery插件通过prefix显示msg接收的信息如果传给type的值为false则不显示prefix

　　（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）

　　l（）

　　 else

　　l（concatMsg）

　　）

　　）（jQuery）

　　尽管这段代码作为jQuery的插件运行还算正常但当你用Firefox或Chrome运行时会发现有几处明显的错误以及一些不易察觉的问题与其耗费脑力解决这些问题不如通过JSLint来帮助我们将上面这段代码拷贝至JSLint网站的文本框内然后点击 JSLint 按钮代码建议和错误提示会出现在下方

　　JSLint指出的第一个错误是丢失 use strict 声明这个错误表示该函数未在严格模式下执行为纠正该错误我们在函数主体的头部添加 use strict 语句以启动严格模式

　　 use strict ;

　　加入严格模式声明语句后再次点击 JSLint 按钮提示丢失 use strict 的错误信息将消失现在我们可以继续看下一个错误接下来的这个错误是关于空格的问题鉴于它不能算个真正的错误我们可以放心地忽略它

　　你可以将页面最下方的 messy white space 选项改为true 这样你就可以保留function关键字后不留空格的写法但是现在我们保留 messy white space 选项的default属性因为这个功能也会帮助我们检查其他空格问题这个我们之后再说

　　同样需要注意的是虽然JSLint指出的第二个和第三个错误指向同一行代码但错误点并不一样后者JSLint建议在右括号）和左大括号之间空一格现在我们纠正下这个错误

　　插入空格后再次点击 JSLint 按钮下一个错误出现在第行第个字符处 prefixes对象包含了两个一模一样的warning属性将第二个warning修改为caution

　　这次就不再点击 JSLint 按钮直接看下一个错误吧定义对象的代码块的最后多了一个逗号像这类错误 Chrome和Firefox这些浏览器也许会忽略但IE就不会那么友好了所以我们把这个逗号移除掉

　　之后的两个错误指向未定义的变量concatMsg 如果一个变量在当前作用域中没有被定义 JavaScript就会全局查找看是否有在别处定义过若这时你还引入了外部代码并碰巧在全局中定义过该变量那么一旦出错你很有可能要抓破头皮费尽心力地寻找bug原因所幸有了JSLint 我们可以将这类错误扼杀在摇篮中

　　现在纠正这个错误并重构代码因为concatMsg的默认值为msg 所以我们可以将msg先赋给它待需要时再修改如下所示关于concatMsg的代码为

　　var concatMsg = msg;

　　if （type）

　　concatMsg = prefixes[type];

　　继续往下有一个与之前类似的空格问题纠正它紧接着 JSLint指出丢失了一个分号（如下图所示） JSLint会假设没有分号结尾的命令行永远不会被终止所以当下面出现if时 JSLint认为这里应该有个分号尽管根据语言规范结束的分号可有可无但是加上它是一个良好的习惯因为这类不良代码在大项目协作中很容易引起莫名的bug 所以平常编码过程中应顺手避免此类问题

　　接下来又是一个很好的错误例子 JavaScript中有相等（==）和严格的相等（===）比较在这段案例代码中如果不采用严格相等比较那么不管msg为空字符串还是false值 if内都为true 所以这里我们采用严格相等比较

　　好了让我们再次点击 JSLint 按钮吧如下图所示错误出现在第行 JSLint认为合并变量声明也是一个良好的编码规范尽管concatMsg变量的声明紧随prefixes之后但JSLint认为用逗号隔开在一个命令语句中完成变量声明更好

　　下一个错误则又是关于格式的问题咋一看不就是多空了一格嘛实在是太鸡毛蒜皮了但是如果在大量的脚本中这种缩进问题搞不好也会引起难以发现的bug 所以为了代码的统一性我们还是往前移一格吧

　　下一个问题又和之前遇到的类似但形式不一样 JavaScript的函数也可归属为变量所以和其他变量赋值语句一样 JSLint希望在末尾加个分号

　　最后如下所示有两个错误出现在最后一行第一个问题 JSLint建议将闭括号移至jQuery之后因为这样不会使闭包函数定义产生歧义第二个问题 JSLint认为jQuery变量不存在但事实上你可能在实际页面中已引入了jQuery文件所以我们可以在页面最下面的文本框内输入 jQuery 来解决这个问题（译者 JSLint Directive上面的文本框）

　　再次运行JSLint 它提示该函数需要接收三个参数但是在本示例中我们从未使用过第三个参数因此此处我们有两种方法解决这个问题第一种删除第三个参数第二种将下方的 unused parameters 项改为true 如果你确实是因为某些原因需要保留这个参数则用第二种方法

　　好了用JSLint改进后的代码如下所示

　　（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）

　　l（）

　　 else

　　l（concatMsg）

　　）

　　;

　　（jQuery））

　　JSLint 指令

　　你可以通过JSLint指令在你的源代码中直接定义JSLint变量这样你就不用在页面上来回操作如下示例注释中定义了jQuery全局变量并将 unparam 设为true

　　/*global jQuery*/ /*jslint unparam: true */ （function （$）

　　 use strict ;

　　…

　　（jQuery））

　　总结

cha138/Article/program/Java/JSP/201311/19685

知识大全 用JSLint精炼提升JavaScript代码

知识大全用JSLint精炼提升JavaScript代码