• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > JavaScript轻松创建级联函数的方法示例

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

作者:Terry√ 字体:[增加 减小] 来源:互联网 时间:2017-05-11

Terry√通过本文主要向大家介绍了javascript城市级联,javascript省市级联,javascript级联,javascript示例,javascript代码示例等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一、级联函数是什么?

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

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

或者:

myStr1.replace('k', 'R').toUpperCase().substr(0,4); 
</div>

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

那怎么用呢?

要使用级联函数,我们必须在每个函数中返回 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();
 })
}
</div>

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

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);
 }
}
</div>

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

userController.findUser('111@qq.com').formatName().createLayout().displayUser();
</div>

总结

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JavaScript省市级联下拉菜单实例
  • JavaScript轻松创建级联函数的方法示例

相关文章

  • 2017-05-11js实现文字无缝向上滚动
  • 2017-05-11解决URL地址中的中文乱码问题的办法
  • 2017-05-11详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
  • 2017-05-11JavaScript实现的XML与JSON互转功能详解
  • 2017-05-11原生js实现打字动画游戏
  • 2017-05-11完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
  • 2017-05-11jQuery实现判断控件是否显示的方法
  • 2017-05-11原生JS实现《别踩白块》游戏(兼容IE)
  • 2017-05-11js处理层级数据结构的方法小结
  • 2017-05-11Node.js数据库操作之连接MySQL数据库(一)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 前台js页面定时显示弹窗消息提示
    • js实现前端分页页码管理
    • jQuery Mobile漏洞会有跨站脚本攻击风险
    • Jquery树插件zTree实现菜单树
    • Vue监听数组变化源码解析
    • 微信小程序 template模板详解及实例代码
    • js手机号4位显示空格,银行卡每4位显示空格效果
    • 常用排序算法的js实现(冒泡、选择、插入、归并、希尔、快排)
    • JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
    • 详解AngularJs ui-router 路由的简单介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有