【译】框架与库的差异

简介: 开发者经常互换使用术语“库”和“框架”。但是,两者是有区别的。

开发者经常互换使用术语“库”和“框架”。但是,两者是有区别的。


“框架”和“库”都是某人编写的代码,用于解决常见的问题。


比如,你有一个处理字符串的程序。你决定保持你代码的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是一个不那么自以为是的框架。


总结


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


相关文章
|
6月前
|
API 开发工具 数据库
框架和库:你需要知道的一切
框架和库:你需要知道的一切
80 0
|
3月前
|
人工智能 自然语言处理 前端开发
LangChain 构建问题之MetaGPT 和 ChatDev 的支持功能差异如何解决
LangChain 构建问题之MetaGPT 和 ChatDev 的支持功能差异如何解决
60 0
|
5月前
|
程序员 开发工具 开发者
库和框架的区别
库和框架的区别
28 0
|
JavaScript 前端开发 API
什么是框架和库?
什么是框架和库?
108 0
|
缓存 并行计算 PyTorch
终于可用可组合函数转换库!PyTorch 1.11发布,弥补JAX短板,支持Python 3.10
终于可用可组合函数转换库!PyTorch 1.11发布,弥补JAX短板,支持Python 3.10
407 0
终于可用可组合函数转换库!PyTorch 1.11发布,弥补JAX短板,支持Python 3.10
|
前端开发
封装库/工具库中重要概念之组件库
前端开发中,封装库和工具库是非常重要的组成部分。它们可以帮助我们提高代码复用性和可维护性,从而缩短开发周期和降低维护成本。在封装库和工具库中,组件库是其中最为重要和常用的一种,因为它们可以帮助我们快速构建复杂的 UI 界面。
255 0
|
前端开发 JavaScript API
封装库/工具库中重要概念之日期处理库
在前端开发中,日期处理是一个常见的需求。例如,在Web应用程序中,我们通常需要显示日期、计算日期差值、格式化日期等等操作。然而,JavaScript原生API对日期处理的支持相对较弱,因此在实际开发中,我们通常会使用一些封装库和工具库来简化日期处理。在本文中,我们将探讨前端中一些实用的日期处理库。
98 0
|
JavaScript 开发者
框架和库的区别|学习笔记
快速学习框架和库的区别
|
JavaScript 前端开发 CDN
浅析组件库实现按需引入的几种方式
浅析组件库实现按需引入的几种方式
912 0
浅析组件库实现按需引入的几种方式
|
运维 前端开发 开发者
2021你应该解决前端环境差异
2021你应该解决前端环境差异
134 0
2021你应该解决前端环境差异