1. Почему JS однопоточный
Простая причина в том, что,jsВ начале проектирования выполняются лишь некоторые простые проверки формы, что вообще не требует многопоточности, и один поток вполне способен на эту работу. Несмотря на то, что внешний интерфейс быстро развивался и обладал все большей и большей производительностью, он не развивался до такой степени, в которой требовалась многопоточность.
И есть главная причина, представьте, еслиjsЭто многопоточность и несколько потоков одновременноDOMЭлементы управляются, какая нить является основной проблемой, а проблема планирования потоков является более сложной проблемой.
HTML5Допускаются новые стандартыnew Workerспособ начать новый поток для запуска отдельногоjsfile script, но в этом новом потоке функции, которые можно использовать, строго обязательны, например, он может использовать толькоECMAScript, Не удается получить доступDOMа такжеBOM. Это также ограничивает одновременную работу нескольких потоков.DOMэлемент возможен.
2. Используйте css, чтобы написать треугольную угловую метку
Ширина и высота элемента устанавливаются равными0,пройти черезborderзадать свойства, чтобы остальные три направленияborderЦвет прозрачный или такой же, как цвет фона, оставшийсяborderустановите цвет на желаемый цвет.
div {
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: red;
}
3. Центрирование по горизонтали и вертикали
Я обычно использую только два способа定位илиflex, думаю хватит.
div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Родитель контролирует центрирование подмножества
.parent {
display: flex;
justify-content: center;
align-items: center;
}
4. css строка текста превышает...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
5. Многострочный текст превышает отображаемый...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
6. Полоса прокрутки мобильного контейнера IOS не скользит плавно
overflow: auto;
-webkit-overflow-scrolling: touch;
7. Измените стиль полосы прокрутки
Спрятатьdivполоса прокрутки элемента
div::-webkit-scrollbar {
display: none;
}
div::-webkit-scrollbar Вся часть полосы прокрутки
div::-webkit-scrollbar-thumb Маленький квадрат внутри полосы прокрутки, который можно перемещать вверх и вниз (или слева направо, в зависимости от того, вертикальная это полоса прокрутки или горизонтальная полоса прокрутки)
div::-webkit-scrollbar-track дорожка полосы прокрутки
div::-webkit-scrollbar-button Кнопки на обоих концах дорожки полосы прокрутки, позволяющие точно настроить положение маленьких квадратов щелчком.
div::-webkit-scrollbar-track-piece внутренняя дорожка, средняя часть полосы прокрутки
div::-webkit-scrollbar-corner Угол, где сходятся две полосы прокрутки.
div::-webkit-resizer Gizmo на пересечении двух полос прокрутки для изменения размера элементов путем перетаскивания
Обратите внимание, что у этой схемы есть проблемы с совместимостью.Как правило, когда полосу прокрутки нужно скрыть, я использую блок цвета, чтобы скрыть ее, позиционируя, или увеличивая размер дочернего элемента, а родительский элемент использует скрытое переполнение, чтобы обрезать часть полосы прокрутки. Жестоко и прямолинейно.
8. Решите проблему, из-за которой звук ios не может воспроизводиться автоматически и воспроизводится в цикле.
iosмобильный телефон в использованииaudioилиvideoПри воспроизведении некоторые модели не могут добиться автоматического воспроизведения, вы можете использовать следующий кодhack.
// 解决ios audio无法自动播放、循环播放的问题
var music = document.getElementById('video');
var state = 0;
document.addEventListener('touchstart', function(){
if(state==0){
music.play();
state=1;
}
}, false);
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//循环播放
music.onended = function () {
music.load();
music.play();
}
9. Скрыть элементы страницы
display-none: элемент не будет занимать место, не будет отображаться на странице, а также не будут отображаться дочерние элементы.
opacity-0: непрозрачность элемента будет0, но элемент все еще существует, а связанное событие все еще допустимо и все еще может инициировать выполнение.
видимость-скрытая: элемент скрыт, но он все еще существует, занимает место, и событие элемента не может быть вызвано на странице.
10. Фронтенд-инжиниринг
Когда дело доходит до предварительного проектирования, многие люди думают оwebpack,это неправильно,webpackТолько одна часть фронтенд-инжиниринга. На протяжении всего процесса проектирования он помогал нам решать большинство проблем, но не все.
Фронтенд-инжиниринг — это средство повышения эффективности и снижения затрат с помощью инструментов.
В последние годы это широко обсуждалось и обсуждалось.Основная причина заключается в том, что функциональные требования к современным интерфейсным приложениям постоянно улучшаются, а бизнес-логика становится все более сложной.Являясь единственной незаменимой технологией в нынешнюю эпоху Интернета, Можно сказать, что front-end занимает всю индустрию разработки, половину страны. От традиционного сайта к современностиH5,переехатьApp, Настольные приложения и апплеты. Фронтенд-технология практически полностью покрыта всемогущей.
На самом деле за этой внешностью отраслевые требования к разработчикам претерпели кардинальные изменения: в прошлом скоростной метод написания демонстраций, настройки шаблонов и корректировки страниц во внешнем интерфейсе полностью несовместим с нынешним Требования к эффективности разработки Front-end engineering Трансформация является одним из необходимых средств для front-end инженеров, которые должны быть привлечены к столу на таком фоне.
Вообще говоря, интерфейсные проекты включают в себя такие процессы, как инициализация проекта, разработка проекта, представление, построение, развертывание, тестирование и мониторинг. Инженерия должна решить эти проблемы с точки зрения инженерии. Например, для инициализации проекта мы обычно используемnpm init, чтобы создать шаблон страницы с помощьюplop, мы любим использоватьES6+развитие, но нужно пройтиbabelзакодировано вES5, когда мы используем непрерывное интегрированиеgit/ci cd, но для того, чтобы сохранить спецификацию разработки, мы ввелиESLint, развертывание обычно используетсяgit/cdилиjenkinsи т.п.
11.contenteditable
htmlБольшинство тегов не редактируются, а добавляютсяcontenteditableПосле свойств метка становится редактируемой.
<div contenteditable="true"></div>
Однако после того, как этикетка станет редактируемой с помощью этого атрибута, толькоinputсобытие, нетchangeмероприятие. И это не может быть передано как формаmaxlengthКонтролирует максимальную длину. Я также забыл, при каких обстоятельствах я его использовал, я придумаю это позже, когда вспомню.
12.calc
Этоcssсвойства, которые я обычно называюcssвыражение. можно рассчитатьcssценность . Самое интересное, что он умеет вычислять разницу между разными единицами измерения. Очень полезная функция, недостаток в том, что ее нелегко читать. Пикапер не может увидеть это с первого взгляда20pxЧто это такое.
div {
width: calc(25% - 20px);
}
13. Объект даты
Получить текущее время в миллисекундах
// 方式一
Date.now(); // 1606381881650
// 方式二
new Date() - 0; // 1606381881650
// 方式三
new Date().getTime() // 1606381881650
СоздайтеDateПроблемы совместимости объектов.
// window和安卓支持，ios和mac不支持
new Date('2020-11-26');
// window和安卓支持，ios和mac支持
new Date('2020/11/26');
14. Разница между Proxy и Object.defineProperty
ProxyЭто означает прокси, я обычно называю его перехватчиком, который может перехватить операцию на объекте. Использование выглядит следующим образом,newМетод создания объекта, первый параметр — объект, который нужно перехватить, а второй параметр — описание работы объекта. После создания экземпляра возвращается новый объект, и когда мы работаем с этим новым объектом, будет вызываться соответствующий метод в нашем описании.
new Proxy(target, {
get(target, property) {
},
set(target, property) {
},
deleteProperty(target, property) {
}
})
Proxyотличный отObject.definedProperty.
Object.definePropertyМожно отслеживать только свойства чтения и записи, иProxyПомимо чтения и записи, он также может отслеживать удаление свойств, вызов методов и т. д.
Обычно мы хотим отслеживать изменения массива, в основном полагаясь на способ переопределения метода массива, который такжеVueреализация, при этомProxyИзменения в массиве можно отслеживать напрямую.
const list = [1, 2, 3];
const listproxy = new Proxy(list, {
set(target, property, value) {
target[property] = value;
return true; // 标识设置成功
}
});
list.push(4);
ProxyОн контролирует чтение и запись объектов ненавязчивым образом иdefinePropertyСвойства объекта должны быть определены определенным образом.
15.Reflect
онES2015Недавно добавленные объекты, чисто статические объекты, которые не могут быть отрисованы экземплярами, могут быть вызваны только статическими методами иMathОбъекты похожи и могут быть только похожимиMath.random()способ позвонить.
ReflectВнутренне инкапсулирует серию низкоуровневых операций над объектами, всего14из которых1Заброшено, что осталось13индивидуальный.
Reflectстатический метод иProxyМетод в описании точно такой же. то естьReflectметод-членProxyРеализация объекта обработки по умолчанию.
ProxyМетод объекта по умолчанию — это вызовReflectЛогика внутренней обработки, то есть, если мы вызовемgetметодом, затем внутрь,Reflectчто будетgetпередан нетронутымReflect,следующим образом.
const proxy = new Proxy(obj, {
get(target, property) {
return Reflect.get(target, property);
}
})
Reflectа такжеProxyАбсолютной взаимосвязи не существует, мы обычно объединяем их, чтобы облегчить их понимание.
Тогда зачем было быReflectЧто касается объекта, то на самом деле его наибольшее применение заключается в предоставлении набора унифицированных операций.ObjectизAPI.
Чтобы определить, имеет ли объект атрибут, вы можете использоватьinоператор, но недостаточно элегантный, вы также можете использоватьReflect.has(obj, name); Чтобы удалить свойство, вы можете использоватьdelete, вы также можете использоватьReflect.deleteProperty(obj, name); Чтобы получить все имена свойств, вы можете использоватьObject.keys, вы также можете использоватьReflect.ownKeys(obj); мы предпочитаем использоватьReflectизAPIманипулировать объектом, потому что он будущее.
16. Разобрать получить параметры
пройти черезreplaceспособ получитьurlпары ключ-значение параметров в , которые можно быстро проанализироватьgetпараметр.
const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q);
17. Разберите URL-адрес подключения
может быть созданaмаркировать, датьaприсвоение меткиhrefсобственность, получить到协议,pathname,originЖдатьlocationсвойства на предметах.
// 创建a标签
const aEle = document.createElement('a');
// 给a标签赋值href路径
aEle.href = '/test.html';
// 访问aEle中的属性
aEle.protocol; // 获取协议
aEle.pathname; // 获取path
aEle.origin;
aEle.host;
aEle.search;
...
18.localStorage
localStorageдаH5Предоставляется постоянное место для хранения, как правило, можно хранить максимум5MData, а также поддерживает междоменную изоляцию, его появление значительно улучшает возможности фронтенд-разработки.localStorageИспользование многих людей знаютsetItem,getItem,removeItem, но он также может действовать непосредственно в качестве члена.
localStorage.name = 'yd';
// 获取
localStorage.name; // yd
// 删除
delete localStorage.name;
// 清除全部
localStorage.clear();
// 遍历
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i); // 获取本地存储的Key
localStorage[key]; // 获取本地存储的value
}
localStorageПродолжение сохранения, когда оно заполнено, не перезапишет другие значения, но напрямую сообщит об ошибке (QuotaExceededError), и текущее сохраненное значение также очищается. Браузер поддерживает хранение под каждым доменным именем5Mданные.
19.sessionStorage
sessionStorageа такжеlocalStorageРазница в том, что есть текущая сессия, и многие понимают, что браузер закрыт, что не соответствует действительности, предполагая, что вы находитесь вAстраница сохраненаsessionStorage, новая вкладка будетAВставьте ссылку на страницу, чтобы открыть страницу,sessionStorageтакже не существует.
такsessionStorageНаличие перехода между страницами,Aстраница сохраненаsessionStorage, он хочет пройти超链接илиlocation.hrefилиwindow.openчтобы открыть другую страницу того же домена для доступаsessionStorage.
Это вложено в смешанную разработкуH5особенно важно в режиме разработкиwebviewспособ открыть страницу, скорее всегоsessionStorageбольше не надо.
20. Сеансовые файлы cookie
cookieЕсли вы не указали время истечения при настройке, значит, это сессияcookie, ранее я думал закрыть сеанс браузераcookieпросто исчез, однако... Привет ТиbugОдин.
В большинстве случаевwindowsСистема или система Android действительно такая. Но когдаmacOSсистема илиiosВ системе закрытие браузера не очищает сессиюcookieчтобы завершить процесс браузера.
21. Строка шаблона метки
Строка шаблона поддерживает предыдущее добавление функции, первый параметр представляет собой массив с фиксированным содержимым, а обратные параметры в свою очередь, и функция возвращает значение строки шаблона, чтобы действительно показать значение. Однако эта функция не используется по личным ощущениям.
const tag = (params, ...args) => {
return params[0] + args[0]; // 返回值为模板字符串的真实值。
}
const str = tag`hello ${'world'}`;
22. Несколько методов, обычно используемых в строках
1. includes();
Содержит ли строка определенную строку, это не означает, что на самом делеindexOfАльтернатива , которая более элегантна в использовании,
2. startsWith();
Начинается ли строка с определенной строки, я обычно использую ее, чтобы судитьurlЗдесьhttp
3. endsWith();
Является ли строка концом строки. Это особенно эффективно при оценке имен суффиксов.
4. repeat(number);
получить повторениеnumberподстрока. Эх... Не знаю, когда это пригодится, обычно я использую его для создания тестовых данных.
5. 'abc'.padEnd(5, '1'); // abc11;
Объединяет заданную строку до указанной длины в конце, первый параметр — это длина, а второй параметр — это значение, используемое для объединения.
6. 'abc'.padStart(5, '1'); // 11abc;
Объединить заданную строку с указанной в заголовке длиной.Первый параметр — это длина, а второй параметр — значение, используемое для объединения. Первое дополнение равно 0?
23. Массивы быстро дедуплицируются
Это должны знать многие, массив преобразуется вSet, а затем преобразуется в массив, но этот метод дедупликации может удалять только массивы, состоящие из базовых типов данных.
const arr = [1, 2, 3, 4, 5, 6];
const arr2 = new Set(arr);
const arr3 = [...arr2];
24.Object.keys, values, entries
Обычно мы используемObject.keys, возвращает массив ключей объекта, на самом деле естьObject.values, который возвращает массив значений объекта,Object.entriesПреобразование объектов в массивы, каждый элемент представляет собой массив пар ключ-значение, вы можете использовать эту функцию для быстрого преобразования объектов вMap.
const obj = {name: 'yd', age: 18};
Object.keys(obj); // ['name', 'age'];
Object.values(obj); // ['yd', 18];
const l = Object.entries(obj); // [['name', 'yd'], ['age': 18]];
const m = new Map(l);
25.Object.getOwnPropertyDescriptors
Получить описание объекта
Object.assignПри копировании атрибуты и методы объекта копируются как обычные атрибуты, и полная информация описания не копируется, напримерthis.
const p1 = {
a: 'y',
b: 'd',
get name() {
return `${this.a} ${this.b}`;
}
}
const p2 = Object.assign({}, p1);
p2.a = 'z';
p2.name; // y d; 发现并没有修改p2.a的值，是因为this仍旧指向p1
использоватьObject.getOwnPropertyDescriptorsполучить полное описание
const description = Object.getOwnPropertyDescriptors(p1);
const p2 = Object.defineProperty({}, description);
p2.a = 'z';
p2.name; // z d
26.BigInt
JavaScriptНаибольшее число, которое можно обработать, равно2из53власть- 1, это мы можемNumber.MAX_SAFE_INTEGERвидел в.
consoel.log(Number.MAX_SAFE_INTEGER); //9007199254740991
Большие числа не могут быть обработаны,ECMAScript2020представлятьBigIntтипы данных для решения этой проблемы. сложив буквыnПоложите это в конце, вы можете работать с большими данными.
BigIntВы можете использовать арифметические операторы для выполнения операций сложения, вычитания, умножения, деления, остатка и идемпотентов. Он может быть составлен из чисел и шестнадцатеричных или двоичных строк. Кроме того, он поддерживаетAND,OR,NOTа такжеXORПобитовые операции, такие как . Единственной недопустимой побитовой операцией является оператор сдвига вправо, дополненный нулями.
const bigNum = 100000000000000000000000000000n;
console.log(bigNum * 2n); // 200000000000000000000000000000n
const bigInt = BigInt(1);
console.log(bigInt); // 1n;
const bigInt2 = BigInt('2222222222222222222');
console.log(bigInt2); // 2222222222222222222n;
BigInt — это большое целое число, поэтому его нельзя использовать для хранения десятичных знаков.
27. ??объединяющий нулевой оператор
гипотетическая переменнаяaне существует, мы хотим дать системе значение по умолчанию, обычно мы будем использовать||оператор. Но когдаjavascriptпустой строки,0,falseбудет выполнять||оператор, такECMAScript2020Введение объединяющего нулевого оператора решает эту проблему, допуская только значениеnullили используйте значение по умолчанию, если оно не определено.
const name = '';
console.log(name || 'yd'); // yd;
console.log(name ?? 'yd'); // '';
28. Необязательный оператор цепочки
Эта ситуация часто встречается в бизнес-коде,aОбъект имеет свойствоb,bТакже у объекта есть свойствоc,
нам нужно посетитьc, часто пишется какa.b.c,но еслиfКогда он не существует, возникает ошибка.
const a = {
b: {
c: 123,
}
}
console.log(a.b.c); // 123;
console.log(a.f.c); // f不存在所以会报错
ECMAScript2020Определение необязательного оператора цепочки решает эту проблему путем.добавить один перед?Сделать имена ключей необязательными
let person = {};
console.log(person?.profile?.age ?? 18); // 18
29.import
importдаECMAScript2015набор определенныхES ModuleМодульная система, функции синтаксиса уже поддерживаются большинством браузеров, предоставляяscriptдобавить тегиtype=moduleможно использовать свойстваES Moduleстандарт для реализацииjavascriptкод вверх.
<script type="module">
console.log('this is es module');
</script>
существуетES ModuleПо спецификации будет использоваться строгий режим (use strict)бегатьjavascriptкод. каждыйES ModuleОба работают в разных областях, что означает, что переменные не мешают друг другу. внешнийjsфайл черезCORSзапрошенный способ, поэтому запросите наш внешнийjsАдрес файла должен поддерживать междоменные запросы, то есть файловый сервер должен поддерживатьCORS. Мы можем ввести следующий код в любой консоли веб-сайта.
const script = document.createElement('script');
script.type = 'module';
script.innerHTML = `import React from 'https://cdn.bootcdn.net/ajax/libs/react/17.0.1/cjs/react-jsx-dev-runtime.development.js';`;
document.body.append(script);
можно найти вnetworkзапрошено вhttps://cdn.bootcdn.net/ajax/libs/react/17.0.1/cjs/react-jsx-dev-runtime.development.jsресурс.
ES ModuleизscriptТег будет задерживать загрузку скрипта, ждать, пока страница запросит ресурсы перед выполнением, и использоватьdefferТаким же образом загружаются ресурсы.
должны знать о том,import {} from 'xx'При импорте модуля происходит не деструктуризация объекта, аimportфиксированный синтаксис, в котором многие ошибаются.
а такжеECMAScript2020серединаimportНачал поддерживать функцию динамического импорта, до этогоimportЕго можно написать только в начале кода модуля, а другие модули, от которых зависит модуль, должны быть объявлены в начале. После поддержки динамического импорта соответствующие модули могут быть импортированы по запросу.SPAуже используется в . Динамический импорт возвращаетPromise.
a.js
const a = 123;
export { a };
b.js
import('./a.js').then(data => {
console.log(data.a); // 123;
})
30. 0.1 + 0.2 === 0.3 // false
console.log(0.1+0.2); // 0.30000000000000004
существуетJSсреди,Numberтип на самом делеdoubleтип, существует проблема точности при вычислении десятичных дробей. Поскольку компьютер понимает только двоичные числа, при выполнении операций ему необходимо преобразовать значения других оснований в двоичные, а затем выполнить вычисление.
Десятичные числа бесконечны, когда выражены в двоичном виде.
// 将0.1转换成二进制
console.log(0.1.toString(2)); // 0.0001100110011001100110011001100110011001100110011001101
// 将0.2转换成二进制
console.log(0.2.toString(2)); // 0.001100110011001100110011001100110011001100110011001101
Дробная часть числа двойной точности с плавающей запятой поддерживает до53Итак, после добавления двух двоичное число усекается из-за ограничения десятичных разрядов числа с плавающей запятой, а затем преобразуется в десятичное, оно становится0.30000000000000004, что приведет к ошибкам в арифметических вычислениях.
ES6 在NumberНа объект добавляем очень маленькую константуNumber.EPSILON. По спецификациям написано1с более чем1Разница между наименьшими числами с плавающей запятой. для64Для чисел с плавающей запятой больше1Наименьшее число с плавающей запятой, эквивалентное двоичному1.00..001, есть продолжение после запятой51нуль. это значение минус1После этого он равен2的-52次方.
Number.EPSILON === Math.pow(2, -52)
// true
Number.EPSILON
// 2.220446049250313e-16
Number.EPSILON.toFixed(20)
// "0.00000000000000022204"
Number.EPSILONв реальностиJavaScriptМинимальная точность, которую можно представить. Если ошибка меньше этого значения, можно считать, что она не имеет смысла, то есть ошибки нет.
Цель введения такой малой величины — установить предел погрешности для вычислений с плавающей запятой. Мы знаем, что вычисления с плавающей запятой неточны.
Number.EPSILONможно использовать для установки能够接受的误差范围. Например, предел погрешности установлен равным2из-50мощность (т.е.Number.EPSILON * Math.pow(2, 2)), то есть, если разница между двумя числами с плавающей запятой меньше этого значения, мы считаем два числа с плавающей запятой равными.