无线web解决方案集锦(支付宝篇)

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

DOM选择器

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

同构Javascript应用实践

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

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

Redux on React 使用总结

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

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

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

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

【设计模式】观察者模式JavaScript的实现

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

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

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

【Angular系列】ui-router 多层state与多层view的解构

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

嵌套状态的方法

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

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

这绝对是好东西

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

运行grunt报错:Maximum call stack size exceeded的解决方案

这是我前两天晚上遇到的一个问题,之前没有碰见过,突然碰到了,让我很迷惑怎么调用的堆栈超过了限制,怎么都找不到问题的所在,只好一行一行的删除代码使用排除法,最后定位到是处理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

HTML 5 History API的'前生今世'

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

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