无线web解决方案集锦(支付宝篇)
本文摘录自支付宝无线开发团队
DOM选择器
html5为了我们提供了一个非常好的DOM选择器,就是document.querySelector和document.querySelectorAll这两个方法,这两个方法在android2.1+以及ios3+以后,都可以使用,其接受的参数为css选择器。在实际web开发中,有一部大部分工作会用到DOM的操作,通过这个神器,可以解决大多数的DOM的操作。建议大家使用的时候,可以多多使用这两个方法。
本文摘录自支付宝无线开发团队
html5为了我们提供了一个非常好的DOM选择器,就是document.querySelector和document.querySelectorAll这两个方法,这两个方法在android2.1+以及ios3+以后,都可以使用,其接受的参数为css选择器。在实际web开发中,有一部大部分工作会用到DOM的操作,通过这个神器,可以解决大多数的DOM的操作。建议大家使用的时候,可以多多使用这两个方法。
在上个项目中使用了垂涎已久的redux + react,说实在话,现在还陶醉在这种开发模式中,严格的单向数据流,近乎强制的分层方式,让我在前期废了好多脑细胞,不过,当他的好处凸显的时候完全是指数级的上升,而且这种方式特别适合多人合作,后期维护的难度也是很低,这也是我做前端项目以来感受最深的地方,不过作为SPA,它也存在一个巨大的缺陷:必须客户端渲染。这就导致客户在第一次进入页面的时候变的非常慢,为了合理有效的解决这个问题,我也尝试了一把服务器使用相同的代码来渲染页面。
其实服务器渲染页面是一件很简单的事,但是为了提高代码的重用,我决定使用同构的方式来实现,何为同构?就是一套相同的代码既能在客户端使用,也能在服务器端使用,这在以前是一件很蛋疼的事,应为我们既然做了前后端分离,现在又要做服务器端渲染,这不是在坑后端吗。。。不过同构就不同了,我们把我们的前端渲染代码也放在服务器端使用,这样既完成了前后端分离,也解决了制约SPA的两大痛点:SEO的困难以及首次进入的缓慢。
本文原创,欢迎转载,但请注明出处。文中如有不当之处,请不吝指出,谢谢!
在使用状态管理的单页面应用中,我们要处理各种各样的state,这些state包括:
当应用变得越来越庞大的时候,管理不断变化的state非常困难,model和view之间的关联变化,会引起各种各样的副作用,state 在什么时候,由于什么原因,如何变化已然不受控制。为了解决这类问题,Redux在Flux的基础上,通过三大原则
构建了一套新的解决方案。
本文用来收集本人的一些曾经为我带来方便的小代码/命令
写在开始的话:没有最好的设计模式,只有最合适的设计模式,学会它,并忘记它的存在。
###观测者模式的定义
观察者模式是软甲工程中一种设计模式,也叫订阅发布者模式。在此模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。
是不是很咬文嚼字,其实可以用生活中很多示例来说明这种模式,例如订阅报纸,报社需要做的是收集(subscribe)
需要订阅某种杂志(topic)
的用户,并保留他们的通信地址(callback)
,每当这种杂志发布(publish)
的时候,报社需要做的是给他的用户送去杂志(调用callback)
。而作为用户不需要去知道这个杂志什么时候发布。
本文为博主Jruif翻译作品,如有不当之处请悉心指正,如转载请注明译品以及英语原文出处,英语原文地址
状态能被其他状态嵌套。有以下几种嵌套情况:
.state('contacts.list', {})
。parent
属性,例如:parent: 'contacts'
parent
属性,例如:parent: contacts
(这里的’contacts’是一个状态对象)最近比较忙,搞了一次跨省大搬家,就很久没有更新博客了,今天发点好东西,江湖人称:上能迎娶白富美的,下能月薪上万元的前端终极神器,能者自取。
jquery中ready和和DOM的load事件
常用的文档加载方法有以下三种(两种jquery的方法):
1 | $(document).ready(function(){ |
这是我前两天晚上遇到的一个问题,之前没有碰见过,突然碰到了,让我很迷惑怎么调用的堆栈超过了限制,怎么都找不到问题的所在,只好一行一行的删除代码使用排除法,最后定位到是处理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 be1
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是有趣的,不是吗?在之前的HTML版本中,我们对浏览历史记录的操作非常有限。我们可以来回使用可以使用的方法,但这就是一切我们能做的了。
但是,利用HTML 5的History API,我们可以更好的控制浏览器的历史记录了。例如:我们可以添加一条记录到历史记录的列表中,或者在没有刷新时,可以更新地址栏的URL。