框架和库的区别_框架和库之间的区别

框架和库的区别

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!

谢谢阅读！