Общие сведения об импорте / экспорте модулей ES6 - PullRequest
Новая
       20

Общие сведения об импорте / экспорте модулей ES6

0 голосов
/ 29 января 2019

Я начинаю изучать модули ES6 и синтаксис import / export, и я хочу, чтобы мои модули выполнялись только там, где они необходимы.

Я создал два простых модуля, которые подключаются к <div> с конкретным class или id для запуска.

Например: 

// product.js

import Vue from 'vue/dist/vue';

export default function() {

  var app = new Vue({
    el: '#c-product',
    data: {
      counter: 0,
    },
    methods: {
      addToCart: function() {
        this.counter++;
      },
      removeFromCart: function() {
        this.counter--;
      }
    }
  });

}

Тогда у меня есть другой модуль для карусели: 

// carousel.js

import Glide from '@glidejs/glide';

export default function() {

  new Glide('.glide', {
    type: 'carousel',
    startAt: 0,
    perView: 3,
    breakpoints: {
      800: {
        perView: 2
      }
    }
  }).mount();

};

Затем я связываю все с Gulp + Browserify, чтобы получить файл main.js, в который я импортирую и выполняю модули: 

// main.js
import Product from './product';
import Carousel from './carousel';

Product();
Carousel();

Теперь у меня есть файл main.js, и я готов к вставкеэто на .html страницах, но у меня есть ошибки в консоли в зависимости от того, существуют ли эти div на странице или нет.

Пример: если на странице product.html нет каруселей, в консоли возникают ошибки, связанные с отсутствием <div> с классом карусели.

Надеюсь, что все будет ясно.

Можете ли вы помочь мне понять?

Вот пример на странице продукта

1 Ответ

0 голосов
/ 29 января 2019

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

// product.js

import Vue from 'vue/dist/vue';

export default function() {
  var vueRoot = document.getElementById('c-product')
  if (!vueRoot) return;  // element does not exist, so we return before instantiating

  var app = new Vue({
    el: '#c-product',
    data: {
      counter: 0,
    },
    methods: {
      addToCart: function() {
        this.counter++;
      },
      removeFromCart: function() {
        this.counter--;
      }
    }
  });

}
...