Дима Паутов

Потому что вы сразу начинаете писать при помощи абстракций, не понимая, как работает js внутри этих абстракций.
И многие методы нативного js просто не работают в jquery, просто потому, что это jquery объект, а не нативный.

// Получить DOM элемент body в jquery
$(document.body)
// Получить высоту
$(document.body).clientHeight  // не будет работать
$(document.body).length //будет 1

// В консоли выдаст массив, но на деле это не просто массив
$(document.body) 


// Получить DOM элемент body нативно
document.body
// Получить высоту
document.body.clientHeight // Будет работать
// Ну будет работать
document.body.length //undefined

И вы должны понимать это, что бы потом не доставать всех тупыми вопросами, а почему не работает!!!!!

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

P.S. jQuery отличная библиотека, просто она со временем устаревает марально, т.к. все отлично научились писать на нативном js. Раньше js стагнировал, а потом резко полетел вверх и jquery стал в большинстве случаев не нужен. В большинстве своём она сыграла большую роль при создании новых методов работы с DOM

Вы может просто погуглить это
https://www.google.com/search?q=you+don%27t+need+j...

Это подборка статей о том, как заменить jquery методы на нативный js код, что бы для себя понять, что не всё так плохо в нативном js

2 варианта развития событий

1) Верстать 2 блока.
1й блок с сеткой товаров
2й блок слайдер, скрывать их через медиа запросы + делать инициализацию слайдера при нужном размере экрана и уничтожать когда размер не мобильный

2) Делать всё слайдером. Но тут дольше описывать. Лучше используйте 1й пункт

Код для слайдера примерно такой:

var catalogSlider = null;
var mediaQuerySize = 1024;

function catalogSliderInit () {
	if (!catalogSlider) {
		catalogSlider = new Swiper('.catalogSlider', {
			// ... ваши опции
		});
	}
}

function catalogSliderDestroy () {
	if (catalogSlider) {
		catalogSlider.destroy();
		catalogSlider = null;
	}
}

$(window).on('load resize', function () {
	// Берём текущую ширину экрана
	var windowWidth = $(this).innerWidth();
	
	// Если ширина экрана меньше или равна mediaQuerySize(1024)
	if (windowWidth <= mediaQuerySize) {
		// Инициализировать слайдер если он ещё не был инициализирован
		catalogSliderInit()
	} else {
		// Уничтожить слайдер если он был инициализирован
		catalogSliderDestroy()
	}
});

Дальше сами

Чёт вы брешете!!! Скорей всего у вас порядок в коде не верный. Покажите именно свой рабочий код, а лучше всего оформите его в песочнице. jsfiddle вам в помощь

JSON.parse

class User{
	constructor(data) {
		Object.assign(this, data)
	}
}

new User({ 
id: 1, 
name: 'Вася', 
comments: [], 
avatar: null 
})

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

А так же, в конструктор запишутся все свойства, которые будут переданы, даже те, которые вы не собираетесь использовать.

P.S. Да хоть у вас 100500 классов, зато зайдя в каждый сразу становится понятно, с какими входными данными он работает. Через пару тройку недель вы сами забудете, какие параметры нужно в каждый из классов передавать, ну и другие разрабы вас по головке за такое сокращение не погладят

setInterval(function(){ // Создаёт новый контекст и this пляшет от него
         this.tick()
      }, 1000)

() => this.tick(), 1000) // Стрелочные функции не создают своего контекста, от чего this пляшет в данный момент от объекта timer

document.querySelector('figure').querySelector('a').setAttribute('data-attribute', 'ok');

Юзаю nuxt.axios
Плагин для axios у меня, который обрабатывает ошибки
/plugins/axios.js

export default ({ $axios, error, $auth }) => {
  $axios.onError(({ response }) => {
    const statusCode = response.status
    const message = response.data.message

    switch (statusCode) {
      case 401:
        $auth.logout()
        break

      case 422:
        break

      case 500:
        break

      default:
        error({
          statusCode,
          message,
        })
    }
  })
}

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

Далее, в компоненте где используется функция для запроса:
/pages/sign-in.vue

export default {
  methods: {
    async onSignIn () {
      try {
        await this.$auth.signIn(...)
      } catch (error) {
        this.showErrors(error)
      }
    },
  }
}

Само тело функции

async signIn ({ username, password }) {
    const { token, expireAt, user } = await $axios.$post(..., {
      username,
      password,
    })
    //....
  }

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

взять все элементы $('*') и пройтись по массиву элементов, собрать все классы, пушнуть в новый массив

https://jsfiddle.net/012j83cv/

Заменить это
$('.follow_author').on('click', function(e){
на это

$(document).on('click', '.follow_author', function(e){

https://jsfiddle.net/bzdkf963/

var elements = $('.classname');
elements.each(funtion(index, el) {
$(el).plugin('show');
})