предисловие
Недавно я прочитал некоторые иностранные языки и почувствовал, что эта статья о современных методах веб-разработки была в порядке, поэтому я перевел ее и старался изо всех сил.Ломанный английский очень сложен, и некоторые из них смешаны с некоторыми поверхностными представлениями о моем собственный. Пожалуйста, потерпите меня, если я ввожу в заблуждение, а также попросите проходящих мимо учителей дать больше комментариев и исправлений. Если вы хотите прочитать оригинальный английский текст, вы можете напрямую отсканировать QR-код внизу текста, чтобы прочитать его. .Если вы хотите послушать аудио, просто нажмите на ссылку
Несколько советов, как выделиться в современной веб-разработке
В этой статье я расскажу об основных концепциях, преимуществах и недостатках использования одностраничного фреймворка на основе JavaScript.
Прежде всего, что такое одностраничное приложение?
Давайте посмотрим, как работает традиционное веб-приложение. Как правило, серверное приложение с полным стеком генерирует все данные для веб-приложения на самом сервере. Только тогда он может быть отправлен клиенту до отображения страницы.
Обзор одностраничного приложения (SPA)
Содержимое извлекается из базы данных, затем передается через контроллер и, наконец, объединяется с шаблоном представления перед его отправкой.
Это проявляется в виде страниц, которые перезагружаются каждый раз, когда вы просматриваете приложение или веб-сайт. Роль JavaScript здесь очень мала. Он отвечает только за управление небольшой частью пользовательского интерфейса.
Несколько лет назад среди разработчиков стали набирать популярность одностраничные приложения. Одностраничное приложение отправляет запрос на сервер для создания HTML-файла вместе со стилями и сценариями.
При этом последующие запросы к серверу выполняются в виде Ajax-запросов. Само содержимое HTML-страницы отображается с помощью JavaScript и стилизуется с помощью CSS.
Преимущество заключается в том, что мы получаем только часть необходимого контента вместо всей страницы, что обеспечивает меньшую нагрузку на сервер и более быстрый пользовательский интерфейс.
Ниже приведены наиболее популярные фреймворки одностраничных приложений (SPA) на основе JavaScript.
- Angular.js — клиентская библиотека для подключения к статическому HTML с набором свойств для привязки данных.
- ReactJS — клиентская библиотека на основе компонентов для создания веб-приложений.
- Vue.js — обеспечивает двустороннюю привязку данных (также наблюдается в AngularJS) и рендеринг на стороне сервера, как Angular 2 и ReactJS.
- Ember.js — клиентская библиотека для создания веб-приложений с использованием механизма шаблонов Handlebars.
- Meteor.js — фреймворк полного стека на базе NodeJS и MongoDB. который использует Blaze, Angular и React для шаблонов
5 лучших JavaScript-фреймворков 2017 года
Одностраничные приложения создают границы между содержимым, логическими контроллерами и презентациями. Для фреймворков MVC это разделение задач.
-
Контент (модель) — обычно предоставляется в формате JSON с использованием REST (Отвечает за объединение кода, относящегося к базовой композиции данных в коде, включая хранение и чтение данных, то есть так называемый формат данных интерфейса, возвращаемый бэкэнд-соглашением)
-
Логический контроллер (управление) — отвечает за обработку запросов и отправку данных обратно в приложение. Используя обработку HTTP и WebSockets (Он отвечает за обработку бизнес-логики в системе и обновление модели и представления по мере необходимости.Это делает модель и представление не должны напрямую взаимодействовать друг с другом, и реализует слабосвязанную связь между ними, что так -так называемая высокая связность.Низкая связанность, модульность, независимость друг от друга, сокращение зависимостей)
-
представление (представление) — управляется шаблоном HTML, содержащим теги шаблона, для выполнения таких задач, как перебор набора данных (Отвечает за группировку кода, используемого для отображения данных, хранящихся в модели, на экране, по существу обрабатывая каждый элемент DOM.)
Резюме: Преимущества шаблона MVC
Разделение ответственности облегчит понимание, поддержку и тестирование кода. Фактически, при написании html мы всегда выступаем за содержание и разделение структуры и стиля. Многомерный режим разработки, который позволяет нескольким разработчикам, работающим над одним проектом, разделить задачи. в соответствии с моделью приложения, представлением и уровнями контроллера 3. Все эти фреймворки Vue и Angular следуют этому режиму, но говорят, что это пушисто, но на самом деле это не просто. На самом деле, технология, лежащая в основе этих фреймворков, является продуктом комбинированное применение некоторых шаблонов наблюдателя, комбинированных шаблонов, шаблонов стратегии и других шаблонов проектирования.На данный момент обсуждается важность нативного js.. Ха-ха
Пример на стороне сервера
В этом примере показано, как мы можем получить и отобразить список пользователей на разных уровнях.
Начнем с получения серверного контроллера пользователя, возвращающего список в формате JSON.
/**
* Users controller (NodeJS)
*/
const app = express(),
/**
* This function fetches staff users
* from the MongoDB collection
*/
const fetchUsers = (offset = 0, limit = 10) => {
return new Promise((resolve, reject) => {
Users.find({}, {
$offset: offset,
$limit: limit
}).then((result) => {
if(error) {
reject(error);
}
else {
resolve(result);
}
});
});
};
/**
* This function returns a list
* of users in JSON format.
*/
app.get('/staff/users', (request, response) => {
fetchUsers()
.then((result) => {
response.status(200).json(result);
})
.catch((error) => {
response.status(500).json(error);
});
});
Если мы попросим сервер получить некоторых пользователей с https://yourserver/staff/users, ответ будет следующим:
[
{
"name":"Savinda",
"location":"Colombo"
},
{
"name":"Thameera",
"location":"Colombo"
},
{ "name":"Andy",
"location":"California"
},
{ "name":"Ian",
"location":"New York"
}
]
клиентский контроллер
Если мы используем клиентский контроллер, код будет выглядеть так:
Template.users = {
/**
* Array to store list of users.
*/
users: [],
/**
* This event fires when a template is ready.
*/
ready: () => {
fetchUsers();
},
/**
* Make AJAX request to fetch list of users.
*/
fetchUsers: () => {
let request = new XMLHttpRequest(),
url = 'https://yourserver/staff/users'
/**
* We make the request...
*/
request.open('GET', url, true);
/**
* When the request has completed...
*/
request.onload = () => {
/**
* Check the response status code
to make sure everything working fine...
*/
if(request.status === 200) {
/**
* Assign the response to the list of users.
*/
this.users = JSON.parse(request.responseText);
}
};
}
};
Мы можем отобразить пользователя из списка, используя следующий код
<template name="user">
<li>
{{ name }} is in {{ location }}.
</li>
</template>
Посмотрите шаблонное приложение mvc, в котором пользователь выглядит так:
<html>
<head>
<title>
Single Page Application | Users
</title>
</head>
<body>
<ul class="list-of-users">
{{ each users }}
{{> user }}
{{ end }}
</ul>
</body>
</html>
Когда браузер изначально отображает шаблон, он вызывает контроллер, чтобы получить шаблон пользователя. Когда пользователь очищается, они автоматически отображаются в списке
некоторые важные понятия
Вот некоторые концепции, если вы новичок в разработке клиентской части JavaScript.
- Контроллер — отвечает за управление данными и прикрепленными файлами представлений. Также содержит функции для обработки поведения пользовательского интерфейса приложения.
- Шаблоны — HTML-файлы, содержащие специальные теги для отображения содержимого.
- Представления — аналогично используемым шаблонам и функциям. Однако представление — это всеобъемлющая коллекция различных компонентов, которые объединяют всю страницу.
- Binding — отображаемое содержимое представления, которое автоматически обновляется при изменении данных в контроллере, обрабатывающем это представление.
- Маршрутизация — использует HTML5 pushState для глубокой ссылки на разные представления во время просмотра приложения.
- Ajax Request — отправить запрос на сервер для получения данных без перезагрузки страницы. Без Ajax не было бы одностраничного приложения
- Web Sockets — API для установления постоянных соединений между веб-браузерами и серверами. Протокол HTTP запрашивает данные, затем отключается
Суммировать
Вся статья в основном посвящена переходу от традиционных веб-приложений к современным веб-приложениям, то есть разработке популярных сейчас одностраничных приложений.По сути, одностраничные приложения по сути являются Ajax-приложениями, а не частыми изменениями между традиционными клиентскими и сервер.Режим взаимодействия с данными, чтобы избежать критических замечаний, таких как медленный отклик, мерцание пустых страниц и обновление всей страницы, чтобы улучшить взаимодействие с пользователем и уменьшить нагрузку на стороне сервера, разделить слой представления (представление), уровень управления (управление), и уровень данных (модель). Некоторые элементы управления логикой страницы извлекаются со стороны сервера для обработки внешним интерфейсом, например, маршрутизация и т. д. Серверная сторона предоставляет только данные, которые могут идентифицировать внешний HTTP-запрос, так что пользователь может выполнять определенные события DOM без обновления всей страницы (например, при нажатии, прокрутке) и т. д., частичное обновление страницы представляет собой отображение новых данных.Что касается более глубокого понимания, все же необходимо написать больше кода Слишком много концептуальных вещей — это истории, иллюзорные и бледные, а код — это теория понятий, лучшее объяснение.