앱을 확장 할 때 간단하고 관리하기 쉽도록 구현하려고합니다. 나는 ES2015 모듈을 사용하여 일을 깔끔하게 유지하고 있지만 정확히 어떻게 움직이는 지 파악하는 데 어려움을 겪고 있습니다. 나는 Vue.js을 사용하고 있고이 같은 객체 리터럴의 아이디어를 좋아하지 :모듈 형 ES2015 자바 스크립트 앱 구조 구현 방법
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 수업이 나쁘다는 것을 읽었습니다.하지만 제가 여기서 사용한다면 이미 끝났을 것입니다. methods
모든 방법을 포함
Vue와 관련하여 궁금한 점이 있으십니까? –
내가 말했듯이 나는 구성 요소의 구조와 같은 Vue를 가지고 있기를 좋아했을 것이다. 그것은 깨끗하고 읽기 쉽다. 물론 질문은 어떠한 방식 으로든 직접적인 관련이 없습니다. –
이것은 개인적인 일일 가능성이 큽니다. 그것은 나를 위해 충분히 깨끗합니다. –