框架和库的区别

原文：The Difference Between a Framework and a Library，作者：Brandon Wozniewicz

开发人员经常互换使用术语“库”和“框架”，但事实上这两者是有区别的。

框架和库都是由开发者编写的代码，用于帮助解决常见问题。

假设你要在一个程序中使用字符串，你想编写一些可重复使用的函数，保持代码整洁（不重复），如下所示：

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

恭喜，你创建了一个库。

框架或库没有任何魔法，都是开发者编写的可重用的代码，目的是帮助你以更简单的方式解决常见问题。

我经常用一所房子作为 Web 开发概念的隐喻。

你使用一个库就像你去逛宜家（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>
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 是一个不太有约束的框架。

总结

框架和库都是由其他人编写的代码，可以帮助你以更简洁的方式执行一些常见任务。

一个框架主导了对程序的控制。它告诉开发者他们需要什么。库则不然，开发者在他们需要的地方和时间调用一个库。
一个库或框架给开发者的自由度决定了它的“约束”程度。

谢谢阅读！