05月29, 2016

【译】用 JavaScript 实现单步调试

原文:http://www.zcfy.cc/article/363

在我的上一篇文章中,我介绍了 Unwinder,它实现了 JavaScript 的连续求值(continuations)。连续求值和单步调试有什么关系呢?Unwinder 使用连续求值实现了一个调试器,它可以保持状态,在任何时候暂停代码的执行。

这篇文章本来可以用“实现 JavaScript 的连续求值”来作为标题,但是比起了解“连续求值”,更多人知道的是“单步调试工具”。此外,实现一个单步调试工具,是连续求值的一个非常 cool 的用途。

如果你还没有读过前一篇文章 (这篇文章深入解释了什么是连续求值,并使大量用了单步调试来详细描述它),这里有一个活生生的单步调试工具:

你可以点击上面的图片链接,跳转到一个线上demo,点击任何一行代码设置一个断点

阅读全文 »

05月28, 2016

别人家的面试题:自然数拆分求最大乘积

原文:https://www.h5jun.com/post/integer-break.html

今天是部门活动,去了石林峡,爬山累成狗。不过,在这么好的天气里,外出走走实在是一件有益身心健康的事情。爬山回来之后,身体虽疲惫,思路竟格外敏捷,正好将这篇文章一气呵成。

自然数拆分(Integer Break

给定一个自然数 n (n ≥ 2),将它拆分成不少于两个自然数之和,对这些拆分后的自然数求积,要求算出最大的乘积。

例如:

  • n = 2,得到 1(2 = 1 + 1)
  • n = 10,得到 36(10 = 3 + 3 + 4)

解题思路

这道题,咋一看之下,比前两期的题目似乎要难一些。因为对于一个较大的自然数,存在很多种拆分方法,怎么找到乘积最大的拆分方法呢?

阅读全文 »

05月27, 2016

【译】六个漂亮的 ES6 技巧

原文:http://www.zcfy.cc/article/346

在这篇文章里,我将演示 6 种 ES6 新特性的使用技巧。在每个段落的末尾,我会指出它们在我的书 Exploring ES6 中的出处(你可以在线免费阅读这本书)。

通过参数默认值强制要求传参

ES6 指定默认参数在它们被实际使用的时候才会被执行,这个特性让我们可以强制要求传参:

/**
* Called if a parameter is missing and
* the default value is evaluated.
*/
function mandatory() {
    throw new Error("Missing parameter");
}
function foo(mustBeProvided = mandatory()) {
    return mustBeProvided;
}

函数调用 mandatory() 只有在参数 mustBeProvided 缺失的时候才会被执行。

阅读全文 »

05月26, 2016

别人家的面试题:一个整数是否是“4”的N次幂

原文:https://www.h5jun.com/post/power-of-four.html

这是 leetcode.com 的第二篇。与上一篇一样,我们讨论一道相对简单的问题,因为学习总讲究循序渐进。而且,就算是简单的问题,追求算法的极致的话,其中也是有大学问的。

“4”的整数次幂

给定一个32位有符号整数(32 bit signed integer),写一个函数,检查这个整数是否是“4”的N次幂,这里的N是非负整数。

例如:

  • 给定 num = 16,返回 true,因为 16 = 42
  • 给定 num = 5,返回 flase

附加条件: 你能够不用循环和递归吗?

阅读全文 »

05月26, 2016

【译】别责怪框架:我使用 AngularJS 和 ReactJS 的经验

原文:http://www.zcfy.cc/article/327

在过去的几年里,网站进化成了复杂的网页应用。曾经的互联网只涉及到简单的商业信息展现,而如今,看看 Facebook、Slack、Spotify 以及 Netflix,互联网正在改变你的社交和生活方式。随着互联网的发展,前端开发这个行业达到了全新的高度,并得到了前所未有的重视。

就像大多数前端开发者那样,我们的技术栈曾经由 HTML 和 jQuery 构成。我们使用 AJAX 请求从后端获取数据,使用 JavaScript 渲染新的 UI 元素然后将它插入到 DOM 中去,用户交互通过事件绑定和回调函数来实现。不要误解我,我不反对上面那种方式,它们今天依然适合于大多数 Web 应用。

然而,当一个应用的复杂度大幅度增加,一堆问题开始出现得比预期的更频繁:你可能数据更新了,但漏掉了更新某一处展现,你通过 Ajax 获取和更新了内容,但没有绑定事件,还有另外一些问题,把这些全部列出来会是个很长的清单。这些问题让你的代码逐渐变得不可维护,尤其是在多人协作团队开发的项目中。这时候,你就需要使用前端框架来为你解决多人协作开发的种种问题了。

write_code

阅读全文 »

05月25, 2016

别人家的面试题:统计“1”的个数

原文:https://www.h5jun.com/post/counting-bits.html

小胡子哥 @Barret李靖 给我推荐了一个写算法刷题的地方 leetcode.com,没有 ACM 那么难,但题目很有趣。而且据说这些题目都来源于一些公司的面试题。好吧,解解别人公司的面试题其实很好玩,既能整理思路锻炼能力,又不用担心漏题 ╮(╯▽╰)╭。

长话短说,让我们来看一道题

统计“1”的个数

给定一个非负整数 num,对于任意 i,0 ≤ i ≤ num,计算 i 的值对应的二进制数中 “1” 的个数,将这些结果返回为一个数组。

例如:

当 num = 5 时,返回值为 [0,1,1,2,1,2]。

/**
 * @param {number} num
 * @return {number[]}
 */
var countBits = function(num) {
    //在此处实现代码
};

阅读全文 »

05月25, 2016

【译】开发无障碍的Web组件 - 简介

原文:http://www.zcfy.cc/article/320

这篇文章的审校工作是由Mallory van Achterberg完成的。谢谢所有SitePointer的审校者,因为你们,SitePointer才能提供如此优质的内容。

上一篇文章中,我演示了如何创建一个有多选功能的Web组件。读者在评论区域提到了Web组件无障碍这个重要的话题。毋庸置疑地,如今Web无障碍非常重要。所以,让我们来看看无障碍的含义,以及如何提高Web组件的可访问性(通过一个真实的例子)。

本文中的代码示例将基于上一篇文章中的代码。你可以从GitHub仓库复制一份,也可以查看本文结尾的例子

阅读全文 »

05月24, 2016

【译】寻找头绪:编写可维护的 JavaScript

原文:http://www.zcfy.cc/article/312

几乎每个程序员都有接手维护别人遗留项目的经历。或者,有可能一个老项目某一天又被重新启动。通常情况下,接手老项目都会让人恨不得抛弃掉整个代码库从头开始。老代码凌乱、文档缺失、需要研究很多天才能完全搞明白它。然而,通过合适的规划、分解和好的工作流,项目代码可以变得干净、有组织和可扩展。

我曾经接手清理许多项目的代码,让我不得不重头开始的项目真心不多,不过我最近就遇到了一个。我从中学到了很多关于 JavaScript 代码组织的内容,以及最重要的是冷静,不要为你的前任抓狂。在这篇文章里,我想要让你知道我是怎么一步步处理项目代码的,告诉你我的经验。

阅读全文 »

05月23, 2016

【译】在 ES6中 改良的5个 JavaScript “缺陷”

原文:http://www.zcfy.cc/article/315

ECMAScript 6 (ES6) 新特性可以分为新增语法(例如:class),增强 JavaScript 功能(例如:import),以及改良 JS “缺陷” (例如:let关键字)。大部分博客将这三类新特性混在一起介绍,往往让 ES6 新手晕菜。因此我决定写下这篇文章仅仅介绍改良 JS “缺陷”的这部分特性。

我希望通过这篇文章介绍,能让你明白只要使用一小部分 ES6 新特新,例如 let、箭头函数等,你就能获得巨大的回报。

好,让我们开始吧。

阅读全文 »