了解ES6模块导入/导出
了解ES6模块导入/导出
提问于 2019-01-29 22:07:18
我开始学习ES6模块和import/export语法，我希望我的模块只在需要的地方执行。
我创建了两个简单的模块，这两个模块使用要运行的特定class或id连接到<div>。
例如：
// 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页面中没有carousel，那么在console中就会出现关于缺少带有carousel类的<div>的错误。
希望你能说清楚。
你能帮我理解一下吗？
回答 1
Stack Overflow用户
发布于 2019-01-29 22:29:47
你可以通过一些防御性的编码来解决它。每个模块都依赖于某个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--;
}
}
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54422877
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号