`
rayln
  • 浏览: 434040 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery中的编程范式

 
阅读更多
转载自:http://www.iteye.com/topic/1119283

1. AJAX: 状态驻留,异步更新

2. 模块化:管理名字空间
所谓的module pattern代码如下,它的关键是利用匿名函数限制临时变量的作用域。
var feature =(function() {  
  
// 私有变量和函数  
var privateThing = 'secret',  
    publicThing = 'not secret',  
  
    changePrivateThing = function() {  
        privateThing = 'super secret';  
    },  
  
    sayPrivateThing = function() {  
        console.log(privateThing);  
        changePrivateThing();  
    };  
  
// 返回对外公开的API  
return {  
    publicThing : publicThing,  
    sayPrivateThing :  sayPrivateThing  
}  
})(); 


js本身缺乏包结构,不过经过多年的尝试之后业内已经逐渐统一了对包加载的认识,形成了RequireJs库这样得到一定共识的解决方案。jQuery可以与RequireJS库良好的集成在一起, 实现更完善的模块依赖管理。http://requirejs.org/docs/jquery.html

require(["jquery", "jquery.my"], function() {  
    //当jquery.js和jquery.my.js都成功装载之后执行  
    $(function(){  
      $('#my').myFunc();  
    });  
  });  


通过以下函数调用来定义模块my/shirt, 它依赖于my/cart和my/inventory模块,
require.def("my/shirt",  
  ["my/cart", "my/inventory"],  
  function(cart, inventory) {  
      // 这里使用module pattern来返回my/shirt模块对外暴露的API  
      return {  
          color: "blue",  
          size: "large"  
          addToCart: function() {  
              // decrement是my/inventory对外暴露的API  
              inventory.decrement(this);  
              cart.add(this);  
          }  
      }  
  }  
); 


3. event:统一事件模型
如果调用bind之后,新建了另一个li节点,则该节点的click事件不会被监听.
  jQuery的delegate机制可以将监听函数注册到父节点上, 子节点上触发的事件会根据selector被自动派发到相应的handlerFn上. 这样一来现在注册就可以监听未来创建的节点.

$('#myList').delegate('li.trigger', 'click', handlerFn);  


  最近jQuery1.7中统一了bind, live和delegate机制, 天下一统, 只有on/off.

$('li.trigger’).on('click', handlerFn);  // 相当于bind  
$('#myList').on('click', 'li.trigger', handlerFn);  // 相当于delegate 


4. 动画队列:全局时钟协调
我们经常需要面临的实际问题:
  A. 有多个元素要执行类似的动画
  B. 每个元素有多个属性要同时变化
  C. 执行完一个动画之后开始另一个动画
jQuery对这些问题的解答可以说是榨尽了js语法表达力的最后一点剩余价值.

$('input')  
  .animate({left:'+=200px',top:'300'},2000)  
  .animate({left:'-=200px',top:20},1000)  
  .queue(function(){  
    // 这里dequeue将首先执行队列中的后一个函数,因此alert("y")  
    $(this).dequeue();  
    alert('x');  
   })  
  .queue(function(){  
     alert("y");  
     // 如果不主动dequeue, 队列执行就中断了,不会自动继续下去.  
     $(this).dequeue();  
   });  


5. promise模式:因果关系的识别
future模式一般是外部对象主动查看future的返回值, 而promise模式则是由外部对象在promise上注册回调函数.
function getData(){  
 return $.get('/foo/').done(function(){  
    console.log('Fires after the AJAX request succeeds');  
 }).fail(function(){  
    console.log('Fires after the AJAX request fails');  
 });  
}  
  
function showDiv(){  
  var dfd = $.Deferred();  
  $('#foo').fadeIn( 1000, dfd.resolve );  
  return dfd.promise();  
}  
  
$.when( getData(), showDiv() )  
  .then(function( ajaxResult, ignoreResultFromShowDiv ){  
      console.log('Fires after BOTH showDiv() AND the AJAX request succeed!');  
      // 'ajaxResult' is the server’s response  
  }); 

jQuery引入Deferred结构, 根据promise模式对ajax, queue, document.ready等进行了重构, 统一了异步执行机制. then(onDone, onFail)将向promise中追加回调函数, 如果调用成功完成(resolve), 则回调函数onDone将被执行, 而如果调用失败(reject), 则onFail将被执行. when可以等待在多个promise对象上. promise巧妙的地方是异步执行已经开始之后甚至已经结束之后,仍然可以注册回调函数
  someObj.done(callback).sendRequest() vs. someObj.sendRequest().done(callback)
callback函数在发出异步调用之前注册或者在发出异步调用之后注册是完全等价的, 这揭示出程序表达永远不是完全精确的, 总存在着内在的变化维度. 如果能有效利用这一内在的可变性, 则可以极大提升并发程序的性能.
   promise模式的具体实现很简单. jQuery._Deferred定义了一个函数队列,它的作用有以下几点:
   A. 保存回调函数。
   B. 在resolve或者reject的时刻把保存着的函数全部执行掉。
   C. 已经执行之后, 再增加的函数会被立刻执行。

分享到:
评论

相关推荐

    jQuery中的编程范式详解

    本文主要关注jQuery中的编程范式,通过实例分析和与Prototype的对比,帮助开发者理解如何更好地利用jQuery进行高效编程。 1. AJAX:状态驻留与异步更新 AJAX(Asynchronous JavaScript and XML)的核心思想是在不...

    Jquery开心消消乐

    首先,JavaScript作为游戏的主要开发语言,是网页开发中的重要组成部分,它是一种轻量级的解释型编程语言,具有动态类型、原型化和多范式的特性。在《Jquery开心消消乐》中,开发者利用JavaScript的事件驱动机制,...

    pro php and jquery

    - PHP语法简单易学,支持多种编程范式(如面向过程和面向对象)。 2. **jQuery简介:** - jQuery是一个快速、简洁的JavaScript库,极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等功能。 - 它通过提供...

    CSS JS JQUERY文档

    JavaScript还支持函数式、面向对象和命令式等多种编程范式,使其在Web开发中具有极高的灵活性。 jQuery是JavaScript的一个库,由John Resig在2006年创建。它的出现极大地简化了JavaScript的DOM操作,提供了一种更...

    Jquery基于面向对象无缝滚动广告

    面向对象编程(Object-Oriented Programming, OOP)是一种编程范式,通过封装、继承和多态性来组织代码。在JavaScript中,我们可以使用构造函数和原型来实现面向对象。在创建滚动广告时,我们可以定义一个广告对象,...

    jQuery.JavaScript与CSS开发入门经典

    JavaScript还支持面向对象、函数式以及命令式编程范式,使其具有强大的功能和灵活性。 **CSS** (Cascading Style Sheets) 是用于控制网页样式和布局的语言。通过CSS,开发者可以实现网页的布局设计、颜色、字体、...

    JS,Jquery

    JavaScript的广泛应用源于其易学性和灵活性,它支持多种编程范式,包括面向对象、函数式和原型链继承。 jQuery则是一个基于JavaScript的库,它的主要目标是简化JavaScript的使用,让开发者能更高效地处理DOM操作、...

    web开发javascript,css,jquery,php,sql等开发文档

    JavaScript语法简洁,支持函数式、面向对象和命令式等多种编程范式。 **CSS**(层叠样式表)用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。通过CSS,我们可以控制网页的布局,包括字体、颜色、...

    jquery_js_oop

    在JavaScript的世界里,面向对象编程(Object-Oriented Programming,简称OOP)是一种重要的编程范式,它允许我们以类和对象的方式来组织代码,提高代码的复用性和可维护性。jQuery,作为JavaScript库的巨头,虽然其...

    jQuery(JavaScript框架)基础讲解

    jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript编程,使得开发者...虽然这些框架提供了更加现代化的编程范式和更加丰富的功能,但jQuery依然在很多旧项目以及需要快速解决方案的场合中扮演着重要角色。

    轮播组件jquery

    函数式编程是一种编程范式,强调将计算视为函数的组合,而不是状态的改变或控制流程。在jQuery轮播组件中,这一思想体现在以下几个方面: - **纯函数**:轮播中的每个函数应尽可能地不依赖于外部状态,仅依赖于输入...

    HTML+CSS3+JS+JQuery实现七夕言情动画、面向对象程序设计、Deferred对象解决异步编程回调嵌套问题

    面向对象程序设计(OOP)是编程的一种范式,它将数据和操作数据的方法封装在一起,形成对象。在JavaScript中,可以通过构造函数和原型链实现OOP。在七夕动画项目中,可以创建一个表示动画对象的构造函数,包含动画的...

    Java笔试面试题(含数据库&JQuery&JSP&JavaScript)

    对于数据库部分,面试题可能涉及对SQL语言的熟悉程度、数据库事务的ACID属性、关系型数据库设计中的范式、索引的作用以及具体数据库系统如Oracle的特定知识点等。而在前端技术中,可能还需要掌握JavaScript的DOM操作...

    Learning PHP, MySQL and JavaScript with jQuery, CSS and HTML5

    面向对象编程(Object-Oriented Programming,OOP)是一种编程范式,它使用“对象”来设计软件。对象可以包含数据,以字段(通常称为属性或特征)的形式,以及代码,以方法(通常称为函数或操作)的形式。学习OOP...

    以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题

    Promises是一种令代码异步行为更加优雅的抽象,它很有可能是JavaScript的下一个编程范式,一个Promise即表示任务结果,无论该任务是否完成。本文以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题,...

    jquery采用oop模式class类的使用示例

    面向对象编程是一种编程范式,它使用“对象”来设计应用和数据。在jQuery中,OOP的概念被用来组织和封装代码,使其更加模块化和可重用。在本示例中,OOP模式类(class)的使用展示了如何将jQuery函数和方法组织成类...

    tools4j-config-core-0.0.7.zip

    总的来说,lijq是一个创新的工具,它将jQuery的优雅与Scala的严谨相结合,为Scala开发者提供了一种新的编程范式。通过深入理解和使用lijq,开发者可以在Scala项目中实现高效、简洁的DOM操作,提高开发效率,同时也...

    jQuery源码解读

    面向对象编程是软件开发中的一个重要范式,它将数据和操作数据的方法封装在一起,形成所谓的“对象”。在JavaScript中,虽然它是一种基于原型的面向对象语言,但同样可以实现类的模拟。 首先,我们来看如何在...

Global site tag (gtag.js) - Google Analytics