编写现代 JavaScript 代码

是不是还记得以前 Javascript 是光标悬浮时改变页面元素的一门语言?这样的日子早就已经过去了,每一种语言都在随着时间推移而发展,我们使用他们的方式也是如此,在不断的发展。看一下你一两年前写的代码:你觉得惭愧吗?如果是,那么这篇文章应该很适合你 🙂。

我将在这篇文章列出一些最佳实践,使你的 JavaScript 代码更容易编写、阅读和维护。

使用可以格式化代码的检查工具(linter)

我给您的第一个建议是使用代码检查工具,他可以帮助你检查在不同文件是否遵循统一的规则,尤其是当不同开发人员在协同开发同一个项目时:缩进,括号中的空格,将==替换为=== …

但更重要的是,尽可能让你检查工具自动修复代码。 ESLint 就做得很好(使用 –fix 选项),而且它可以与所有主流 IDE 完美集成,以便在保存时自动修复文件。

你也可以使用 Prettier,不过这款工具更专注于格式化,而不是静态检查,但处理后的结果基本相同 😉 。 继续阅读

2017年成为全栈开发工程师的权威指南

根据 2016年 Stack Overflow 开发者调查 显示,全栈开发工程师是当今最受欢迎的开发者职业。 毫无疑问,有许多在线和现场教学课程可以帮助你成为全栈开发工程师,甚至帮助这些新开发人员找到高薪编程开发工作。

国内外有很流行的在线课程,比如: LyndaUdacityCourseraThinkful全栈开发工程师远程就业班带你轻松搞定node.js从前端小工到 BAT 中高级工程师的必备技能Vue2.0全栈实战项目WEB前端开发零基础课程React 大神进阶 等等。

除了这些在线课程,还有许多 现场教学课程 正在教人们成为 Web 开发人员所需的技能。

在这篇文章中,我不会讨论哪些在线或现场教学课程比较好。相反,我将提供一份我认为当今要成为一个全栈开发工程师所需最重要技能的权威指南,如果你以前从未编写过代码的话,或许可以获得一份好工作。我会从三个方面列出成为一个全栈开发工程师所需的最重要技能: 继续阅读

JavaScript ES2015 中对象继承的模式

随着期待已久的ES2015(以前称为ES6)到来,JavaScript 配备了专门用于定义 类(classes) 的语法。在这篇文章中,我将探索如何利用类语法用较小的部分来组成一个类。

将层次结构的深度保持在最低限度对于保持代码整洁很重要。这有助于你了解如何巧妙的分割类。对于一个大的代码库,一个选择是用较小的部分创建类;再组合成一个大类。这也是避免重复代码的常见策略。

想像一下,我们正在构建一个游戏,玩家生活在动物世界中。有些是朋友,其他的是敌人(像狗,可能会说所有的猫都是敌人)。我们可以创建一个 HostileAnimal 类,它扩展了类 Animal,作为 Cat 的基类。在某些时候,我们决定添加机器人来伤害人类。我们首先做的是创建 Robot 类。我们现在有两个类具有相似的属性。例如,HostileAnimalRobot 都有 attack() (攻击)方法。

如果我们可以以某种方式在一个单独的类或对象中定义一个称为 Hostile 类来表示敌对, 那么我们可以让 CatRobot 可以重复使用这个类。我们可以以各种方式做到这一点。

多重继承 是传统的 OOP 语言支持的一项功能。顾名思义,它给我们带来一种能力:创建一个继承自多个基类的类。看看 Cat 类如何在以下 Python 代码中扩展多个基类: 继续阅读

如何使用 Vue 2 构建简单的单页应用程序(第 2 部分)

本教程的第1部分中讨论了构建单页应用程序的基础知识,页面链接由 Vue 自动完成。 在本教程中,您将学习如何:

  • 传递路径参数
  • 使用路由保护,设置未经认证的用户可访问路由。

从上一个教程结束开始,你可以打开 GitHub 仓库,克隆并继续完成应用程序。 继续阅读

如何使用 Vue 2 构建简单的单页应用程序(第 1 部分)

今天,我们将学习如何使用 Vue 构建单页应用程序。

Vue.js 是一个构建交互式Web界面的库。 它为 数据反应式(data-reactive) 组件提供了一个简单而灵活的API。

为了本教程的目的,术语 Vue 指的是 Vue 2.X 版本,除非另有说明。

我们将构建什么

让我们快速了解一下我们正在构建的内容,如图: 继续阅读

JavaScript 浮点数运算的精度问题

问题描述

在 JavaScript 中整数和浮点数都属于 Number 数据类型,所有数字都是以 64 位浮点数形式储存,即便整数也是如此。 所以我们在打印 1.00 这样的浮点数的结果是 1 而非 1.00 。在一些特殊的数值表示中,例如金额,这样看上去有点变扭,但是至少值是正确了。然而要命的是,当浮点数做数学运算的时候,你经常会发现一些问题,举几个例子: 继续阅读

实例分析 JavaScript 作用域

了解作用域对于编写代码至关重要,作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的可见性。对于JavaScript中作用域我们可能已经了解了很多。建议看看 深入理解JavaScript中的作用域和上下文JavaScript 核心概念之作用域和闭包。今天从其他方面介绍一下 JavaScript 中作用域,以帮助我们更好的完整的了解 JavaScript 作用域。

作用域模型

作用域有两种常见的模型:词法作用域(Lexical Scope,通常也叫做 静态作用域) 和 动态作用域(Dynamic Scope)。其中词法作用域更常见,被 JavaScript 等大多数语言采用。(愚人码头注:这里避开了witheval特殊语句,不再做介绍)。
继续阅读

深入理解JavaScript中的作用域和上下文

在本教程中,我们将深入学习 JavaScript 中作用域(Scope)的一切。 所以,来吧。

介绍

JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,我会尽我所能用最简单的方式来解释作用域。理解作用域将使你的代码脱颖而出,减少错误,并帮助您使用它强大的设计模式。

什么是作用域(Scope)?

作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的可见性。

为什么说作用域是最小访问原则?

那么,为什么要限制变量的可见性呢,为什么你的变量不是在代码的任何地方都可用呢?一个优点是作用域为您的代码提供了一定程度的安全性。计算机安全的一个常见原则是用户应该一次只能访问他们需要的东西。 继续阅读

JavaScript 核心概念之作用域和闭包

相信大家已经阅读了很多关于作用域和闭包文章,我也一样。作用域和闭包是 JavaScript 中的关键概念之一。当我阅读了《高性能的JavaScript》这本书后,我才完全理解这两个概念。所以今天强烈推荐这本书中的解释,并与其他开发人员分享。

作用域

下面会提到几个概念:

  • 函数对象的[[scope]]属性
  • Scope Chain(作用域链)
  • Execution Context(运行期上下文)
  • Activation Object(激活对象)

函数对象的[[scope]]属性

JavaScript 中每个函数都都表示为一个函数对象(函数实例),既然是对象,就有相关的属性和方法。除了正常的属性,函数对象具有仅供 JavaScript 引擎内部使用,但不能通过代码访问的一系列内部属性。这些属性中,其中一个就是 [[scope]] 属性。 继续阅读

ES6 新特性范例大全

ECMAScript6(ECMAScript 2015 ,ES5,ES2016)技术已经在前端圈子很流行了,他给前端开发人员带来了很多惊喜,提供的语法糖使复杂的操作变得简单。

本文没有详细描述这些新特性,因为网上都已经有很多相关的介绍了。主要针对ES6 新特性收集了相关范例代码,他可以让你快速了解这个新的javascript规范。 继续阅读