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中Event属性搜集整理
Sep 17 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
浅谈es6中的元编程
Dec 01 Javascript
Vue实现圆环进度条的示例
Feb 06 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
自动跳转中英文页面
2006/10/09 PHP
php自动获取目录下的模板的代码
2010/08/08 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
php实现文件预览功能
2017/05/23 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
三方合作协议书范本
2014/04/18 职场文书
求职信范文大全
2014/05/26 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers