React 文件体积为何如此庞大？首先，为什么会得出 React 大的结论，对比几个前端框架的 min 文件：

• Mithril 0.2.3 19K (8K gzipped)
• Angular 1.2.16 102K (38K gzipped)
• Vue 1.0.8 73K (24K gzipped)
• React 0.14.7 133K (38K gzipped)

React 作为一个 View-ViewModel 库，相比于 Mithril，Vue 这些目的大致相同的库，文件显得尤为庞大，甚至比 Angular 这种全能 MVVM 框架还大。但是这就能说 React 大吗，我认为是的，Mithril 与 React 都是基于 Virtual DOM 的实现，我觉得这很有可比性。虽然 Mithril 的真实性能大致为 React 的一半，但是代码量却是 React 的不到 1/10（实际上 Mithril 只有大概 2000 行代码），Mithril 在使用了一些小技巧之后甚至性能飙升至 React 的数十倍。对 Mithril 感兴趣可以看下 我对 Mithril 渲染性能的分析。

阅读全文

这个系列本来没有打算去研究 Angular，React，Vue 之外的框架，但是 上次的性能测试 让 Mithril 这个框架格外引人注目，毕竟他的成绩超过了其他所有框架。因为我没有在项目中用过 Mithril，所以只能从其文档及代码中寻找他惊人能力背后的实现。因为这个是番外篇了，所以可能不会太严谨，科普性质吧。

Mithril

Mithril 翻译过来就是秘银的意思，这是魔幻小说或游戏里面才有的虚构金属物质，基本上是最好的金属，可以打造出最上等的武器装备。可能作者希望这个库就是那么厉害的东西，而且用 Mithril 做出来的产品也是上等的吧。他的第一个版本于 2014 年 3 月发布，相比 React （2013 年 5 月），Vue （2013 年 12 月），都要晚一点，而现在也只发布到 0.2.3 版本。

阅读全文

前面我已经分析了 Angular，React，Vue 的渲染实现及其性能：

• ARV 渲染实现比较之 Angular
• ARV 渲染实现比较之 React
• ARV 渲染实现比较之 Vue

直观一点地的看他们之间的效率对比可以看一下这一个 性能评估测试。

阅读全文

之前已经分析了 Angular 和 React 的渲染：

• ARV 渲染实现比较之 Angular
• ARV 渲染实现比较之 React

今天来分析 Vue。

Vue

Vue 是一个新兴的前端视图框架，他做的事情跟 React 很类似，实现了前端组件化以及 View-ViewModel 绑定，但是同时又支持跟 Angular 很类似的模版语法，以及比 Angular 更方便的 filter 和 directive 定义方法，大大提高了开发效率。React 和 Angular 都熟悉的开发者转到 Vue 使用起来十分方便得心应手。

如果只是 React 跟 Angular 两者优点的结合，那 Vue 也没那么出彩，然而他的渲染效率甚至是 React 的 10 倍之多，这也是很多开发者转向 Vue 的理由。

阅读全文

我在 上一篇 总结了 Angular 的渲染实现，今天我们来看看 React。

React

React 的渲染套路简单来说就是虚拟DOM树（Virtual DOM）。React 的思想有点儿像 Web Component，但是他又是一个独立的实现，可以纯粹使用 js 逻辑实现了前端组件化。看似 HTML + JS 的新语言 JSX，实际上会编译成完全的 js 代码，所有的 HTML 都转换成了 JS 的 DOM 操作，只不过这里操作的 DOM 并不是真正的 DOM，而是 React 实现的一套映射到真正 DOM 的虚拟 DOM。并且 React 的重点在于 ‘React’，即视图响应数据变化。

阅读全文

重新开始写博客的第一篇，还是来点干货，在闭关一年多之间，我在项目中使用过 Angular, React, 和 Vue，今天我想说一下他们在渲染方面的一些实现的异同。

首先，要澄清一件事情，这几个东西虽然都可以用来渲染，但是却是不同级别的东西。Angular是一个功能十分强大的 MVVM（Model-View-ViewModel）框架，拥有包括模块化、服务在内的大而全的解决方案；而 React 只是一个组件化虚拟 DOM 库，也就是 View-ViewModel 部分；Vue 也是一个组件化的 View-ViewModel 库，但是他使用了类似 Angular 的模版语法。

Angular 虽然功能很全，但是这就意味着灵活性的降低。包括他自己定义的一套 html 扩展语法到js代码的映射关系，定义服务和过滤器的复杂写法，想用一个非 Angular 系的插件都要回想一下如何遵守他的规定来写扩展，大大降低了我们写代码的积极性。虽然 Angular2 号称解决了很多 Angular1 版本的缺点，但是既然他还在Beta阶段，我也不好去做什么评价。至少现在还没有多少人会去真正的使用它，所以今天这里的 Angular 仅代表他的第一代的产品。

阅读全文

今天碰到一个问题，在IOS的Safari浏览器中，一个网页的div元素在绑定了click事件后点击时有变暗的闪烁。在其他浏览器均无出现此现象，即使是桌面的Safari也没有。
我于是清空了click事件中的所有代码，仍然会出现此状况，但是直接去掉时间绑定则不会变暗，于是确定是因为绑定click事件引起的变暗。
后面我又在事件处理中写了个alert()，发现在提示框弹出的时候，那个div已经变暗了，也就是说在处理事件之前，浏览器已经给div附加了变暗效果。那基本上可以确定是IOS Safari的默认样式效果了。
于是StackOverflow了一下问题迎刃而解：

1
2
3

html {
  -webkit-tap-highlight-color: transparent;
}

参考: http://stackoverflow.com/questions/2355154/iphone-darkens-div-on-click

这个系列只是一个备忘录，主要是讲述平时编程遇到的一些奇怪的问题。
本来标题叫做Javascript奇技淫巧系列，但是现在我又被掉往服务端开发了，所以这个系列可能会不再更新，于是改回Javascript备忘。
其实这种奇怪的问题一般都出在IE上，所以重点就放在IE上了。

这次的主题是图片拖拽的问题，主要情景有几种，第一种是可以在网页上面拖拽的图片，另一种是在可拖动的元素下面有一张图。
当然还有一种是浏览器默认的图片拖拽，使用浏览器默认的图片拖拽可以直接将图片拖出浏览器，在新网页中打开，或者拖到其他软件中处理。
但是，往往我们都不希望出现默认的情况，尤其是想制造出前面两种效果的时候。

阅读全文

上一篇介绍了Dust的最基本的语法，已经足够应付一般的模板翻译。这一章将介绍一些涉及逻辑的Dust语法以及介绍如何在前端应用模板。

阅读全文

从这篇文章开始我将介绍Dust的语法，其实内容基本上和Dust的Tutorial差不多，可能还要简化一点。

阅读全文