【譯】框架與庫的差異
開發者經常互換使用術語“庫”和“框架”。但是，兩者是有區別的。
“框架”和“庫”都是某人編寫的程式碼，用於解決常見的問題。
比如，你有一個處理字串的程式。你決定保持你程式碼的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是一個不那麼自以為是的框架。