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复选框CHECKBOX全选、反选
Aug 30 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
详解vue的双向绑定原理及实现
May 05 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
JavaScript 对象创建的3种方法
Nov 17 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内置函数使用指南
2014/11/27 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
python频繁写入文件时提速的方法
2019/06/26 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
如何利用Python 进行边缘检测
2020/10/14 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
在职党员进社区活动总结
2014/07/05 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
高中军训感想
2015/08/07 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android