认识jQuery的Promise   先前了解了ES6的Promise对象,来看看jQuery中的Promise,也就是jQuery的Deferred对象. 打开浏览器的控制台先. <script> var defer = $.Deferred(); console.log(defer); </script> 运行代码 运行结果: 和ES6的Promise对象长的有点像,jQuery的Deferred对象也有resolve.reject.then方法,还有done.fail.alw…

在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能. 现在就更进一步,完成一个能够一张一张的连续图片加载的功能. 功能: 1.一张一张加载图片. 2.加载错误,超时后显示加载失败图片. 对于功能的要求,肯定会存在对加载状态事件的处理以及完成时回调函数的处理,这样不仅会造成代码上的混乱,甚至破坏各种原则,就不再用普通的方法去写了.针对这种状态通知的特点,比较合适采用promise架构进行处理,promise本质上就是订阅发布设计模式的一种,当前这个功能就用j…

我们先来看一下编写AJAX编码经常遇到的几个问题: 1.由于AJAX是异步的,所有依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套,ajax等异步操作越多,嵌套层次就会越深,代码可读性就会越差. $.ajax({ url: url, data: dataObject, success: function(){ console.log("I depend on ajax result."); }, error: function(){} }); consol…

先前了解了ES6的Promise对象,来看看jQuery中的Promise,也就是jQuery的Deferred对象. 打开浏览器的控制台先. <script> var defer = $.Deferred(); console.log(defer); </script> 运行代码 运行结果: 和ES6的Promise对象长的有点像,jQuery的Deferred对象也有resolve.reject.then方法,还有done.fail.always......方法.jQuery就…

jquery中的Promise,也就是我们所知道的Deferred对象. 举例1: var data=""; function runAsync(){ var def = $.Deferred(); //做一些异步操作 setTimeout(function(){ console.log('执行完成'); data='随便什么数据' def.resolve(data); }, 0); //可以在外部改变状态 return def; //返回的deferred对象 } console.l…

一直用jquery,ajax一直是这么写: $.ajax({ url: 'abc.com/index', type: 'post', data: { abc:1 }, success: function (data) { if (!data.success) { alert(data.message); } else { } } }); 前一段时间 看见别人这么写觉得很不错: $.ajax({ url: 'abc.com/index', type: 'post', data: { abc:1 }…

原文电梯:https://www.cnblogs.com/yelongsan/p/7644239.html 先前了解了ES6的Promise对象,来看看jQuery中的Promise,也就是jQuery的Deferred对象. 打开浏览器的控制台先. <script> var defer = $.Deferred(); console.log(defer); </script> 运行代码 运行结果: 和ES6的Promise对象长的有点像,jQuery的Deferred对象也有re…

$request = $.getJSON('test.php'); $request.done(process1); $request.done(process2); $request.always(process3); function process1() { console.log('process1:'); } function process2() { console.log('process2'); } function process3() { console.log('proce…

<script type="text/javascript">/* Deferredstate (then,done, fail, always,pipe, progress, and state)change the state (resolve, reject, progress, resolveWith, rejectWith, and progressWith). deferred 对象一旦被 resolve 或者 reject 之后,状态是不会改变的. defer…

Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve 或 reject Promise 中申明 resolve 或 reject 后应该做什么(回调) 在 jQuery 中 var deferred = $.Deferred(); var promise = deferred.promise(); 在 ES6 中 var deferred = Pro…

认识jQuery的Promise   先前了解了ES6的Promise对象,来看看jQuery中的Promise,也就是jQuery的Deferred对象. 打开浏览器的控制台先. <script> var defer = $.Deferred(); console.log(defer); </script> 运行代码 运行结果: 和ES6的Promise对象长的有点像,jQuery的Deferred对象也有resolve.reject.then方法,还有done.fail.alw…

1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Deferred对象有resolve()和reject()方法,可以直接随时修改该对象的状态. 比如: var def = $.Deferred(); setTimeout(function(){ //... def.resolve(data); }); //可用直接用: def.resolve('...'…

Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html ******************构建Deferred对象时候的流程图************************** **********************源码解析********************** 因为callback被剥离出去后,整个deferred就显得非常的精简 jQuery.extend({ Deferred : function(){}…

去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise的基本概念与使用方法.   ES6 Promise 先拉出来遛遛 复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受.那么第一个问题来了,Promise是什么玩意呢?是一个类?对象?数组?函数?   别猜了,直接打印出来看看吧,console.dir(Promise),就这么简单粗暴.…

只要使用过jQuery的,想必对ready都不陌生,$(function(){})和$(document).ready(function(){})的使用更是习以为常. 要说到window.onload与document.ready的区别也能谈出个一二,最重要的区别就是: window.onload是在dom文档树以及所有文件都加载完成后,才执行: 而document.ready是,只要dom文档树加载完,就执行,且当dom文档树加载完就执行的好处就是,当页面中的图片等外部资源过多时,window…

还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支 //document ready简便写法$(function(){…}) } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } 所以$(fn)===$(document).ready(fn). 来看一下jQuery.fn.ready的源码 ready: function( fn ) { // Add t…

为了给下一章分析动画处理做准备,先来看一下一些工具.其中队列工具在动画处理中被经常使用. jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback ))(获取或设置当前匹配元素上待执行的函数队列. 如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列:设置队列(替换队列.追加函数)时,则为每个匹配元素都分别进行设置.如果需要移除并执行队列中的第一个函数,请使用dequeue()函…

在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编写. 先思考一下一个切换效果需要完成的操作 1.准备阶段,将各个strip归位到动画效果开始的位置. 2.动画效果处理. 3.执行. 3.完成. 所有的切换效果都具备上述3步操作. 既然这样就好抽象了. 可以对上述的操作进行单独定义,然后通过模板方法模式对各个操作进行调用. 所谓的模板方法模式,其实就是有这么…

与jQuery事件模块的其他事件不同,其他事件是通过数据缓存实现的,而初始化事件,jQuery.ready则是通过回调函数列表实现的.$()的参数如果是函数就向回调函数列表中添加回调函数,同时为DOMContentLoaded注册事件,在注册的事件处理函数中,触发resolve事件. 以下是对jQuery源代码中的ready事件进行了简化的代码.具体如下: 1.定义了jQuery.ready.promise.功能及代码实现如下: //jQuer的DOM页面加载通过回调函数列表完成 //下面的函数…

jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 jQuery.event={ global:{}, add:function(elem,types,handle,data,selector){}, remove:function(elem,types,handler,selector,mapppedTypes){}, trigger:functio…

转自:http://www.cnblogs.com/lvdabao/p/es6-promise-1.html 去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise的基本概念与使用方法. ES6 Promise 先拉出来遛遛 复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受.那么第一个问题来了,Promise是什么玩意呢?是一个类?对象…

一.前言 jQuery.Deferred作为1.5的新特性出现在jQuery上,而jQuery.ajax函数也做了相应的调整.因此我们能如下的使用xhr请求调用,并实现事件处理函数晚绑定. var promise = $.getJSON('dummy.js') // 其他逻辑处理 promise.then(function(){ alert('late binding') }) 我还一度以为这就是Promises/A+规范的实现,但其实jQuery.Deferred应该与jsDeferred归为…

系列文章 -- ES6笔记系列 很久很久以前,在做Node.js聊天室,使用MongoDB数据服务的时候就遇到了多重回调嵌套导致代码混乱的问题. JS异步编程有利有弊,Promise的出现,改善了这一格局,让异步编程表现出类似“同步式代码”的形式,更好地体现了它的价值. 一.基本概念 1. Promises/A+规范 Promise是一种异步编程的解决方案,本质来说其实它是一种规范,Promises/A+规范 根据规范的定义,一个Promise对象应该至少有以下的基本特点 三个状态 Promis…

页面初始化中,用的较多的就是$(document).ready(function(){//代码}); 或 $(window).load(function(){//代码}); 他们的区别就是,ready是在DOM的结构加载完后就触发,load是在页面内包括DOM结构,css,js,图片等都加载完成后再触发,显然ready更适合作为页面初始化使用.但有时候也不尽然.需要进一步查看其内部机制. 那么ready的内部是如何判断DOM的结构加载完的?并且不同的浏览器的判断是如何的? 答案就在jquery代…

jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:…

一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute)是指对html文档中的属性进行读取,设置和移除操作,其中,属性名一般是小写的联词符式的字符串,属性值也是字符串. DOM属性操作时对DOM元素的属性(DOM[propName]或者DOM.propName的形式)进行读取,设置和移除操作,其中,属性名一般是驼峰式字符串,属性值可以是任何类型: 类样式…

一.jQuery种的队列模块 jQuery的队列模块主要是为动画模块EFFECTS提供支持,(不过到现在为了支持动画队列的inprogress的出入队还是搞不太清楚),单独抽取出一个命名空间是为了使程序员可以自定义自己的队列.不过貌似用得不多? 具体API的调用方法可以参考这篇博客http://snandy.iteye.com/blog/1978428 二.队列模块的代码结构 低级方法jQuery下有queue,dequeue,_queueHooks这三种方法:低级方法不建议直接在外部调用: 高…

一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所有用户自定义数据都被保存在这个对象的cache属性下,cache在此姑且称之为自定义数据缓存: 自定义数据缓存和DOM元素/javascript对象通过id建立关联,id的查找通过DOM元素/javascript元素下挂载的expando属性获得 话不多说,直接上代码.相关思路在代码注释中都有讲解…

jQuery.when提供了基于一个或多个对象的状态来执行回调函数的功能,通常是基于具有异步事件的异步队列. 如果传入多个异步队列,jQuery.when会返回一个新的主异步队列的只读副本(promise),这个副本将跟踪所传递的异步队列的最终状态. 当所有异步队列都成功,主异步队列的成功回调函数将会被调用,参数是包含所有异步队列成功参数的数组:为了达到这一效果,方法jQuery.when会维护一个计数器,并在每个异步队列上,添加成功回调,当每个异步队列的成功回调触发时,会将该计数器减1,当计算…

jQuery 原本写一个小动画我们可能是这样的 $('.animateEle').animate({ opacity:'.5' }, 4000,function(){ $('.animateEle2').animate({ width:'100px' },2000,function(){ $('.animateEle3').animate({ height:'0' },2000); }); }); 但是如果我们使用promis对象的话,就可以使得代码更加简单易懂 var animate1 = f…