【译】框架与库的差别

时间 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;
    },
  },
});
复制代码

使用vue，咱们必须填补空白。Vue的构造函数是具备某些特定属性的对象。它会告诉咱们它须要什么，而后在幕后，Vue决定什么时候须要它。Vue反转程序的控制。咱们将代码插入Vue。Vue负责（调用）。

是库仍是框架的区别在因而否存在控制反转。

关于自觉得是的说明

你常常会听到被描述为“自觉得是”或“没有看法”的框架和库。这些术语是主观臆断。他们试图定义开发者在构造时所拥有的自由度。

框架更加自觉得是，由于——根据定义——控制反转须要应用设计自由的让步。

一样的，某种程度上，某种观点的主观程度是主观的。好比，我我的认为Angular是一个自觉得是的框架，而Vue.js是一个不那么自觉得是的框架。

总结

框架和库都是由某人编写的代码，有助你以更加简洁的方式完成一些常见的任务
框架反转了程序的控制。它告诉开发者他们须要什么。库就不是这样。程序员在须要的地方和时间点调用库。
库或框架留给开发者的自由度将决定着它是多“自觉得是”。

谢谢阅读！

原文：medium.freecodecamp.org/the-differe…

opinionated 此处翻译为“自觉得是”，若有不妥还望指出

文章首发：github.com/reng99/blog…

更多内容：github.com/reng99/blog… 【看都看了，顺便star下此仓库啦:kissing_heart:】