Різниця між структурою та бібліотекою

Розробники часто використовують терміни "бібліотека" та "фреймворк" як взаємозамінні. Але є різниця.

І фреймворки, і бібліотеки - це код, написаний кимось іншим, який використовується для вирішення загальних проблем.

Наприклад, припустимо, у вас є програма, де ви плануєте працювати зі рядками. Ви вирішили зберегти свій код СУХИМ (не повторюватись) і написати деякі функції багаторазового використання, такі як:

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

Вітаю. Ви створили бібліотеку.

У фреймворках чи бібліотеці немає нічого магічного. І бібліотеки, і фреймворки - це багаторазовий код, написаний кимось іншим. Їх мета - допомогти вам вирішити загальні проблеми більш простими способами.

Я часто використовую будинок як метафору для концепцій веб-розробки.

Бібліотека - це як поїздка в Ікею. У вас вже є будинок, але вам потрібна трохи допомоги з меблями. Вам не хочеться робити власний стіл з нуля. Ikea дозволяє вам вибирати різні речі, які можна використовувати у вашому домі. Ви контролюєте.

Рамка, навпаки, подібна до побудови зразкового будинку. У вас є набір креслень і кілька обмежених можливостей щодо архітектури та дизайну. Зрештою, підрядник та проект контролюють. І вони повідомлять вам, коли і де ви можете надати свої дані.

Технічна різниця

Технічна різниця між фреймворком та бібліотекою полягає в терміні, який називається інверсія управління.

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).

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.

With jQuery:

Original text


// index.html