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

一、级联函数是什么？

在一行代码上，调用一个接一个的方法。这种技术在 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();

总结

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

赞 (0)

相关推荐

  • Java 实现二叉搜索树的查找、插入、删除、遍历

    Java 实现二叉搜索树的查找、插入、删除、遍历

    由于最近想要阅读下JDK1.8 中HashMap的具体实现,但是由于HashMap的实现中用到了红黑树,所以我觉得有必要先复习下红黑树的相关知识,所以写下这篇随笔备忘,有不对的地方请指出- 学习红黑树,我觉得有必要从二叉搜索树开始学起,本篇随笔就主要介绍Java实现二叉搜索树的查找.插入.删除.遍历等内容. 二叉搜索树需满足以下四个条件: 若任意节点的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若任意节点的右子树不空,则右子树上所有结点的值均大于它的根结点的值: 任意节点的左.右子

  • java通过ssh连接服务器执行shell命令详解及实例

    java通过ssh连接服务器执行shell命令详解 java通过ssh连接服务器执行shell命令:JSch 是SSH2的一个纯Java实现.它允许你连接到一个sshd 服务器,使用端口转发,X11转发,文件传输等等.你可以将它的功能集成到你自己的 程序中.同时该项目也提供一个J2ME版本用来在手机上直连SSHD服务器. SSH是Secure Shell的缩写,一种建立在应用层和传输层基础上的安全协议.SSH在连接和传送过程中会加密所有数据,可以用来在不同系统或者服务器之间进行安全连接.SSH提

  • 详解XML,Object,Json转换与Xstream的使用

    详解XML,Object,Json转换与Xstream的使用 1.Xstream的特点: 这里直接引用Xstream官方的叙述: 灵活易用:在更高的层次上提供了简单.灵活.易用的统一接口,用户无需了解项目的底层细节 无需映射:大多数对象都可以在无需映射的情况下进行序列化与反序列化的操作 高速稳定:设计时力求达到的最重要的指标是解析速度快.占用内存少,以使之能够适用于大的对象处理或是对信息吞吐量要求高的系统 清晰易懂:项目采用reflection机制得到无冗余信息的XML文件.所生成 的XML文件

  • java notify和notifyAll的对比

     java notify和notifyAll 首先从名字可以了解,notify是通知一个线程获取锁,notifyAll是通知所有相关的线程去竞争锁. notify不能保证获得锁的线程,真正需要锁,并且可能产生死锁. 举例1: 所有人(消费者线程)准备吃饭,食堂没有开放(没有释放锁)打饭窗口(锁),所有人等待(WAITING). 食堂开饭打饭窗口(释放锁),并广播消息"开饭了"(notifyAll),所有人竞争排队,并等待吃饭(BLOCKED).每一个人依次在打饭窗口(获得锁)打饭(RU

  • javascript常用的设计模式

    js最好是一种面向对象的语言.它的出现时比较迟的.但是它是目前最火的脚本语言.而且,随着近期的微信商城等页面的兴起,相信程序员和互联网的从业者都知道了js正在势头上了. 那么,如果你想要在前端这条路上走得更远,设计模式就必须要懂.下面介绍几种常见的设计模式. 一.单例模式 单例模式也称作为单子模式,更多的也叫做单体模式.为软件设计中较为简单但是最为常用的一种设计模式. 在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法

  • Java 字节数组类型(byte[])与int类型互转方法

    代码如下: public class CommonUtils { //高位在前,低位在后 public static byte[] int2bytes(int num){ byte[] result = new byte[4]; result[0] = (byte)((num >>> 24) & 0xff);//说明一 result[1] = (byte)((num >>> 16)& 0xff ); result[2] = (byte)((num >

  • java Map转Object与Object转Map实现代码

    java Map转Object与 Object转Map 1.定义一个实体类: package reflect; public class User { private String name; private int age; public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } publ

  • studio碰到问题：java.lang.UnsatisfiedLinkError解决办法

    studio碰到问题：java.lang.UnsatisfiedLinkError解决办法

    studio中碰到的jni问题 最近在做supervideo,解析youku视频地址,是加过密处理,须要用对应的key去解析,获取对应数据,在引用jni时,发现接二连三出问题,以前用eclipse时开发,直接把so文件放在libs/armeabi/下,就可以了,如果有有平台差异,也最多加个libs/armeabi-v7a之类的,在studio中,jni以前虽然写过相关工程,但是没有没有遇到相关问题,看来应了一句话:没有问题,可能以后才是最大的问题.那就总结下这两天这个接二连三的异常. 首先,在拼

  • Java 详解单向加密--MD5、SHA和HMAC及简单实现实例

    Java 详解单向加密--MD5、SHA和HMAC及简单实现实例

    Java 详解单向加密--MD5.SHA和HMAC及简单实现实例 概要: MD5.SHA.HMAC这三种加密算法,可谓是非可逆加密,就是不可解密的加密方法. MD5 MD5即Message-Digest Algorithm 5(信息-摘要算法5),用于确保信息传输完整一致.MD5是输入不定长度信息,输出固定长度128-bits的算法. MD5算法具有以下特点: 1.压缩性:任意长度的数据,算出的MD5值长度都是固定的. 2.容易计算:从原数据计算出MD5值很容易. 3.抗修改性:对原数据进行任何

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

    一.级联函数是什么? 在一行代码上,调用一个接一个的方法.这种技术在 JQuery 或者其他 JavaScript 库中是非常常见的. 代码如下: $('#myDiv').fadeOut().html('帅哥, 你好!').fadeIn(); 或者: myStr1.replace('k', 'R').toUpperCase().substr(0,4); 这种代码让我们能像阅读文字一样来阅读代码,不仅简洁,可读性强更便于维护,提高开发效率. 那怎么用呢? 要使用级联函数,我们必须在每个函数中返回

  • Android轻松实现多语言的方法示例

    Android轻松实现多语言的方法示例

    本文介绍了Android轻松实现多语言的方法示例,分享给大家,具体如下: 1.创建多语言包 2.首先在onCreate方法中调用此方法查看上一次保存的是什么语言 public void setLanguage() { //根据读取到存放在sp里面的数据 进行设置 Configuration configuration = getResources().getConfiguration(); SharedPreferences sharedPreferences = getSharedPrefer

  • JavaScript 对象创建的3种方法

    目录 1.对象字面量 2.new 关键字创建对象 3.使用 Object.create() 创建对象 4. 使用扩展操作符:... 5.使用Object.assign()方法 6.简写属性 7.简写方法 前言: 在 JavaScript中,对象是一组有属性名和属性值组成的无序集合,对象的创建可以通过对象字面量.new 关键字 和Object.create()函数来创建. 1.对象字面量 let obj = {} // 空对象 let obj2 = {a:1, b:2} let obj3 = {"

  • 删除javascript所创建子节点的方法

    本文实例讲述了删除javascript所创建子节点的方法.分享给大家供大家参考.具体如下: js创建的节点,一时不知道如何删除...耗了一大堆时间 for(var i = 0; i < jsonList.length; i++ ){ var li_button = document.createElement("li"); li_button.className = "button"; var li_button_a = document.createElem

  • PHP基于Closure类创建匿名函数的方法详解

    本文实例讲述了PHP基于Closure类创建匿名函数的方法.分享给大家供大家参考,具体如下: Closure 类 用于代表匿名函数的类. 匿名函数(在 PHP 5.3 中被引入)会产生这个类型的对象.在过去,这个类被认为是一个实现细节,但现在可以依赖它做一些事情.自 PHP 5.4 起,这个类带有一些方法,允许在匿名函数创建后对其进行更多的控制. 这个类不能实例化,里面主要有两个方法,都用来复制闭包,一个静态一个动态,下面分别详细讲解下这两个不好理解的方法. Closure::bind publ

  • Javascript实现base64的加密解密方法示例

    这几天使用PHP向前端传值的时候,遇到一个问题,要将代码传过去赋值.如果使用urlencode()和urldecode()函数,就会出现js无法解码的情况,因为php和js的相关函数算法不一致.于是准备使用通用的base64加密解密. base64 加密解密 下方是base64用javascript写出来的函数和方法. //1.加密解密方法使用: //1.加密 var str = '124中文内容'; var base = new Base64(); var result = base.enco

  • JavaScript基础系列之函数和方法详解

    目录 一.函数和方法的区别 二.如何写好一个函数 2.1 命名准确 2.1.1 函数命名 2.1.2 参数命名 2.2 函数注释 2.2.1 参数注释 2.3  函数参数 2.3.1 参数默认值 2.3.2 对象参数 2.3.3 参数数量 2.3.4 参数类型防御 2.4 函数的返回 2.4.1 幂等函数 2.4.2 纯函数 2.4.3 return null 函数和方法的区别 总结 一.函数和方法的区别 函数(function):函数是带有名称和参数的 JavaScript 代码段,可以一次定

  • javascript实现根据函数名称字符串动态执行函数的方法示例

    本文实例讲述了javascript实现根据函数名称字符串动态执行函数的方法.分享给大家供大家参考,具体如下: <script> //动态函数调用,调用者使用"targetFunction" function targetFunction() { alert(11111); return 9; } test("myFunc"); function test(funcName) { if(typeof(eval(funcName)) == "fun

  • JavaScript的级联函数用法简单示例【链式调用】

    JavaScript的级联函数用法简单示例【链式调用】

    本文实例讲述了JavaScript的级联函数用法.分享给大家供大家参考,具体如下: 级联函数 级联函数就是在对象调用中通过点的方式串联调用,在jQuery中就是链式调用, 其关键点就是在内部 return this 返回自身 应用 function Person() { this.name = ''; this.age = 0; this.weight = 10; } Person.prototype = { setName:function(name){ this.name = name; r

  • JavaScript格式化json和xml的方法示例

    本文实例讲述了JavaScript格式化json和xml的方法.分享给大家供大家参考,具体如下: 格式化json实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js格式化json的方法</title> </head> <body> <!--格式化后的json写入的位

随机推荐