Модуль отмечает, что квалифицированный младший фронтенд-инженер должен освоить

Источник Github: модуль отмечает, что квалифицированный младший инженер по интерфейсу должен освоить| Просите звездочки ✨ | Ставьте ❤️ подписку, ❤️ лайк, ❤️ поощряйте автора

Привет всем, яКороль Демонов Нэчжа, приятно познакомиться~~

Жизненное кредо Нэчжи:Если вам нравится то, что вы изучаете, у вас будет сильная мотивация.

Изучая программирование каждый день, вы будете в шаге от своей мечты. Спасибо каждому программисту, который любит программирование. Какими бы замечательными ни были ваши знания, пойдемте со мной, чтобы успокоить это блуждающее сердце, продолжайте, давай,2021давай! Добро пожаловать, чтобы подписаться и добавить меняvx:xiaoda0423, добро пожаловать, лайкайте, добавляйте в избранное и комментируйте

Не бойтесь мечтать, но не просто мечтайте, будьте деятелем, а не болтуном, и делайте все возможное.

предисловие

Если эта статья вам поможет, ставьте ❤️ подписку, ❤️ лайк, ❤️ подбадривайте автора, вы приняли вызов? Публичный аккаунт статьи публикуется впервые, обратите вниманиеПрограммист ДораэмонПолучите последние статьи в первый раз

❤️Заправки❤️~

веб-модуль

базовая структура html

1. htmlЭтикетки изготавливаются<>В окружении ключевых слов.
2. htmlТеги обычно идут парами, разделенными на начало тега и конец тега.
3. Некоторые теги не имеют закрывающего тега, это одиночные теги, и необходимо использовать одиночные теги./конец.
4. Весь контент страницы находится вhtmlв этикетке.
5. htmlМетки делятся на три части: имя метки, содержимое метки, атрибуты метки.
6. htmlТег является семантическим, и о содержании тега можно судить по названию тега.Роль семантики заключается в том, что структура веб-страницы становится более понятной, ее легче индексировать поисковыми системами, и она легче выводится на экран. читателям читать содержимое веб-страницы.
7. Содержимое тега — это содержимое пары тегов.
8. Содержимым тегов могут быть другие теги.

Свойства ярлыка

1. classатрибут: имя класса, используемое для определения элемента
2. idатрибут: используется для указания уникальногоid, значение этого свойства равноhtmlуникальный в документе
3. styleАтрибут: используется для указания встроенного стиля элемента. Использование этого атрибута переопределит любые глобальные настройки стиля.
4. titleАтрибуты: дополнительная информация, используемая для указания элемента
5. accesskeyСвойства: сочетания клавиш, используемые для указания активного элемента.
6. tabindexАтрибут: используется для указания того, что элемент находится вtabпорядок ключей
7. dirАтрибут: используется для указания направления текста содержимого в элементе, атрибут имеет толькоltrилиrtlдва
8. langатрибут: язык, используемый для указания содержимого элемента

Свойства события

1. windowоконные события,onload, который срабатывает после завершения загрузки страницы,onunload, что происходит, когда пользователь покидает страницу (клик для перехода, перезагрузка страницы, закрытие окна браузера и т. д.)
2. formформируют события,onblur, срабатывает, когда элемент теряет фокус,onchange, который срабатывает при изменении значения элемента,onfocus, который срабатывает, когда элемент получает фокус,onreset, который срабатывает при нажатии кнопки сброса в форме,onselect, который срабатывает при выделении текста в элементе,onsubmit, который срабатывает при отправке формы
3. keyboardсобытия клавиатуры,onkeydown, который срабатывает, когда пользователь нажимает клавишу,onkeypress, который срабатывает, когда кнопка нажимается после того, как пользователь нажимает кнопку. Это свойство действует не на все ключи, а не на все ключи:alt,ctrl,shift,esc
4. mouseсобытия мыши,onclick, который срабатывает, когда происходит щелчок мышью по элементу,onblclick, который срабатывает при двойном щелчке мыши по элементу,onmousedown, который срабатывает при нажатии кнопки мыши на элементе,onmousemove, который срабатывает при наведении указателя мыши на элемент,onmouseout, который срабатывает, когда указатель элемента перемещается за пределы элемента,onmouseup, срабатывает, когда кнопка мыши отпускается на элементе.Mediaмедийные мероприятия,onabort, который срабатывает при выходе,onwaiting, срабатывает, когда воспроизведение медиафайла остановлено, но он собирается продолжить воспроизведение.

текстовая метка

1. теги абзаца<p></p>, теги абзаца используются для описания абзаца текста
2. тег заголовка<hx></hx>, тег title используется для описания заголовка, всего тег title имеет шесть уровней,<h1></h1>Теги обычно появляются только один раз на странице
3. Подчеркните ярлыки утверждений,<em></em>, используется, чтобы подчеркнуть важность определенных слов
4. больше внимания уделяется этикеткам,<strong></strong>и<em>Как и теги, он используется для выделения текста, но выделяет немного больше.
5. Нет семантических меток<span></span>, метки не содержат семантики
6. короткая текстовая справочная метка<q></q>, краткая текстовая цитата
7. теги цитирования длинного текста<blockquote></blockquote>, определение длинных текстовых ссылок
8. метка новой строки<br/>

Вкладка «Мультимедиа»

1. тег ссылки,<a></a>
2. тег изображения,<img/>
3. тег видео,<video></video>
4. аудио тег,<audio></audio>

список

1. теги неупорядоченного списка,ul,li,<ul></ul>Список определяет неупорядоченный список,<li></li>Представляет каждый элемент в списке без необходимости
2. упорядоченный список,ol,li
3. определить список,<dl></dl>, список определений обычно и<dt></dt>и<dd></dd>используется с тегами

лист

1. вкладка таблицы<table></table>
2. ряд таблицы<tr></tr>
3. заголовок таблицы<th></th>
4. Клетка<td></td>
5. Объединение таблиц, в одной строке объединение нескольких столбцовcolspan="2", внутри одного столбца объединить несколько строкrowspan="3"

тег формы

1. тег формы<form>

<form></form>Форма может передавать данные, введенные браузером, на сторону сервера, чтобы программа на стороне сервера могла обрабатывать данные, отправленные формой.

<form method="传送方式" action="服务器文件">

action, где данные, введенные зрителем, передаются

method, способ передачи данных

2. входной тег<input/>

name: имя текстового поля, которое используется для отправки формы и получения данных в фоновом режиме.

value: Установите значение по умолчанию для поля ввода текста.

type: путем определения различныхtypeтип,inputфункция другая.

text	单行文本输入框
password	密码输入框（密码显示为***)
radio	单选框 （checked属性用于显示选中状态）
checkbox	复选框（checked属性用于显示选中状态）
file	上传文件
button	普通按钮
reset	重置按钮（点击按钮，会触发form表单的reset事件）
submit	提交按钮（点击按钮，会吃饭form表单的submit事件）
email	专门用于输入 e-mail
url	专门用于输入 url
number	专门用于number
range	显示为滑动条，用于输入一定范围内的值
date	选取日期和时间（还包含：month、week、time、datetime、datetime-local）
color	选取颜色

buttonкнопка, выпадающее окно выбора<select></select>

<option value="提交值">选项</option>是下拉选择框里面的每一个选项

3. Текстовое поле:<textarea></textarea>, когда пользователь хочет ввести большой объем текста, используйте текстовое поле.cols, количество столбцов многострочного поля ввода,rows, количество строк в многострочном поле ввода.

другие семантические теги

1. Коробка<div></div>
2. заголовок веб-страницы<header></header>,html5Добавлены семантические теги для определения заголовка веб-страницы, которые в основном используются для макета и разделения структуры страницы.
3. нижняя информация<footer></footer>,html5Добавлены семантические теги для определения нижней части веб-страницы, которые в основном используются для макета и разделения структуры страницы.
4. навигация<nav></nav>,html5Добавьте семантические теги, определите навигацию, в основном используемую для макета, разделите структуру страницы.
5. статья<article></article>,html5Добавьте семантические теги, определите статью, в основном используемую для макета, разделите структуру страницы
6. Боковая панель<aside></aside>, Семантические теги, определяют информацию вне предметного содержания, в основном используются для верстки и разделяют структуру страницы.
7. отметка времени<time></time>, семантическая метка, определяющая время

Структура веб-страницы

1. <!DOCTYPE html>Определяет тип документа и сообщает браузеру, какой стандарт интерпретироватьHTML
2. <html></html>может сообщить браузеру, что этоHTMLДокументация
3. <body></body>Содержимое между тегами является основным содержанием веб-страницы.
4. <head></head>Тег используется для определения заголовка документа, это контейнер для всех элементов заголовка.
5. <title></title>элемент определяет заголовок документа
6. <link>этикетка будетcssссылка на файл стиляHTMLвнутри файла
7. <meta>Определить метаданные документа

Модульное деление

1. Обычные корпоративные веб-сайты в основном состоят из области заголовка, области отображаемого изображения, области темы и нижней информационной области.
2. Принципы разделения веб-страницы: – сверху вниз – изнутри наружу

Синтаксис кода CSS

1. CSSКаскадные таблицы стилей(Cascading Style Sheets), который в основном используется для определенияHTMLСтиль отображения содержимого в браузере, например размер текста, цвет, полужирный шрифт и т. д.
2. cssкод обычно хранится в<style></style>внутри этикетки
3. cssСтили состоят из селекторов и объявлений, которые, в свою очередь, состоят из свойств и значений.
4. селектор{属性:值}
5. Селекторы: также известные как селекторы, указывающие элементы на веб-странице, к которым применяются правила стиля.

Размещение CSS

1. Встроенные стили, не рекомендуется
2. Встроенная таблица стилей
3. Таблица стилей контура

Наследование CSS

1. CSSЧасть стилей наследуются, наследование — это правило, позволяющее применять стили не только к конкретному элементу html-тега, но и к его потомкам.
2. Ненаследуемые стили:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear
3. Наследуемые стили:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor

Вид селектора

1. Селектор тегов: по имени тега, изменитьcssстиль
2. Селектор подстановочных знаков: выбирает все элементы на странице.
3. селектор атрибутов
4. Селектор потомков: выбирает все элементы ниже родительского элемента.
5. Селектор дочерних элементов первого уровня: выбирает прямые дочерние элементы родительского элемента, селектор потомков выбирает все дочерние элементы родительского элемента, а селектор дочерних элементов первого уровня выбирает только дочерние элементы первого уровня и не будет поиск ниже по элементу
6. idселектор: пройтиidНайти уникальные теги на странице
7. classселектор: по конкретномуclass(класс), чтобы найти соответствующий тег на странице для.classназвание
8. Селектор псевдокласса::hoverНаведите мышь на элемент;:beforeвставить содержимое перед элементом;:afterВставить содержимое после элемента
9. Групповые селекторы: вы можете установить один и тот же стиль для нескольких разных селекторов.

приоритет селектора

1. Когда разные селекторы стилизуют один и тот же объект, а два селектора имеют одно и то же свойство, которому присвоены разные значения.
2. Какой стиль селектора применяется путем вычисления того, какой селектор имеет наибольшее значение веса
3. Метод расчета веса:

标签选择器：1

class选择器：10

id选择器：100

行内样式：1000

!important 最高级别，提高样式权重，拥有最高级别

стиль фона

1. фоновый цветbackground-color
2. Фоновое изображениеbackground-image

background-image:url(bg01.jpg);

3. положение фонового изображенияbackground-position

background-position:10px 100px;

// 代表坐标x，y轴

4. Повтор фонового изображенияbackground-repeat

background-repeat:no-repeat

// no-repeat 设置图像不重复，常用

// round 自动缩放直到适应并填充满整个容器

// space 以相同的间距平铺且填充满整个容器

5. Позиционирование фонового изображенияbackground-attachment

background-attachment:fixed

// 背景图像是否固定或者随着页面的其余部分滚动

// background-attachment的值可以是scroll（跟随滚动），fixed（固定）

6. backgroundсокращение

background:#ff0000 url(bg01.jpg) no-repeat fixed center

стиль шрифта

1. семейство шрифтовfont-family

font-family:"微软雅黑","黑体";

2. размер шрифтаfont-size

font-size:12px;

Размер шрифта по умолчанию для веб-страниц:16px

3. вес шрифтаfont-weight

font-weight:400;

normal（默认）
bold（加粗）
bolder（相当于<strong>和<b>标签）
lighter （常规）
100 ~ 900 整百（400=normal，700=bold）

4. Цвет шрифтаcolor

颜色的英文单词color:red;

十六进制色：color: #FFFF00;

RGB(红绿蓝)color:rgb(255,255,0)

RGBA（红绿蓝透明度）A是透明度在0~1之间取值。color:rgba(255,255,0,0.5)

5. курсивfont-style

font-style:italic

normal 文本正常显示

italic 文本斜体显示

oblique 文本倾斜显示

текстовый атрибут

1. высота строкиline-height

line-height:50px;

Может поддерживать высоту родительского элемента

2. горизонтальное выравнивание текстаtext-align

left 左对齐
center 文字居中
right 右对齐

3. Вертикальное выравнивание высоты строки текстаvertical-align

baseline 默认

sub 垂直对齐文本的下标，和<sub>标签一样的效果

super 垂直对齐文本的上标，和<sup>标签一样的效果

top 对象的顶端与所在容器的顶端对齐

text-top 对象的顶端与所在行文字顶端对齐

middle 元素对象基于基线垂直对齐

bottom 对象的底端与所在行的文字底部对齐

text-bottom 对象的底端与所在行文字的底端对齐

4. отступ текстаtext-indent

text-indent:2em;

Отступ первой строки обычно используется в начале абзаца.

5. расстояние между буквамиletter-spacing
6. интервал между словамиword-spacing
7. капитализация текстаtext-transform

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母。

lowercase 定义仅有小写字母。

8. украшение для текстаtext-decoration

none 默认。
underline 下划线。
overline 上划线。
line-through 中线。

9. перенос словаword-wrap

word-wrap: break-word;

основной стиль

1. ширинаwidth

width:200px;
定义元素的宽度

2. высокийheight

height:300px
元素默认没有高度
需要设置高度
可以不定义高度，让元素的内容将元素撑高

3. мышиный стильcursor

Определить стиль мышиcursor:pointer

default默认
pointer小手形状
move移动形状

4. прозрачностьopacity

opacity:0.3

透明度的值0~1之间的数字，0代表透明，1代表完全不透明

透明的元素，只是看不到了，但是还占据着文档流

5. видимостьvisibility

visibility:hidden;

visible 元素可见

hidden 元素不可见

collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

6. скрыть переполнениеoverflow

Устанавливает, как отображается содержимое объекта, когда оно превышает заданную высоту и ширину.

visible 默认值，内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

7. цвет границыoutline

inputПоле ввода текста имеет свою границу, и стиль уродлив, мы можем пройтиoutlineИзменить границы

outline:1px solid #ccc;

outline:none清除边框

сброс стиля

Ранние веб-страницы неcssСтиль, чтобы сделать интерфейс красивым, многие элементы идут с нимиmargin、paddingи другие стили, но значения, анализируемые этими стилями, различаются в разных браузерах.cssСтиль сбрасывается для обеспечения согласованного отображения в разных браузерах.

清除元素的margin和padding
去掉自带的列表符
去掉自带的下划线

бокс модель стиль

1. Блочные элементы, встроенные элементы и встроенные блочные элементы.

Элементы уровня блока:

• Каждый элемент уровня блока начинается с новой строки, а элементы, следующие за ним, начинаются с новой строки.
• Можно установить высоту элемента, ширину, высоту строки, а также верхнее и нижнее поля.
• Ширина элемента, если она не задана, составляет 100% от его собственного родительского контейнера, если не задана ширина.

Встроенные элементы:

• и другие элементы все на одной строке
• Высота элемента, ширина, высота строки, а также верхнее и нижнее поля не могут быть установлены
• Ширина элемента равна ширине содержащегося в нем текста или изображения и не может быть изменена.

Элементы встроенного блока:

• и другие элементы все на одной строке
• Можно установить высоту элемента, ширину, высоту строки, а также верхнее и нижнее поля.

2. Преобразование класса элементаdisplay

block: преобразовать элемент в элемент блочного уровня.

inline: преобразовать элемент в элемент уровня строки.

inline-block: преобразовать элемент в встроенный блочный элемент.

none: скрыть элемент

3. Инсультborder

border:2px solid #f00;

Стиль линии:

dashed（虚线）| dotted（点线）| solid（实线）。

cssСтили позволяют стилизовать границы только в одном направлении:

下描边border-bottom:1px solid red;

上描边border-top:1px solid red;

右描边border-right:1px solid red;

左描边border-left:1px solid red;

4. интервалmargin

div{margin:20px 10px 15px 30px;}

5. Заполнениеpadding

padding:10px

плаватьплавать

1. плавающий принцип

• Плавающий делает элемент плавающим вне нормального потока документа и плавающим поверх нормального потока.

• Плавающий элемент по-прежнему отображается в своем положении в нормальном потоке, а затем перемещается как можно дальше влево или вправо в соответствии с заданным направлением плавания, пока внешний край плавающего элемента не встретится с содержащим его блоком или другим плавающим элементом и позволит текст и встроенные элементы окружают его.

• Плавающий создаст поле на уровне блока (эквивалентно настройкеdisplay:block), независимо от того, что собой представляет сам элемент.

2. Очистить эффект плавания

clearОчистить поплавок:

none : 不清除（默认值）。

left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许两边有浮动对象

3. Используйте псевдокласс для реализации клиринга с плавающей запятой

.clearFix {
  	content="";
  	display:block;
  	width:0;
  	height:0;
  	clear:both;
}

Позиционирование позиции

1. Функция позиционирования может сделать макет более свободным.
2. Модель слоя -- абсолютное позиционирование (относительно родительского класса)

Абсолютное позиционирование сохраняет позицию элемента независимой от потока документа, поэтому он не занимает места. Это отличается от относительного позиционирования, которое на самом деле считается частью модели позиционирования в обычном потоке, поскольку позиция элемента определяется относительно его положения в обычном потоке.

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

Как показано ниже:

Если вы хотите установить абсолютное позиционирование в модели слоя для элемента, вам нужно установитьposition:absolute(абсолютное позиционирование), результатом этого оператора является перетаскивание элемента из потока документа, а затем использованиеleft、right、top、bottomСвойство абсолютно позиционируется относительно ближайшего родительского блока, содержащего свойство position. Если такой содержащий блок не существует, относительноbodyэлемента, то есть относительно окна браузера.

3. Модель слоя -- относительное позиционирование (относительно исходного положения)

Относительное позиционирование — очень простая для понимания концепция. Если вы расположите элемент относительно, он появится там, где он есть. Затем этот элемент можно переместить «относительно» к его начальной точке, установив его вертикальное или горизонтальное положение.

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

Как показано ниже:

Если вы хотите установить относительное позиционирование в модели слоя для элементов, вам нужно установитьposition:relative(относительное позиционирование), он проходитleft、right、top、bottomАтрибут определяет положение смещения элемента в обычном потоке документов. Процесс взаимного позиционирования завершается первым нажатиемstatic(float)способ сгенерировать элемент (и элемент плавает как слой), а затем двигаться относительно исходного положения, направление и величина движения определяютсяleft、right、top、bottomСвойство определено, а положение перед смещением остается неизменным.

4. Модель слоя -- фиксированное позиционирование (относительно веб-окна)

position:fixed

иabsoluteТип позиционирования аналогичен, но координатами его относительного перемещения является сам вид (окно веб-страницы на экране). Поскольку само представление является фиксированным, оно не изменяется с помощью полосы прокрутки окна браузера, если только вы не перемещаете положение экрана окна браузера по экрану или не изменяете размер отображения окна браузера, поэтому фиксированно расположенный элемент будет всегда находиться в позиции A представления в окне браузера, на которое не влияет поток документа, что совпадает сbackground-attachment:fixedСвойства функционируют одинаково.

стиль браузера по умолчанию

1. Поля

IEПо умолчанию10px,пройти черезbodyизmarginнастройки свойств

Чтобы очистить поля, обязательно очистите эти два значения свойства.

body { margin:0; padding:0;}

2. расстояние между сегментами

IEПо умолчанию19px,пройти черезpизmargin-topнастройки свойств

pПо умолчанию отображается блок. Чтобы очистить интервал между сегментами, обычно можно установить

p { margin-top:0; margin-bottom:0;}

html5

Преимущества HTML5

1. Решение кроссбраузерных и кроссплатформенных проблем
2. улучшенwebприложение

Устаревшие элементы HTML5

frame frameset noframes
acronym applet dir
basefont big center font strike tt

Новые элементы HTML5

<header>	用于定义文档或节的页眉

<footer>	用于定义文档或节的页脚

<article>	用于定义文档内的文章

<section>	用于定义文档中的一个区域（或节）

<aside>	用于定义与当前页面或当前文章的内容几乎无关的附属信息

<figure>	用于定义一段独立的引用，经常与说明(caption)<figcaption>配合使用，通常用在主文中的图片，代码，表格等。

<figcaption>	用于表示是与其相关联的引用的说明/标题，用于描述其父节点<figure>元素里的其他数据。

<hgroup>	用于对多个<h1>~<h6>元素进行组合

<nav>	用于定义页面上的导航链接部分

<mark>	用于定义高亮文本

<time>	用于显示被标注的内容是日期或时间（24小时制）

<meter>	用于表示一个已知最大值和最小值的计数器

<progress>	用于表示一个进度条

<audio>	定义声音，比如音乐或其他音频流

<video>	定义视频，比如电影片段或其他视频流

Элементы и атрибуты формы HTML5

input新增type类型

color	用来创建一个允 许用户使用颜色选择器，或输入兼容 CSS 语法的颜色代码的区域

time	生成一个时间选择器

datetime	生成一个 UTC 的日期时间选择器

datetime-local	生成一个本地化的日期时间选择器

date	显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时间。

month	生成一个月份选择器，它结果值包括年份和月份， 但不包括日期

week	生成一个选择的几周的选择器

email	生成一个 E-mail 输入框

number	生成一个只能输入数字的输入框

range	生成一个拖动条，通过拖动条，使得用户只能输入指定范围，指定步长的值

search	生成一个专门用于输入搜索关键字的文本框

tel	生成一个只能输入电话号码的文本框

url	生成一个 URL 输入框

HTML5 input新增属性

placeholder	主要用在文本框，规定可描述输入字段预期值的简短的提示信息

autocomplete	为了完成表单的快速输入，一般浏览器提供了自动补全的功能选择

autofocus	当为某个表单控件增加该属性后，当浏览器打开这个页面， 这个表单控件会自动获得焦点

list	为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择

pattern	用于验证表单输入的内容，通常 HTML5 的 type 属性，比如 email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后， 验证会更加高效

novalidate	当提交表单时不对其进行验证

required	必需在提交之前填写输入字段

spellcheck	拼写检查，为<input>、<textarea>等元素新增属性

formenctype	规定在发送到服务器之前应该如何对表单数据进行编码

formtarget	带有两个提交按钮的表单，会提交到不同的目标窗口

multiple	一次上传多个文件

maxlength wrap	<textarea>新增<br />maxlength：用于规定文本区域最大字符数。<br />wrap：是否包含换号符（soft/ hard）

css3

Новые селекторы CSS3

1. селектор брата

元素 1 ~ 元素 2После первого элемента будут выбраны все элементы 2, и эти элементы и первый элемент имеют один и тот же родительский элемент (два элемента не обязательно должны быть соседними).

2. селектор атрибутов

• E[attribute^=value]Используется для выбора элементов со значениями атрибутов, начинающимися с указанного значения
• E[attribute$=value]Используется для выбора элементов, значение атрибута которых заканчивается указанным значением
• E[attribute*=value]Используется для выбора элемента, который содержит указанное значение в значении атрибута, позиция не ограничена, и все слово не ограничено

3. Селектор псевдокласса

• :rootВсегда выбирает корневой элемент документа в HTML<html>элемент
• :last-childДобавьте стили к элементу, который является последним дочерним элементом его родителя
• :nth-child(n)Добавляет стили к элементу, который является n-м потомком своего родителя
• :nth-last-child(n)Добавляет стили к элементу, который является n-м последним дочерним элементом своего родителя.
• :only-childДобавьте стили к элементу, который является единственным потомком своего родителя
• :first-of-typeДобавьте стиль к элементу, который является первым элементом того же типа на том же уровне.
• :last-of-typeДобавьте стиль к элементу, который является последним элементом того же типа на том же уровне.
• :nth-of-type(n)Добавляет стиль к элементу, который является n-м элементом того же типа на том же уровне.
• :nth-last-of-type(n)Добавляет стиль к элементу, который является предпоследним элементом того же типа.
• :only-of-typeДобавьте стиль к элементу, который является единственным элементом того же типа в том же классе.
• :emptyДобавляйте стили к элементам без дочерних элементов (включая текстовое содержимое)

4. Селектор псевдоэлементов

• :enabledДобавляйте стили к доступным в данный момент элементам, обычно используемым для определения стилей форм или гиперссылок.
• :disabledДобавляйте стили к элементам, которые в настоящее время недоступны, обычно используются для определения стилей для форм или гиперссылок.
• :checkedДобавить стили к текущему выбранному элементу
• :not(selector)неselectorэлемент элемента добавить стиль
• :targetДобавьте стили к посещаемому целевому элементу привязки
• ::selectionДобавьте стиль к элементу, где находится текущий выбор пользователя.

Новые свойства CSS3

1. Добавлено свойство фона

• background-clipУстановить фоновое покрытиеborder-box/paddingbox/content-box
• background-originУстановите начальную точку наложения фонаborder-box/paddingbox/content-box
• background-sizeУстановить размер фонаcover/contain/长度/百分比

2. Новые свойства шрифта, связанные с текстом

• text-overflowУстанавливает, что делать, когда текст выходит за пределы поля элементаclip/ellipsis
• word-wrapОпределяет способ переноса словаnormal/break-word
• word-breakУказывает метод автоматического переноса строкnormal/break-all/keep-all

3. Добавлены свойства блочной модели

• box-shadowтеньh-shadow v-shadow <br />blur spread color inset
• resizeизменить размерnone/both/horizontal
• outline-offsetСмещение контураlength/inherit

Добавлены свойства анимации деформации

1. transform

• translate(x,y)
• rotate(angle)
• scale(x,y)
• skew(angleX ,angleY)

2. transform-origin

Указывает центр вращения элемента, значение по умолчанию50% 50%。

• Первое значение указываетГоризонтальное положение центральной точки вращения элемента, он также может назначитьleft、right、center, длина, процент

• Второе значение указываетВертикальное положение центральной точки вращения элемента, он также может назначитьtop、bottom、 center, длина, процент.

Свойства трехмерной деформации

1. transform 3Dфункция

transformДобавлены три функции деформации:

• rotateX: указывает, что элемент находится вдольxповорот оси.
• rotateY: указывает, что элемент находится вдольyповорот оси.
• rotateZ: указывает, что элемент находится вдольzповорот оси.

2. transform-styleИспользуется для установки вложенных дочерних элементов в3DЭффект отображения в пространстве.

3. perspectiveУстановите эффект перспективы, эффект перспективы будет почти большим и очень маленьким.

4. perspective-originнастраивать3Dэлемент основан наxось иyось, изменение3DНижняя позиция элемента, значение этого атрибута такое же, какtransform-origin, значение по умолчанию50% 50%。

5. backface-visibilityКогда используется для установки лицевой стороны, экран виден, когда задний элемент обычно используется для установки, чтобы пользователь не хотел видеть заднюю часть вращающегося элемента.

Его значения свойствvisible(видно сзади, по умолчанию),hidden(сзади не видно) два.

Свойства перехода CSS3

• transition-delayУстановите время задержки для перехода
• transition-durationУстановите время перехода для перехода
• transition-timing-functionУстановите временную кривую перехода
• transition-propertyкакой установитьCSSиспользовать переход
• transitionОдно объявление устанавливает все свойства перехода

Свойства анимации CSS3

1. animation

• @keyframesОпределить селектор анимации
• animation-nameиспользовать@keyframesопределенная анимация
• animation-delayУстановить продолжительность анимации
• animation-timing-functionУстановите временную кривую анимации
• animation-iteration-countУстановите количество воспроизведений анимации
• animation-directionУстановите анимацию для воспроизведения в обратном порядке
• animation-play-stateУстановить состояние воспроизведения анимации
• transitionОдно объявление устанавливает все свойства анимации

CSS3 добавляет многоколоночные свойства

• column-countУстанавливает количество столбцов, по которым элементы должны быть разделены
• column-widthУстановить ширину столбца
• columnsОператор устанавливает ширину столбца и количество столбцовcolumn
• column-gapУстановите интервал между столбцами
• column-spanУстанавливает количество столбцов, которые должен охватывать элемент
• column-rule-styleСтиль пространства между столбцами
• column-rule-colorУстановите цвет пространства между столбцами
• column-rule-widthУстановить ширину промежутка между столбцами
• column-ruleОператор устанавливает все свойства между столбцами

Новые юниты CSS3

px、em、rem、vh、 vw和%подвижная единица длины

Используйте единицы CSSpx、em、rem、vh、 vwи т. д. для достижения макета страницы.

• px: абсолютная единица измерения, страница отображается в точных пикселях.
• em: Относительная единица измерения, опорной точкой является размер шрифта родительского узла, если он определен сам по себе.font-sizeВычисляется сам по себе (шрифт браузера по умолчанию16px), на всей странице1emне фиксированное значение.

emОн будет меняться в зависимости от размера родительского элемента, но если несколько элементов вложены друг в друга, легко ошибиться в вычислении его размера, что приведет кrem.

• rem: относительная единица, которую можно понимать как”root em”, относительно корневого узлаhtmlвычислить размер шрифтаCSS3Добавлены свойства.
• %:%процент, относительная единица длины, процентное значение относительно родительского элемента
• vw、vh、vmin、vmaxВ основном используется для макета размера окна просмотра страницы

vw：viewpoint width, ширина окна,1vwравно ширине окна1%。

vh：viewpoint height, высота окна,1vhравна высоте окна1%。

• vmin：vwиvhМеньший.
• vmax：vwиvhЧем больше.

Модель Flexbox

Основные грамматические понятия модели Flexbox

Любой контейнер может указать гибкую компоновку

JavaScript

Основы JavaScript

1. внешний импортjsфайл: пройти<script src="main.js"></script>
2. Ключевые слова

3. Имена переменных чувствительны к регистру
4. Соглашения об именах

Типы данных JavaScript

1. нить(String)
2. номер（Number）
3. Логическое значение（Boolean）
4. неопределенный（Undefined）

//undefined有两种结果
//1、真的没定义
alert(typeof dada); //undefined

//2、定义了，但是没有放东西进去
var dada;
alert(dada); //undefined

undefined, что означает, что переменная не определена или только объявлена ​​без значения

5. объект（Object）

jsВстроены следующие объекты:

• ObjectЯвляется суперклассом (базовым классом) всех объектов JS, все объекты в JS наследуются от объектов Object.
• ArrayОбъекты массива определяют свойства и методы массива
• Numberцифровой объект
• BooleanЛогический объект Логический объект
• Errorошибка обработчика объекта ошибки
• FunctionОбъект функции Определить свойства и методы функции
• Mathматематические объекты
• Dateобъект даты
• RegExpОбъект Объект регулярного выражения Определяет сопоставление текста и правила фильтрации
• StringСтроковые объекты определяют строковые свойства и методы.

арифметические операции

var y = 3;

В ролях

1. Строка в числоparseInt() parseFloat() isNaN()
2. Преобразование чисел в строкиtoString()

оператор присваивания

1. составной оператор присваивания+= -= *= /= %=

реляционные операции

1. Реляционные операции:> < <= >= != == === ==和=== !=和!==

“=”、“==”、“===”Какая разница?

1. =это символ присваивания
2. ==Игнорировать, равен ли тип данных или нет
3. ===Значения и типы данных должны быть равны, чтобы считаться равными

логическая операция

• логический и&&
• логический или||
• логическое не!
• Составные логические выражения

Тернарная операция

条件运算符？：

三元运算符：(比较表达式)？结果1:结果2

ответвление петли

Три структуры работы программы:Структура последовательности, структура выбора, структура цикла

• Выбор одной ветки:ifутверждение
• Вариант с двумя ответвлениями:if-elseутверждение
• Многоотраслевое заявление:if-else if-elseутверждение

switch

формат синтаксиса

switch(num){ //表达式
  case 1:
    //执行代码块1
    break;  //中断执行，跳出
    ...
  default:  //默认，其他都不是的情况下执行
  	//执行代码块
  	break;
}

//强调：break非常重要，如果不加break的话，程序会一直继续往下执行；

while

Формат синтаксиса:

whileХарактеристики цикла: когда не известно количество конкретных исполнений, лучше всего использовать

while(条件表达式){
     //要重复执行的代码段 - 循环体
}

do-while

Формат синтаксиса:

do{
  //循环体
}while(循环条件判断);

• do-whileСначала выполняется тело цикла, а затем проверяется условие цикла.
• do-whileТело цикла гарантированно выполнится хотя бы один раз.
• Другие циклы не гарантируют, что цикл будет выполнен хотя бы один раз.

for

for(1循环变量初始化；2循环条件判断；4循环变量的修改){
  3循环体
}

прерваться и продолжить

1. breakвыйти из цикла
2. continueПропустить этот цикл и перейти к следующему циклу

множество

1. определение массива

var arr = new Array();
var arr = [];

2. буквальное определение

var arr = ["1","2"];

3. присвоить значение массиву

arr[0] = "1";
arr[1] = "2";
alert(arr[0]+","+arr[1]);

4. индекс массива

arr[0]+","+arr[1]

5. длина массива

//语法
arr.length

//最后一个元素的索引
arr.length-1

метод массива

1. indexOf

массивы могут бытьindexOf()для поиска позиции указанного элемента, если не найден, вернуть-1

2. concat

concat()Метод объединяет текущий массив с другим массивом и возвращает новый массив

var newArr = arr1.concat(arr2,"dada");

3. push和pop

push()добавить несколько элементов в конец массива,pop()удалить последний элемент массива

arr.push("a","b");
console.log(arr);

arr.pop();
console.log(arr);

//空数组继续pop不会报错，而是返回undefined

4. unshift和shift

unshift()Добавьте несколько элементов в начало массива,shift()удалить первый элемент массива

arr.unshift("a","b");
arr.shift();

5. slice

slice()Взять часть массива и вернуть новый массив

console.log(arr.slice(0,3)); //从索引0开始，到索引3结束，但不包括3

console.log(arr.slice(3));  //从索引3开始到结束

если не даноslice()Передача любого параметра приведет к обрезанию всех элементов от начала до конца. Воспользовавшись этим, легко скопировать новый массив

6. sort

sort()может сортировать текущий массив

var arr = ["b","c","a"];
arr.sort();
arr;//["a","b","c"]

7. reverse

reverse()удалить элементы всего массива

8. join

join()Метод объединяет каждый элемент массива с указанной строкой

var arr = ["a","b","c"];
arr.join("-"); //"a-b-c"

9. splice

Вы можете удалять элементы, начиная с указанного индекса, а затем добавлять элементы из этой позиции.

Двумерный массив

var arr = [[1,2,3],["a","b","c"],"dadaqianduan"];
var x = arr[1][1]; //b

нить

1. Строковое свойствоlength- свойство длины строки
2. slice()

slice(start[,end])，start--开始索引 end--结束索引

3. substr()

substr(start[,length])，start：开始，取length个字符

4. split()

split([separator[,limit]]), разбить строку по условию, вернуть массив

5. indexOf()

первое вхождение в родительской строке, начиная с0Начинать! без возврата-1

6. lastIndexOf()

Поиск в обратном порядке

7. charAt(index)

charAt(index)символ по указанному индексу

8. toLowerCase()

нижний регистр

9. toUpperCase()

верхний регистр

регулярное выражение

Создание регулярных выражений

var reg = new RegExp("a","i");
// 将匹配字母a，第二个参数i,表示匹配时不分大小写

метасимвол

модификатор шаблона

обычный метод

1. testметод

Извлекает значение, указанное в строке.

2. execметод

Этот метод используется дляПолучить совпадения регулярного выражения в строке, функциявернуть массив, в котором хранятся результаты сопоставления. Если совпадений не найдено, возвращается значениеnull.

Поддержка обычных методов String

js-объект

определить объект

//使用new运算符
var obj = new Object();

//字面量
var obj={
    name:"dadaqianduan"，
    age:12,
    sex:"男"
}

доступ к данным объекта

//用.语法
obj.name

//用[]语法
obj["name"]

JSON

json(JavaScript Object Notation), представляет собой облегченный формат обмена данными.

var man = {
  	"name":"dadaqianduan",
  	"age":12,
 	"sex":"男"
};

встроенные объекты

• ObjectЯвляется суперклассом (базовым классом) всех объектов JS, все объекты в JS наследуются от объектов Object.
• Arrayобъект массива
• Numberцифровой объект
• Booleanлогический объект
• Errorобъект ошибки
• Functionфункциональный объект
• Mathматематические объекты
• Dateобъект даты
• RegExpобъект объект регулярного выражения
• Stringстроковый объект

Математический метод

• abs()Абсолютное значение (удаление положительных и отрицательных)
• random()случайный номер,0-1случайные числа между,1не появляются
• round()округление
• floor(x)округлить (округлить вниз)
• ceil(x)округлить (округлить)
• max(x,y) x 和 yмаксимальное значение в
• min(x,y) x 和 yминимальное значение в
• cos(x) xкосинус
• sin(x) xсинус
• sqrt(x)возвращениеxквадратный корень из
• pow(3,4)возвращение3из4сила

Метод даты

• getFullYear()год возврата (4 цифры)
• getMouth()Месяц возврата (0--11)
• getDate()Дата возврата
• getDay()Назад к неделе (0-6)
• getHours()назад часы
• getMinutes()Вернуться через несколько минут
• getSeconds()вернуть секунды
• getTime()Возвращает количество миллисекунд с полуночи 1 января 1970 года до указанной даты (строка).
• setFullYear()установить год
• setMouth()установить месяц
• setDate()установить день
• setHours()установить час
• setMinutes()установить минуты
• setSeconds()установить секунды
• setTime()Установите объект времени в миллисекундах

//判断闰年
function runYear(year){
	if(year%4==0 && year%100!=0 || year%400==0){
		return true;
	}
};

Объектная ориентация — это идея программирования

1. Класс - это абстрактное понятие.
2. Объект: конкретная вещь
3. Класс — это абстракция объекта, а объект — это конкретный экземпляр класса.
4. Классы не занимают память, объекты занимают место в памяти
5. Доступ к объектам Объявление объектов
6. Итерации над объектами -for inцикл

определить объект

1. буквальное создание
2. Заводская выкройка

// 工厂模式中的函数，首字母大写

function Cat(n,c){
    return {
        name:n,
        color:c,
        say:function(){
          alert("dadaqianduan")
        }
    }
}

3. Конструктор

Javascriptпредоставляет конструктор（Constructor）модель.

Так называемый "конструктор" на самом деле обычная функция, но она используется внутри.thisПеременная.

использовать в конструктореnewоператор, экземпляр может быть сгенерирован, иthisПеременные привязаны к объектам экземпляра.

Сделать заглавной первую букву конструктора

в конструктореthis, указывая на созданный объект

function Cat(n,c){
  this.name=n;
  this.color=c;
}

создать объект экземпляра

var cat1 = new Cat("dadaqianduan","黄色")

// 自动含有一个constructor属性，指向它们的构造函数

Пример: автоматически содержитconstructorсвойства, указывая на их конструкторы

alert(cat1.constructor == Cat); //true

4. Javascriptтакже обеспечиваетinstanceofоператор

Проверьте взаимосвязь между объектом-прототипом и объектом-экземпляром.

var txt = 'dadaqianduan';
alert(txt instanceof String); //false

var age = 123123;
alert(age instanceof Number); //false

var res = /\d/;
alert(res instanceof RegExp); //true

var arr = [];
alert(arr instanceof Array); //true

Прототипы и цепочки прототипов

В конструкторе естьprototypeсвойство, указывающее на другой объект. весь этот объектсвойства и методы, будет унаследован экземпляром конструктора.

Все функцииFunctionпример.

В конструкторе есть свойство прототипаprototype，prototypeтакже является объектом; этот объект имеетconstructorсвойство, которое указывает на конструктор.

объект экземпляра имеет_proto_свойство, это свойство также указывает на объект-прототип, это свойство не является стандартным свойством и не может использоваться в программировании, это свойство используется внутри браузера.

constructor

1. constructorЯвляется свойством экземпляра, созданного конструктором, которое используется для указания на конструктор, создавший текущий объект.

son.constructor == parent; // true

Каждый прототип имеетconstructorСвойство, указывающее на связанный конструктор.

function Person() {
}

console.log(Person===Person.prototype.constructor)  //true

диаграмма отношений:

Различать обычные объекты и функциональные объекты

function f1(){};
var f2 = function(){};
var f3 = new function(){};

var o1 = {};
var o2 = new Object();
var o3 = new f1();

console.log(typeof Object); //function
console.log(typeof Function);//function
console.log(typeof f1) //function
console.log(typeof f2) // function
console.log(typeof f3) //function
console.log(typeof o1) //object
console.log(typeof o2) //object
console.log(typeof o3)// object

1. существуетJavaScriptВ , прототипом является объект, а роль прототипа заключается в реализации наследования объектов.
2. существуетJavaScriptВо всех функциональных объектах в , есть атрибут,prototype, что соответствует прототипу текущего объекта.
3. всеJavaScriptобъект, есть_proto_Атрибуты,_proto_Свойство указывает на прототип конструктора объекта экземпляра.

var p = new Person(); // 实例对象

console.log(p._proto_ === Person.prototype); // true

pявляется экземпляром объекта,Personдаpконструктор.pиз_proto_свойство указывает на конструкторPersonПрототип.

jsКак наследовать от прототипа:

var parent = function(name) {
 this.name = name;
}

parent.prototype.getName = function() {
 return this.name;
}

var son = new parent("dadaqianduan");

console.log(son.getName()); // dadaqianduan

sonнаследоватьparentсвойства функции в прототипеgetName

Сеть прототипов

КромеObjectизprototypeПрототипnullКроме того, все объекты и прототипы имеют свои собственные прототипы, а прототип объекта указывает на объект-прототип.

В многоуровневых отношениях несколько прототипов соединяются слой за слоем, образуя цепочку прототипов.

При поиске свойства объекта, если текущий объект не может найти свойство, он будет искать цепочку прототипов, пока не найдет его.Если он достигает вершины цепочки прототипов и не может его найти, он возвращаетundefined

прототип

1. Все ссылочные типы имеют__proto__Атрибуты
2. Все функции имеютprototypeАтрибуты
3. все ссылочные типы__proto__свойство указывает на его конструкторprototype

Связь между конструктором и прототипом экземпляра:

Person(конструктор) изprototypeнаправлениеPerson.prototype

4. __proto__

любой объект, кромеnullКроме того, существуют свойства, называемые__proto__, это свойство будет указывать на прототип объекта.

function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

диаграмма отношений:

диаграмма отношений:

диаграмма отношений:

Кардочесание:

написать конструкторPerson, разница между общими конструкторами и обычными функциями требует, чтобы первая буква была заглавной:

function Person(){}

prototypeпрототип

Прототип – это объект, прототип которогоprototypeСвойства, определенные выше, посредством «наследования», экземпляр реализации также имеет это свойство.

наследование находится вnewОператор реализован внутри.

Внутри конструктора естьprototypeсвойство, через которое можно получить доступ к прототипу.

Personявляется конструктором,Person.prototypeявляется прототипом.

5. пример

Существуют конструкторы, которые могут создавать наследуемые свойства прототипа черезnewоператор для создания экземпляра:

function Person(){}

person = new Person()

da = person instanceof Person // 检查person是否是Person的实例

da // true

// 继承

function Person() {}

Person.prototype.name = 'dadaqianduan.cn'

person = new Person()

da = person.name // 实例继承的属性

da // 'dadaqianduan.cn'

6. proto

экземпляр передан_proto_Доступ к прототипу.

function Person() {}
Person.prototype.name = 'dadaqianduan.cn'

person = new Person()

da = person.__proto__ === Person.prototype

da // true

7. constructorКонструктор

Прототипы также могут бытьconstructorдоступ к конструктору

function Person() {}
Person.prototype.name = 'dadaqianduan.cn'
person = new Person

da = Person.prototype.constructor === Person
da // true

резюме

1. Все ссылочные типы (функции, массивы, объекты) имеют__proto__Атрибуты.
2. Все функции имеютprototypeАтрибуты.
3. Каждый экземпляр объекта (Object) имеет частную собственность, т.__proto__указатель на объект-прототип его конструктора (prototype). Объект-прототип также имеет собственный объект-прототип.__proto__, слой за слоем, пока не появится объект, объект-прототип которогоnull,nullПрототипа нет, и это последнее звено в этой цепочке прототипов.

Общие шаблоны проектирования JavaScript

Энциклопедия Байду:

Шаблоны проектирования（Design pattern）Это набор многократного использования, известный большинству людей, классифицированный и каталогизированный, а также резюме опыта разработки кода.

Использование шаблонов проектирования предназначено для повторного использования кода, облегчения его понимания другими и обеспечения надежности кода. Нет никаких сомнений в том, что шаблоны проектирования беспроигрышны для нас самих, других и систем; шаблоны проектирования делают программирование по-настоящему инженерным; шаблоны проектирования являются краеугольным камнем разработки программного обеспечения, точно так же, как структура здания.

Монолитный режим

Монолит — это объект, который разделяет пространство имен и объединяет набор связанных свойств и методов, и если он может быть создан, он может быть создан только один раз.

Функции:

(1) можно разделить наПространства имен, устраняя тем самым опасность, которую представляют собой глобальные переменные.

(2) Используйте технологию ветвления для инкапсуляции различий между браузерами.

(3) Это может сделать кодовую организацию более удобной для чтения и обслуживания.

Заводская выкройка

Определение фабричного шаблона:

Предоставляет интерфейс для создания объектов, что означает производство соответствующих продуктов (объектов) по заданию (параметрам) ведущего (вызывающего).

1. Для создания объекта часто требуются сложные процедуры, поэтому он не подходит для сложного объекта.
2. Создание объектов может привести к большому количеству повторяющегося кода или может не обеспечить достаточный уровень абстракции.

Фабрика должна передать создание объекта-члена внешнему объекту, а преимущество состоит в устранении связи (то есть взаимного влияния) между объектами.

Классификация:

Простой заводской шаблон: Используйте класс, обычно одноэлементный, для создания экземпляров.

Комплексное определение заводского шаблона: передать экземпляр своих объектов-членов в подкласс, и подкласс может переопределить метод интерфейса родительского класса, чтобы указать свой собственный тип объекта при его создании.

Родительский класс обрабатывает только общие проблемы в процессе создания, которые будут унаследованы подклассами, а подклассы независимы друг от друга, и в подклассах будет прописана конкретная бизнес-логика.

Сценарии применения:

Фабричный шаблон особенно полезен в следующих сценариях:

(1) конструкция объекта очень сложна;

(2) Необходимо создавать разные экземпляры в зависимости от конкретной среды;

(3) Работа с большим количеством мелких объектов с одинаковыми свойствами.

одноэлементный шаблон

Шаблон singleton определяет создание объекта с одним экземпляром и предоставляет к нему глобальную точку доступа. Можно также сказать, что синглтон должен гарантировать, что класс имеет только один экземпляр.Метод реализации обычно заключается в том, чтобы сначала определить, существует ли экземпляр или нет, и если он существует, он будет возвращен напрямую.Если он не существует , он будет создан, а затем возвращен, что гарантирует наличие в классе только одного экземпляра объекта.

Используйте замыкания для реализации синглтонов:

var single = (function(){
    var unique;

    function getInstance(){
　　　　// 如果该实例存在，则直接返回，否则就对其实例化
        if( unique === undefined ){
            unique = new Construct();
        }
        return unique;
    }

    function Construct(){
        // ... 生成单例的构造函数的代码
    }

    return {
        getInstance : getInstance
    }
})();

uniqueявляется ссылкой на возвращаемый объект, иgetInstanceявляется статическим методом для получения экземпляра.Constructэто конструктор, который создает экземпляр.

в состоянии пройтиsingle.getInstance()чтобы получить синглтон и звонить каждый разполучить тот же синглтон. Этоодноэлементный шаблондостигнутый эффект.

Сценарии применения:

1. Одноэлементный шаблон является широко используемым шаблоном. Для некоторых объектов нам часто нужен только один, например, глобальный кеш,windowобъект.
2. С помощью одноэлементного шаблона код может быть организован более последовательно, его легко читать и поддерживать.

функция

определение функции

// 使用关键字function 定义函数

// 定义函数，吃饭
function dada(){
  console.log("点餐");
  console.log("拿筷子");
  console.log("吃东西")；
}

локальные и глобальные переменные

1. переменная область видимости

• Переменные внутри тела функции:локальная переменная, может использоваться только в теле функции
• Переменные вне функции:глобальная переменная, видимый глобально

2. локальная переменная

function da(){
  var dadada = "dada"；//局部变量
  alert(dadada);
}
da(); //调用
alert(dadada); //报错访问不到，函数体外对dadada不可见

3. глобальная переменная

var da = "我是全局变量";
function home(){
  var da = "我是局部变量";
  alert(da);
}
home();

-----------------------

var a=3;  //全局
function da(){
  alert(a); //3
  var b=5;
  alert(b);//5
}
da();
console.log(b); //报错，访问不到

Типичная ошибка, не используйтеvarОбъявленная переменная также является глобальной переменной (это не рекомендуется)

function dada(){         
	da = "123";  //全局变量         
}         
dada();         
alert(da);         

возвращаемое значение

returnзначение

//理解返回值
function getNum(){
 return 2; //return的作用，将函数的结果返回给当前函数名
}
var result = getNum(); //如果希望返回值保存，就放在变量中；
console.log(result);  //2

returnинструкции

• returnМогут быть возвращены только одни данные
• Если функция не имеетreturn, затем вернутьсяundefined

returnМожет использоваться для завершения функции

function Fun(){
  console.log("helloweb");
  return;
  console.log("我还会执行吗？");
}
Fun();

function fn(){
  for(var i=0;i<10;i++){
    if(i == 3){ //循环3次就return
    	break;   
    }
    console.log("谁最帅！")； //打印3次
  }
  return "看return会不会执行我"； //return不执行，break执行
}

анонимная функция

//使用函数表达式定义函数

//say本质上是一个指向函数对象的变量，我们称为函数变量
var say = function(){
  	console.log("hello");
}；
say();

var oBtn = document.getElementById("box");
oBth.onclick = function(){
  alert("你点击我啦");
}

автономная функция

Пример:

function fn(){
  //这里是代码
}
fn(); //运行fn函数

----------------------

var fn = function(){
  //这里是代码
}
fn(); //运行fn函数

---------------------

//(fn)() 等价于 fn()
(function(){
  	//这里是代码
})()

Закрытие

Закрытие(closure)иметь доступ к другомуПеременная в области видимости функцииФункция.

Общие способы создания замыканий:

• Создайте другую функцию внутри функции и поместите эту функциюreturnвыйти.
• Используйте функцию для привязки события к элементу, и когда событие происходит, вы также можете манипулировать переменными в функции.

характеристика

1. Может читать переменные внутри других функций
2. сохранить значения этих переменных в памяти

Пример:

//方式1----函数内部return一个函数
function run(){
    var a=10;
    return function(){
        a++;
        console.log(a);
    };
};

var b=run();
//alert(b);   //b是一个函数

b();//可以访问另外一个作用域中变量的函数

//方式2--函数内部为绑定事件
function addClick(){
    var txt="abcd";
    document.getElementById('box').onclick=function(){
        alert(txt);
    }
};
addClick();

//方式3--函数内部将变量作为回调函数的参数
function play(num,fn){
    if(num>10){
        return fn && fn(num);
    };
};

var ss=play(20,function(n){
    return n+1;
});

console.log(ss);

BOM

Обзор спецификации

BOM（browser object model）Объектная модель браузера

BOMпри условииОбъект, взаимодействующий с окном браузера независимо от его содержимого., Загрузка информации, связанной со страницей, ее основным объектом являетсяwindowобъект

BOMСоответствующего стандарта нет, каждый браузер определяет свои свойства, и каждый браузер имеет свои собственныеBOMвыполнение

W3CХотя не дляBOMСтандарт сформулирован единообразно, но оконные объекты, объекты навигации и т. д. фактически стали стандартами по умолчанию из-за конвергенции функций.

оконный метод

• alert()Подсказка
• confirm()Подсказка с кнопкой подтверждения отмены
• prompt()Подсказка с текстовым полем для ввода
• setInterval()Интервальный таймер, который вызывает функцию или оценивает выражение в указанный период (в миллисекундах)
• setTimeout()Таймер тайм-аута, который вызывает функцию через определенное количество миллисекунд.
• clearInterval()Очистить интервальный таймер
• clearTimeout()очистить таймер тайм-аута
• requestAnimationFrameкадровый таймер

frames [ ]набор фреймов

Разделите окно браузера на несколько оконных рамок, и каждая оконная рама одновременно получит несколькоURLадрес для отображения содержимого различных веб-страниц.

история история

• window.history.go(1)вперед (прыжок)
• window.history.go(-1)назад (прыжок)
• window.history.forward()вперед, продолжать
• window.history.back()назад

позиционирование местоположения

• window.location.href='http://www.baidu.com/'прыжок страницы
• window.location.reload()перезагрузка страницы

навигатор навигация

window.navigator.userAgentТип браузера, версия, тип операционной системы, тип движка браузера и т. д.

экран

window.screen.widthВозвращает текущую ширину экрана (значение разрешения)window.screen.heightВозвращает текущую высоту экрана (значение разрешения)

документ документ

windowизdocumentсвойства, представляющие всеhtmlэлемент, эта частьjsЧасть основной операции, поэтому эта часть должна быть стандартизирована для унифицированной разработки. следовательно,W3CЭта часть стандартизирована ---DOMстандарт.

DOM

DOM（document object model ）Объектная модель документа, которая определяет объекты, поведение и свойства, необходимые для представления и изменения документов, а также отношения между этими объектами.

Методы объекта DOM

• getElementById(id）пройти черезidПолучатьDOMОбъект Object)
• getElementsByTagName(tag)Получить по тегуDOMобъект ("массивоподобный" объект)
• getElementsByName(name)пройти черезnameПолучатьDOMобъект ("массивоподобный" объект)
• getElementsByClassName(class)пройти черезclassПолучатьDOMОбъект (не поддерживается ниже IE8)

Управление отношениями между DOM

• createElement(tag)создать элемент
• removeChild(对象)удалить элемент
• appendChild(对象)вставить элемент
• replaceChild(替换对象，被替换对象)заменить элемент
• insertBefore(对象，目标对象)передняя вставка

appendChild replaceChild insertBeforeОба имеют возможность перемещать объекты

Свойства узла:

父节点	parentNode
第一级所以子节点	childNodes
第一个子节点	firstChild
最后一个子节点	lastChild
前一个兄弟节点	previousSbiling
后一个兄弟节点	nextSibling

Клонировать узел:

cloneNode( 布尔值 ) 

true：复制本节点以及所有子节点 
false：只复制节点本身

Свойства узла DOM

• setAttribute("属性名",属性值)установить свойства
• getAttribute( 属性名 )получить атрибут
• removeAttribute( 属性名 )Удалить атрибут:
• hasAttributes(属性名)Проверить, существует ли атрибут (вернутьture/false)

событие

var oDiv=document.getElementById('box');
oDiv.onclick=function(){   
	alert('hello world'); 
};

1. addEventListener( )Добавить прослушиватель событий
2. removeEventListener( )удалить прослушиватель событий

классификация событий

• windowсобытие

1. onloadЗагрузка (страница или изображение готовы)
2. onunloadСтраница выхода пользователя
3. onresizeРазмер окна или рамки изменен
4. onscrollсобытие полосы прокрутки

• событие мыши

onclick 鼠标点击
ondblclick 鼠标双击
onmousedown 鼠标按键按下
onmouseup 鼠标按键被松开
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseenter 鼠标进入某元素
onmouseleave 鼠标离开某元素
onmousemove 鼠标移动
oncontextmenu 右键菜单

• входное событие

onblur 元素失去焦点。
onfocus 元素获得焦点。input输入框
onchange 内容改变时触发。

• событие клавиатуры

onkeydown 按键按下
onkeypress 按键按下并释放
onkeyup 按键释放

• событие формы

onreset 表单重置（重置按钮）
onsubmit 表单提交(form内有text被聚焦，直接回车可触发onsubmit)

объект события

Получить данные о событии, разные события будут иметь разные данные

oDiv.onclick=function(ev){
 //ev就是事件对象
}

поток событий

1. Поведение объекта по умолчанию
2. Предотвратить поведение по умолчанию:event.preventDefaut()

поток событий

Направление потока событий:捕获 → 事件目标→冒泡

1. захват событий
2. цель события
3. Всплывание событий и остановка всплытия событий

цель события

ev.targrt
ev.target.nodeName
ev.target.tagName

делегация мероприятия(delegate)

Принцип: привяжите событие к родителю, используйте принцип всплытия событий и инициируйте событие, привязанное к родителю, оценивая «целевой элемент» события.

эффект

• Не привязывайте события к дочерним элементам отдельно
• Привязать события для неизвестных элементов

прослушиватель событий

Вы можете привязать несколько событий к элементу одновременно

obj.addEventListener(事件，回调函数，冒泡/捕获) ;
btn.addEventListener("click",function(ev){ //ev 事件对象
 alert('dadaqianduan');
},false)   //false 冒泡阶段

jQuery

一款轻量级的js库
丰富的DOM选择器
简单的事件操作
重新封装方法，让操作DOM属性更简单
链式操作
丰富的动画效果
Ajax操作支持
浏览器兼容
插件扩展开发，可扩展性强

不能向后兼容
插件兼容性
多个插件冲突

Селекторы jQuery

• idСелектор

$('#box')

• classСелектор

$('.box')

• селектор тегов

$('p')

• *представляет все теги

селектор атрибутов

• [attribute]Соответствует элементам, которые содержат заданный атрибут
• [attribute=value]Соответствует элементам, в которых данный атрибут является определенным значением
• [attribute!=value]Соответствует элементам, в которых данный атрибут не является определенным значением
• [attribute^=value]Соответствует элементам, в которых данный атрибут начинается с некоторого значения
• [attribute$=value]Данный атрибут является элементом, который заканчивается некоторым значением
• [attribute*=value]соответствует данному атрибуту как элементу, содержащему некоторое значение

выбор местоположения

:firstСоответствовать первому элементу

:lastполучить последний элемент

:notУдалить все элементы, соответствующие данному селектору

:evenСоответствует всем элементам с четным индексом, считая от 0

:oddСоответствует всем элементам с нечетными индексами, считая от 0

:eqсоответствует элементу с заданным значением индекса

:gtСоответствует всем элементам больше заданного значения индекса

:ltСоответствует всем элементам меньше заданного значения индекса

селектор потомков

$("选择器1 选择器2 ……")

дочерний селектор

$("选择器1>选择器2>……")

объект селектора

$("选择器").each(function(index){this}) 选择器对象的遍历
$("选择器").find() 找前面选择器匹配到的元素的子元素
$("选择器").not() 在前面选择器匹配到的元素中去除某个或某多个
$("选择器").add() 在前面选择器中在追加节点

дочерний элемент

:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:first-of-type 选择所有相同的元素名称的第一个兄弟元素
:last-of-type 选择所有相同的元素名称的最后一个兄弟元素

:nth-child 匹配其父元素下的第N个子或奇偶元素
:nth-last-child() 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个
:nth-last-of-type() 选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个
:nth-of-type() 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个

:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
:only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素。

форма

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮

:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮

:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有隐藏域

свойства объекта формы

:enabled 匹配所有可用元素
:disabled 匹配所有禁用元素

:checked 匹配所有选中的被选中元素
:selected 匹配所有选中的option元素

Манипуляции с DOM

1. найти получить

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容
val() - 设置或返回表单字段的值

2. Вставьте внутрь

append() 向每个匹配的元素内部追加内容
appendTo() 把所有匹配的元素追加到另一个指定的元素集合中

prepend() 向每个匹配的元素内部前置内容
prependTo() 把所有匹配的元素前置到另一个、指定的元素集合中

3. внешняя вставка

after() 在每个匹配的元素之后插入内容
before() 在每个匹配的元素之前插入内容

insertAfter() 把所有匹配的元素插入到另一个、指定的元素集合的后面
insertBefore() 把所有匹配的元素插入到另一个、指定的元素集合的前面

4. пакет

wrap() 把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap() 这个方法将移出元素的父元素。

wrapAll() 将所有匹配的元素用单个元素包裹起来
wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

5. заменять

replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll() 用匹配的元素替换掉所有 selector匹配到的元素

6. Удалить

empty() 删除匹配的元素集合中所有的子节点
remove() 从DOM中删除所有匹配的元素

7. клон

clone() 克隆匹配的DOM元素并且选中这些克隆的副本

jQuery-события

загрузка страницы

$(document).ready(function(){

})

//简写方式
$(function(){

})

привязка события

$("#box").on("click",function(){
    /**/
})

$("#box").off("click,mousemove");

адаптация контейнера

Есть несколько способов получить ширину и высоту элемента:

$(选择器).width() | innerWidth() | outerWidth()
$(选择器).height() | innerHeight() | outerHeight()

innerWidth()和innerHeight()是指元素里面内容的宽高加上内边距的宽高；
outerWidth()和outerHeight()是指元素里面内容的宽高加上内边距的宽高和边框；

Метод получения ширины и высоты окна выглядит следующим образом:

$(window).width()
$(window).height()

Манипуляции со стилем этикетки

$(选择器).css (样式属性名[,值])	方法设置或返回被选元素的一个或多个样式 属性

$(选择器).addClass(类别名)	增加类别样式

$(选择器).removeClass(类别名)	去除类别样式

$(选择器).toggleClass(类别名)	交替使用类别样式：有这个类别样式就去除，没有就追加；

горка

show() 显示元素
hide() 隐藏元素

slidDown() 向下滑动显示
slideUp() 向上滑动收起隐藏
slideToggle() 交替滑动状态

fadeIn() 淡入
fadeOut() 淡出
fadeTo() 动画到指定透明度
fadeToggle() 交替淡出、淡入状态

пользовательская анимация

animate() 自定义动画

stop() 停止所有在指定元素上正在运行的动画

delay() 设置一个延时来推迟执行队列中之后的项目

finish() 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

AJAX

$.ajax()

$.get() 通过远程 HTTP GET 请求载入信息

$.post() 通过远程 HTTP POST 请求载入信息

$.getJSON() 通过 HTTP GET 请求载入 JSON 数据

Принцип работы

AJAX = 异步 JavaScript 和 XML

Введите в браузереurlКогда адрес запрашивается на сервере, он передается черезAjaxОтправитьhttpЗапрос отправляется на сервер, и результат ответа службы также возвращается на сервер.Ajax,ПервыйAjaxПосле обработки он возвращается в браузер для отображения страницы.

Объект XMLHttpRequest

//第一步：
xhr = new XMLHttpRequest();

//第二步
xhr.open("post","test.php");

//第三步：
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//第四步：
xhr.send("a=1&b=2");

//第五步：
xhr.onreadystatechange=function(){
    if(xhr.status==200 && xhr.readyState==4){
         var result=xhr.responseText;//获取到结果
	alert(result);
	}
}

Разница между XML и HTML

получить() и опубликовать()

$.get(url,data,callback,dataType)
$.post(url,data,callback,dataType)

AJAXПринцип работы

AjaxОсновной формат следующий:

$.ajax({
	url:'请求的资源',
	type:'请求方式get|post',
	data:'发送数据 名=值&名=值',
	dataType:'回传值的类型',
	success:function(res){ res接收返回值
	}
})

HTTP

HTTP(Протокол передачи гипертекста) — это протокол связи, который позволяет языку гипертекстовой разметки (HTML) документация отWebСервер передает в браузер клиента.

• request line

Строка запроса: первая строка должна быть строкой запроса, которая описывает тип запроса, ресурс, к которому необходимо получить доступ, иHTTPВерсия.

• header

Заголовок запроса: используется для описания дополнительной информации, которая будет использоваться сервером.

• blank line

Пустая строка: запрашивая пустую строку между головкой и запрошенным органом, необходимо

• body

Тело запроса: также называется телом запроса, вы можете добавить любые другие данные

Строка состояния:

Host	接受请求的服务器地址，可以是：IP：端口 或 域名
User-Agent	发送请求的应用程序名称（浏览器信息）
Connection	指定与连接相关的属性，如：Connection:Keep-Alive
Accept-Charset	客户端可以接受的编码格式
Accept-Encoding	客户端可以接受的数据压缩格式
Accept-Language	客户端可以接受的语言
referer	当前请求来自哪个链接（防盗连）
content-type	请求的文件类型
cookie	该网站相关的会话信息

процесс запроса URL

1. Во-первых, клиент и сервер должны установить соединение.
2. После установления соединения клиент отправляет серверу запрос в формате: Унифицированный идентификатор ресурса (URL), номер версии протокола, информацию о клиенте и, возможно, содержимое.
3. После того, как сервер получит запрос, он выдаст соответствующую ответную информацию в форматестрока состояния, включая информациюНомер версии протокола, код успеха или ошибки(status Codeкод состояния), за которым следуетинформация о сервере,информация о сущностии возможное содержание.
4. После того, как клиент получает информацию, возвращенную сервером, он отключается от сервера.

Если на одном из вышеуказанных шагов возникает ошибка, клиенту возвращается сообщение об ошибке. Для пользователя эти процессыHTTPДелается это самостоятельно, пользователю нужно только кликнуть мышкой и дождаться отображения информации.

Предварительная загрузка

Предварительная загрузка: заранее загружайте все необходимые ресурсы в локальный, а затем напрямую обращайтесь к ресурсам из кеша, когда они должны быть использованы.

1. использоватьimageобъект

<img src="" style="display:none"/>

2. использоватьimageобъект

var image = new Image();
image.src="";

3. использоватьXMLHttpRequestобъект

xmlhttprequest.onreadystatechange=callback;
xmlhttprequest.onprogress=progressCallback;

xmlhttprequest.open("GET",http://xx.jpg,true);

xmlhttprequest.send();

function callback(){
	if(xmlhttprequest.readyState=4 && xmlhttprequest.status==200){
        var responseText=xmlhttprequest.responseText;
    }else{
      console.log("Request was unsuccessful" + xmlhttprequest.status);
    }
}

function progressCallback(e){
  	c=e||event;
  	if(e.lengthComputable){
    	console.log("Received"+e.loaded+"of"+e.total+"bytes");
	}
}

ленивая загрузка

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

оптимизация производительности

Оптимизация кода JavaScript

1. Разделение кода и структуры
2. Разделение стиля и структуры
3. Разделение данных и кода

• AMD：Asynchronous Module Definition, механизм асинхронной загрузки модулей.
• CMD:Common Module Definition, общая спецификация определения модуля
• экспорт（export）с импортом（import）два модуля

Улучшить скорость загрузки файлов

1. сливатьсяJavaScriptкод, используйте как можно меньшеscriptЭтикетка.
2. загрузка без замятийJavaScript.
3. динамически созданныйscriptтег для загрузки

webpack

webpackЯвляетсяmodule bundler(инструмент сборки модуля), из-заJavaScriptСложность приложений продолжает расти, а инструменты сборки становятся все более популярными.webНеотъемлемая часть развития. Это помогает нам упаковывать, компилировать и управлять многими файлами ресурсов и зависимыми библиотеками, необходимыми для проекта.

webpackслужба поддержкиCommonJS,AMD和ES6модульная система и совместима с различнымиJSНаписание спецификаций может обрабатывать зависимости между модулями, поэтому оно имеет более мощные возможности.JSМодульная функция, она может сжимать изображения, правильноCSS、jsФайлы проверены на синтаксис, сжаты, скомпилированы и упакованы.

Особенности вебпака

1. Хорошо работает для одностраничных приложений
2. Также поддерживаетrequire()иimportсинтаксис модуля
3. позволяет очень передовыеcode splitting(Разделение кода) Особенности
4. Горячая перезагрузка позволяетReact、Vue.jsБолее быстрая локальная разработка с другими подобными фреймворками
5. Это, безусловно, самый популярный инструмент для сборки

Недостатки вебпака

1. Неподходящийwebразработка для новичков
2. заCSS, изображения и другие не-JSФайлы ресурсов необходимо сначала запутать
3. Документация не идеальна
4. Есть большие изменения, и есть большие различия в методах использования разных версий.

Установить

1. Установить глобально:

//安装全局webpack
npm install webpack -g

//安装全局webpack-cli
npm install webpack-cli -g

базовое приложение веб-пакета

SPA（single page web application）одностраничное приложение, даwebpackСтандартные приложения упакованы

Примером состоит из нескольких основных частей:

index.html	主文件
JS文件	可能有多个JS文件，可通过webpack合并打包为一个文件
CSS文件	可能有多个CSS文件，可通过webpack合并打包为一个文件
图片	可通过webpack压缩优化

Пример:

//a.js
var run=function(){
    console.log("aaa");
};
//node CommonJS模块
//module.exports.run=run;

//ES6语法
export default {run};

//b.js
var play=function(arg){
    console.log(arg);
};
//node CommonJS模块
//module.exports.play=play;

//ES6语法
export default {play};

//index.js
//node CommonJS 引入js模块
//var a=require("./a.js");
//var b=require("./b.js");

//ES6 引入js模块
import a from "./a.js";
import b from "./b.js";

var txt = "hello world";
a.run();
b.play(txt);

distПапка (хранит упакованные файлы, их нельзя создать заранее, они могут создаваться автоматически при упаковке) -dis,dist,bulit

Бэйл:

webpack --mode development

Начало работы с профилями

Имя файла конфигурации по умолчанию:webpack.config.js

основная концепция

Базовая структура конфигурационного файла выглядит следующим образом:

//配置项
module.exports={
    //入口  
    entry:".....",

    //输出配置     
    output:{......},

    //模块    
    module: {......},

    //解析         
    resolve：{......},        

    //插件（数组）
    plugins:[......],

    //开发服务器    
    devServer:{......}  
};

entry	入口 定义入口文件，默认入口文件：./src/index.js
output	输出 定义出口文件，默认出口文件：./dist/main.js
resolve	解析 路径映射、省略后缀名等
module	模块 定义不同loader，让 webpack 能够处理非 JavaScript 模块
plugins	插件 扩展webpack功能
devServer	开发服务器 用于配置webpack-dev-server选项

Установить автозаполнение профиля:

// webpack是基于node构建的，只支持CommonJS模块
module.exports={  
    //入口配置
    entry:'./src/js/main.js',  

    //出口配置
    output:{  
        path:__dirname +'/dist', //输出目录  __dirname:本文件所在硬盘路径（node全局变量）
        filename:'js/main.js' //文件名称（可以有子目录）
    }
};

Исправлятьwebpack.jsonдокумент

существуетwebpack.jsonсередина"scripts"Добавлять:

"scripts": {  
    "dev": "webpack --mode development",
    "build": "webpack --mode production"  
  },  

выполнить упаковку

npm run dev

вход и выход

1. entryКонфигурация записи относится к файлу записи на странице. То есть из какого файла упаковывать. Файл записи по умолчанию:./src/index.js

2. outputКонфигурация экспорта относится к тому, куда выводятся сгенерированные файлы.Файл экспорта по умолчанию:./dist/main.js, в основном обладает следующими свойствами:

path	输出路径
filename	输出文件名

Пример:

//入口
entry: {   
    index: './src/js/main.js',  
},
//输出
output: {
	path: __dirname + "/dist",//打包后的文件存放的地方
	filename:"main.js"//打包后输出的文件名
},

module

webpackтолько упаковатьjsдокумент (понимать толькоJavaScriptГрамматика), файлы, которые не распознают другие грамматики, если вы хотите позволитьwebpackЧтобы упаковать другие файлы, вам сначала нужно сделатьwebpackДля идентификации различных файлов требуются специальные модули, которые в совокупности называютсяloader.

loaderКлассификация

转换编译	script-loader，babel-loader，ts-loader，coffee-loader
处理样式	style-loader，css-loader，less-loader，sass-loader，postcss-loader
处理文件	raw--loader，url-loader，file-loader
处理数据	csv-loader，xml-loader
处理模板语言	html-loader，pug-loader，jade-loader，markdown-loader
清理和测试	mocha-loader，eslint-loader

Обычно используетсяloader

css-loader	解析css语句
style-loader	将css-loader解析后的文本，添加<style>标签

babel-loader	将ES6+、JSX语法转成ES5低版本语法

url-loader	

url-loader对未设置或者小于limit byte设置的图片以base64的格式进行转换 
对于大于limit byte的图片用file-loader进行解析

file-loader	

解析项目中的url引入（包括img的src和background的url） 
修改打包后文件引用路径，使之指向正确的文件

less-loader	less编译器

vue-loader	

Vue也推出了自己的vue-loader，可以方便的打包 .vue文件 的代码
在vue-cli（快速构建单页应用的脚手架）中得到应用。

css loader

//index.js
import a from "./a.js";
import b from "./b.js";
var txt = "hello world";
a.run();
b.play(txt);

//打包css文件
import "./style.css";  //注意：是相对路径

Установитьloader(loaderЭто также пакет зависимостей, и его необходимо установить)

npm install css-loader --save-dev
npm install style-loader --save-dev

существуетmoduleопределено вccsКонфигурация, связанная с модулем:

module: {
    rules: [
        {
            test: /.css$/, //正则
            //把css添加到html的style标签里(style-loader要先加载)
            loader: ['style-loader','css-loader'],  //loader或者use
            exclude: /node_modules/, //正则 排除node_modules目录
        }
    ]
},

babel loader

babelЯвляетсяjsКомпилятор, который поддерживает последнюю версиюJavaScript(включаютJSX、TypeScriptИ другой новый синтаксис). Эти плагины позволяют сразу использовать новый синтаксис, не дожидаясь поддержки браузера.

использоватьBabelПервая настройка.babelrcфайл, который используется для установки правил транскодирования и плагинов (jsonформат), хранящийся в корневом каталоге проекта.

tips:существуетlinuxв системе,rcФайлы в конце обычно представляют собой файлы, конфигурации и т. д., которые автоматически загружаются во время выполнения.

существует.babelrcконфигурационные файлы, в основном для пресетов (presets) и плагины (plugins) для настройки..babelrcФайл конфигурации обычно выглядит следующим образом:

{
   "presets": [
     	["env",{"modules":false}] //modules是配置项
   ],  
	"plugins": [
		[ "transform-runtime",{"polyfill":false}]  //polyfill是配置项
	]
}

пара по умолчаниюjsКомпилируется последний синтаксический сахар, и он не отвечает за перевод вновь добавленногоapiи глобальный объект.

Плагины управляют преобразованием кода,babelПо умолчанию конвертируются только новыеjsсинтаксис без преобразования новогоAPI

plugins

плагин (plugins) можно продлитьwebpackфункция,loaderВсе, что нельзя сделать, можно передатьpluginсделать это.

как:HtmlWebpackPluginПлагины упрощаютHTMLСоздание файла может быть сгенерировано через файл шаблона для созданияHTMLдокумент

resolve

resolve(перевод: разбор) конфигурацияwebpackКак найти файл, соответствующий модулю.

alias	（译：别名）通过别名将原来导入路径映射成一个新的导入路径
extensions	（译：扩展）数组 导入模块时，可以省略的文件后缀名

resolve: {
    alias: {
        "@": path.join(__dirname,"./src") //将项目根目录下的src目录，映射为 @
    },
    extensions:[".js", ".json"]
}

Примеры других элементов конфигурации:

devtool	是否生成以及如何生成sourcemap
devserver	开启一个本地开发服务器
watch	监听文件变化并自动打包
watchoption	用来定制watch模式的选项
performance	打包后命令行如何展示性能提示，如果超过某个大小是警告还是报错

webpack-dev-server

webpack-dev-serverмаленькийwebСервер может автоматически отслеживать изменения в файлах проекта, автоматически обновлять браузер и егоHMR(Hot Module ReplacementГорячая замена модуля) заменяет только обновленную часть, а не перезагружает страницу, что значительно повышает эффективность обновления.

需要本地安装 webpack和webpack-cli
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev

webpack.config.jsКонфигурационный файл:

let path=require("path");

//HtmlWebpackPlugin插件
let HtmlWebpackPlugin=require('html-webpack-plugin');
let htmlPlugin=new HtmlWebpackPlugin({  
    filename:"index.html", //生成的新文件
    template:__dirname+"/src/index_temp.html",  //模板文件
    minify:{ //压缩
        removeComments:true,  //刪除注释
        collapseWhitespace:true  //合并空格
    },
});

//配置项
module.exports = {
    //输入
    entry:'./src/js/main.js',//主入口文件

    //输出
    output: {
        path: __dirname + "/dist",	//打包后的文件存放的地方
        filename:"main.js"			//打包后输出的文件名
    },

    //模块
    module: {
        rules: [
            {
                test: /.css$/, //正则 解析css文件
                //把css添加到html的style标签里(style-loader要先加载)
                use: ['style-loader','css-loader'],
                exclude: /node_modules/, //正则 必须要写exclude！！
            },
            {
		        test: /\.js$/,
		        use: 'babel-loader',
		        exclude: /node_modules/, //正则 必须要写exclude！！
		    },
        ]
    },
    //插件
    plugins:[
        htmlPlugin        
    ],

    //解析
    resolve: {
        alias: {
            "@": path.join(__dirname,"./src") //将项目根目录下的src目录，映射为 "@"
        },
        extensions:['.js', '.json']
    },

    //开发服务器
    devServer: {
        inline:true,	//支持dev-server自动刷新
        port:"8080",	//端口
        open:true,		//自动打开默认浏览器
    },
}

webpack-dev-serve.cmdопределяется в.binв каталоге

"scripts": {
    "dev": "webpack-dev-server --hot",
    "build": "webpack --mode production"
}

бегать

npm start

vue

Шаблон MVC

MVCШаблоны являются одной из наиболее распространенных архитектур мобильного программного обеспечения и делят приложение на три обязательные части: Модели (Model),Посмотреть(View) и контроллер (Controller).

Шаблон MVVM

MVVMрежим заключается в том, чтобы поставитьMVCмодальныйController改成ViewModel.Viewизменения автоматически обновляютсяViewModel，ViewModelизменения также будут автоматически синхронизированы сViewотображается выше.

Базовая грамматика

Пример:

el	 	把 Vue 实例挂载到DOM元素上，通过id绑定html元素
data	 	数据对象，Vue实例的数据（注意：数据不要与methods中的方法重名）
methods	 	事件对象，包含事件所要触发的函数（注意：方法名不要与data中的数据重名）
computed	 	计算属性
watch	 	监听器
directives	 	自定义指令
钩子（hook）函数（8个）	 	hook（钩子）函数，不同生命周期引发的动作
路由钩子函数（3个）	 	路由组件在不同状态时触发
components	 	组件容器
template	 	定义模板，可以是字符串，也可以是”#“选择器
props	 	用于接收来自父组件的数据
router	 	路由
store	 	vuex 状态

свойства/методы экземпляра

vm.$el	Vue 实例使用的根 DOM 元素
vm.$data	Vue的data配置项
vm.$options	用于当前 Vue 实例的初始化选项

vm.$props	当前组件接收到的 props 对象
vm.$parent	父实例（如果当前实例有的话）

vm.$root	当前组件树的根 Vue 实例
vm.$children	当前实例的直接子组件

vm.$refs	原生DOM元素或子组件注册引用信息
vm.$slots	用来访问被插槽分发的内容

vm.$router	全局路由（vue-router插件）
vm.$store	vuex 状态对象（vuex插件）

метод

vm.$emit()	子组件可以使用 $emit 触发父组件的自定义事件
vm.$set()	Vue.set的别名

设置对象的属性， 这个方法主要用于避开 Vue 不能检测属性被添加的限制

vm.$watch	侦听数据变化

vm.$on()	监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$mount	可以使用 vm.$mount() 手动挂载（Vue 实例化时没有 el 选项）

vm.$destroy	完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

触发 beforeDestroy 和 destroyed 的钩子。

属性绑定指令

v-bind	动态改变dom标签上的属性<br />v-bind :class="" 简写 :class=""

жизненный цикл

4 этапа:创建→挂载→更新→销毁

beforeCreate	实例创建前	

created	实例创建后	初始化数据（Ajax数据请求，获取Vuex状态、路由切换等）

beforeMount	载入前	

mounted	载入后	需要操作DOM时（应用第三方插件等）

beforeUpdate	更新前	

updated	更新后	通过事件修改数据、v-model引发数据变化、AJAX异步更新数据

beforeDestroy	实例销毁前	

destroyed	实例销毁后	切换路由（组件将被销毁）

вычисляемое свойство

Многократный доступ к вычисляемому свойству немедленно возвращает результат предыдущего вычисления без необходимости повторного выполнения функции.

Вычисляемые свойства имеют кэширование

проверка обновления для массива

push()、pop()、shift()、unshift()
splice()、sort()、reverse()	

变异方法，可触发视图更新

filter(), concat() 和 slice()	

非变异方法，不触发视图更新
它们可以返回新数组，用新数组替换旧数组，就可以刷新视图

объект события

event.type	触发的事件类型
event.target	触发事件的HTML元素
event.preventDefault( )	阻止事件的默认行为
event.stopPropagation( )	阻止事件冒泡

Vue-компоненты

1. Создание компонентов

let myTemp={
template:'#temp', //模板id
data: function(){ //必须为函数(闭包)
    return { //必须有return，返回值为对象{}
        title:"dadaqianduan"
    }
}

2. Регистрация компонентов

//在components配置项中注册组件
let app=new Vue({
    el:"#box",
    components：{myTemp}
});

//全局注册组件，还可以使用Vue.component方法（仅限全局注册，不建议使用）
Vue.component('myTemp'，MyTemp）；

3. использовать компоненты

<!--在Vue实例中使用组件-->
<div id='box'>
  	<!--组件名如果用驼峰定义，改为短横线命名-->
    <my-temp></my-temp>
</div>

4. коммуникация событий

• Операции с данными между родительскими и дочерними компонентами выполняются черезpropsсвойства и$emit()метод достижения

использование маршрута

Определение маршрутов включает пути маршрутизации (path), название маршрута (name), объекты компонентов маршрутизации (component)

routes: [
    {
      path: '/',        // 路由路径 
      name: 'home',     // 路由名称
      component: Home   // 路由组件对象 
    },
    {
      path: '/users',
      name: 'Users',
      component: UserComponent
    },
    {
      path: '/about',
      name: 'about',  
      component: () => import( './views/About.vue')
    }
  ]

1. динамическая маршрутизация

routes: [
  {
    path: '/users/:username/post/:postid',
    name: 'Users',
    component: UserComponent,
  }
]

/user/:username	
/user/tom	
{username:'tom'}

/user/:username/post/:postId	
/user/tom/post/3	
{username:'tom',postId:'3'}

навигация по маршруту

1. навигационная охрана маршрута

Что такое навигационная защита маршрутизации, можно просто понять как функцию обратного вызова жизненного цикла компонента маршрутизации.

// 路由导航守卫
// 作用：在第一次进入当前路由组件之前被调用
// 使用场景：获取ajax数据
beforeRouteEnter(to, from, next) {
    // to：表示要进入的路由组件
    // from：表示将要离开的路由组件
    // next：表示后续操作函数
    // 此时还未进入到组件中，故不能使用this获取当前组件的实例
    next(function(app) {
        // 进入到当前组件后，才执行的回调
        // 此时回调参数 app 表示当前组件的实例对象
        axios.get('/users/' + app.id).then(res => {
            app.user = res.data.data;
        });
    });
}
beforeRouteUpdate(to, from, next) {
    // 此时，可以使用this表示当前组件对象
    const app = this;
    // 发送ajax请求
    // this表示切换前的状态
    // to表示要切换到的路由对象 route
    axios.get('/users/' + to.params.id).then(res => {
        app.user = res.data.data;
    });
    // 执行后续
    next();
}

2. Программная маршрутная навигация

methods: {
    login(){
        if(登陆成功){
        	//实现页面跳转
        	this.$router.push('/');
        }
    }
}

3. push()

Перейти к указанному адресу маршрутизации и записать текущий адрес в историю, параметр может быть строковым путем или объектом, описывающим информацию об адресе.

字符串	router.push('home')
对象	router.push({path:'home'})
命名的路由	router.push({name:user,params:{userId:1}})

4. replace( ): Перейти к указанному маршруту, он не будет идти по указанному маршрутуhistoryДобавить новую запись, но заменить текущуюhistoryзаписывать.

5. Навигация по глобальному маршруту

Пример:

// 全局路由导航守卫
	router.beforeEach((to, from, next) => {  
});

Вложенные маршруты

children: [
    {
        path: "",
        component: 路由名
    },
    {
        path: "路径名",
        component: 路由名
    }
]

именованный вид

использовать<router-view>можно использоватьnameСвойство задает для него имя, т. е. представление именованного маршрута для краткости называется именованным представлением.

Пример:

<router-view/> 
<router-view name="content"></router-view> 
import About from './views/About.vue';
routes: [  
{
  path: "/about",
  name: "about",
  components: {
    default: About,
    content: UserComponent
  }
}
]

Оглядываясь назад на предыдущие высоко оцененные статьи автора, вы можете получить больше!

• Письменные тестовые вопросы Vue.js решают типичные проблемы в бизнесе
• [Основной] Лично делиться заметками к руководству по разработке интерфейса Vue
• Личный веб-интерфейс Dada делится 92 вопросами интервью JavaScript с дополнительными ответами
• [И картинки, и тексты, лайкайте и собирайте! ] Переучитесь, чтобы закрепить свою систему знаний Vuejs
• [Карта разума] Фронтенд-разработка — Консолидируйте свою систему знаний JavaScript
• Выпуск 14-Лянган за 7 ночей, обобщающий очки знаний компьютерной сети! (всего 66)

❤️Подписывайтесь + лайк + избранное + комментарий + пересылка ❤️, оригинальность непроста, поощряйте автора создавать лучшие статьи

Нравится, добавляете в избранное и комментируете

яJeskson(Dada front-end), спасибо за ваши таланты:Нравится, добавляете в избранное и комментируете, увидимся в следующий раз! (Если что-то не так с объяснением в этой статье, укажите ☞Спасибо, будем учиться вместе)

Увидимся в следующий раз!

Статья постоянно обновляется, вы можете искать в WeChat "Программист Дораэмон"Прочитайте ее впервые и ответьте на [Информацию] Я подготовил информацию о производителях первой линии, эта статьяwww.dadaqianduan.cn/#/был записан

githubвключено, добро пожаловатьStar:GitHub.com/веб-блог VUE/…