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 相关文章推荐
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
js实现显示手机号码效果
Mar 09 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
使用webpack搭建react开发环境的方法
May 15 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Python数组定义方法
2016/04/13 Python
回调函数的意义以及python实现实例
2017/06/20 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python实现电子书翻页小程序
2019/07/23 Python
Python shelve模块实现解析
2019/08/28 Python
np.random.seed() 的使用详解
2020/01/14 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
教师批评与自我批评
2014/10/15 职场文书
公司捐书倡议书
2015/04/27 职场文书
会议主持词结束语
2015/07/03 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
学习雷锋主题班会
2015/08/14 职场文书
小学作文之描写天气
2019/08/15 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
Python提取PDF指定内容并生成新文件
2021/06/09 Python
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL