本文同步本人掘金平台的原创翻译：https://juejin.cn/post/6844903774876598285

开发者经常互换使用术语“库”和“框架”但是，两者是有区别的“框架”和“库”都是某人编写的代码，用于解决常见的问题比如，你有一个处理字符串的程序你决定保持你代码的DRY（dont repeat yourself），然后编写像下面可复用的功能代码：。

functiongetWords(str) { const words = str.split(); return words; } functioncreateSentence(words

) { const sentence = words.join(); return sentence; } 复制代码那么恭喜你！你创建了一个库框架和库没有多么神奇库和框架都是由某人编写的可复用的代码。

两个的目的都是为了帮助你更快捷地解决常见的问题我常常使用房子作为网络开发概念的比喻库就像去宜家家居（IKEA，一家知名的家居零售商）购物一样你已经有了个家，但是你需要布置些家具你不想从头制作属于自己的桌子。

Ikea允许你选择并购买你想要的东西到你家你在掌控之中另一方面，框架就像建造一个样板房在架构和设计方面，你有一套蓝图和一些有限的选择最终，承包商和蓝图处于控制之中然后他们会告诉你何时何地你可以提供自己的意见。

技术的差异框架和库之间技术差异在于一个控制反转的的术语当你使用库的时候，你负责应用程序的流程此时，你正在选择何时何地调用库当你使用框架的时候，框架负责流程此时，框架提供了一些插入代码的地方，但是它会根据需要去调用你插入的代码。

我们看个使用jQuery（一个库）和Vue.js（一个框架）的例子想象一下，我们想要在错误出现时候显示错误信息在我们的举例中，我们将点击一个按钮来触发并展示错误（信息）使用jQuery// index.html。

"./app.js">Submit

> 复制代码// app.js// A bunch of our own code, // followed by calling the jQuery librarylet error = false

; const errorMessage = An Error Occurred; $(#myButton).on(click, () => { error = true; // pretend some error occurs and set error = true

if (error) { $(#app) .append(`

${errorMessage}

).remove(); } }); 复制代码留意我们是怎么使用jQuery的我们告诉自己的程序我们想调用它这就像我们去物理图书馆，然后从书架上拉出我们想要的书籍这并不是说jQuery函数在我们调用它们的时候不需要某些输入，但是jQuery本身就是这些函数的库。

我们负责（调用）使用Vue.js// index.html

> 复制代码// app.js const vm =

new Vue({ template: `