javascript简单链式调用案例分析


Posted in Javascript onMay 10, 2017

本文实例讲述了javascript简单链式调用方法。分享给大家供大家参考,具体如下:

jQuery用的就是链式调用。像一条连接一样调用方法。
链式调用的核心就是return this;,每个方法都返回对象本身。

下面是简单的模拟jQuery的代码:

<script>
  window.$ = function (id) {
    return new _$(id);
  }
  function _$(id) {
    this.elements = document.getElementById(id);
  }
  _$.prototype = {
    constructor: _$,
    hide: function () {
      console.log('hide');
      return this;
    },
    show: function () {
      console.log('show');
      return this;
    },
    getName: function (callback) {
      if (callback) {
        callback.call(this, this.name);
      }
      return this;
    },
    setName: function (name) {
      this.name = name;
      return this;
    }
  }
  $('test').setName('helloworld').getName(function (name) {
    console.log(name);
  }).show().hide().show().hide().show();
</script>

运行效果图如下:

javascript简单链式调用案例分析

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
JavaScript数组复制详解
Feb 02 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
Angular.JS通过指令操作DOM的方法
May 10 #Javascript
JS实现队列的先进先出功能示例
May 10 #Javascript
BootStrap的两种模态框方式
May 10 #Javascript
微信小程序之购物车功能
Sep 23 #Javascript
js canvas实现QQ拨打电话特效
May 10 #Javascript
bootstrap弹出层的多种触发方式
May 10 #Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 #Javascript
You might like
php checkbox 取值详细说明
2010/08/19 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python和Bash结合在一起的方法
2020/11/13 Python
《学会待客》教学反思
2014/02/22 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
爱心募捐通知范文
2015/04/27 职场文书
婚礼父母致辞
2015/07/28 职场文书
60句有关成长的名言
2019/09/04 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书