Ecmascript 6 如何实现模块化ES2015 JavaScript应用程序结构

随着应用程序结构的扩展，我正在尝试实现一个简单且易于管理的应用程序。我使用ES2015模块来保持整洁，但我很难弄清楚到底该怎么做。我一直在使用Vue.js，我喜欢这样的对象文字：

export default {
   data: {},
   methods: {},
   ready(){}
}

他们的方式非常清晰易读。我知道在引擎盖下他们会分配一些东西，但我想要一些真正简单干净的东西，比如：

const导航栏={
数据：{
类：{}，
},
init（）{
this.data.classes={
汉堡包活动：“汉堡包--活动”，
showNavbar:'导航--小--显示'
}
这个.hooks（）
},
hooks（）{
$（“#导航触发器”）。在（'单击'，（e）=>{
const buttonClassList=e.currentTarget.classList，
nav=document.getElementById（e.currentTarget.dataset['target']）
e、 预防默认值（）
if（buttonClassList.contains（this.data.classes.hamburgerActive））{
this.methods.close（buttonClassList，nav）//如果我想使用正确的this，我必须在这里执行一个.call（this）
}否则{
this.methods.open（buttonClassList，nav）//如果我想得到正确的this，我必须在这里执行一个.call（this）
}
})
},
方法：{
打开（按钮分类列表，导航）{
log（this）//返回{open（），close（）}，因为我从其父.methods调用它
},
关闭（按钮分类列表，导航）{
//一些东西
}
}
}
导出默认导航栏

，因为

方法

包含所有方法，所以它们的所有

此

将指向它们的直接父对象（方法对象）。因此，解决办法是：

使用

method.open.call（this，params）//传递您想要的上下文

，这有点难看

这个。无论什么

使用

导航栏。无论什么

，这样我们就消除了这个问题。Ofc我们不能在其他地方重用函数，比如重新分配

这个

，但我认为这是一个很小的代价

只需将所有方法移动到导出对象的顶层（而不是将它们嵌套在方法中），然后

这将是我们想要的

---

如果有人有更好的解决方案，我真的愿意接受

你们的问题和Vue有什么关系？正如我说过的，我希望有一个类似Vue的组件结构，它干净易读。当然，这个问题与vue没有任何直接关系。这更可能是个人问题。对我来说足够干净了。