如何實現模塊化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應用程序結構

回答

相關問題