jQuery技术

jQuery插件编写及链式编程模型小结(2)

字号+ 作者:H5之家 来源:H5之家 2017-01-11 13:00 我要评论( )

这里callback则是回调函数。可以发现只有当num为非负数时候callback才会调用。 但是问题,如果我们不看函数内部,我们并不知道callback会几时调用,在什么情况下调用,代码间产生了一定耦合,流程上也会产生一定的

这里callback则是回调函数。可以发现只有当num为非负数时候callback才会调用。
但是问题,如果我们不看函数内部,我们并不知道callback会几时调用,在什么情况下调用,代码间产生了一定耦合,流程上也会产生一定的混乱。

虽然回调函数是一种简单而易于部署的实现异步的方法,但从编程体验来说它却不够好。

 

(2)链式异步 :

个人觉得链式操作最值得称赞的还是其解决了异步编程模型的执行流程不清晰的问题。jQuery中$(document).ready就非常好的阐释了这一理念。DOMContentLoaded是一个事件,在DOM并未加载前,jQuery的大部分操作都不会奏效,但jQuery的设计者并没有把他当成事件一样来处理,而是转成一种“选其对象,对其操作”的思路。$选择了document对象,ready是其方法进行操作。这样子流程问题就非常清晰了,在链条越后位置的方法就越后执行。 

(function(){ var isReady=false; //判断onDOMReady方法是否已经被执行过 var readyList= [];//把需要执行的方法先暂存在这个数组里 var timer;//定时器句柄 ready=function(fn) { if (isReady ) fn.call( document); else readyList.push( function() { return fn.call(this);}); return this; } var onDOMReady=function(){ for(var i=0;i<readyList.length;i++){ readyList[i].apply(document); } readyList = null; } var bindReady = function(evt){ if(isReady) return; isReady=true; onDOMReady.call(window); if(document.removeEventListener){ document.removeEventListener("DOMContentLoaded", bindReady, false); } else if(document.attachEvent){ document.detachEvent("onreadystatechange", bindReady); if(window == window.top){ clearInterval(timer); timer = null; } } }; if(document.addEventListener){ document.addEventListener("DOMContentLoaded", bindReady, false); }else if(document.attachEvent){ document.attachEvent("onreadystatechange", function(){ if((/loaded|complete/).test(document.readyState)) bindReady(); }); if(window == window.top){ timer = setInterval(function(){ try{ isReady||document.documentElement.doScroll('left');//在IE下用能否执行doScroll判断dom是否加载完毕 } catch(e){ return; } bindReady(); },5); } } })();

上面的代码不能用$(document).ready,而应该是window.ready。 

 

(3)Promise :

CommonJS中的异步编程模型也延续了这一想法,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。 

所以我们可以这样写:
f1().then(f2).then(f3);
这种方法我们无需太过关注实现,也不太需要理解异步,只要懂得通过函数选对象,通过then进行操作,就能进行异步编程。

 

 三、维护链式开发的特性

  在jQuery中,一个插件紧紧是修改收集到的元素,然后返回这个元素让链条上的下一个使用。这是jQuery设计的精美之处,也是jQuery如此流行的原因之一。为了保证可链式,你必须返回this。如下代码:

(function( $ ){ $.fn.resize = function( type, value ) { return this.each(function() { var $this = $(this); if (!type || type == 'width' ) { $this.width(value); } if ( !type || type == 'height' ) { $this.height(value); } }); }; })(jQuery);

调用方法如下:

$('div').resize('width', '600').css('color','blue');

 

 四、jQuery插件编写总结

 编写jQuery插件可以充分利用库,将公用的函数抽象出来,“循环利用”。以下是简短的总结:

 

 五、参考资料

 jQuery插件开发      

 jQuery链式操作如何实现以及为什么要用链式操作    

转自:

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQueryEasyUI datagrid查找学习笔记

    JQueryEasyUI datagrid查找学习笔记

    2017-01-11 14:03

  • jQuery LigerUI使用教程入门篇

    jQuery LigerUI使用教程入门篇

    2017-01-11 11:00

  • jQuery 移动端拖拽(模块化开发,触摸事件,webpack)

    jQuery 移动端拖拽(模块化开发,触摸事件,webpack)

    2017-01-11 10:01

  • jQuery 教程导读

    jQuery 教程导读

    2017-01-11 10:00

网友点评