Traditional MVP design patterns (DOM oriented development)

View (View layer, Dom presentation on the page) = Presenter (Control layer) = Model (Data layer)

The view layer issues an event to the control layer, which either calls Ajax to retrieve the data based on the business logic or manipulates the DOM on events that occur based on the view.

A lot of code is written in the Presenter layer, a lot of code is manipulating the DOM.

<body>
  <div>
    <input type="text" id="input" >
    <button id="btn"<ul id= < button id="list">
    </ul>
  </div>

<script>
	function Page() {}; $.extend(Page.prototype,{ init:function() {
			this.bindEvents();
		},
		bindEvents: function() {
             var btn = $('btn');
             btn.on('click' , $proxy(this.handleBtnClick, this));
		},
		handleBtnClick: function() {
			var inputElem = $("#input");
			var ulElem = $("#list");
			var inputValue =inputElem.val();
			ulElem.append('<li>' + inputValue + '</li>');
			inputElem.val() = ' '; }}); var page = new Page(); page.init(); </script> </body>Copy the code

TodoList MVP mini example


MVVM Design pattern (Data-oriented development)

View (display data) viewModel (do not need to write, built in VUE)

When writing vUE code, there is no Dom operation. For MVVM coding, part of the focus is on the view layer and part of the model layer.

The view layer automatically changes when the Model layer data changes, which is what the ViewModel layer does. The Vue layer will listen for data changes to change the view layer, and the Vue layer will listen for events in the view layer to trigger calls to logic code that you’ve written through the ViewModel layer, and then you’ll change the data in the Model layer, and when the data changes, Vue in turn automatically maps data changes to the view layer.

Vue this MVVM design mode for development, only need to pay attention to the development of model layer, the data will be modified, the page will automatically follow the change, while the change of the page VUE instance can also be perceived, can conveniently help you operate data.

<body>
  <div id="app">
    <input type="text" v-model="inputValue">
    <button  v-on:click="handleBtnClick"</button> <ul> <li v-for="item in list">{{item}}</li>
    </ul>
  </div>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			list: [],
			inputValue:' '
		},
		methods: {
			handleBtnClick: function() {
			   this.list.push(this.inputValue);
			   this.inputValue = ' '; }}}); </script> </body>Copy the code

TodoList MVVM small example


How does the viewModel know that the data has changed, and how does it actively change the view?

Vue source code implementation, using ES5 API Object.Properties and virtual DOM mechanism to achieve the VM layer architecture system. (Follow-up study)