Новые технологии, которые вы должны понять в 2018 году

внешний интерфейс Parcel CSS PWA

1. Диалоговое окно нового тега HTML5.2

В новой версии HTML5.2 есть интересная метка, представляющая собой диалоговое окно или окно, котороеdialog, его основное использование выглядит следующим образом:

<dialog open>
    //soming...
</dialog>

openСвойство указывает, что окно отображается по умолчанию и что пользователь может взаимодействовать с ним. Соответствующие методы js: 1.close(): Закройте диалоговое окно, при необходимости передайте параметр типа {domxref("DOMString")}}, чтобы обновить возвращаемое значение диалогового окна. 2.open(): Немодальное отображение этого диалога, то есть вы все еще можете взаимодействовать с другим содержимым после открытия этого диалога. Необязательный входящий типElementилиMouseEventПараметры, используемые для определения позиции отображения диалогового окна. 3.showModal(): Отображает это диалоговое окно в модальном режиме и будет находиться поверх всех других диалоговых окон (экранируя взаимодействие с другими диалоговыми окнами). Необязательный входящий типElementилиMouseEventПараметр, используемый для определения позиции отображения диалогового окна.show()а такжеshowModal()есть разница,showпросто покажиdialog,а такжеshowMadal()Это заблокирует другие всплывающие слои. согласно сESCможно закрытьdialog,dialogнеобходимо переопределитьcssстиль, в конце концовcssявляется стилем по умолчанию. Вот демо-код:

<!-- 创建一个dialog -->
<dialog>
    <h1>这是dialog的标题</h1>
    <div>这是dialog的内容</div>
    <button id="close_dialog">关闭</button>
</dialog>
<button id="open_dialog">打开</button>
<!-- js代码 -->
<script>
    var dialog = document.getElementsByTagName("dialog")[0],
        openDialog = document.getElementById("open_dialog"),
        closeDialog = document.getElementById("close_dialog");
    openDialog.onclick = function(){
        dialog.showModal();
    };
    closeDialog.onclick = function(){
        dialog.close();
    };
</script>

2. Макет сетки новый макет сайта css

Макет CSS Grid состоит из двух основных компонентов: оболочки (родительский элемент) и элементов (дочерний элемент). Обертка — это фактическая сетка, а элементы — содержимое внутри сетки. Ниже показан элемент-оболочка с 6 элементами внутри:

<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

Чтобы превратить элемент-обертку вgrid(网格), проще говоряdisplayсвойство установлено наgridТолько что:

.wrapper{
    display:grid;
}

Чтобы сделать его контейнером двумерной сетки, нам нужно определить столбцы и строки. Создадим 3 столбца и 2 строки. мы будем использоватьgrid-template-rowа такжеgrid-template-columnАтрибуты.

.wrapper{
    display:grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:50px 50px;
}

Как видите, у нас естьgrid-template-columnsЗаписывается 3 значения, поэтому получаем 3 столбца. Мы хотим получить 2 строки, поэтому получаемgrid-template-rowsбыло указано 2 значения. Эти значения определяют ширину столбцов (100 пикселей) и высоту строк (50 пикселей). В результате получается следующее:

我是图片
Далее о том, как размещать элементы (дочерние элементы) в сетке. Обратите внимание, что именно здесь проявляется мощь макета сетки, поскольку он делает создание макетов очень простым. Мы используем ту же HTML-разметку, что и раньше, чтобы лучше понять, мы добавляем отдельный класс к каждому элементу (дочерний элемент):

<div class="wrapper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

Теперь давайте создадим сетку 3 × 3 (GRID):

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

получит следующий макет:

3*3布局
Не знаю, заметили ли вы, что мы видим на странице только сетку 3×2, а то, что мы определяем, — это сетка 3×3. Это потому, что у нас есть только 6 элементов (дочерних элементов) для заполнения этой сетки. Если мы добавим еще 3 элемента (дочерние элементы), последняя строка также будет заполнена.

Для размещения и изменения размера элементов (дочерних элементов) мы будем использоватьgrid-columnа такжеgrid-rowсвойства для установки:

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

Что мы здесь делаем, так это то, что мы хотим, чтобы item1 занимал, начиная с первой линии сетки и заканчивая четвертой линией сетки. Другими словами, он будет занимать всю строку самостоятельно. Вот что отображается на экране:

布局图片
Если вы не понимаете, что у нас всего 3 столбца, то почему 4 линии сетки? Взгляните на изображение ниже, где я нарисовал черные линии сетки столбцов:
布局网格线
Обратите внимание, что теперь мы используем все строки в сетке. Когда мы берем первые элементы (дочерние элементы), чтобы занять всю первую строку, остальные элементы (дочерние элементы) перемещаются на следующую строку. Наконец, чтобы дать вам более простой сокращенный способ написания приведенного выше синтаксиса:

.item1 {
    grid-column: 1 / 4;
}

Чтобы убедиться, что вы правильно поняли концепцию, мы переставляем другие элементы (дочерние элементы).

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

Вот эффект макета на странице:

布局效果

3. Parcel: сверхбыстрый упаковщик веб-приложений

Хотя веб-пакет дает много возможностей для настройки, он также усложняет работу. И Parcel приносит простоту. Официально Parcel называется «нулевая конфигурация» и работает «из коробки».

Как было сказано выше, Parcel поставляется со встроенным сервером разработки. Сервер разработки автоматически перестроит ваше приложение при изменении файлов и поддерживает模块热替换для быстрого развития. В чем преимущества посылки? 1. Быстрая упаковка — Parcel работает быстрее, чем Webpack, Rollup и Browserify. 2.Parcel поддерживает JS, CSS, HTML, файлы ресурсов и т. д. - плагины не требуются - более удобный для пользователя. 3. Нулевая конфигурация. Готовое разделение кода, горячая замена модулей, препроцессор CSS, сервер разработки, кэширование и многое другое; 4. Более удобный журнал ошибок. Когда мы должны использовать Parcel, Webpack или Rollup? Это полностью зависит от вас, но я бы лично использовал каждый упаковщик, когда: Посылка: малые и средние проекты (менее 15 тыс. строк кода) Webpack: крупные и корпоративные проекты. Сводка: для пакетов NPM. Давайте дадим Parcel шанс. Адрес официального сайта посылки: *parceljs.org/

4. Может ли PWA привести к новому раунду масштабных переделок передовых технологий?

Прогрессивные веб-приложения, также известные как PWA. С 2015 года технологии, связанные с PWA, постоянно совершенствуются и оптимизируются, предоставляя очень хорошие решения как для пользовательского опыта, так и для удержания пользователей. PWA может сочетать в себе преимущества Интернета и приложения: прогрессивный, отзывчивый, автономный, взаимодействие, подобное приложению, мгновенное обновление, безопасный, доступный для поиска поисковыми системами, нажимаемый, устанавливаемый, связываемый. PWA относится не к конкретной технологии, а к веб-приложению, в котором применяется несколько технологий. Его основные технологии включают App Manifest, Service Worker, Web Push, Credential Management API и другие. Его основная цель — повысить производительность веб-приложения и улучшить взаимодействие с пользователем веб-приложения. Давайте подробно рассмотрим, действительно ли эти основные технологии могут компенсировать недостатки Интернета.

  1. Web App Manifest

Для решения проблемы удержания пользователей был создан манифест веб-приложения.Это файл внешних ссылок в формате JSON.В этом файле браузер предоставляет метаданные, такие как имя, адрес, значок и т. д. сайта. Вводя этот файл JSON в браузер, браузер распознает существование этого файла и решает, следует ли открывать диалоговое окно «Добавить на рабочий стол» в соответствии со своим собственным механизмом, и создает значок приложения на рабочем столе. войти в приложение с иммерсивным опытом, полноэкранным режимом, без адресной строки браузера, а также автоматически добавить заставку приложения.

  1. Service Worker

Service Worker — это специальный Web Worker, работающий независимо от основного потока страницы, он может перехватывать и обрабатывать сетевые запросы, а с помощью Cache Storage API разработчики могут свободно управлять HTTP-запросами, отправляемыми страницей, поэтому Service Worker могут Причины перевести веб-сайт в автономный режим.

  1. Push Notification

Push-уведомления на самом деле представляют собой комбинацию двух API: Notification API и Push API. Notification API предоставляет разработчикам возможность отправлять уведомления пользователям, в том числе запрашивать разрешение на отображение уведомлений, инициировать уведомления и настраивать тип уведомлений. Push API позволяет серверу отправлять автономные сообщения пользователю, даже если пользователь в данный момент не открывает вашу страницу или даже не открывает браузер.

Различные производители браузеров начали активно поддерживать PWA в 2017 году. Даже Apple несколько месяцев назад незаметно разработала Service Worker, и iOS также будет поддерживать PWA. Крупные сайты практиковались один за другим, и использование PWA стало тенденцией.

Категории