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 相关文章推荐
使用js画图之正弦曲线
Jan 12 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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
PHP三元运算符的结合性介绍
2012/01/10 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
jQuery 常见学习网站与参考书
2009/11/09 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
node上的redis调用优化示例详解
2018/10/30 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
Python生成pdf文件的方法
2014/08/04 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
销售顾问的岗位职责
2013/11/13 职场文书
先进工作者获奖感言
2014/02/08 职场文书
《落花生》教学反思
2014/02/25 职场文书
大学校务公开实施方案
2014/03/31 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
物业保洁员管理制度
2015/08/05 职场文书
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript