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

一、级联函数是什么？

在一行代码上，调用一个接一个的方法。这种技术在 jquery 或者其他 javascript 库中是非常常见的。
代码如下：

$('#mydiv').fadeout().html('帅哥, 你好！').fadein();

或者：

mystr1.replace('k', 'r').touppercase().substr(0,4); 

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

那怎么用呢？

要使用级联函数，我们必须在每个函数中返回 this 对象（也就是后面方法中操作的对象）。现在我们开始创建个级联函数：

var usresdata = [
 {firstname: 'zhang', lastname: 'san', email: '[e-mail]', id: 102},
 {firstname: 'li', lastname: 'si', email: '[e-mail]', id: 103},
 {firstname: 'wang', lastname: 'wu', email: '[e-mail]', 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('[e-mail]').formatname().createlayout().displayuser();

总结

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