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 相关文章推荐
表单提交验证类
Jul 14 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
谈一谈javascript闭包
Jan 28 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
js中的数组对象排序分析
Dec 11 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
js+css3实现炫酷时钟
Aug 18 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
python 实现图片批量压缩的示例
2020/12/18 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
租车协议书范本
2014/04/22 职场文书
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers