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

我试图实现一个简单和易于管理的应用程序扩展结构。我正在使用ES2015模块来保持整洁，但我很难弄清楚究竟该如何去做。我一直在使用Vue.js，我喜欢这样的对象字面意思：如何实现模块化ES2015 JavaScript应用程序结构

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

他们的方式非常干净和可读。我知道，在引擎盖下他们配发的东西，但我想有很简单的东西，清洁，像这样：

const navbar = { 
 
    data: { 
 
    classes: {}, 
 
    }, 
 
    init() { 
 
    this.data.classes = { 
 
     hamburgerActive: 'hamburger--active', 
 
     showNavbar: 'nav--small--show' 
 
    } 
 
    this.hooks() 
 
    }, 
 
    hooks() { 
 
    $('#nav-trigger').on('click', (e) => { 
 
     const buttonClassList = e.currentTarget.classList, 
 
     nav = document.getElementById(e.currentTarget.dataset['target']) 
 
     e.preventDefault() 
 
     if (buttonClassList.contains(this.data.classes.hamburgerActive)) { 
 
     this.methods.close(buttonClassList, nav) // Here I have to do a .call(this) If I want to have the proper this 
 
     } else { 
 
     this.methods.open(buttonClassList, nav) // Here I have to do a .call(this) If I want to have the proper this 
 
     } 
 
    }) 
 
    }, 
 
    methods: { 
 
    open(buttonClassList, nav) { 
 
     console.log(this) //Returns {open(), close()} because I call it from its parent .methods 
 
    }, 
 
    close(buttonClassList, nav) { 
 
     //some stuff 
 
    } 
 
    } 
 
} 
 

 
export default navbar

，然后只需要导入并运行它：

import navbar from './navbar' 
navbar.init()

有没有人有任何提示让我做得更好。我一直在阅读关于ES6课程不好的一切，但我想如果我在这里使用它们，我已经完成了。我试图寻找周围堆栈溢出，但大多数的问题是从2011年......

来源

2017-02-20 Dobromir Hristov

你的问题如何与Vue相关？ –

正如我所说我会喜欢有一个Vue像组件的结构，它的干净和可读性。当然这个问题并不是直接相关的。 –

这是一个更可能的个人东西。它对我来说足够干净。 –

因为methods包含了所有的方法，所有的this将指向其直接父对象（方法对象）。因此，解决方案是：

使用method.open.call(this, params) //pass what ever context-this you want这是一种丑陋
this.whatEver使用navbar.whatEver，这样我们这个删除的问题。 Ofc我们不能在其他地方重复使用某个功能，例如重新分配this，但我认为它需要支付一小笔费用。
只需将所有方法移动到导出对象的顶层（不是将它们嵌套在方法内），那么this就是我们想要的。

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

来源

2017-02-20 21:31:04

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

回答

相关问题