Всем привет!.
Это парень-разработчик, который пишет статьи на Medium, так что вы можете их читать и комментировать, и в лучшем случае мы оба сможем чему-то научиться.
Если вы пережили предыдущий абзац, не выходя из него, я думаю, вы хотите знать, что я на самом деле имею в виду под «Обработкой медиа-запросов для JS», разве в CSS уже нет этой функции для всего, что мы могли бы когда-либо захотеть с ней сделать? И я предполагаю, что ответ может быть просто да, но я обнаружил себя в некоторых сценариях, где я хотел обрабатывать функции Js в зависимости от ширины экрана и в итоге получил это решение, которое, я надеюсь, будет полезно и для вас.
Для чего я могу его использовать?
Хороший вопрос. Дело в том, что вы можете использовать его для выполнения любого скрипта или скрытия и отображения объектов заданного размера (также после или перед заданным размером). Я обычно использую его вместе с v-if, чтобы обрабатывать вещи в DOM, разрабатывая адаптивные веб-сайты.
Как это работает?
Ладно, ладно, хватит разговоров, перейдем к коду.
Процесс довольно прост и основан на одном слушателе событий:
window.addEventListener(‘resize’, () => { store the data of window.innerWidth on a variable to work with it });
Теперь, если вы работаете над веб-сайтом, на котором вы не хотите добавлять прослушиватель событий для каждого компонента, с которым хотите работать, вы обязательно захотите использовать его с потоком шаблона управления состоянием. Работая с Vue.js, мы можем сделать это с помощью Vuex, поэтому давайте разберемся, как это сделать.
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { windowWidth: window.innerWidth, }, mutations: { setWindowWidth(state) { state.windowWidth = window.innerWidth; } }, });
У нас есть переменная с именем windowWidth, которая сначала создается с внутренней шириной окна, и мутация, которая обновляет это значение при срабатывании события изменения размера.
Теперь просто добавьте прослушиватель событий в компонент, который будет запускаться первым из всех остальных: App.vue.
Вы можете сделать это в методе created (), чтобы он начал прослушивать изменение размера окна до того, как будет создано что-либо еще. :
export default { created() { window.addEventListener( 'resize', this.$store.commit('setWindowWidth'); ) } }
вот и все! Теперь осталось только получить доступ к этой переменной на каждом компоненте, который вы хотите использовать для чего-то, через вычисленные свойства:
computed: { windowWidth() { return this.$store.state.windowWidth; } }
и начните управлять вещами, ссылающимися на эту переменную:
// Conditional rendering <template> <nav id="mobileNavbar" v-if="windowWidth <768"> I am a navbar that will render only if the window width is lower than 768px </nav> <nav id="desktopNavbar" v-else> I am a navbar that will render only if the window width is greater than 768px </nav> </template> //Computed property computed: { basedOnWindowWidth() { if (this.windowWidth > 768) { return true; } return false; } } // Trigger function watch: { windowWidth: function() { if (windowWidth === 768) { console.log('The window width is 768px'); } } }
Вот и все! Теперь вы управляете функциями Javascript в зависимости от ширины окна.
Я изучал влияние прослушивателей событий на производительность и нашел модуль js, который позволяет вам задушить их, чтобы они срабатывали каждый раз, это называется throttled-event-listener, созданный vivmaha.
Итак ... это все. Не стесняйтесь комментировать, если вы знаете какие-либо другие обходные пути, библиотеки, модули или что-то еще для решения той же проблемы или у вас есть какие-либо советы по улучшению этого кода, мы все будем благодарны.
У меня также есть профиль Instagram под названием @ Devdude.js, куда я буду загружать некоторые анимации и образцы кода своей работы, зацените !.