ustccjw

初步的想法主要是引入 observable 数据推送的概念。 * reactmvc 专注于构建 React App。 * model 使用 observable 封装: uiModel observable（UI 操作），dataModel observable（服务端数据推送如：websocket 等）。uiModel 和 dataModel 是可序列化对象，在绝大多数情况下只有 uiModel。 * 任何 action 都生成新的 uiModel，从而 model observable 产生新的...

# 浅析浏览器缓存 ## 浏览器自身的缓存 浏览器自身提供了默认的缓存机制，也就是说在不指定expires和cache-control的情况下，浏览器也会对资源进行缓存。那么缓存多久呢，实际上是infinite。因为浏览器的缓存替换算法依赖于后续缓存资源，而不是取决于自身。 ## cache-control和expires cache-control和expires是服务器端指明资源的缓存时间。也就是资源的缓存时间不再依赖于后续缓存资源，而是取决于自身的设置时间（其实还是受限于浏览器缓存的大小）。可以理解为，在指定的cache-control和expires有效期内，资源缓存的优先级最高。 值得思考的是：当cache-control和expires过期时，资源并没有立刻从缓存里移除，可以猜测此时浏览器应该把该资源的缓存优先级降低。只有cache-control:no-cache时，浏览器才不缓存该资源。 也就是服务器设置cache-control和expires会影响资源的缓存优先级，影响浏览器自身的缓存策略。 ## Etag和Last-Modified Etag和Last-Modified是服务器端对资源的唯一性标识。唯一性标识当然是用作验证的。（先不考虑cache-control和expires）浏览器加载一个资源时，当浏览器缓存有该资源，那么浏览器会发起一个Conditional GET Request（含有If-None-Match或If-Modified-Since字段，分别对应Etag和Last-Modified）。服务器端确定资源没修改时就返回304 Not Modified，浏览器可以使用缓存资源。 ### cache-control和expires AND Etag和Last-Modified ok，现在开始有意思了！cache-control和expires是设置资源缓存的时间，Etag和Last-Modified是标识资源唯一性用于验证的，所以两者实际上是协同作用的，两者应该用AND而不是VS连接。 cache-control和expires带来的**副作用**是浏览器端可以不需要发送Conditional GET Request，直接使用缓存资源。（**update：发现即便没设置 cache-control和expires，被缓存的资源也可能不发送 Conditional GET Request，比如：有 Last-Modified...

[转译] HTML5 设计原理

1

# HTML5 设计原理 > 李松峰老师翻译，Jeremy Keith 在 Fronteers 2010 上的主题演讲 今天我想跟大家谈一谈HTML5的设计。主要分两个方面：一方面，当然了，就是HTML5。我可以站在这儿只讲HTML5，但我并不打算这样做，因为如果你想了解HTML5的话，你可以Google，可以看书，甚至可以看规范。 实际上，确实有人会谈到规范的内容。史蒂夫·福克纳（Steve Faulkner）会讲HTML5与可访问性。而保罗·艾里什（Paul Irish）则会讲HTML5提供的各种API。因此，我今天站在这里，不会光讲一讲HTML5就算完事了。 说老实话，在正式开始之前，我想先交待清楚我所说的HTML5到底是什么意思。这话听起来有点搞笑：这会子你一直在说HTML5，难道我们还不知道什么是HTML5吗？大家知道，有一个规范，它的名字叫HTML5。我所说的HTML5，指的就是这个规范。但问题是，有些人所说的HTML5，指的不仅仅是这个规范，还有别的意思。比如说，用HTML5来代指CSS3就是一种常见的叫法。我可不是这样的。我所说的HTML5，不包含CSS3，就是HTML5。 类似的术语问题以前也有过。Ajax本来是一种含义明确的技术，但过了不久，它的含义就变成了“用JavaScript来做一切好玩的东西”。这就是Ajax，对不对？今天，HTML5也面临同样的问题，它本来指的是一个特定的规范，但如今含义却成了“在Web上做一切好玩的事。”我说的不是这种HTML5，不是这种涵盖了最近刚刚出现的各种新东东的HTML5。我说的仅仅是规范本身：HTML5。 刚才已经说了，我今天想要讲的内容不多，也没有打算介绍HTML5都包含什么。今天我要讲的是它的另一方面，即HTML5的设计。换句话说，我要讲的不是规范里都包含什么，而是规范里为什么会包含它们，以及在设计这个规范的时候，设计者们是怎么看待这些东西的。 ## 设计原理 设计原理本质上是一种信念、一种想法、一个概念，是你行动的支柱。不管你是制定规范，还是制造一种有形的物品，或者编写软件，甚至发明编程语言。你都能找到背后的一个或者多个设计原理，多人协作的任何成果都是例证。不仅仅Web开发领域是这样。纵观人类历史，像国家和社会这样大规模的构建活动背后，同样也有设计原理。 就拿美国为例吧，美国的设计原理都写在了《独立宣言》中了。 **我们认为这些真理是不言而喻的，人人生而平等，造物主赋予了每个人不可剥夺的权利，包括生存、自由和追求幸福。** 这里有一句口号：生存、自由和追求幸福。这是被写进宪法中的核心理念，它关系到我们所有人的一切，也就是我们构建自己社会的原则。 还有一个例子，就是卡尔·马克思（Karl Marx），他的著作在20世纪曾被奉为建设社会主义的圭臬。其基本思想大致可以归结为下面这条设计原理： **各尽所能，各取所需。** 这其实就是一种经济体系背后的设计原理。 还有一个例子，比前面两个的历史更久远一些，不过大同小异： **人人为我，我为人人。** 这个极为简单的设计原理，是两千年前的拿撒勒犹太人耶稣基督提出来的。而这条原则成为了后来许多宗教的核心教义。原理与实践有时候并不是同步的。...

React 组件中如何组织 CSS

3

# React 组件中如何组织 CSS ## 组件和模块 这部分主要参照 hax 的 [关于前端开发中“模块”和“组件”概念的思考](https://github.com/hax/hax.github.com/issues/21) 一文。 在 React 开发中，webpack 是模块加载和打包的利器，基于 webpack 的工作流已经非常完善 。Webpack 使用 JS Module Loader 来加载其他 JS 模块，CSS 依赖以及图片等其他资源。但是，这里只是指明了组件中相关的 CSS 依赖，并没有解决组件化与 CSS 样式全局有效的冲突。...

# React 和 reactmvc ## React React 是一个用于构建前端界面的 Javascript 库。可以从下面三个方面来描述 React, ### Just the UI 1. 只提供前端的 view 层的解决方案。这保证了 React 的普适性和可优化性：对于简单的前端页面，可以使用 React 来构建页面；对于 web app，可以使用 React 作为 view 层方案，其他层可以自由选择。 2....

A slide about React: http://slides.com/ustccjw/react Related repo: https://github.com/ustccjw/admin

# Redux 存在的问题 > 优点就不多说了，文档上全是... 说几点应用中遇到的问题吧： 1. Data Model（远程数据） 和 UI Model 的混合 这个是应用数据混乱的原因，Data Model 由服务器维护，UI Model 由本地浏览器维护。应用中需要填充的数据应该是： (Data Model).filter(UI Model) + UI Model。 Model 需要进行一定的抽象，尤其是 Data Model 需要提供缓存机制和自同步机制。 [Falcor](http://netflix.github.io/falcor/)...

# 关于 React 数据层的思考 ## 远程数据和本地数据 应用数据按照来源可分为远程数据和本地数据。远程数据一般是前端通过请求远程服务获得，本地数据一般是用来记录用户操作的状态。 数据层需要解决的问题一般是：**远程数据的同步** 和 **组件间数据的同步**。 ## 远程数据的同步 远程数据需要同步的主要有两种情形：**数据实时性比较高** 和 **用户操作导致了远程数据的更新**。 远程数据的同步最简单的方法就是：不缓存远程数据，每次都向服务器请求新的数据。很显然，这样的做法能够保证数据的同步。这种方法对一些数据实时性比较高的情形是适用的，但是显然大部分情形下不需要这么实时，我们会缓存远程数据。 那么，我们更关注的是**用户操作导致了远程数据更新应该如何同步**。比较好的解决方案是：用户发起一些操作请求（POST）后，服务端能够返回需要同步的数据。 ## 远程数据和本地数据的抽象 我们需要一个抽象层，能够对数据缓存进行设置（MAXSIZE, TTL 等等），自动完成远程数据同步。我们希望远程数据模型和本地数据模型接口完全一致，这里就需要提一下 Falcor 这个 JS 库。 Falcor 就是用来帮助你实现数据 Model 抽象的，它的主要特性是：...

# React 单向数据流 > "引入 Falcor（async model)" 为原创，其余图皆为引用 ## Flux 架构  > 图来自 https://github.com/facebook/flux ## Flux 框架  > 图来自 http://staltz.com/unidirectional-user-interface-architectures.html ## Redux  > 图来自 http://staltz.com/unidirectional-user-interface-architectures.html...

# 浅析浏览器同源策略 ## 什么是同源策略（SOP）？ 同源：如果两个页面拥有相同的协议，端口和主机，那么这两个页面就属于同一个源。 同源策略：浏览器的一套安全机制（沙箱机制），这些安全机制都以同源为限制条件。 ## 为什么需要同源策略？ 同源策略的出发点很简单：浏览器存储着用户数据，比如认证令牌、cookie及其他私有元数据，这些数据不能泄露给其他应用。 ## 读、写、执行模型 SOP中，源A有以下权限限制： - 从源B读取资源：拒绝 - 向源B写：限制 - 从源B中执行资源：允许 拒绝读： 1. May execute a script from “B” 2. Must not be...