Kent Li teabyii

Riot 源码阅读笔记

第一次看到 Riot，感觉就是惊艳。我对 React 不大了解，只是简单知道一些，所以在我看来，React 实现的一些东西，Riot 也可以实现，而且代码精简，麻雀虽小，五脏俱全，可以用很简单的语法创建类似 web component 的自定义标签，渲染的性能好像还不赖。

注：不支持自定义标签的浏览器需要手动创建标签，如 [demo/index.html]

关于 Riot 的 compiler，具体请见：[Riot compiler]

之前在 [Riot 源码阅读笔记] 中提到另挖坑来聊聊 Riot 提供的 template + logic compiler 是怎么干活的，于是有了这一篇文章... (其实大部分都是正则，正则)

Riot 提供了两种方式，分别是 pre-compile 和直接在页面使用 script[type="riot/tag"]，都是用的同一个 compiler 来处理代码的解析，在真实环境时推荐使用 pre-compile 的方式。

在页面使用 script[type="riot/tag", src="path"] 和 React 在页面使用 script[type="text/jsx", src="path"] 一样，都是用了 ajax 来请求文件内容，跨域就拜拜了，请知悉。

看 flux 官网的文档还是有些云里雾里的，需要一个 demo 来帮助在实践中进行理解，果断要选择 todomvc。

todomvc 已经有了各种各样框架的实现版本，在 flux 官方仓库中也提供了 tomomvc 的 flux� 版本，拿它作为入门学习 flux 的 demo 是相当不错的。

本文仅仅使用 todomvc 作为一个例子来说明，不会对其进行具体的代码解析。

未来已来，突然好喜欢这句话，哈哈。

ES6 已经离我们越来越近了，不久前发布了 ES6 标准文档，而 babel 社区如火如荼，对于 ES6 究竟给 js 开发者们带来了什么东西，我们来简单地了解一下。

这个文章并不会深入讲解某一部分的内容，只是帮助你快速地浏览一下 ES6 相关的东西究竟有哪一些，毕竟，其中每一部分的内容深入探讨都足够是一篇新的文章。

let 声明常量，var 声明变量

var myVariable = 2
myVariable = 3
let myConstant = 4

Susy 官方网站

Susy 是一个用于创建自定义布局结构的 css 工具集合，它并不提供现成的 className 来给你使用，而是提供 sass 的 function/mixins 来帮助你创建页面的布局结构。

Susy 作为一个 sass 工具库，使用的时候 @import 进来便是，可以使用 npm/bower 来下载。

	function _isSupportInputDate() {
	var input = document.createElement('input')
	input.type = 'date'
	input.value = 'test' // input[type=date] can't set value as a string.
	return input.value !== 'date'
	}

	@font-face {
	font-family: 'iconfont';
	src: url('iconfont.eot'); /* IE9*/
	src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('iconfont.woff') format('woff'), /* chrome、firefox */
	url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
	}

	{
	"React": "src/React.js",
	"ReactVersion": "src/ReactVersion.js",
	"ReactComponentWithPureRenderMixin": "src/addons/ReactComponentWithPureRenderMixin.js",
	"ReactFragment": "src/addons/ReactFragment.js",
	"ReactWithAddons": "src/addons/ReactWithAddons.js",
	"LinkedStateMixin": "src/addons/link/LinkedStateMixin.js",
	"ReactLink": "src/addons/link/ReactLink.js",
	"renderSubtreeIntoContainer": "src/addons/renderSubtreeIntoContainer.js",
	"shallowCompare": "src/addons/shallowCompare.js",