【譯】框架與庫的差異

call_me_R發表於2019-02-10
框架

banner

開發者經常互換使用術語“庫”和“框架”。但是，兩者是有區別的。

“框架”和“庫”都是某人編寫的程式碼，用於解決常見的問題。

比如，你有一個處理字串的程式。你決定保持你程式碼的DRY（don't repeat yourself），然後編寫像下面可複用的功能程式碼：

function getWords(str) {
   const words = str.split(' ');
   return words;
}
function createSentence(words) {
   const sentence = words.join(' ');
   return sentence;
}
複製程式碼

那麼恭喜你！你建立了一個庫。

框架和庫沒有多麼神奇。庫和框架都是由某人編寫的可複用的程式碼。兩個的目的都是為了幫助你更快捷地解決常見的問題。

我常常使用房子作為網路開發概念的比喻。

庫就像去宜家家居（IKEA，一家知名的家居零售商）購物一樣。你已經有了個家，但是你需要佈置些傢俱。你不想從頭製作屬於自己的桌子。Ikea允許你選擇併購買你想要的東西到你家。你在掌控之中。

另一方面，框架就像建造一個樣板房。在架構和設計方面，你有一套藍圖和一些有限的選擇。最終，承包商和藍圖處於控制之中。然後他們會告訴你何時何地你可以提供自己的意見。

技術的差異

框架和庫之間技術差異在於一個控制反轉的的術語。

當你使用庫的時候，你負責應用程式的流程。此時，你正在選擇何時何地呼叫庫。當你使用框架的時候，框架負責流程。此時，框架提供了一些插入程式碼的地方，但是它會根據需要去呼叫你插入的程式碼。

我們看個使用jQuery（一個庫）和Vue.js（一個框架）的例子。

想象一下，我們想要在錯誤出現時候顯示錯誤資訊。在我們的舉例中，我們將點選一個按鈕來觸發並展示錯誤（資訊）。

使用jQuery

// index.html

<html>
   <head>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"
      </script>
      <script src="./app.js"></script>
   </head>
   <body>
      <div id="app">
         <button id="myButton">Submit</button>
       </div>
   </body>
</html>
複製程式碼
// app.js

// A bunch of our own code, 
// followed by calling the jQuery library

let error = false;
const errorMessage = 'An Error Occurred';
$('#myButton').on('click', () => {
  error = true; // pretend some error occurs and set error = true
  if (error) {
    $('#app')
       .append(`<p id="error">${errorMessage}</p>`);
  } else {
    $('#error').remove();
  }
});
複製程式碼

留意我們是怎麼使用jQuery的。我們告訴自己的程式我們想呼叫它。這就像我們去物理圖書館，然後從書架上拉出我們想要的書籍。

這並不是說jQuery函式在我們呼叫它們的時候不需要某些輸入，但是jQuery本身就是這些函式的庫。我們負責（呼叫）。

使用Vue.js

// index.html

<html>
   <head>
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      <script src="./app.js"></script>
   </head>
   <body>
      <div id="app"></div>
   </body>
</html>
複製程式碼
// app.js

const vm = new Vue({
  template: `<div id="vue-example">
               <button @click="checkForErrors">Submit</button>
               <p v-if="error">{{ errorMessage }}</p>
             </div>`,
  el: '#vue-example',
  data: {
    error: null,
    errorMessage: 'An Error Occurred',
  },
  methods: {
    checkForErrors()  {
      this.error = !this.error;
    },
  },
});
複製程式碼

使用vue，我們必須填補空白。Vue的建構函式是具有某些特定屬性的物件。它會告訴我們它需要什麼，然後在幕後，Vue決定何時需要它。Vue反轉程式的控制。我們將程式碼插入Vue。Vue負責（呼叫）。

是庫還是框架的區別在於是否存在控制反轉。

關於自以為是的說明

你經常會聽到被描述為“自以為是”或“沒有見解”的框架和庫。這些術語是主觀臆斷。他們試圖定義開發者在構造時所擁有的自由度。

框架更加自以為是，因為——根據定義——控制反轉需要應用設計自由的讓步。

同樣的，某種程度上，某種觀點的主觀程度是主觀的。比如，我個人認為Angular是一個自以為是的框架，而Vue.js是一個不那麼自以為是的框架。

總結

  • 框架和庫都是由某人編寫的程式碼，有助你以更加簡潔的方式完成一些常見的任務

  • 框架反轉了程式的控制。它告訴開發者他們需要什麼。庫就不是這樣。程式設計師在需要的地方和時間點呼叫庫。

  • 庫或框架留給開發者的自由度將決定著它是多“自以為是”。

謝謝閱讀！

原文：medium.freecodecamp.org/the-differe…

opinionated 此處翻譯為“自以為是”，如有不妥還望指出

文章首發：github.com/reng99/blog…

更多內容：github.com/reng99/blog… 【看都看了，順便star下此倉庫啦:kissing_heart:】

相關文章