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 相关文章推荐
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
微信小程序canvas实现签名功能
Jan 19 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
js封装成插件的步骤方法
2017/09/11 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
vue编写简单的购物车功能
2021/01/08 Vue.js
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
python迭代器与生成器详解
2016/03/10 Python
Python中生成Epoch的方法
2017/04/26 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
新大陆软件面试题
2016/11/24 面试题
计算机应用毕业生自荐信
2013/10/23 职场文书
求职信模版
2013/11/30 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
运输服务质量承诺书
2014/03/27 职场文书
文明村创建实施方案
2014/03/27 职场文书
影视广告专业求职信
2014/09/02 职场文书
内科护士节演讲稿
2014/09/11 职场文书
大明湖导游词
2015/02/03 职场文书