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 attachEvent和addEventListener使用方法
Mar 19 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
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中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python连接phoenix的方法示例
2017/09/29 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
银行会计财务工作个人的自我评价
2013/10/29 职场文书
公司年会主持词
2014/03/22 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
个人德育工作总结
2015/03/05 职场文书
南京大屠杀观后感
2015/06/02 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server