HTML5 Notification 介绍

Html5 Notification

浏览器的提醒功能越来越多的被使用,只要用户使用浏览器访问网站就会自动收到基于 HTML 5 的 Notification.

风车中很早就使用了这个技术来作为我们的在线消息提醒,在不断的完善和改进后,希望可以把 HTML 5 Notification 做一个总结介绍。

浏览器支持

目前支持 HTML 5 Notification 的常用浏览器有 Safari 6+,FireFox 23+,Chrome,IE 9.0+ 。不同的浏览器使用的方法不同。

另外要说的一点,关于 IE 对 HTML 5 Notification 的支持不完美,个人不推荐使用。真爱生命,远离 IE

HTML 5 Notification 使用步骤

  • 判定用户浏览器是否支持
  • 获取权限 (用户可以在浏览器中设置是否启用 HTML 5 Notification)
  • 设置权限 (用户如果第一次使用该网站,需要让用户设置 HTML 5 Notification 为开启,当然用户也可以选择拒绝)
  • 创建 Notification

实现(CoffeeScript)

代码源自于风车

首先判定用户浏览器是否支持 HTML 5 Notification
hasSupport: ->
  window.Notification? or window.webkitNotifications? or (window.external && window.external.msIsSiteMode?() isnt undefined)

......

Read more →

为什么使用 Rails Observer

在 Rails 4 中,ObserverActionController::Caching::Sweeper 被剥离掉。但是在我们的项目 Fengche.co 中却非常重的使用的它们。所以在这里分享下,我们是如何使用的。

Rails 框架中有两种 Observers:

  • Active Record Observer
  • Action Controller Sweeper

Active Record Observer 和 Callbacks

刚开始接触 Observer 的时候,在 Model 中我很难分清什么时候使用 Observer 什么时候使用 Callback。接下来看看一段真实的代码。

特定情况是否适用 Callback

在 Fengche.co 中有这样一个用例,当一个 Comment 被创建的时候,我们需要让用户的使用界面与网站数据保持同步更新,这时会通过 Pusher 来及时为用户更新数据。所以很自然地我们会在 Comment 里添加一个 after_create 的 callback。

......

Read more →

从测试中找到更好的面向对象设计(四)

继续前一篇文章,我们实现了 EmailRepliesController ,但是我们抽取了一个新的类 EmailHandler。接下来,我们来完成这个新的类。

#handle-test

和刚才的思路一样,我们不在乎它是如何做 validation 的,我们只需要知道有效的时候会创建 comment,无效的时候不会创建 comment。

......

Read more →

从测试中找到更好的面向对象设计(三)

到目前为止我们还没有写任何一行代码,但是 test 让我们望而却步无法继续。很多时候大家讨厌写 test ,或者放弃决定不做 test 都是从此时开始。一开始说过,测试将会反映出我们的设计模式,那么此时我们从测试中可以发现些什么呢?

Test reflect the design.

我们严格按照业务逻辑写完的 specs ,在这里每一个 context 都意味着在我们的实现代码中会产生一个 if statement ,每一个嵌套的 context 也就意味着 if statement 的嵌套。

每一个在描述中提到的 object 就将是我们实现代码中需要与之交互作用的。

所以经过我们按照我们目前想像的业务逻辑可以画出这样一张图:

test-reflect-design

在这里我们把所有的业务都交给 EmailRepliesController#create 来做,所以就会有这样的结果。具体的问题大致如下:

  • Structural Coupling!
  • Controller 做了太多太多的事情。
  • Controller 知道了太多太多的细节。

发现问题,解决问题。越早的发现问题,我们就会越少的面临难题。在我们还没有写任何一行实现代码的时候就开始重构(Structural Refactoring),或者我更愿意称之为重新设计(Re-Design)。

......

Read more →

从测试中找到更好的面向对象设计(二)

Working Flow of the new feature of pragmatic.ly

working-flow

  • 在 Pragmatic.ly 项目中当有一个 Comment 被创建后,我们的 Web Server 会告诉 SendCloud (第三方 Email 服务,类似于 Mailgun) 给我们的用户发送提醒邮件。
  • 当用户回复这封提醒邮件的时候,首先这封邮件会被 SendCloud parse 后,发送一个 post request 到 Pragmatic.ly 设置好的 Callback url.
  • Pragmatic.ly 接收到这个 Pull request 后会做一些 verification 和 validation ,然后在 Web Server 上创建一个 Comment records 。

我们 TDD 开发主要是在第三步,当 Web Server 接收到 pull request 后的业务逻辑。那么当一个 pull request 被发送到 Web Server 后,我们需要什么样的业务逻辑呢?

1. Verification 首先我们需要判定,这个 pull request 是来自与 SendCloud 。

......

Read more →