JavaScript轻松创建级联函数的方法示例


Posted in Javascript onFebruary 10, 2017

一、级联函数是什么?

在一行代码上,调用一个接一个的方法。这种技术在 JQuery 或者其他 JavaScript 库中是非常常见的。
代码如下:

$('#myDiv').fadeOut().html('帅哥, 你好!').fadeIn();

或者:

myStr1.replace('k', 'R').toUpperCase().substr(0,4);

这种代码让我们能像阅读文字一样来阅读代码,不仅简洁,可读性强更便于维护,提高开发效率。

那怎么用呢?

要使用级联函数,我们必须在每个函数中返回 this 对象(也就是后面方法中操作的对象)。现在我们开始创建个级联函数:

var usresData = [
 {firstName: 'Zhang', lastName: 'San', email: '111@qq.com', id: 102},
 {firstName: 'Li', lastName: 'Si', email: '222@qq.com', id: 103},
 {firstName: 'Wang', lastName: 'Wu', email: '333@qq.com', id: 105}
];

function getCaseName(str) {
 return str.replace(/\w\S*/g, function(txt){
  return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
 })
}

接下来我们定义个包含级联函数的对象:

var userController = {
 currentUser = '',
 findUser = function (userEmail) {
  var arrayLength = usersData.length, i;
  for (i = arrayLength - 1; i >= 0; i--) {
   if (usersData[i].email === userEmail) {
    this.currentUser = usersData[i];
    break;
   }
  }
  return this;
 },
 formatName: function () {
  if (this.currentUser) {
   this.currentUser.fullName = getCaseName(this.currentUser.firstName) + ' ' + getCaseName(this.currentUser.lastName);
  }
  return this;
 },
 createLayout: function () {
  if (this.currentUser) {
   this.currentUser.viewData = '<h2>成员: ' + this.currentUser.fullName + '</h2>'​
   + '<p>ID: ' + this.currentUser.id + '</p>' + '<p>Email: ' + this.currentUser.email + '</p>';
  }
  return this;
 },
 displayUser: function () {
  if (!this.currentUser) return;
  $('.members-wrapper').append(this.currentUser.viewData);
 }
}

定义完了级联函数,我们调用的时候就会非常的优雅了:

userController.findUser('111@qq.com').formatName().createLayout().displayUser();

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
javascript实现密码验证
Nov 10 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
JS实现的数字格式化功能示例
Feb 10 #Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 #Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 #Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 #Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 #Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 #Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 #Javascript
You might like
我的论坛源代码(三)
2006/10/09 PHP
php checkbox 取值详细说明
2010/08/19 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python实现五子棋游戏
2019/06/18 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
python ETL工具 pyetl
2020/06/07 Python
python能否java成为主流语言吗
2020/06/22 Python
Django中ORM的基本使用教程
2020/12/22 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
delegate与普通函数的区别
2014/01/22 面试题
法学专业个人求职信
2013/09/26 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
工作说明书范文
2014/05/07 职场文书
建设工地安全标语
2014/06/07 职场文书
个人总结与自我评价
2014/09/18 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL