本文摘录自支付宝无线开发团队

DOM选择器

html5为了我们提供了一个非常好的DOM选择器，就是document.querySelector和document.querySelectorAll这两个方法，这两个方法在android2.1+以及ios3+以后，都可以使用，其接受的参数为css选择器。在实际web开发中，有一部大部分工作会用到DOM的操作，通过这个神器，可以解决大多数的DOM的操作。建议大家使用的时候，可以多多使用这两个方法。

在上个项目中使用了垂涎已久的redux ＋ react，说实在话，现在还陶醉在这种开发模式中，严格的单向数据流，近乎强制的分层方式，让我在前期废了好多脑细胞，不过，当他的好处凸显的时候完全是指数级的上升，而且这种方式特别适合多人合作，后期维护的难度也是很低，这也是我做前端项目以来感受最深的地方，不过作为SPA，它也存在一个巨大的缺陷：必须客户端渲染。这就导致客户在第一次进入页面的时候变的非常慢，为了合理有效的解决这个问题，我也尝试了一把服务器使用相同的代码来渲染页面。

其实服务器渲染页面是一件很简单的事，但是为了提高代码的重用，我决定使用同构的方式来实现，何为同构？就是一套相同的代码既能在客户端使用，也能在服务器端使用，这在以前是一件很蛋疼的事，应为我们既然做了前后端分离，现在又要做服务器端渲染，这不是在坑后端吗。。。不过同构就不同了，我们把我们的前端渲染代码也放在服务器端使用，这样既完成了前后端分离，也解决了制约SPA的两大痛点：SEO的困难以及首次进入的缓慢。

本文原创，欢迎转载，但请注明出处。文中如有不当之处，请不吝指出，谢谢！

在使用状态管理的单页面应用中，我们要处理各种各样的state，这些state包括：

• 服务器响应
• 缓存数据
• 本地生成尚未持久化到服务器的数据
• UI状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等

当应用变得越来越庞大的时候，管理不断变化的state非常困难，model和view之间的关联变化，会引起各种各样的副作用，state 在什么时候，由于什么原因，如何变化已然不受控制。为了解决这类问题，Redux在Flux的基础上，通过三大原则构建了一套新的解决方案。

本文用来收集本人的一些曾经为我带来方便的小代码/命令

写在开始的话：没有最好的设计模式，只有最合适的设计模式，学会它，并忘记它的存在。

###观测者模式的定义
观察者模式是软甲工程中一种设计模式，也叫订阅发布者模式。在此模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。

是不是很咬文嚼字，其实可以用生活中很多示例来说明这种模式，例如订阅报纸，报社需要做的是收集（subscribe）需要订阅某种杂志（topic）的用户，并保留他们的通信地址（callback），每当这种杂志发布（publish）的时候，报社需要做的是给他的用户送去杂志（调用callback）。而作为用户不需要去知道这个杂志什么时候发布。

本文为博主Jruif翻译作品，如有不当之处请悉心指正，如转载请注明译品以及英语原文出处，英语原文地址

嵌套状态的方法

状态能被其他状态嵌套。有以下几种嵌套情况：

1. 使用点‘.’符号，例如：.state('contacts.list', {})。
2. 使用ui-router.stateHelper建立一个嵌套状态树。
3. 使用以 string 类型的父级名的 parent 属性，例如：parent: 'contacts'
4. 使用以 object 类型的父级状态的 parent属性，例如：parent: contacts（这里的’contacts’是一个状态对象）

最近比较忙，搞了一次跨省大搬家，就很久没有更新博客了，今天发点好东西，江湖人称：上能迎娶白富美的，下能月薪上万元的前端终极神器，能者自取。

jquery中ready和和DOM的load事件

常用的文档加载方法有以下三种（两种jquery的方法）：

1
2
3
4
5
6
7
8
9

$(document).ready(function(){
		//todo
});
$(function(){
	//todo
});
window.load=function(){
	//todo
};

这是我前两天晚上遇到的一个问题，之前没有碰见过，突然碰到了，让我很迷惑怎么调用的堆栈超过了限制，怎么都找不到问题的所在，只好一行一行的删除代码使用排除法，最后定位到是处理less文件的任务出了问题，最后终于在一个文档中找到了问题的所在：

You probably created an alias task with the same name as one of your regular tasks.
Example:

1

grunt.registerTask('less', ['less:build']);

should be

1

grunt.registerTask('myless', ['less:build']);

//中文：为什么我运行grunt得到一个 “Maximum call stack size exceeded”错误？

你可能创建了一个和常规任务相同名字的别名任务。例如：

1

grunt.registerTask('less', ['less:build']);

应该是

1

grunt.registerTask('myless', ['less:build']);

都是没仔细看文档的后果啊。

欢迎加入Javascript前端技术，群号为:85088298

• 为什么介绍History API ？
• 浏览器支持
• 使用History
• Demo示例
  • Demo 1：HTML 5 History API – pushState
  • Demo 2：HTML 5 History API – replaceState
• 总结

History是有趣的，不是吗？在之前的HTML版本中，我们对浏览历史记录的操作非常有限。我们可以来回使用可以使用的方法，但这就是一切我们能做的了。

但是，利用HTML 5的History API，我们可以更好的控制浏览器的历史记录了。例如：我们可以添加一条记录到历史记录的列表中，或者在没有刷新时，可以更新地址栏的URL。