`

Javascript面向对象之四链式调用-《javascript设计模式》笔记

 
阅读更多

1.链式调用:
jquery可能是目前大家最常用到的js框架了,也习惯了如下的调用方式:
$('.someclass').show().css('xxx','xxxx').click(function(){}).xxx……
这种调用方式就叫做链式调用,也就是说在调用一个方法之后,可以使用方法的返回值来继续进行方法调用。

2.如何实现链式调用:
了解了什么是链式调用,我们再来看如何实现链式调用,从1中所述我们应该知道链式调用的关键在于方法的返回值,只要方法的返回值都是调用该方法的对象,那么,我们就可以实现链式调用了,我们仿照jquery,使用$作为对象的选择器:

(function(){

  function _$(els){

this.elements = [];

for(var i=0, len=els.length;i<len;i++){

  var elements = els[i];

  if(typeof element = ‘string’){

    element = document.getElementByIdx_x_x(element);

}

}

this.elements.push(element);

}

_$.prototype = {

  each:function(fn){

    for(var i=0,len=this.elements.length;i<len;i++){

      fn.call(this, this.elements[i]);

}

return this;

},

setStyle: function(prop, val){

……

},

show:function(){

……

},

……

}

window.$ = function(){

  return new _$(arguments);

}

})();

上面的代码就实现了一个简单的链式调用对象,并且使用一个_$作为$的别名,以防止$被其他代码改写而导致整个对象的定义丢失。

0
1
分享到:
评论

相关推荐

    《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析

    本文实例讲述了Javascript面向对象程序设计链式调用。分享给大家供大家参考,具体如下: 1.链式调用: jquery可能是目前大家最常用到的js框架了,也习惯了如下的调用方式: $('.someclass').show().css('xxx','xxxx'...

    狂神说前端笔记资料合集

    jQuery的链式调用、选择器语法和插件生态系统,使得开发者能快速实现常见前端任务。 Vue.js则是一种轻量级的前端框架,以其易学易用、灵活性高而受到广泛欢迎。Vue的核心特性包括组件化、虚拟DOM、响应式数据绑定和...

    6.JS高级.rar

    以上只是JavaScript高级特性的一部分,压缩包中的笔记和资料可能会涵盖更多内容,如性能优化、设计模式、错误处理、TypeScript集成、前端框架(React、Vue、Angular)的使用,以及现代Web技术如WebAssembly、Service...

    jquery笔记

    - **框架**:框架是指一种软件设计模式,提供了一套解决方案的基础结构。简单来说,就是使用最基本的编程语言,封装了一系列常用功能(方法),以便开发者可以更加高效地进行开发工作。 - **jQuery**:jQuery是一个...

    JS+JQuery+CSS基础笔记

    2. 链式操作:jQuery对象的方法返回的是jQuery对象本身,允许连续调用多个方法。 3. 动画效果:jQuery提供fadeIn、slideUp等方法实现平滑的动画效果。 4. AJAX:jQuery的$.ajax()函数简化了异步数据请求,用于获取...

    struts2笔记

    Struts2是一个基于MVC(Model-View-Controller)设计模式的开源JavaEE框架,用于构建企业级Web应用程序。这个框架极大地简化了开发过程,并提供了许多内置功能,如国际化、异常处理、动态方法调用等。下面将详细介绍...

    springmvc笔记

    7. **链式调用**:jQuery方法返回的是jQuery对象,可以连续调用多个方法。 8. **$.extend()**:合并对象,常用于扩展jQuery对象或创建配置选项。 9. **$.each()**:遍历数组或对象,进行循环操作。 以上是Spring ...

    NodeJS第8天1

    - **对象模型**:Mongoose提供了一个面向对象的API,允许开发者通过操作JavaScript对象来操作数据库记录,提高了开发效率。 - **自动持久化**:当对Mongoose对象进行修改时,这些更改会自动同步到MongoDB,反之...

    js代码-Promise 笔记

    本笔记将深入探讨Promise的基本概念、构造函数、状态转换、链式调用以及错误处理。 首先,Promise有三种状态:pending(等待中)、fulfilled(已成功)和rejected(已失败)。状态一旦改变,就不会再变,这也是...

    SomeNotes:一些笔记

    8. **JavaScript设计模式**:单例模式、工厂模式、观察者模式、装饰器模式等,这些都是提高代码质量和可维护性的实践。 9. **BOM与DOM**:浏览器对象模型(BOM)和文档对象模型(DOM)的理解,如window对象、...

    jquery笔记1

    2. **链式操作(Chaining)**:jQuery对象返回的是jQuery包装集,允许连续调用多个方法,如`$("#element").css("color", "red").fadeIn(500)`。 3. **DOM操作(DOM Manipulation)**:jQuery提供了简便的方法来操作...

    jquery-internals:《 jQuery技术内幕-深入解析jQuery架构设计与实现原理》源码注释与学习笔记

    这种链式调用的模式使得代码更加简洁易读。 在事件处理方面,jQuery提供了一套统一的接口,隐藏了浏览器之间的差异。它支持事件委托,通过祖先元素监听事件,减少了事件监听器的数量,提高了性能。此外,jQuery还...

    study-blog:学习nodejs中的一些笔记

    例如,通过阅读开源项目,你可以了解到实际应用中的最佳实践和设计模式。 "常用软件下载"可能指的是开发工具和环境配置。对于Node.js开发,你需要安装Node.js官方发布的版本管理器NVM(Node Version Manager),...

    underscore_note:underscore.js原始代码阅读学习笔记

    5. **链式调用**:underscore.js支持链式调用,这得益于其所有方法都返回一个新数组或对象,而不是修改原对象。例如,`_(array).map(func).filter(pred).value()`可以一次性完成映射和过滤操作,保持代码的清晰和...

    javaweb高级编程源码-javaweb:javaweb高级编程源码笔记

    通过实现`Filter`接口并配置在`web.xml`中,可以实现多个过滤器的链式调用。 4. **监听器(Listener)**:监听器是对特定事件做出反应的Java类,例如用户会话开始、结束,或者ServletContext初始化、销毁等。它们...

    CSS3文件夹悬停打开动画特效.zip

    4. **链式操作**:jQuery支持链式调用,使得代码更加紧凑和易读,例如`$("#element").addClass("open").slideDown();`。 5. **延迟与定时器**:`delay()`和`setTimeout()`、`setInterval()`等可以用于控制动画的...

Global site tag (gtag.js) - Google Analytics