分类目录归档:javascript

jQuery.Deferred对象

一、什么是deferred对象?

开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。
通常的做法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该调用哪些函数。
但是,在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开发团队就设计了deferred对象。

1、生成Deferred对象

2、deferred对象状态 以及 改变状态

  • pending: 表示还没有完成
  • resolved: 表示操作成功
  • rejected: 表示操作失败

可以通过state方法来获取状态

3、绑定回调方法

resolve方法对应着done方法,reject方法对于着fail方法。

4、then方法

then方法的作用也是设置回调方法。他可以接受三个参数。按顺序为 done, fail, progress 这3个方法。
自jQuery1.8后,then方法有一个返回值就是promise对象。而done()返回的是原有的deferred对象。如果then()指定的回调函数有返回值,该返回值会作为参数,传入后面的回调函数。

5、pipe方法

大致的作用是将resolve、reject、notify传入的参数再做一下处理。

6、promise对象

简单说,promise对象就是不能改变状态的deferred对象,也就是deferred的只读版。或者更通俗地理解成,promise是一个对将要完成的任务的承诺,排除了其他人破坏这个承诺的可能性,只能等待承诺方给出结果。

你可以通过promise对象,为原始的deferred对象添加回调函数,查询它的状态,但是无法改变它的状态,也就是说promise对象不允许你调用resolve和reject方法。

7、$.when方法

$.when()接受多个deferred对象作为参数,当它们全部运行成功后,才调用resolved状态的回调函数,但只要其中有一个失败,就调用rejected状态的回调函数。它相当于将多个非同步操作,合并成一个。实质上,when方法为多个deferred对象,返回一个单一的promise对象。

参考链接:
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
http://www.web-tinker.com/article/20154.html
http://javascript.ruanyifeng.com/jquery/deferred.html

三级(多级)联动自动赋值

测试连接

参考:

http://api.jquery.com/jQuery.ajax/

http://api.jquery.com/jQuery.Deferred/

backbone.js(六)后台交互

backbone与后台交互,使用RESTFUL风格,

后台使用tinkphp进行接收请求。

一、添加

 二、查找

2014-08-03_172141

 

三、获取单条记录并修改

 

四、删除

 

五、路由设置

 

backbone.js(五)Router

一、基本用法

假设域名为www.notes.com,当域名变化为www.notes.com/#notes时,就会触发notes指向的index操作。如下图,

域名后缀不是#notes时,没有触发index的操作,没有将数据放入页面。

2014-08-03_121816域名后缀为#notes时,触发index操作,将数据放入页面

2014-08-03_122058

 

二、路由传参数

其实是需要定义相应的路由规则就可以进行传参

2014-08-03_123148

 三、可选参数(分页)

2014-08-03_130832 2014-08-03_130845 2014-08-03_130856

backbone.js(四)Collection

Collection是一些model的集合。

一、模型集合

 二、事件

 三、集合视图

2014-08-03_012135

 

随后,紧跟着多创建一个model,并加入collection,html页面马上随之变化。

2014-08-03_012433

 

 

 

backbone.js(三)View

一、基本方法

 二、视图绑定模型

 三、模板

 

backbone.js(二)Model

一、基本方法

 二、事件

当使用set方法改变属性时,就会触发change时间。

 三、验证(validate)

 四、验证事件(invalid)

参考链接:

官方手册

http://blog.csdn.net/the_fire/article/details/7445448

 

backbone.js(一)初识

backbone.js提供了一套web开发的框架,通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.它是基于jquery和underscore的一个js框架。

整体上来说,backbone.js是一个web端javascript的mvc框架,算得上是重量级的框架。它能让你像写java代码一些写js代码,定义类,类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织,并且提供数据和逻辑相互分离的方法,减少代码开发过程中的数据和逻辑混乱。

通过backbone,你可以把你的数据当作Models,通过Models你可以创建数据,进行数据验证,销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时,model会触发change的事件;那些用来显示model状态的views会接受到model触发change的消息,进而发出对应的响应,并且重新渲染新的数据到界面。在一个完整的backbone应用中,你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点,或者手工的更新HTML页面,因为在model发生变化时,views会很简单的进行自我更新。

 

Backbone 的优点和一些经验 Tip:

  • View 的划分将页面上的视图元素解耦,粒度细化。View 间通过事件和 Model 通讯,避免了 DOM 事件的滥用。
  • Model 和 Restful 的通讯方式对于后端人员非常友好。
  • MVC 架构清晰, 我有个常年写 Java 没写过 JS 的同事看 Backbone 很快就了解了整体设计,虽然这时候他还是不会写 JS。
  • Collection/Model 抽象了以前杂乱的 AJAX 请求,CRUD 请求变得非常非常方便。
  • 强烈建议 View -> Model 单向依赖,世界会美好很多。
  • 配上一个模块化加载器例如 SeaJS 会很爽。

Backbone 的一些缺点,或者说一些尚未实现的 Feature:

  • Model 层比较简单,如果要支持 One-To-One 或者 One-To-Many 等复杂数据关系时有些力不从心。还有 一个 Model 只能属于一个 Collection 这个设计,页面复杂的时候会很受局限。例如这个问题: http://www.zhihu.com/question/19843899 (补充:Backbone.Relations 插件是这个问题的一个解决方案 https://github.com/PaulUithol/Backbone-relational By zjhiphop)
  • 同上,Model 只有基本的 CRUD 操作,不能很好的扩展,Backbone.sync 方法写的不太灵活,要想扩展就得重写 sync 方法。
  • View 层没有很强的 Page 管理机制,比如通过 URL 切换改变整个页面时,页面上尚存的 View 如何处理?直接销毁的话,是否要销毁关联的 Model、Collection?Cache 住?如何管理 Cache?
  • 内存管理需要比较小心,缺乏机制避免创建重复 Model。
  • extends override 父类方法的时候得写一串的 SuperClass.prototype.someMethod.apply 什么的,就不能实现个 _super 方法么……
  • 对调试非常不友好。
  • 作者有代码洁癖(也是加分项),this.$el 大家呼唤了这么久才加上,估计今生也看不到 this._super。
  • 更新慢。

 

参考链接:

知乎-Backbone.js 的最佳应用场景有哪些?

初识backbone.js

官方手册

WebSocket(四) —— 传输图片

前文解析数据帧中图,

 

现在再看左上角上面的图标,左上角的四个小列,也就是4位,第一位是FIN,后面三位是RSV1到3。官方文档上说RSV是预留的空间,正常为0,这就意味着,正常情况下他们可以当做0填充,那么前4位只有第一位的FIN需要设置,FIN表示帧结束,由于这篇中它不重要就不特别介绍了。接着后面的四位是储存opcode的值,这个opcode是标识数据类型的。这样数据的第一个字节我们就能理解它的含义了,看上面16进制的数据的第一个字节81换成二进制是1000001,第一个1是FIN的值,最后一个1是opcode的值。

 

Opcode是用来确定传输数据类型的。具体如下:

可以看出,1为传输文本,2为传输二进制(可以用来传输图片)。

第一个字节0x81 (10000001/129)为文本

第一个字节0x82 (10000010/130)为二进制

根据opcode改写frame函数:

 

现在进行测试:

 

2014-06-30_154151

 

 

同理也可以传输音频文件。

 

 

 

 

参考链接:

http://my.oschina.net/u/1187419/blog/281974?p=%7B%7BcurrentPage+1%7D%7D

http://www.web-tinker.com/article/20309.html

WebSocket(三) —— 生成数据帧

接收消息时需要解析数据帧,发送消息时一样需要生成数据帧。

方法如下:

返回数据:

html:

2014-06-29_155655

 

参考地址:

http://www.cnblogs.com/hustskyking/p/websocket-with-php.html