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

Для этого нам нужно написать библиотеку. Чтобы начать этот урок…

…Давным-давно автор или «Pin it» на Pinterest опубликовал статью о том, как он разрабатывал свои библиотеки JavaScript. Он подчеркнул важность поддержания чистоты глобального пространства имен и продемонстрировал, как писать анонимные функции/замыкания, создав для этого IIFE (Immediate Invoked Function Expression).

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

Модель IIFE

Это выражение будет выполнено сразу после его определения.

Вот модель IIFE с общими параметрами

Вышесказанное должно быть понятно :)

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

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

window.myLibrary = myLibrary;
// or
window[myLibrary] = myLibrary;

Как видите, мощь библиотек IIFE может быть простой, но мощной.

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

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

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

Я хочу показать вам это по шагам, чтобы вы могли понять, что мы делаем. Мы можем сделать все это с помощью ванильного JavaScript, без зависимостей от библиотек. Вот так!

Настройка нашей библиотеки IIFE

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

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

Запускаем нашу библиотеку в консоли браузера.

Это даст нам следующее:

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

По сути, мы передаем ему css, которым хотим его заменить, в массиве стилей. Мы добавляем !import к правилу, чтобы оно отменяло существующее правило css.

Вот что мы получаем после обновления нашей библиотеки и повторного запуска:

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

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

Затем найдите тег статьи, как здесь:

То же, что и ниже:

Примечание. После этого вы увидите справа статью, выделенную синим цветом.

Это будет наш тег replaceWith. Нравится replaceWith: «статья»

Затем прокрутите вверх до того места, где вы хотите его поместить. В этом случае мы ищем корневой идентификатор, как здесь:

Когда вы выбираете div с идентификатором root, он будет выбран следующим образом:

Примечание: справа вы увидите статью, выделенную синим цветом.

Этот div будет нашим значением replaceMe. Как replaceMe: «#root»

Затем просто запустите скрипт, и вы получите такие результаты:

Он заполняет весь тег body. Примечание: мы заменили css, из-за которого div имел максимальную ширину 680 пикселей, и мы заменили его максимальной шириной 100%.

Для нас это был класс .fj, как здесь:

Затем просто распечатайте эту статью в формате PDF или сохраните ее в формате HTML.

Сохранено и просмотрено в формате PDF:

Надеюсь, вам понравилась эта статья. Резонные вопросы и комментарии приветствуются :)

Спасибо