Silent Reverie

Creating memories with the awesome stuff I've learnt.

利用Promise消除“先发起请求后收到响应”问题带来的副作用

| Comments

问题分析

考虑这种应用场景:用户与页面进行交互,切换不同的查询条件,实时发起异步请求,待响应返回后,将响应数据渲染到页面指定区域。大部分情况下,前一次操作发起的请求都会比后一次操作发起的请求先响应。先响应的先渲染,后响应的将先渲染的结果覆盖。于是我们可以得到查询条件与响应数据显示一致的结果。这是我们所期望的结果,也是我们眼中的“正常”流程。如果我们认真对待它的话,是不应该忽略“异常”流程的。由于请求是异步的,前一次发起的请求不会阻塞后一次请求的发起,顺理成章地,前一次请求也未必会比后一次请求先返回。于是导致的直接后果就是后一次请求响应的数据先渲染,待前一次请求响应时,直接覆盖了后一次请求的渲染结果。这可不是我们所期望看到的。

“Eval” Is Not Evil

| Comments

一般我们代码几乎不会使用到eval, 但凡需要使用到eval的地方,都会代而使用构造器Function生成函数实例的方式,因为eval is evileval可以在全局作域下执行代码,也可以在局部作用域(间接调用eval)下执行代码。而使用构造器Function生成函数实例的方式,可以确保我们的代码是在全局作用域下执行。

Scoped Reality

| Comments

有人叫她“熟食铺子”,因为只有熟食店会把那许多颜色暖热的肉公开陈列; 又有人叫她“真理”,因为据说“真理是赤裸裸的”; 而鲍小姐并未一丝不挂,所以他们修正为“局部的真理”。                          《围城》 — 钱钟书

使用jQuery实现简单的自定义事件功能

| Comments

众所周知,页面元素的交互离不开javascript的事件模型,DOM元素对事件有原生的支持。而事件并不是javascript语言本身的固有功能,它是一种模式,通常被叫做发布/订阅(publish/subscribe)模式。这种模式可以很好地令代码解耦,寥寥数十行的javascript原生代码就可以实现简单的事件模型,但要实现复杂又易用的事件模型并不是件简单的事。而如果项目使用jQuery类库的话,我们可以在它实现的事件模型基础上做一定的封装,实现简单的自定义事件功能。

简单的分页折叠逻辑实现

| Comments

列表数据量过多时,常见有以下两种呈现方式:

  • 将数据列表分页呈现
  • 采用瀑布流形式加载数据

本文单讲前者,即以分页方式呈现时分页折叠逻辑实现。

以往遇到需要分页的需求时,我一般采用项目中已经写好的公用组件直接用,或者利用第三方插件。观察这类代码的实现,有一个共同点:分页折叠逻辑和分页标签渲染是揉合在一块执行的。最近自己尝试着写了一个分页折叠逻辑实现,我把这部分逻辑从分页标签渲染中抽取出来了——我先处理分页折叠逻辑、再进而渲染分页标签。这么做有个好处:分页折叠逻辑和分页渲染处理实现解耦、职责区分,分页折叠逻辑代码的更换不会影响随后的渲染。

由Underscore与Lodash的差异引发的思考

| Comments

自打接触Underscore以来就对其爱不释手,尔后又了解到Lodash。这两个类库为我们提供了一系列相当不错的跟函数式编程相关的方法。Underscore以API实现简洁著称。Lodash作为Underscore的后继者,除了对Underscore现有API功能使用上进行扩充外,更是添加了不少令人难忘的API,在性能上也更为出彩,而且还能根据需要构建自己的子集方法。相较而言,我更亲睐于Lodash,而且成了日常项目开发的标配。

目前Lodash的最新版本是v2.4.1,功能上可以说完全是Underscore的超集。只要Underscore添加了啥新功能时,Lodash都会及时覆盖更新,以维护它一如既往超集的地位。然而,当Underscore更新到v1.6.0时,这个版本添加了一个很棒的功能,其为方法_.partial添加了占位符参数的支持(如果没猜错的话,这个特性应该是从functional.js中移植过来了)。自然地,希望Lodash也能很快地对_.partial做增强处理。可是,四个月过去了,Lodash似乎处于冬眠状态,一点都不见有动静。于是乎,到目前为止,Lodash的功能不足以完全覆盖Underscore了,于是也就有了这篇文章。

浅尝ECMAScript 6

| Comments

现在ECMAScript 6草案制定在不断地推进,浏览器们也在跟进实现,了解ES6的提供的诸多特性是势在必行的事了。

有关浏览器们对ECMAScript 6草案的实现情况可参阅这里

有关ES6的语言特性可参阅这里

目前对ES6实现较为充分的环境有Google Traceur CompilerFirefox Nightly

有关traceur compiler的环境配置如下:

1
2
3
4
5
6
7
8
<script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"></script>
<script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script>
<script>
traceur.options.experimental = true;
</script>
<script>
  // blablabla...
</script>

Sublime Text Snippets实用技巧二则

| Comments

由于Sublime Text Snippets功能设计的强大和灵活性(TAB跳转、多编辑点多选区支持、正则匹配替换等),我们可以很方便地将它应用到各种能用上它的场合。

关于Sublime Text Snippets的基本介绍可参见文章拥抱Sublime Text Snippets以及该文章给出的参考文档。

下面列举使用snippet的实用技巧,参详这两例子后,大可举一反三而为之。