React+Redux 组合使用之感受

最近完成了一个使用 React+Redux 组合的项目,以前仅仅是接触了解以及学习,并未正儿八经地使用过,因此这一次可以说是第一次完整地再一个项目当中使用。因而对于认识之浅显请轻拍。

从架构和层次的层面,这个组合给我最好的感受是干净利落的解耦。有不少 JavaScript 框架尝试解决解耦问题,但是到了落实的层面上很容易出现分层分模块不容易严格控制,缺少清晰标准等问题。但是 React+Redux 的组合没有这个问题,我们把应用中 JavaScript 的部分分层为 action、client、config、constant、reducer、store、util 和 view 几个部分,其中 view 又进一步划分 [……]阅读全文

一些前端框架的比较(下)——Ember.js 和 React

JavaScript framworks

这是前端框架比较和吐槽的第二篇。

Ember.js

Ember.js 的 extend 的写法很类似于 JQuery 或者是 Backbone.js,创建 Application,然后在它下面创建相应的 Model(Object)、Controller、Router、View 和 Template,这些都是非常类似的。但是它更为先进的地方在于,一些重复的样板代码,比如给 template 注入上下文并渲染,如果命名按照 CoC 的原则正确完成的话,都由框架自动完成,这就省去不少体力活。CoC 还体现在 URL mapping 上面,比如”/books/book_id” 配置在 books.index 的 Router 里,Contro

[……]阅读全文

一些前端框架的比较(上)——GWT、AngularJS 和 Backbone.js

JavaScript framworks

和一些前端框架打过交道,想起来这也是技术选型中经常面对的内容。我把我的经验、思考、感受,甚至是吐槽,记录在这里,有些零散,并且更多的是个人的感悟。而且由于技术所限,可能部分内容不够深入,或者不甚客观。当然,网上有很多分析对比,视角可能更为全面和系统。如果你在技术选型,或者在考虑要学习使用哪一款 MVC/MVP/MVVM 框架的时候,此文能够给你有价值的信息,就更棒了。如果你觉得我哪些部分说得不正确,或者需要补充,也烦请告知。

需要预先说明的是,这篇文章不是教程,因此如果你对其中某一框架知之甚少,可能需要先去简单学习了解以后才能和我产生共鸣,或者产生反驳的冲动。

以下是第一部分,先谈谈 GWT、An

[……]阅读全文

借助 AngularJS 写优雅的代码

AngularJS

接触 AngularJS 还真有点碰巧,在用 JQuery 写数据绑定的时候,我被数据对象和 DOM 之间的同步整烦了,要写一大堆方法绑定和取值/设值的代码逻辑,丑得要死。简单说来,就是:

  1. 数据对象发生变更以后,要及时更新 DOM 树;
  2. 用户操作改变 DOM 树以后,要回头更新数据对象。

这个问题还是举例来说清楚一些,比如我定义了这样一个 queryObj:

{name: "sally", price: 30}

现在有这样的 DOM 对象:

<input type="text" value="sally" />
<

[……]阅读全文

GWT 初体验

GWT

最近体验了一下 GWT(Google Web Toolkit),其实这个技术老早就有了,写 Java 代码,代码很像 AWT 或者 Swing,但是最后编译成一个 war 包,也就是说,没有啰嗦的 JavaScript、HTML 和模板语言,Java 从前到后通吃,常用的模块都被封装成组件了。虽说写起来代码还挺啰嗦的(写法上面居然不支持链式调用,这确实让我看不懂),而且也没有传统 Web 开发方式来得直观,但也算一种很有意思的开发方式,值得体验一下。网上有足够多的教程,要系统地学习,官方文档是最好的材料,非常详尽。而我的方式,则更具个人风格一点,比较+吐槽,这可不是教程。

工程结构

我是用 Eclipse+Goo

[……]阅读全文

Lombok 介绍

Lombok最初我是在公司内部的 broadcast 上面听到有 principal 介绍到它的,和 AspectJ 归在一起。看了几个例子之后觉得有点意思,就去 Lombok 的官网上扒了一下。我们已经知道向 AspectJ、CGLib 等等都可以做到对已有 Java 代码在字节码层级的改变,无论是编译时期静态织入还是运行时期动态代理,对于我们使用 AOP 来减少那些重复性编码的劳动、增加切面性质的逻辑颇有帮助。这里有几个概念:

  • 首先是 AOP,我在这里不啰嗦,网上有的是这样的文章。
  • 其次,如果你还没有接触过 AspectJ,那么在 Lombok 之前,AspectJ 是值得推荐了解的。和 Lombok 相比,AspectJ 更强大,有它自己的

[……]阅读全文

JavaScript 3D 图表

在说 3D 图表以前,首先要明确两个概念,一个是数据的维度,一个是呈现数据载体的维度。对于数据的维度,一维的数据呈现,但是呈现的载体是二维的平面图,比如饼图:

image

已经能够很清晰地观察到数据的分布情况。数据如果增加一个维度,变成二维,呈现载体依然是二维的平面图:

image

数据表达依然是清晰的。但是,倘若再增加一维,这个时候就面临了两个问题:

  1. 数据的维度增加,复杂性也增大了;
  2. 计算机发展到现在,绝大多数情况下数据载体依然是二维的平面图,如何展示三维的数据呢?

这两个问题中,第一个问题从本质上说,无法解决。数据的维度越大,理解起来理所当然地,也越来越困难。

但是第二个问题,我们至少有两种解决办法。一种

[……]阅读全文

Memcached 调优

cache项目中有一个对实时响应性比较高的服务,引入了 Memcached 以减少延迟和减少数据库压力。但是期间遇到了一些问题,这里记录一些调优细节。 

客户端选择

  • 最开始我使用的是 Memcached Java Client,但是最后放弃了,放弃原因包括:
    • 有时会出现的 “No Thread For Socket” 异常,我记录在这里
    • 它不支持 NOREPLY 模式(在这种模式下,更新缓存的 set 操作可以不需要 Memcached 服务端响应,这使得 set 操作非常非常快)。
  • 现在我使用的是 XMemcached

统计信息

可以通过 nc 命令向 Memcached 服务端发送消息来获取统计信息,例如:

echo "

[……]阅读全文

Issue record: “No thread for socket” about Memcached

MemcachedWe own a service supplying not-real-time data to the downstream clients. In order to reduce the average latency and the pressure on database, Memcached was imported as the cluster center cache, and our service consumed it. I encountered an issue when Memcached was firstly deployed on production envi

[……]阅读全文

用 JavaScript 截图

canvas 使用 JavaScript 截图,这里我要推荐两款开源组件:一个是 Canvas2Image,它可以将 Canvas 绘图编程 PNG/JPEG/BMP 的图像;但是光有它还不够,我们需要给任意 DOM(至少是绝大部分)截图,这就需要 html2canvas,它可以将 DOM 对象转换成一个 canvas 对象。两者的功能结合起来,就可以把页面上的 DOM 截图成 PNG 或者 JPEG 图像了,很酷。

Canvas2Image

它的原理是利用了 HTML5 的 canvas 对象提供了 toDataURL() 的 API:

var strDataURI = oCanvas.toDataURL();  
// returns "data:ima

[……]阅读全文

JQuery 表格插件介绍:Flexigrid 和 DataTables

image JQuery 的表格插件有很多。FlexigridDataTables 是我最近使用的,并且功能比较强大,在这里介绍一下。如果你在寻找前端绘制表格的插件,可以考虑它们。

Flexigrid

官方 Flexigrid 的特性展示:

  • 列宽度可拖拽调整
  • 高度和宽度可拖拽调整
  • 列头可排序
  • 主题支持
  • 支持 XML/JSON 格式的 Ajax 数据源
  • 支持分页
  • 可以显示/隐藏列
  • 表格搜索功能
  • JavaScript API 支持

要得到这样功能丰富、美观的表格:

image

只需要这样的代码:

$("#flex1").flexigrid({
	url: 'post2.php',
	dataType: 'json',
	colMo

[……]阅读全文

Flot 介绍

image 最近在项目里面要用到 JavaScript 来绘制图表,JQuery 的插件 Flot 是一个不错的选择。和我之前介绍过的 D3 不同,它的唯一目的就是用来绘制曲线图的,即便是它的不同插件的功能,也基本上都在这个范畴之内。

Flot 采用 Canvas 绘制图形(Web 总共就有三种常见方式来绘制图形,不了解的同学请看这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题。顺便提一句,D3 是采用 SVG 来绘制图形的,从我自己的体会来说,对于拖动图来说,SVG 会比较流畅。

首先介绍一下数据的格式。数据来自一个数组嵌套的 JSON 格式,如:

[[0, 3], [4, 8], [8, 5], [9, 13]]

这就给

[……]阅读全文

D3 介绍

bubbleMap D3.js 是一个基于数据的操作文档的 JavaScript 库,可以让你绑定任何数据到 DOM,支持 DIV 这种图案生成,也支持 SVG 这种图案的生成(如果你对 SVG 不熟悉,请先看一下这篇文章,它介绍了 SVG、VML 和 Canvas)。D3 帮助你屏蔽了浏览器差异,做出来图案的效果可以说是炫目得一塌糊涂,可是代码却很简洁。在我第一次听人介绍 D3 的时候,确实被其示例震撼到了,大量的例子在这里可以找到

data_join

这是 D3 以数据为核心的一个示意图,可以简单这样来解释:有一个选择区(selection),存在若干节点(node),因此可以容纳若干数据(data),最大可容纳数据的量等于节点的个数,即数据和节点一一对应,

[……]阅读全文

Ehcache 详细解读

ehcache Ehcache  是现在最流行的纯 Java 开源缓存框架,配置简单、结构清晰、功能强大,最初知道它,是从 Hibernate 的缓存开始的。网上中文的 EhCache 材料以简单介绍和配置方法居多,如果你有这方面的问题,请自行 google;对于 API,官网上介绍已经非常清楚,请参见官网;但是很少见到特性说明和对实现原理的分析,因此在这篇文章里面,我会详细介绍和分析 EhCache 的特性,加上一些自己的理解和思考,希望对缓存感兴趣的朋友有所收获。

 

一、特性一览,来自官网,简单翻译一下:

 

1、快速轻量
过去几年,诸多测试表明 Ehcache 是最快的 Java 缓存之

[……]阅读全文

OSCache 框架源码解析

OSCache 是一个受到争议的开源缓存框架,OpenSymphony 网站已经关闭(OpenSymphony 可是诞生过 Quartz、WebWork、SiteMesh 和 OGNL 等数个非常有名的框架的)了,它也已经不维护了。在 JavaEE 的缓存框架领域,似乎已经是 EhCache 等其它支持分布式的缓存框架的天下了,OSCache 垂垂老矣?但是 OSCache 的源代码依然值得一读,一度作为最常用的缓存框架,代码量却不大,绝大部分类一天的时间就可以详详细细地阅读完。

 

统观 OSCache 的代码,我最关注其中的 base、algorithm、events、persistence、clustersup

[……]阅读全文

Backbone.js

backbone

注:教程请参见这里(本文有很多内容都是从这里翻译的),官方网站在这里;综合例子参见这里

Backbone.js 是一个前端 MVC 框架,model 能够绑定键值对和自定义事件,集合具备可枚举方法的富 API,视图具备事件处理能力,并且可以通过 RESTful 的 JSON 接口和你已有的 API 通信。

backbone2

View

Backbone 里的视图就是用来反映数据模型的,可以监听事件并响应,通过利用 Underscore.js(这个真是一个牛逼哄哄的东西,自己看),还支持了 JavaScript 模板技术,把数据和模板分离开。

“el” 属性就是浏览器创建的一个 DOM 对象的引用,是供 backbone 渲染的画布,每一个 view

[……]阅读全文

Grails 引发的中文乱码问题

在一个 Grails 项目里面,我想写一个过滤不良信息的 Service,而将过滤的规则放置在 xml 文件之中。

以下 xml 文件放置不良信息,包含单词、词组和句法,支持正则表达式:

<filter>
    <words>
        <word>fuck</word>
        <word>kill</word>
    </words>
    <phrases>
        <phrase>asshole</phrase>
    </ph

[……]阅读全文

在 Eclipse 中配置 Grails 工程

1、环境变量:

配置 GRAILS_HOME,注意一定要配置到 build.xml 所在的文件夹:

image
2、Eclipse 装上 Groovy-Eclipse 插件,可以使用 link 方式。

3、导入 Grails 工程,并选中"Copy projects into workspace"

4、工程的属性中,选中:

 image

这样就阻止了 groovy 文件被 Eclipse 编译成 class 文件。

5、工程属性的 Java Build Path 中,选择 Libraries,选择 Add Variable,添加变量 GRAILS_HOME,并将其中的所有文件夹内的所有 jar 文件全部引入工程

[……]阅读全文

back to top