框架和庫的區別
Developers often use the terms “library” and “framework” interchangeably. But there is a difference.
開發人員經常互換使用術語“庫”和“框架”。 但是有區別。
Both frameworks and libraries are code written by someone else that is used to help solve common problems.
框架和庫都是由其他人編寫的用于幫助解決常見問題的代碼。
For example, let’s say you have a program where you plan on working with strings. You decide to keep your code DRY (don’t repeat yourself) and write some reusable functions like these:
例如，假設您有一個計劃使用字符串的程序。 您決定保持代碼干燥(不要重復自己)，并編寫一些可重復使用的函數，如下所示：
function getWords(str) {const words = str.split(' ');return words;
}
function createSentence(words) {const sentence = words.join(' ');return sentence;
}Congratulations. You’ve created a library.
恭喜你 您已經創建了一個庫。
There isn’t anything magic about frameworks or library. Both libraries and frameworks are reusable code written by someone else. Their purpose is to help you solve common problems in easier ways.
框架或庫沒有任何魔術。 庫和框架都是別人編寫的可重用代碼。 他們的目的是幫助您以更簡單的方式解決常見問題。
I often use a house as a metaphor for web development concepts.
我經常用一所房子作為Web開發概念的隱喻。
A library is like going to Ikea. You already have a home, but you need a bit of help with furniture. You don’t feel like making your own table from scratch. Ikea allows you to pick and choose different things to go in your home. You are in control.
圖書館就像去宜家。 您已經有了家，但是在家具方面需要一些幫助。 您不想從頭開始制作自己的桌子。 宜家(IKEA)可讓您挑選不同的物品放入家中。 一切盡在您的掌握之中。
A framework, on the other hand, is like building a model home. You have a set of blueprints and a few limited choices when it comes to architecture and design. Ultimately, the contractor and blueprint are in control. And they will let you know when and where you can provide your input.
另一方面，框架就像建立樣板房。 當涉及到架構和設計時，您有一套藍圖和一些有限的選擇。 最終，承包商和藍圖將得到控制。 他們會告訴您何時何地可以提供您的輸入。
技術差異 (The Technical Difference)
The technical difference between a framework and library lies in a term called inversion of control.
框架和庫之間的技術區別在于稱為控制反轉的術語。
When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.
使用庫時，您將負責應用程序的流程。 您正在選擇何時何地調用庫。 使用框架時，框架負責流程。 它為您提供了一些插入代碼的位置，但是它會根據需要調用您插入的代碼。
Let’s look at an example using jQuery (a library) and Vue.js (a framework).
讓我們來看一個使用jQuery(一個庫)和Vue.js(一個框架)的示例。
Imagine we want to display an error message when an error is present. In our example, we will click a button, and pretend an error occurs.
假設我們要在出現錯誤時顯示一條錯誤消息。 在我們的示例中，我們將單擊一個按鈕，并假裝發生錯誤。
使用jQuery： (With 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 = trueif (error) {$('#app').append(`<p id="error">${errorMessage}</p>`);} else {$('#error').remove();}
});Notice how we use jQuery. We tell our program where we want to call it. This is much like going to a physical library and pulling certain books off the shelf as we want them.
注意我們如何使用jQuery。 我們告訴程序我們要在哪里調用它。 這就像去實體圖書館并根據需要從書架上取出某些書。
That’s not to say jQuery functions don’t require certain inputs once we call them, but jQuery itself is a library of those functions. We are in charge.
這并不是說jQuery函數一旦調用它們就不需要某些輸入，但是jQuery本身就是這些函數的庫。 我們負責。
使用Vue.js (With 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>
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;},},
});With Vue, we have to fill in the blanks. The Vue constructor is an object with certain properties. It tells us what it needs, and then behind the scenes, Vue decides when it needs it. Vue inverts the control of the program. We plug our code into Vue. Vue is in charge.
使用Vue，我們必須填補空白。 Vue構造函數是具有某些屬性的對象。 它告訴我們它需要什么，然后在后臺，Vue決定何時需要它。 Vue反轉程序的控制權。 我們將代碼插入Vue。 Vue負責。
The difference whether it is a library or framework is whether or not there is an inversion of control.
是庫還是框架的區別在于控件是否反轉。
關于“被調教”的說明 (A note on being “opinionated”)
You’ll often hear frameworks and libraries described as “opinionated” or “un-opinionated.” These terms are subjective. They attempt to define the level of freedom a developer has when structuring their code.
您經常會聽到被描述為“已優化”或“未優化”的框架和庫。 這些術語是主觀的。 他們試圖定義開發人員在構建代碼時所具有的自由度。
Frameworks are more opinionated than not since — by definition — the inversion of control requires a concession of application-design freedom.
框架之所以固執己見，是因為(從定義上來說)控制權的倒置需要讓應用程序設計自由。
Again, the degree to which something is opinionated is subjective. For example, I personally would consider Angular a highly opinionated framework, and Vue.js a less-opinionated framework.
同樣，對某件事的看法是主觀的。 例如，我個人將Angular視為一個自以為是的框架，而將Vue.js視為一個意見較少的框架。
綜上所述 (In summary)
- Frameworks and libraries are both code written by someone else that helps you perform some common tasks in a less verbose way. 框架和庫都是由其他人編寫的代碼，可以幫助您以不太冗長的方式執行一些常見任務。
A framework inverts the control of the program. It tells the developer what they need. A library doesn’t. The programmer calls the library where and when they need it.
框架會反轉程序的控制權。 它告訴開發人員他們需要什么。 圖書館沒有。 程序員調用庫在何時何地需要它。
- The degree of freedom a library or framework gives the developer will dictate how “opinionated” it is. 庫或框架給開發人員的自由度將決定它的“意見”程度。
Thanks for reading!
謝謝閱讀！
翻譯自: https://www.freecodecamp.org/news/the-difference-between-a-framework-and-a-library-bd133054023f/
框架和庫的區別
