Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ViewModelのダイエット Messengerパターン編

ViewModelのダイエット Messengerパターン編

Keisuke KITA

June 01, 2016
Tweet

More Decks by Keisuke KITA

Other Decks in Programming

Transcript

  1. Keisuke KITA @kitak • Twitter: kitak • GitHub: kitak •

    FrontEnd Engineer at LINE (ओʹJS) • Blog: https://kitak.hatenablog.jp/
  2. Vue ͱ MVVMͷؔ܎ A Vue instance is essentially a ViewModel

    as defined in the MVVM pattern — Vue.js Guide • ʮVueΠϯελϯε͸ຊ࣭తʹMVVMύλʔϯͰఆٛ͞Εͯ ͍ΔViewModelͰ͢ʯ
  3. Before: ྫ͑͹ɺ͜Μͳ͔Μ͡ͷμΠΞϩά var vm = new Vue({ data: { …

    isOpenedDialog: false, dialogContent: ‘’ }, methods: { openDialog: function() { this.isOpenedDialog = true; }, saveDialogContent: function() { }, closeDialog: function() { this.isOpenedDialog = false; } } }); දࣔͷϑϥάɺμΠΞϩάͰೖྗ͞ΕΔ಺༰Λঢ়ଶͱͯ͠؅ཧ͍ͯ͠Δ
  4. Before: ྫ͑͹ɺ͜Μͳ͔Μ͡ͷμΠΞϩά var vm = new Vue({ data: { …

    isOpenedDialog: false, dialogContent: ‘’ }, methods: { openDialog: function() { this.isOpenedDialog = true; }, saveDialogContent: function() { }, closeDialog: function() { this.isOpenedDialog = false; } } }); ݩʑViewModelͰϝΠϯͰѻ͍ͬͯͨঢ়ଶ΍ৼΔ෣͍͕μΠΞ ϩάͷঢ়ଶ΍ৼΔ෣͍ͱࠞͬͯ͟ݫ͍͠
  5. After: ྫ͑͹͜Μͳ͔Μ͡ var vm = new Vue({ methods: { openDialog:

    function() { this.$emit(‘open-dialog’, function(result) { // μΠΞϩάͷ݁ՌΛड͚औΔίʔϧόοΫ }); } }); ViewModelͷΠϕϯτػߏΛར༻ͯ͠ɺViewModelʹ Messengerͷ໾ׂΛ݉೚ͤ͞Δ(͋͘·Ͱ࣮૷ͷҰྫͰ͢)
  6. After: ྫ͑͹͜Μͳ͔Μ͡ <div v-dialog></div> Vue.directive(‘dialog’, function() { this.vm.$on(‘open-dialog’, (callback) =>

    { var dialog = new Dialog(); // Use vue component or constructor defined by Vue.extend dialog.callback = callback; var dialogElement = document.createElement(‘div’); this.el.appendChild(dialogElement); dialog.$mount(dialogElement); }); }); directiveΛ༻ҙͯ͠ɺΠϕϯτ͕ಧ͍ͨΒɺίϯετϥΫλɾ ίϯϙʔωϯτ͔ΒVueΠϯελϯεΛੜ੒͢Δ