Question

我试图实现一个简单易用的应用扩展结构。我正在使用ES2015模块来保持整洁，但我很难弄清楚如何去做。我一直在使用Vue.js，我喜欢像这样的对象文字的想法：

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

他们的方式很干净，可读。我知道在引擎盖下他们做了很多事情，但我想要有一些非常简单和干净的东西：

＆＃13;

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

＆＃13;

然后只需导入并运行它：

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

有没有人有任何提示让我做得更好。我一直在阅读有关ES6课程不好的一切，但我想如果我在这里使用它们，我就已经完成了。我试着搜索堆栈溢出，但大多数问题来自2011年......

如何实现Modular ES2015 JavaScript App结构

0 个答案: