请选择 进入手机版 | 继续访问电脑版

技术控

    今日:9| 主题:54612
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] JavaScript 最佳实践:帮你提升代码质量

[复制链接]
埋下最珍貴 发表于 2016年11月30日 11:30
181 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
每天学一些新东西可以让一个理性之人走上不凡之路。而作为开发人员,不断的学习新东西则是我们工作的一部分, 不论这些新东西是不是来源于积极的学习经验。
   在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用另外一种艰难的方式来了解它们。准备好去升级你的代码吧!
       1. 避免对全局作用域的污染

   声明变量是一件很有趣的事情。有时候即使你不想这样做,但也有可能会定义出全局变量。在如今的浏览器中,全局变量都被存储在 window 对象中。而因为有许多的东西都在那个里面,所以你有可能把一些默认值都给覆盖掉了。
   假设你有一个 HTML 文件,里面包含了一个 <script> 标记,而这个标记内含 (或者通过引用一个 JavaScript 文件而加载) 如下内容:
  
  1. var foo = 42;
  2. console.log(foo);
复制代码
  这段代码很明显会让控制台输出 42。不过因为代码并不是放到一个函数里面去执行的,因此其执行的上下文就会是全局的那个。因此,变量就会被附加到 window 对象上。这就意味着 window.foo 的值也会是 42。
       这样是挺危险的,因为你可以把已经存在的全局变量给覆盖掉:
  
  1. function print () {
  2.    // do something
  3. }
  4. print();
复制代码
  当执行 window.print (或者只是执行 print) 的时候, 它不会打开打印弹窗,因为我们已经将原生的打印弹窗逻辑给覆盖掉了。
   解决这个问题的方案相当简单; 我们需要一个会在定义后立即被调用到的闭包函数, 如下所示:
  
  1. // Declare an anonymous function
  2. (function () {
  3.    var foo = 42;
  4.    console.log(window.foo);
  5.    // → undefined
  6.    console.log(foo);
  7.    // → 42
  8. })();
  9. //^ and call it immediately
复制代码
  或者你也可以选择将 window 以及其它全局的东西(例如 document)都作为参数传给那个函数(这样做也可能对性能会有所提升):
  
  1. (function (global, doc) {
  2.   global.setTimeout(function () {
  3.      doc.body.innerHTML = "Hello!";
  4.   }, 1000);
  5. })(window, document);
复制代码
  因此你得使用闭包函数来避免创建出什么全局的东西来。注意在这里因为要专注于代码本身,所以我不会在后面的代码片段中使用闭包函数。
    提示:  browserify 是另外一种避免创建全局变量的方式。它采用了你在 Node.js 同样会用到的 require 函数的方式。
   顺便说一下, Node.js 会自动将你的文件封装进函数里面。它们看起来先下面这样:
  
  1. (function (exports, require, module, __filename, __dirname) {
  2. // ...
复制代码
   因此,如果你认为 require 函数式全局的,好吧,并不是。它无非就是一个 函数的参数 。
       你知道吗?

   因为 window 对象包含了所有的全局变量,又因为它自己也是全局的,因此 window 自己内部也引用了它自己:
  
  1. window.window.window
  2. // => Window {...}
复制代码
  这是一位 window 对象是一个循环引用对象。下面展示了如何创建这样的一个对象:
  
  1. // Create an object
  2. var foo = {};
  3. // Point a key value to the object itself
  4. foo.bar = foo;
  5. // The `foo` object just became a circular one:
  6. foo.bar.bar.bar.bar
  7. // → foo
复制代码
  或者,为了展示你对 JavaScript 的无限的热爱之情,你可以当回发烧友,代码如下:
   

JavaScript 最佳实践:帮你提升代码质量

JavaScript 最佳实践:帮你提升代码质量-1-技术控-function,浏览器,window,上下文,控制台

   是的,你可以几乎没完没了(也有可能会等到浏览器崩溃)的展开这个对象。
       2. 好的 use strict 使用习惯

   要严格使用 use strict! 这无非就是在你的代码中加了一行,给你的脚本增加更多的小把戏。
   例如:
  
  1. // This is bad, since you do create a global without having anyone to tell you
  2. (function () {
  3.    a = 42;
  4.    console.log(a);
  5.    // → 42
  6. })();
  7. console.log(a);
  8. // → 42
复制代码
  使用 use strict, 你就可以获取到更多一点的错误信息:
  
  1. (function () {
  2.    "use strict";
  3.    a = 42;
  4.    // Error: Uncaught ReferenceError: a is not defined
  5. })();
复制代码
  你可能想知道为什么可以将 "use strict" 放在封装函数的外面。这的确是可以的,不过这样它就会被应用到全局。这还不是太坏,但是如果有代码是来自于其它的库,或者你要把所有的东西都打包到一个文件里面去的话,这样做就会有影响的。
       3. 严格相等

   这个比较简短。如果你在 JavaScript 中 (像其它的编程语言中那样)使用 == 来比较 a 和 b,可能会发现其运行的方式有点怪: 如果你有一个字符串和一个数字如下,它们会相等 (==):
  
  1. "42" == 42
  2. // → true
复制代码
  对于一些明显的缘故 (例如验证操作), 最好就是使用严格等于(===):
  
  1. function print () {
  2.    // do something
  3. }
  4. print();0
复制代码
  4. 使用 && 和 || 来制造点小把戏

   根据你需要做的事情,你可以使用逻辑操作符来让代码更简短。
   取默认值

  
  1. function print () {
  2.    // do something
  3. }
  4. print();1
复制代码
  不用拿 if 表达式来检查某些东西是不是为真的,你也可以简单地这样做:
  
  1. function print () {
  2.    // do something
  3. }
  4. print();2
复制代码
  1. function print () {
  2.    // do something
  3. }
  4. print();3
复制代码
  如果你需要通过 doSomething(): 来决定返回的结果,这样做更酷:
  
  1. function print () {
  2.    // do something
  3. }
  4. print();4
复制代码
  1. function print () {
  2.    // do something
  3. }
  4. print();5
复制代码
  1. function print () {
  2.    // do something
  3. }
  4. print();6
复制代码
  你可能不会赞同我在这方面的看法,但像我说的这样做其实效果更理想。如果你并不想像这样来对你的代码进行混淆,但其实这就是那些 JavaScript 简化器实际会做的事情。
   如果你来问我,我会说这样做虽然让代码更加简短了,但仍然是可读的。
       5. 对值的类型进行转化

   有几种方法可以根据你的想法来进行转化。最常用的方式有如下这些:
  
  1. function print () {
  2.    // do something
  3. }
  4. print();7
复制代码
  6. 代码风格/风格指南

    在新的项目中要让所有的文件都遵循相同的代码风格。对于现有的项目,就使用现有的代码风格, 除非你就只是决定要变一变它的风格 (提示: 同你的搭档就此进行一下讨论) 。甚至你要创建和记录你自己的代码风格,然后一直去遵循它。
   现有的一些不同的代码风格如下:
   
       
  •   Google JavaScript 风格指南
       
  •   airbnb/javascript
       
  • ... 也还有其它的一些
       
  •    我的风格指南  
       
       额外的福利小提示:

   你应该记住的其它一些重要的 JavaScript 最佳实践就是那些能帮助你对代码进行格式化的工具。下面是其中的一些:
   
       
  •   js-beautify : 美化你的代码
       
  •   UglifyJS(2) : 混淆/最小化你的代码
       
  •   jshint : 检测 JavaScript 代码中的错误或者潜在问题
       
  •   jscs : 可以配置的样式指南检测器
       
    最后一个就是: 不要总是 console.log,要 对你的代码进行调试 。
   祝你编程愉快!



上一篇:SQL in the City – it’s happening virtually, so mark your calendar as ‘busy’ ...
下一篇:[从产品角度学EXCEL 01]-EXCEL是怎样运作的
woniu007007 发表于 2016年12月4日 08:13
这是一个KB的故事,当你在半夜12点的时候穿着黑色的衣服对着镜子用梳子梳下就会看到…头皮…屑!
回复 支持 反对

使用道具 举报

rtooj 发表于 2016年12月4日 09:30
我在尘世间默默无闻,你在菜市场颠倒众生。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表