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 学习笔记(四)
Dec 31 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 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
无线电广播的开始
2002/01/30 无线电
实用函数10
2007/11/08 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
PHP 实现链式操作
2021/03/09 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
python实现感知器算法(批处理)
2019/01/18 Python
python实现函数极小值
2019/07/10 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
新学期开学寄语
2014/01/18 职场文书
工作睡觉检讨书
2014/02/25 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Java中的继承、多态以及封装
2022/04/11 Java/Android
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android