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 live函数
Dec 24 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
Angular中支持SCSS的方法
Nov 18 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 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脚本的10个技巧(6)
2006/10/09 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
JavaScipt基本教程之前言
2008/01/16 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
Python实现读写INI配置文件的方法示例
2018/06/09 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
毕业生自荐书模版
2014/01/04 职场文书
医学生求职信
2014/07/01 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
2015年女职工工作总结
2015/05/15 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
Golang 入门 之url 包
2022/05/04 Golang