【譯】框架與庫的差別

時間 2019-12-07

標籤框架差別简体版

原文原文鏈接

開發者常常互換使用術語「庫」和「框架」。可是，二者是有區別的。javascript

「框架」和「庫」都是某人編寫的代碼，用於解決常見的問題。html

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

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

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

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

我經常使用房子做爲網絡開發概念的比喻。git

庫就像去宜家家居（IKEA，一家知名的家居零售商）購物同樣。你已經有了個家，可是你須要佈置些傢俱。你不想從頭製做屬於本身的桌子。Ikea容許你選擇併購買你想要的東西到你家。你在掌控之中。程序員

另外一方面，框架就像建造一個樣板房。在架構和設計方面，你有一套藍圖和一些有限的選擇。最終，承包商和藍圖處於控制之中。而後他們會告訴你什麼時候何地你能夠提供本身的意見。github

技術的差別

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

當你使用庫的時候，你負責應用程序的流程。此時，你正在選擇什麼時候何地調用庫。當你使用框架的時候，框架負責流程。此時，框架提供了一些插入代碼的地方，可是它會根據須要去調用你插入的代碼。網絡

咱們看個使用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;
    },
  },
});
複製代碼