предисловие
Что касается технологии, только постоянно повторяя обучение, мы можем неуклонно двигаться вперед.
1. Каррирование функций
Каррирование функций — это способ реализации рекурсивной деградации для функций с несколькими аргументами. Суть его реализации заключается в следующем:
1. Подумайте, как кэшировать каждый входящий параметр
2. Сравните входящие параметры с входными параметрами целевой функции
Здесь параметры кэшируются замыканием, которое реализовано следующим образом:
Он используется следующим образом:
Является ли функция каррированием всего лишь приложением приведенного выше суммирования? ?
👆Этот вопрос, надо пройти 🤔. На самом деле, используя идею каррирования функций, мы можем лучше реализовать инкапсуляцию функций.
Например, если отслеживается определенное событие, будет операция по удалению события, то для инкапсуляции кода можно использовать идею каррирования.
Другими словами, если вход A имеет уникальный и соответствующий выход B, то безопаснее и независимее рассматривать такой инженерный проект с более широкой точки зрения. Также прост в обслуживании.
2. О массивах
Метод рукописной карты
Метод map() сопоставляет новый массив в соответствии с функцией обратного вызова.
Метод рукописного фильтра
Метод filter() возвращает массив, и каждый возвращаемый элемент является истинным в функции обратного вызова.
Разница между фильтром и картой: фильтр отображает элементы, условие которых истинно, а карта отображает каждый элемент.
Метод рукописного сокращения
Метод reduce() повторяется в цикле, и результат функции обратного вызова будет использоваться в качестве первого параметра следующего формального параметра.
Рукописный каждый метод
Метод Every() проверяет, все ли элементы массива проходят тест указанной функции. Он возвращает логическое значение.
рукописный какой-то метод
Метод some() проверяет, проходит ли хотя бы один элемент в массиве предоставленный функциональный тест. Он возвращает значение логического типа.
Рукописный метод поиска
Метод find() возвращает значение первого элемента массива, удовлетворяющего предоставленной тестовой функции. В противном случае вернуть неопределенное значение.
сгладить массив
Выравнивание вложенных массивов чаще происходит в сценариях обработки бизнес-данных. Как этого добиться?
- Выровняйте массив, используя метод flat(num) синтаксиса ES6.
Этот метод будет выравнивать только один уровень по умолчанию, если никакие параметры не переданы.Если вы хотите выровнять многоуровневый вложенный массив, вам нужно передать целое число, указывающее уровень, который нужно выровнять. Возврат возвращает новый массив и не влияет на исходный массив.
- Используйте метод reduce(), чтобы сгладить массив.
Основной идеей использования сокращения для итерации является рекурсивная реализация.
- Имитация стека для достижения выравнивания массива
Этот метод имитирует стек, который является относительно оптимальным с точки зрения производительности.
3. Ленивая загрузка изображений и ленивая функция
Основная идея ленивой загрузки изображений — использовать локальный заполнитель для атрибута src для img или оставить его пустым. Затем реальный путь к изображению определяет атрибут набора данных и сохраняет его, а при выполнении определенных условий значение атрибута data-img присваивается src.
Следующее черезscrollЛенивая загрузка картинок реализована с помощью мониторинга событий прокрутки, при загрузке картинок мониторинг событий снимается, а html-теги удаляются.
scrollПрокат событий легко вызвать проблемы с производительностью. Что можно пропуститьIntersectionObserver Автоматически наблюдайте, входит ли тег img в видимую область.
Создайте экземпляр IntersectionObserver, приняв два параметра: callback — это функция обратного вызова при изменении видимости, option — объект конфигурации (этот параметр является необязательным).
Когда тег img входит в видимую область, выполняется обратный вызов создания экземпляра, и в обратный вызов передается параметр entry, который сохраняет некоторые состояния всех элементов, наблюдаемых экземпляром, например информацию о границах каждого элемента и узел DOM. соответствующий текущему элементу. , соотношение текущего элемента, входящего в видимую область, всякий раз, когда элемент входит в видимую область, присваивает реальное изображение текущему тегу img и одновременно выпускает его наблюдение.
Выше приведена реализация ленивой загрузки изображений.
Стоит задуматься, в чем разница между ленивой загрузкой и ленивыми функциями?
Ленивая загрузка я так понимаю означает, что она загружается только тогда, когда это необходимо.Ленивая загрузка - это разновидность ленивой, но ленивая функция - это не только ленивая загрузка, она может содержать и другое направление.
Другое направление функции инертной функции состоит в том, чтобы переписать функцию. Когда функция называется, нет необходимости делать некоторые критерии, и условия суждения выполняются один раз, когда он инициализируется, то есть такое же условное заявление в следующий раз Не нужно снова быть судимым, таких как совместимость на слушание события.
4. предварительно загружен
Предварительная загрузка, как следует из названия, является предварительной загрузкой, такой как предварительная загрузка изображений.
Когда пользователю нужно просмотреть, его можно напрямую получить из локального кеша. Преимущество предварительной загрузки в том, что если изображение слишком большое, запрос на загрузку изображения будет медленным, страница будет отображаться пустой, а пользовательский опыт ухудшится, как только вы откроете страницу, вы увидите картинку.
5. Дросселирование и защита от сотрясений
Для функций высокочастотного триггера мы обычно думаем об оптимизации производительности за счет дросселирования или подавления сотрясений.
Принцип дросселирования заключается в том, чтобы судить по таймеру и разнице во времени. Таймер имеет возможность задержки, событие не будет выполняться сразу в начале, а будет выполняться повторно после окончания события, тогда как событие разницы во времени выполняется сразу в начале, а останавливается сразу после окончания времени.
Объедините функции обоих, чтобы инкапсулировать функцию дросселирования:
Регулирование функций гарантирует, что реальный обработчик событий будет выполняться в течение заданного времени, независимо от того, как часто событие запускается.
Принцип реализации антивстряски — через таймер, если событие сработает повторно в течение заданного времени, последний таймер будет очищен, то есть функция не будет выполняться, а новый таймер будет сброшен до тех пор, пока не сработает таймер в таймер автоматически срабатывает по истечении заданного времени.функция.
6. Внедрите новое ключевое слово
7. Реализовать instanceof
Оператор instanceof используется для обнаруженияprototypeПоявляется ли свойство в цепочке прототипов экземпляра объекта.
8. Реализовать вызов, применить, привязать
- call
Принцип реализации функции вызова заключается в заимствовании метода, ключ заключается в неявном измененииthisуказывает на.
- apply
Принцип применения функции такой же, как и у вызова, суть заключается в обработке и оценке параметров.
Функция метода call() аналогична функции метода apply(), разница в том, что метод call() принимает список параметров, а метод apply() принимает массив параметров.
- bind
Метод bind() создает новую функцию, при вызове bind() this новой функции указывается как первый параметр bind(), а остальные параметры будут использоваться как параметры новой функции для использования при вызове.
Ключевые идеи для достижения:
1. Скопируйте и сохраните исходную функцию, новую функцию и ссылку на исходный прототип функции.
2. Создайте новую функцию и вызовите исходную функцию в новой функции.
9. Инкапсулируйте функции типов данных
10. Функция самопамяти
11. Есть ли циклическая ссылка
12. Функция копирования
Копирование данных всегда было неизбежным навыком в развитии бизнеса, я уже писал статью о глубоком и поверхностном копировании данных.Разговор о глубоком копировании и мелком копировании.
- Копирование данных с помощью мышления в глубину (DFS)
Глубина сначала заключается в том, чтобы подумать о проблеме через вертикальное измерение, а также рассмотреть проблему кольца объектов в процессе обработки.
Основная идея решения кольца объектов состоит в том, чтобы сначала сохранить, а затем скопировать. В начале используется контейнер для хранения исходного объекта и последующего его копирования, причем перед каждым копированием проверяется, существует ли уже объект в контейнере. Это обрывает связь между исходным объектом и скопированным объектом.
- Копирование данных с помощью мышления в ширину (BFS)
Сначала нужно рассмотреть проблему в горизонтальном измерении и реализовать копию, создав связь между исходной очередью и очередью массива копий.
13. Серия обещаний
Я уже писал статью оPromiseобмена знаниями.
Promsie.all
Promsie.race
Promsie.finally
14. Реализуйте асинхронное ожидание
15. Реализуйте простую подписку-публикацию
16. Одноэлементный шаблон
Шаблон Singleton: гарантирует, что класс имеет только один экземпляр и предоставляет к нему глобальную точку доступа. Метод реализации обычно заключается в том, чтобы сначала определить, существует ли экземпляр, и если он существует, он будет возвращен напрямую, если он не существует, он будет сначала создан, а затем возвращен.
17. Реализовать Object.create
Метод Object.create() создает новый объект, используя существующий объект для предоставления __proto__ вновь созданного объекта.
Этот метод понимает, что прототип существующего объекта и нового объекта представляет собой процесс поверхностного копирования.
18. Реализуйте синтаксис класса ES6
Используйте метод Object.create() для наследования экземпляра объекта подкласса от объекта-прототипа родительского класса и используйте Object.setPrototypeOf() для наследования статических методов и статических свойств родительского класса.
19. Реализуйте функцию создания
Функция compose используется для объединения функций слияния и, наконец, для вывода значения идеи. Используется для обработки промежуточного программного обеспечения в исходном коде избыточности.
- Реализован с использованием во время цикла
- Итеративная реализация с использованием сокращения
20. Реализуйте асинхронные параллельные функции
fn — это функция, которая возвращает Promise для использования следующих функций:
Если fn не является возвратом Promsie, то оберните слой:
21. Реализуйте асинхронные последовательные функции
22. Реализация приватных переменных
Выше приведена инкапсуляция частных переменных, реализованная es5.С помощью WeakMap можно расширить частные свойства, соответствующие каждому экземпляру.Частные свойства недоступны извне, они уничтожаются и исчезают вместе с этим объектом.
Здесь стоит упомянуть небольшую деталь, см. следующий код:
Выше приведен другой способ написания метода, висящего на прототипе, и метода, уникального для каждого экземпляра. В чем разница между ними? (ps: можно распечатать вручную)
При вызове метода прототипа значение частной переменной является значением самого последнего экземпляра, вызвавшего метод прототипа. Значение предыдущего экземпляра также изменилось, поэтому возникает проблема...
Использование WeakMap позволяет решить вышеуказанные проблемы: метод можно связать с прототипом, а результаты вызова одного и того же экземпляра в разные периоды согласованы.
исходный код
javascript--, добро пожаловать звезда
Суммировать
Я всегда думал, что если есть входные данные, то должны быть и выходные данные, и это резюме — лучший способ вывода. Поэтому, с такой статьей, я надеюсь, что читатели смогут успокоиться и написать и понять процесс мышления и выполнения кода, и я думаю, у них также будет более глубокое понимание js. (пс: можем обсудить вместе)
Как сказано выше, если есть новый контент, он будет продолжать обновляться...
использованная литература
28 навыков JavaScript, которыми должен овладеть квалифицированный фронтенд-инженер среднего уровня