欢迎光临十大正规赌博平台!

十大正规赌博平台个人网站-十大正规赌博平台个人博客-杨照佳

正规博彩十大公司

关注世界十大博彩公司的博客网站

首页 > WEB开发 > JavaScript >

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

发布时间:2016-12-02  编辑:正规博彩十大公司   点击:   

  天天学一些新对象可以让一个理性之人走上稀奇之路。而作为开拓职员,不绝的进修新对象则是我们事变的一部门, 岂论这些新对象是不是来历于起劲的进修履历。

  在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用其它一种艰巨的方法来相识它们。筹备好去进级你的代码吧!

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

 1. 停止对全局浸染域的污染

  声明变量是一件很风趣的工作。偶然辰纵然你不想这样做,但也有也许会界说出全局变量。在现在的赏识器中,全局变量都被存储在 window 工具中。而由于有很多的对象都在谁人内里,以是你有也许把一些默认值都给包围掉了。

  假设你有一个 HTML 文件,内里包括了一个 <script> 标志,而这个标志内含 (可能通过引用一个 JavaScript 文件而加载) 如下内容:

var foo = 42;
console.log(foo);

  这段代码很明明会让节制台输出 42。不外由于代码并不是放到一个函数内里去执行的,因此其执行的上下文就会是全局的谁人。因此,变量就会被附加到 window 工具上。这就意味着 window.foo 的值也会是 42。

  这样是挺伤害的,由于你可以把已经存在的全局变量给包围掉:

function print () {
   // do something
}
print();

  当执行 window.print (可能只是执行 print) 的时辰, 它不会打开打印弹窗,由于我们已经将原生的打印弹窗逻辑给包围掉了。

  办理这个题目的方案相等简朴; 我们必要一个会在界说后当即被挪用到的闭包函数, 如下所示:

// Declare an anonymous function
(function () {
   var foo = 42;
   console.log(window.foo);
   // → undefined
   console.log(foo);
   // → 42
})();
//^ and call it immediately

  可能你也可以选择将 window 以及其余全局的对象(譬喻 document)都作为参数传给谁人函数(这样做也也许对机能会有所晋升):

(function (global, doc) {
  global.setTimeout(function () {
     doc.body.innerHTML = "Hello!";
  }, 1000);
})(window, document);

  因此你得行使闭包函数来停止建设出什么全局的对象来。留意在这里由于要专注于代码自己,以是我不会在后头的代码片断中行使闭包函数。

  提醒: browserify 是其它一种停止建设全局变量的方法。它回收了你在 Node.js 同样会用到的 require 函数的方法。

  趁便说一下, Node.js 会自动将你的文件封装进函数内里。它们看起来先下面这样:

(function (exports, require, module, __filename, __dirname) {
// ...

  因此,假如你以为 require 函数式全局的,好吧,并不是。它无非就是一个函数的参数

  你知道吗?

  由于 window 工具包括了全部的全局变量,又由于它本身也是全局的,因此 window 本身内部也引用了它本身:

window.window.window
// => Window {...}

  这是一位 window 工具是一个轮回引用工具。下面展示了怎样建设这样的一个工具:

// Create an object
var foo = {};
// Point a key value to the object itself
foo.bar = foo;
// The `foo` object just became a circular one:
foo.bar.bar.bar.bar
// → foo

  可能,为了展示你对 JavaScript 的无穷的热爱之情,你可以当回发热友,代码如下:

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

  是的,你可以险些没完没了(也有也许会比及赏识器瓦解)的展开这个工具。

 2. 好的 use strict 行使风俗

  要严酷行使 use strict! 这无非就是在你的代码中加了一行,给你的剧本增进更多的小花招。

  譬喻:

// This is bad, since you do create a global without having anyone to tell you
(function () {
   a = 42;
   console.log(a);
   // → 42
})();
console.log(a);
// → 42

  行使 use strict, 你就可以获取到更多一点的错误信息:

(function () {
   "use strict";
   a = 42;
   // Error: Uncaught ReferenceError: a is not defined
})();

  你也许想知道为什么可以将 "use strict" 放在封装函数的表面。这简直是可以的,不外这样它就会被应用到全局。这还不是太坏,可是假若有代码是来自于其余的库,可能你要把全部的对象都打包到一个文件内里去的话,这样做就会有影响的。

 3. 严酷相称

  这个较量简短。假如你在 JavaScript 中 (像其余的编程说话中那样)行使 == 来较量 a 和 b,也许会发明其运行的方法有点怪: 假如你有一个字符串和一个数字如下,它们会相称 (==):

"42" == 42
// → true

  对付一些明明的缘故 (譬喻验证操纵), 最好就是行使严酷便是(===):

"42" === 42
// → false

 4. 行使 && 和 || 来制造点小花招

  根你必要做的工作,你可以行使逻辑操纵符来让代码更简短。

  取默认值

"" || "foo"
// → "foo"
undefined || 42
// → 42
// Note that if you want to handle 0 there, you need
// to check if a number was provided:
var a = 0;
a || 42
// → 42
// This is a ternary operator—works like an inline if-else statement
var b = typeof a === "number" ? a : 42;
// → 0

  不消拿 if 表达式来搜查某些对象是不是为真的,你也可以简朴地这样做:

expr && doSomething();

// Instead of:
if (expr) {
   doSomething();
}

  假如你必要通过 doSomething(): 来抉择返回的功效,这样做更酷:

function doSomething () {
   return { foo: "bar" };
}
var expr = true;
var res = expr && doSomething();
res && console.log(res);
// → { foo: "bar" }

  你也许不会拥护我在这方面的观点,但像我说的这样做着实结果更抱负。假如你并不想像这样来对你的代码举办夹杂,但其拭魅这就是那些 JavaScript 简化器现实会做的工作。

  假如你来问我,我会嗣魅这样做固然让代码越发简短了,但如故是可读的。

 5. 对值的范例举办转化

  有几种要领可以按照你的设法来举办转化。最常用的方法有如下这些:

// From anything to a number

var foo = "42";
var myNumber = +foo; // shortcut for Number(foo)
// → 42

// Tip: you can convert it directly into a negative number
var negativeFoo = -foo; // or -Number(foo)
// → -42

// From object to array
// Tip: `arguments` is an object and in general you want to use it as array
var args = { 0: "foo", 1: "bar", length: 2 };
Array.prototype.slice.call(args)
// → [ 'foo', 'bar' ]

// Anything to boolean
/// Non non p is a boolean p
var t = 1;
var f = 0;
!!t
// → true
!!f
// → false

/// And non-p is a boolean non-p
!t
// → false
!f
// → true

// Anything to string
var foo = 42;
"" + foo // shortcut for String(foo)
// → "42"

foo = { hello: "world" };
JSON.stringify(foo);
// → '{ "hello":"world" }'

JSON.stringify(foo, null, 4); // beautify the things
// →
// '{
//    "hello": "world"
// }'

// Note you cannot JSON.stringify circular structures
JSON.stringify(window);
//  TypeError: JSON.stringify cannot serialize cyclic structures.

 6. 代码气魄威风凛凛/气魄威风凛凛指南

  在新的项目中要让全部的文件都遵循沟通的代码气魄威风凛凛。对付现有的项目,就行使现有的代码气魄威风凛凛, 除非你就只是抉择要变一变它的气魄威风凛凛(提醒: 同你的同伴就此举办一下接头)。乃至你要建设和记录你本身的代码气魄沤背同然后一向去遵循它。

  现有的一些差异的代码气魄威风凛凛如下:

 特另外福利小提醒:

  你应该记着的其余一些重要的 JavaScript 最佳实践就是那些能辅佐你对代码举办名目化的器材。下面是个中的一些:

  • js-beautify: 美化你的代码

  • UglifyJS(2): 夹杂/最小化你的代码

  • jshint: 检测 JavaScript 代码中的错误可能隐藏题目

  • jscs: 可以设置的样式指南检测器

  最后一个就是: 不要老是 console.log,要对你的代码举办调试

  祝你编程舒畅!

  原文地点:https://www.codementor.io/johnnyb/tutorials/javascript-best-practices-du107mvud

本文地址:/web/javascript/14381.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1