溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript輕松創(chuàng)建級聯(lián)函數(shù)的方法示例

發(fā)布時間：2020-10-16 21:11:09 來源：腳本之家 閱讀：146 作者：Terry√ 欄目：web開發(fā)

一、級聯(lián)函數(shù)是什么？

在一行代碼上，調(diào)用一個接一個的方法。這種技術(shù)在 JQuery 或者其他 JavaScript 庫中是非常常見的。
代碼如下：

$('#myDiv').fadeOut().html('帥哥, 你好！').fadeIn();

或者：

myStr1.replace('k', 'R').toUpperCase().substr(0,4);

這種代碼讓我們能像閱讀文字一樣來閱讀代碼，不僅簡潔，可讀性強更便于維護，提高開發(fā)效率。

那怎么用呢？

要使用級聯(lián)函數(shù)，我們必須在每個函數(shù)中返回 this 對象（也就是后面方法中操作的對象）?，F(xiàn)在我們開始創(chuàng)建個級聯(lián)函數(shù)：

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();
 })
}

接下來我們定義個包含級聯(lián)函數(shù)的對象：

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 = '<h3>成員: ' + this.currentUser.fullName + '</h3>'​
   + '<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);
 }
}

定義完了級聯(lián)函數(shù)，我們調(diào)用的時候就會非常的優(yōu)雅了：

userController.findUser('111@qq.com').formatName().createLayout().displayUser();

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手