了解 ES6 模块导入/导出

Question

我开始学习 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> 的错误。

希望清楚。

你能帮我理解吗？

Here the example on product page

Answer 1

您可以通过一些防御性编码来解决它。您的每个模块都依赖于存在的某个 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--;
      }
    }
  });

}