Hegwin.Me

疏影横斜水清浅,暗香浮动月黄昏。

JavaScript 中的 Observer API

Notes about Observer APIs in JavaScript

最近,我要在网页中需要实现一个功能。它的背景是这样,我们在页面顶部有一个左右滑动的导航条 nav,当用户在往下滚动页面时,我们会给导航条中对应的项目增加一个名为 active 的 class,当这个 active item 没有完全在页面上展示时,我们需要将那个 item 水平滑动到屏幕中间。用户也可以手动点击导航条中的项目,此时我们需要将页面上下滚动到对应的位置。 这里就涉及到两个问...

学习ES2015 Part 4

Learn New Features in ES 2015 Part 4

# Object 新特性 ## Shorthand语法 ES2015有这么一个语法糖,新生成一个Object时,当键名与变量名相同时,可以有一个简略的写法。具体怎么写,看下面的例子。 过去,我们需要这样写: ```js function buildUser(first, last) { var fullName = first + ' ' + last; ...

学习ES2015 Part 3

Learn New Features in ES 2015 Part 3

# Array 新特性 ## Array Destructing 感觉这也是从Ruby或者类似的语言学习过来的方法,在ES5,我们没有办法直接把数组的各个值一次性赋给多个变量,而现在我们可以了,假设我们有这么一个数组: ```js let users = [ 'Hegwin', 'Jason', 'Ken' ]; ``` 如果我们想直接把`users`的三个元素依...

学习ES2015 Part 2

Learn New Features in ES 2015 Part 2

# String ES2015中加入了Template String的概念,当我们想要把变量值拼接到字符串中间时,不再需要不停地的使用`+`了,这也是我觉得可以欢呼的地方。 具体是这样操作的:JS里普通那个的字符串依旧是用单引号或者双引号包围,但是Template String则用反引号包围(感觉在Markdown里打个反引号真要命)。 过去: ``` let ful...

学习ES2015 Part 1

Learn New Features in ES 2015 Part 1

# 变量声明 ## 使用 `let` 声明变量 * 终于不再有`var` hoisting的问题了,可以声明块级的变量了 (欢呼) * 解决 for 循环中中变量泄漏的问题 * 同一block中,let声明的变量可以重新赋值,但再次声明同名的变量时会抛出异常 TypeError ## 使用 `const` 声明变量 * 声明一个read-only的变量,生...

关于Highcharts

Some Notes about Highcharts

关于使用HTML SVG绘制图形,我目前尝试过两个JS库——C3.js 和 Highcharts。二者相比,我个人感觉C3比较难用,需要设定的参数很多:优点是我可以自己控制的东西有很多,但是缺点是开发起来很慢且让人烦躁(所以才会有个 D3.js 来占有它的市场)。最近用了Highcharts,感觉还不错,例子和文档都比较清爽,画图的各种参数也是相当简洁(唔,但是参数并不见得少很多),比 C3...

new Date()在Firefox和Chome下不同效果

Differrent behavior of new Date between Firefox and Chrome

我最近的一个项目需要画图表,使用的JS库是D3js。我遇到一个很神奇的问题,就是在Chrome上能显示出来的点和线,在Firefox下面显示不出来。 初步察看原因,发现是点坐标的计算结果不一样。我们的X轴是时间轴,同样的日期在Chrome下计算的X坐标是正常的坐标,而在Firefox下计算出来的坐标是负值,导致无法在graph上显示出来。 后来仔细察看,发现是`new Date(...

Selenium driver 对 JS Confirm 的处理

How to handle javascript confirm with selennium webdriver

在Web开发中经常会使用JS弹出确认框,在feature测试脚本如何处理这个弹出框呢? page.driver.browser.switch_to.alert.accept # => 点击OK page.driver.browser.switch_to.alert.dismiss #=> 点击 Cancel page.driver.browser.switch_to.a...

jQuery对DOM的基本操作

Manipulate DOM with jQuery

我从两三年前就在项目中用到jQuery了,但一直没有仔细学习过,基本都是网上搜索,然后复制粘贴别人的代码。最近在CodeSchool(后改叫Pluralsight了)稍微系统学习了一下jQuery的选择器,还有DOM操作,感觉还是挺有用的,在这边记个笔记。jQuery提供了种类丰富的选择器:基本选择器,子选择器,类CSS的伪类选择器,都很实用。我也是最近才学到Traversing的概念,它影...