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--;
      }
    }
  });

}

了解ES6模块的导入/导出

1 个答案: