function component(title) { 
  
  
  
  
  let html = ''; 
  
  
  
  
 
  
  
  
  
  html += '
'; 
  
  
  
  
  html += `
${title}
`; 
  
  
  
  
  html += '
Some words that describe this thing
'; 
  
  
  
  
  html += 'Clickity click!'; 
  
  
  
  
  html += '

該代碼與Vue組件構(gòu)造HTML 方式基本相同。當(dāng)然，這里沒有響應(yīng)性，事件處理或其它一系列功能，但是獲取輸出的 HTML 是同一回事。

如果你從未想過以這種方式考慮組件，那很正常，很多人也沒有。

當(dāng)你開始學(xué)習(xí)Vue時(shí)，會(huì)看到新的語(yǔ)法和所有這些神奇的東西，它們看起來與我們以前接觸過的任何東西都不太一樣。

依靠編程基礎(chǔ)

一旦真正意識(shí)到 Vue 組件實(shí)際上只是函數(shù)，那么我們就可以發(fā)現(xiàn)一些隱藏的知識(shí)點(diǎn)。

我們可以從學(xué)習(xí) Javascript 或任何其他編程語(yǔ)言中學(xué)到的知識(shí)應(yīng)用到 Vue 中。

例如，假設(shè)我們想學(xué)習(xí)如何編寫優(yōu)雅和簡(jiǎn)潔的Vue組件。我們可以將所學(xué)到的編寫干凈 Javascript 的知識(shí)應(yīng)用到Vue組件中。比如保持函數(shù)簡(jiǎn)小，使用描述性名稱，等等

即使是學(xué)習(xí)類似的框架，如React或Angular，也是非常有用的練習(xí)。

現(xiàn)在讓我們看一個(gè)更詳細(xì)的例子。

以新的視角進(jìn)行重構(gòu)

假設(shè)有以下的一個(gè)組件：

為簡(jiǎn)化，我們將v-for內(nèi)部的內(nèi)容變成了一個(gè)新的組件，如下所示：

完成此操作后，我們將其替換為父組件，這使我們擺脫了多余的嵌套：

如果我們?cè)趯慗avascript，我們會(huì)用幾乎完全相同的方式來做這些。

下面是一個(gè)使用循環(huán)的例子

 
 
 
 

  
  
  
  
function goingLoopy() { 
  
  
  
  
  const elements = document.querySelectorAll('.item'); 
  
  
  
  
 
  
  
  
  
  for (const el of elements) { 
  
  
  
  
    const { width } = el.getBoundingClientRect(); 
  
  
  
  
    if (width > 500) { 
  
  
  
  
      el.classList.add('large'); 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

在這里，我們使用 DOM 方法獲取了類為 item 的所有元素，如果它們大于500px，則將large類添加其中。

這已經(jīng)很好了，但是如果還要優(yōu)化代碼，應(yīng)該怎么做呢

我的猜測(cè)是，你可能會(huì)把for..of的內(nèi)容帶入一個(gè)新函數(shù)中：

 
 
 
 

  
  
  
  
function updateElement(el) { 
  
  
  
  
  const { width } = el.getBoundingClientRect(); 
  
  
  
  
  if (width > 500) { 
  
  
  
  
    el.classList.add('large'); 
  
  
  
  
  } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
function goingLoopy() { 
  
  
  
  
  const elements = document.querySelectorAll('.item'); 
  
  
  
  
 
  
  
  
  
  for (const el of elements) { 
  
  
  
  
    updateElement(el); 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

如果你將組件看作是一個(gè)函數(shù)，那么對(duì)于我們的優(yōu)化會(huì)有更深入的了解。

他們一直在你腦海中，你只是沒有意識(shí)到。

作者：Michael Thiessen 譯者：前端小智 來源：medium

來源：https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439cfaa08713

本文轉(zhuǎn)載自微信公眾號(hào)「****」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系****公眾號(hào)。