진정한 모듈성
프론트 엔드 모듈화는 매우 일찍 시작되었습니다. JS, Modular Packaging 용 Browserify 또는 종속성 주입을위한 Angular가 필요한지 여부는 JS 코드를 작은 모듈로 나누고 조립할 수 있습니다. 그런 다음 CSS 파일을 덜 또는 SASS를 사용하여 CSS 코드에서 캡슐화, 상속, 다형성 등의 객체 지향적 특성을 느낍니다.
그러나 WebPack이 나오기 전에 우리가 모듈화라고하는 것은 모듈 식으로 간주 될 수 없었습니다. 우리는 왜 이것을 말합니까? 해결되지 않은 중요한 문제가 있기 때문에 CSS 모듈에 대한 JS 모듈의 의존성입니다.
예를 들어, JS 모듈 모달이있는 경우 직접 가져 와서 대화 상자를 팝업하도록 호출 할 수 있습니까? 아래 그림과 같이 괜찮습니까?
이론적으로, 이것은 사실이어야하지만 실제로이 모달은 실제로 해당 CSS 모듈 모달에 의존합니다. 이 모듈을 가져 오지 않으면 일반 대화 상자를 팝업 할 수 없습니다. 또한이 CSS 모듈 가져 오기는 JS 모듈 가져 오기와 같은 장소가 아니라 다른 CSS 파일에 기록됩니다. 다시 말해, 의존성은 실제로 다음과 같습니다.
모듈을 사용하려면 두 파일로 가져 오기 작업을 하나씩 수행해야합니다. 이것은 실제로 매우 이상하고 불합리한 것입니다! 왜 우리는 모듈 식이어야합니까? 모듈을 가져온 후 사용할 수있는 모듈을 캡슐화하는 것입니다. 구현 방법 및이 모듈 자체에 의해 전적으로 처리되는 종속성. 즉, 위 그림의 modal.css에 대한 의존성은 modal.js 자체에 의해 처리되어야합니다.
그러나 우리는 옳기 때문에가 아니라이 잘못된 방식으로 익숙하기 때문에 N 년 동안 우리가 쓴 프론트 엔드에 대해 이와 같은 모듈을 작성해 왔습니다. 이제 VUE를 사용하여 모듈의 모든 종속성을 완전히 캡슐화 할 수 있습니다. 템플릿, CSS 또는 JS이든 더 이상 신경 쓰지 않아도됩니다. 이 모듈 만 소개하면 사용할 수 있으며 모듈의 종속성은 자체적으로 처리됩니다.
그러면 우리의 의존성은 다음과 같습니다.
Modal.Vue에는 필요한 모든 종속성이 포함되어 있으므로 더 이상 해당 CSS 또는 템플릿을 직접 처리 할 필요가 없습니다. 이것은 모듈성이 달성 해야하는 효과입니다.
VUE 프로젝트를 만듭니다
Vue는 프로젝트 템플릿을 만들기위한 도구를 제공합니다 : https://github.com/vuejs/vue-cli
여기서는 먼저 다른 템플릿 프로젝트 인 https://github.com/vuejs-templates/webpack을 시도했습니다
그런 다음 순수한 JS를 사용하는 대신 모듈을 작성할 수 있지만 WebPack을 사용하여 모듈과 관련된 모든 컨텐츠를 파일에 작성하십시오. 이전 ToDO 목록을 예로 들어 실제로 이전 장에서는 구성 요소의 사용에 대해서만 이야기 했으므로 그런 식으로 썼습니다. 다음과 같이 더 나은 글쓰기 방법으로 변경합시다.
List.Vue :
<emplate> <ul> v-for = 'list'> <label v-bind : class = "{done : todo.done}"> <입력 유형 = "checkbox"v-model = "todo.done"/> {{todo.title}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} 유형 : array}}, data () {return {list : []}}, events : {add (입력) {if (! input) return false this.list.unshift ({title : input, done : false}}}} </script> <style lang = "덜"scoped> ult : 2rem; 패딩 : 0; .DONE {텍스트 설명 : 라인 스루; }} </style>form.vue :
<emplate> <h1> {{username}} 's todo list </h1> <form v-on : subbs = "von add"v-on : submit.prevent> <input type = "text"v-model = "input"/> <입력 유형 = "value ='add '/> </form> </template> {usport default {ustem : 기본값 : '이름이없는'}}, data () {return {encut : ''}}, 메소드 : {add () {this. $ dispatch ( 'add', this. this.input) this.input = ''}}} </script>TODO.VUE :
<emplate> <div id = "todo"> <todo-form username = 'lily'> </todo-form> <todo-list> </todo-list> </div> </template> </template> </template> <script> './form.vue'import list from'./list.vue'export default {{list ','tho-list ': tho-list': tho-list ': tho-list': tho-list ': {add (입력) {this. $ broadcast ( 'add', input)}}} </script> <style> </style>App.Vue :
<template> <ToDO> </tomplate> <cript> './components/todo.vue'export Default {구성 요소 : {'todo ': todo}} </script> <style> </style>이런 식으로, 우리는 이전 TODO 목록을 모듈 식으로 다시 작성했습니다. 모듈성은 대규모 응용 프로그램을 구축하기위한 기초 중 하나이지만 충분하지 않지만 여전히해야합니다.
• 최상의 국가 관리, 다른 구성 요소가 공유하는 국가의 독립적 인 관리
• 자동 테스트
• 라우팅 등
여기서는 상태를 별도의 모듈로 분리하는 것 중 하나만 수행합니다. 분명히 TODO 목록 응용 프로그램의 경우 TODO 목록을 저장하는 데이터 구조는 다른 구성 요소가 공유하는 상태입니다.
왜 전에 이벤트를 방송해야 했습니까? 다른 구성 요소간에 작동 할 데이터가 List.Vue에 저장 되었기 때문입니다. 따라서 양식으로 데이터를 추가하려면 이벤트를 통해 추가하려면 List.Vue에 알림을 알려야합니다.
다시 말해,이 데이터는 List.Vue에 의해 비공개가 아니며 최소한이 두 구성 요소가 공개적으로 소유해야합니다. 이제 list.vue, form.vue가 수정할 수 없으며 이벤트를 통해 알림을받을 수 없습니다.
이벤트 방법은 우아하지만 실제로 데이터를 분리하는 것이 더 좋을 수 있으므로 양식 및 list.vue가 알림을 보내지 않고도 데이터를 직접 수정할 수 있도록합니다.
여기서 우리는 store.js 파일을 추가합니다.
내보내기 기본값 {list : [], add (title) {if (! title) retrud this.list.unshift ({title : title, done : false})}}그런 다음 List.Vue를 변경할 수 있으며 코드의 JS 부분 만 여기에 게시됩니다.
'../store.js'export default {props : {initlist : {type : array}}, data () {return store}}form.vue는 방송이 필요하지 않으며, store.add 메소드를 직접 호출하여 추가 할 수 있습니다.
'../store.js'export default {props : {username : {username : {type : string, default :'named '}}, data () {return {input :' '}}, methods : {add () {store.add (this.input) this.input ='}}}이 변경 후에는 전체 논리가 훨씬 명확 해지고 응용 프로그램이 더 복잡할수록 공공 상점을 더 많이 추출해야합니다. 그렇지 않으면 하늘 전체에 방송 이벤트가 날아갑니다.
또한이 프로젝트 템플릿을 사용한 후에는 핫 레드로드가 너무 시원하고 새로 고침이 저장됩니다.
위의 소스 코드는 여기에 있습니다 : https://github.com/lihongxun945/vue-webpack-todo-list
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.