一个纯正程序员的啰嗦
最近完成了一个使用 React+Redux 组合的项目，以前仅仅是接触了解以及学习，并未正儿八经地使用过，因此这一次可以说是第一次完整地再一个项目当中使用。因而对于认识之浅显请轻拍。
从架构和层次的层面，这个组合给我最好的感受是干净利落的解耦。有不少 JavaScript 框架尝试解决解耦问题，但是到了落实的层面上很容易出现分层分模块不容易严格控制，缺少清晰标准等问题。但是 React+Redux 的组合没有这个问题，我们把应用中 JavaScript 的部分分层为 action、client、config、constant、reducer、store、util 和 view 几个部分，其中 view 又进一步划分 [……]阅读全文
最近忙于一些新做的项目，由于新入手，就想着往最佳实践去靠，也寻找一些可以借鉴的模板。其中前端的部分，有很成型的模板可以借鉴。大幅度减少了自己调查和集成的工作量。但是仔细看看，发现这里头的概念太多了，各种开源的库和工具，有人说 “前端玩的是广度” 是有道理的。
这个新项目并不算特别复杂，大致的技术是基于 React+Redux 的，但是大体上集成完毕以后，完成了几个 demo 的代码之后，粗粗地过了一遍，除了传统意义上的 HTML+CSS+JavaScript（遵循 ECMAScript 6 的标准）三大件，居然涉及到了那么多技术，把自己吓了一跳：
[……]阅读全文
这是前端框架比较和吐槽的第二篇。
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
[……]阅读全文
和一些前端框架打过交道，想起来这也是技术选型中经常面对的内容。我把我的经验、思考、感受，甚至是吐槽，记录在这里，有些零散，并且更多的是个人的感悟。而且由于技术所限，可能部分内容不够深入，或者不甚客观。当然，网上有很多分析对比，视角可能更为全面和系统。如果你在技术选型，或者在考虑要学习使用哪一款 MVC／MVP／MVVM 框架的时候，此文能够给你有价值的信息，就更棒了。如果你觉得我哪些部分说得不正确，或者需要补充，也烦请告知。
需要预先说明的是，这篇文章不是教程，因此如果你对其中某一框架知之甚少，可能需要先去简单学习了解以后才能和我产生共鸣，或者产生反驳的冲动。
以下是第一部分，先谈谈 GWT、An
[……]阅读全文
I was working on the page reconstruction recently, and here is how I divide a page into widgets and how do they interacts in this new attempt.
Core Concepts
Page and widget: A page is composed by several widgets, and a widget is the minimum unit for reuse.
Widget controller: Accepts multiple widget
[……]阅读全文
做 Web 开发经常需要面对跨域问题，跨域问题的根源是浏览器安全中的同源策略，比如说，对于 http://www.a.com/1.html 来说：
在浏览器中，<script>、<img>、<iframe> 和<link> 这几个标签是
[……]阅读全文
最近体验了一下 GWT（Google Web Toolkit），其实这个技术老早就有了，写 Java 代码，代码很像 AWT 或者 Swing，但是最后编译成一个 war 包，也就是说，没有啰嗦的 JavaScript、HTML 和模板语言，Java 从前到后通吃，常用的模块都被封装成组件了。虽说写起来代码还挺啰嗦的（写法上面居然不支持链式调用，这确实让我看不懂），而且也没有传统 Web 开发方式来得直观，但也算一种很有意思的开发方式，值得体验一下。网上有足够多的教程，要系统地学习，官方文档是最好的材料，非常详尽。而我的方式，则更具个人风格一点，比较+吐槽，这可不是教程。
工程结构
我是用 Eclipse+Goo
[……]阅读全文
先看一段代码：
setTimeout(function(){
alert("a");
}, 0);
while(1);
alert("b");
希望在马山可以弹出一个警告提示框 “a” 来，但是始终没有来；而且，在 FireFox 中跑还得到了这样的提示，并提示你是否要终止这段脚本的执行，遇事我选择终止以后，“a” 倒是弹出来了，但是 “b” 却弹不出来了：
Warning: Unresponsive Script
A script on this page may be busy, or it may have stopped responding. You can stop the script n
[……]阅读全文
在说 3D 图表以前，首先要明确两个概念，一个是数据的维度，一个是呈现数据载体的维度。对于数据的维度，一维的数据呈现，但是呈现的载体是二维的平面图，比如饼图：
已经能够很清晰地观察到数据的分布情况。数据如果增加一个维度，变成二维，呈现载体依然是二维的平面图：
数据表达依然是清晰的。但是，倘若再增加一维，这个时候就面临了两个问题：
这两个问题中，第一个问题从本质上说，无法解决。数据的维度越大，理解起来理所当然地，也越来越困难。
但是第二个问题，我们至少有两种解决办法。一种
[……]阅读全文
经常要访问一些工具网站，根据页面上特定的取值。这些行为其实完全可以被视作重复劳动，有机会被脚本或者插件的自动行为取代。iMacro 或者 Greasemonkey 都是做这件事的好工具，今天下午有时间，要不干脆写一个 Chrome 插件吧。
没有必要去 Google 什么教程，官方的文档已经非常详细，足够指导整个过程了。文档的质量非常好，又有很多例子，是很不错的示例。本质上，用到的技术还是 HTML、JavaScript 和 CSS。我不在这里说太多，推荐大家去浏览一下，即便不做插件开发这件事情，过一下文档也是有收获的。如果你想尽快上手，解决重复劳动的问题而已，对这种好似路边花花草草的小东西没有钻研的兴趣，那么不
[……]阅读全文
下面这几道 JavaScript 题目大多来自于周五的一个小分享。都是很小的题目，但是很容易犯错。有一些是语言特性使然，有一些则是语言本身没有设计好而留下的陷阱。结果就是，遇到的人很容易陷进去骂娘，这些东西是略有些反直觉，感兴趣的不妨看看，平时我们还是尽量少些这样似是而非的代码。
1.
function Container( properties ) {
var objthis = this;
for ( var i in properties ) {
(function(){
var t = properties[i];
[……]阅读全文
这个问题的讨论最初来自公司内部邮件，我只是把这个问题的讨论内容记录下来。
有一些项目组在定位问题的时候发现，在使用 “for(x in array)” 这样的写法的时候，在 IE 浏览器下，x 出现了非预期的值。
具体说，如果自定义了 Array.prototype.indexOf 方法（譬如源于某 prototype 污染），也许是因为老版本 IE 浏览器并不支持 array.indexOf 方法，而开发者又很想用，那么这样的浏览器可能会出现这样的问题：
Array.prototype.indexOf = function(){...};
var arr = [1, 2];
for (x in arr) consol
[……]阅读全文
注：这篇文章翻译自 《You're Missing the Point of Promises》，阅读这篇文章，你首先需要对于 JavaScript 中的 Promises 是什么有了解，否则，你可以先看一看这篇文章（英文），或者这篇文章（中文）掌握基础。有一些修改，另受水平所限，翻译的不当之处请参阅原文。
Promises 是一种令代码异步行为更加优雅的抽象。如果用最基本的编码方式，代码是这种连续的形式：
getTweetsFor("domenic", function (err, results) {
// the rest of your code goes
[……]阅读全文
你可以认为我是一个极端的人，就像有许多人专注于自己的领域而不屑于其它“ 肤浅” 的工作范畴一样。比如我见过不少认为做 portal 没有技术含量的判定，做工程都是充满苦逼行为的言论，最近则还有那些“ 大数据” 崇拜者的疯狂吐槽…… 我的极端则有些不同，我的极端在于我认为绝大多数优秀的程序员，都要尝试多方面的事情。并不只有底层开发或者机器学习充满睿智的挑战，我做了几年网站，很难说这就是我最初的兴趣，虽然也在接触和学习其他的领域，但是依然觉得，做网站仍旧充满挑战，互联网真是一个奇葩充斥的地方。
前端开发，则是这“ 多方面的
[……]阅读全文
使用 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
[……]阅读全文
A lot of companies developed their own mature front-end components or frameworks since several years ago, while only two twitters made it popular all around the world. Just think of it why. I don't believe Bootstrap implies too much complex technologies, but it contains great ideas of layout an
[……]阅读全文
JQuery 的表格插件有很多。Flexigrid 和 DataTables 是我最近使用的，并且功能比较强大，在这里介绍一下。如果你在寻找前端绘制表格的插件，可以考虑它们。
Flexigrid
官方 Flexigrid 的特性展示：
要得到这样功能丰富、美观的表格：
只需要这样的代码：
$("#flex1").flexigrid({
url: 'post2.php',
dataType: 'json',
colMo
[……]阅读全文
最近在项目里面要用到 JavaScript 来绘制图表，JQuery 的插件 Flot 是一个不错的选择。和我之前介绍过的 D3 不同，它的唯一目的就是用来绘制曲线图的，即便是它的不同插件的功能，也基本上都在这个范畴之内。
Flot 采用 Canvas 绘制图形（Web 总共就有三种常见方式来绘制图形，不了解的同学请看这篇文章），在数据量非常大的时候，你需要考虑浏览器端的性能问题。顺便提一句，D3 是采用 SVG 来绘制图形的，从我自己的体会来说，对于拖动图来说，SVG 会比较流畅。
首先介绍一下数据的格式。数据来自一个数组嵌套的 JSON 格式，如：
[[0, 3], [4, 8], [8, 5], [9, 13]]
这就给
[……]阅读全文
最近在工作中重构一个老系统，烂的地方有很多，但是对于后台的页面模板（我指的是 JSP、FreeMarker、Velocity 这样的后台模板，JavaScript 前端模板不在此讨论范围内），却是我要说的部分，这似乎是一个被人遗忘的小角落。你可以很轻易地找到怎样重构 Java 类和方法的材料，你的 Java 代码可以写得很优雅；去搜搜 “重构”，到处是怎样重构你的 Java 代码、C++代码，我们也能找到许多前端设计师对于页面结构的重构，但是重构的范围远非至此。
后台业务逻辑写得再好，一个 jsp、ftl 模板页面还是可能写上几千行，业务逻辑耦合在呈现代码里面，看起来一团糟，对这部分的重构，既不属于传统的 Java 代
[……]阅读全文