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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
JavaScript中的细节分析
Jun 30 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
vue实现Toast组件轻提示
Apr 10 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下的权限算法的实现
2007/04/28 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
CI框架Session.php源码分析
2014/11/03 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
Selenium元素的常用操作方法分析
2018/08/10 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python 调用有道api接口的方法
2019/01/03 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
群众路线批评与自我批评发言稿
2014/10/16 职场文书
党员民主生活会材料
2014/12/15 职场文书
歼十出击观后感
2015/06/11 职场文书
2015入党自传格式范文
2015/06/26 职场文书
校园开放日新闻稿
2015/07/17 职场文书
珍爱生命主题班会
2015/08/13 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
Nginx的gzip相关介绍
2022/05/11 Servers