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获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
vue如何使用rem适配
Feb 06 Vue.js
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
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
PHP Cookie学习笔记
2016/08/23 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
jQuery中:animated选择器用法实例
2014/12/29 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python优先队列实现方法示例
2017/09/21 Python
Python 串口读写的实现方法
2019/06/12 Python
python如何实现视频转代码视频
2019/06/17 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
四年级语文教学反思
2014/02/05 职场文书
党支部对转正的意见
2015/06/02 职场文书
最美乡村教师观后感
2015/06/11 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Python中glob库实现文件名的匹配
2021/06/18 Python
深入浅析Django MTV模式
2021/09/04 Python
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android