2017-02-20 8 views
0

앱을 확장 할 때 간단하고 관리하기 쉽도록 구현하려고합니다. 나는 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 모든 방법을 포함

+0

Vue와 관련하여 궁금한 점이 있으십니까? –

+0

내가 말했듯이 나는 구성 요소의 구조와 같은 Vue를 가지고 있기를 좋아했을 것이다. 그것은 깨끗하고 읽기 쉽다. 물론 질문은 어떠한 방식 으로든 직접적인 관련이 없습니다. –

+0

이것은 개인적인 일일 가능성이 큽니다. 그것은 나를 위해 충분히 깨끗합니다. –

답변

0

때문에 ... 내가 스택 오버플로 주변 검색을 시도하지만, 대부분의 질문은 2011 년부터이며, 자신의 this 모두가 자신의 바로 위 부모 개체를 가리 킵니다 (방법은 객체). 그래서 해결 방법은 다음과 같습니다

  • this.whatEver 추악한 사용 navbar.whatEver, 우리가 함께 문제를 제거 할 그런 식으로 가지입니다

    1. 사용 method.open.call(this, params) //pass what ever context-this you want. Ofc 우리는 this을 재 할당하는 것과 같이 다른 곳에서 함수를 재사용 할 수는 없지만 지불 할 작은 가격이라고 생각합니다.

    2. 모든 메소드를 내 보낸 객체의 최상위 레벨로 이동하면 (메소드 내부에 중첩하지 않음) this이 원하는대로됩니다.

    누군가가 더 좋은 해결책을 가지고 있다면 나는 정말로 아이디어에 열심입니다.