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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
JS模板实现方法
Apr 03 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
详谈Node.js之操作文件系统
Aug 29 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php常用hash加密函数
2014/11/22 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python遍历类中所有成员的方法
2015/03/18 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python 读取位于包中的数据文件
2020/08/07 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
促销活动总结报告
2014/04/26 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
个人年度总结报告
2015/03/09 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书