一切的开始源于这篇文章：一句话理解Vue核心内容。
在文章中，作者给出了这样一个思考：
假设现在有一个这样的需求，有一张图片，在被点击时，可以记录下被点击的次数。这看起来很简单吧， 按照上面提到到开发方式，应该很快就可以搞定。那么接下来，需求稍微发生了点变动， 要求有两张图片，分别被点击时，可以记录下各自的点击次数。这次似乎也很简单，只需把原先的代码复制粘贴一份就可以了。那么当这个需求变成五张图片时，你会怎么做？ 还是简单复制粘贴吧，这样完全可以完成这个需求，但是你会觉得很别扭，因为你的代码此时变得很臃肿，存在很多重复的过程，但是似乎还在你的忍受范围内。这时候需求又发生了微小的变动，还是五张照片分别记录被点击次数，不过这样单独罗列五张图片似乎太占空间，现在只需要存在一个图片的位置，通过选择按钮来切换被点击的图片。 这时候你可能会奔溃掉，因为要完成这个看似微小的改动，你原先写的大部分代码可能都需要被删掉，甚至是完全清空掉，从零开始写起。
也许你应该像我一样，从一张图片到五张图片完成上面的需求。相信我，这个过程很有趣。因为每增加一次需求，你或多或少都会需要重构你的代码。特别是如果你直接从一张跳到五张的话，那么你就需要完全重构你的代码。
二话不说，先看整个项目的效果。这里我直接放了五张图片实现的效果。
说实话，这其实是一个非常简单的demo，只要对JS的知识稍微熟悉一点，并且在写代码时注意一下闭包的问题，就可以轻松的实现效果。在没学vue之前，我们一定是这样写代码的。
<ul> ???????<li>one</li> ???????<li>two</li> ???????<li>three</li> ???????<li>fore</li> ???????<li>five</li> ???</ul> ???<div class="container"> ???????<img class="pic" src=‘http://www.jqhtml.com/wp-content/themes/sc/images/logo.png‘> ???????<img class="pic" src=‘http://www.jqhtml.com/wp-content/themes/sc/images/logo.png‘> ???????<img class="pic" src=‘http://www.jqhtml.com/wp-content/themes/sc/images/logo.png‘> ???????<img class="pic" src=‘http://www.jqhtml.com/wp-content/themes/sc/images/logo.png‘> ???????<img class="pic" src=‘http://www.jqhtml.com/wp-content/themes/sc/images/logo.png‘> ???????<p class=‘num‘></p> ???????<p class=‘num‘></p> ???????<p class=‘num‘></p> ???????<p class=‘num‘></p> ???????<p class=‘num‘></p> ???</div> ???<script> ???????var img = document.getElementsByTagName(‘img‘); ???????var num = document.getElementsByTagName(‘p‘); ???????var li = document.getElementsByTagName(‘li‘); ???????for (let i = 0; i < 5; i++) { ???????????li[i].onclick = (function(index) {//形成闭包 ???????????????return (function(e) { ???????????????????for (let j = 0; j < 5; j++) { ???????????????????????//console.log(num); ???????????????????????num[j].removeAttribute(‘class‘); ???????????????????????img[j].removeAttribute(‘class‘); ???????????????????} ???????????????????num[index].setAttribute(‘class‘,‘show‘); ???????????????????img[index].setAttribute(‘class‘,‘show‘); ???????????????}) ???????????})(i) ???????????img[i].onclick = counter(num[i]); ???????} ???????????????//计数器函数 ???????function counter(ele) { ???????????var num = 0,//点击的次数 ???????????????node = ele; ???????????return function(e) {//形成闭包让每个元素都有自己私有num变量 ???????????????node.innerHTML = ++num; ???????????????????????????} ???????} ???</script>这种直接操作DOM来改变视图的开发方式似乎并不能hold住复杂的逻辑和代码量，况且在这个例子中逻辑并非很复杂。这也证明了由JS来直接操作DOM以改变视图的开发方式并不适合如今的前端开发。这也是前端开发为什么需要类似vue这样的框架。
如果你学过vue，你会发现完成这个需求，只需要改一下data对象里的图片数就轻松的实现了需求。（用vue实现上面的需求更加简单，只需要几行代码就可以实现，并且可扩展性也好，感兴趣的同学可以用vue实现一下上面的需求）
我们可以明显的感觉到vue这种数据和视图分离的代码组织方式更加的容易实现扩展，并且代码可读性更强。而我们上面的原生JS 的实现方式将数据和视图都混在一起了，当项目需求越来越复杂的时候会让代码越臃肿，且越不易于扩展。
其实数据和视图分离并不是框架的专利，要知道框架也是由原生的JS实现的。因此原生JS也可以写出数据和视图分离的代码，让项目变得更加易于扩展。
下面我们就按照数据、视图、逻辑分离的思路来重构一下我们这个项目的代码。
首先，我们把数据给抽离，可以看到视图的样子大概是这样的一个形式。
<body> ???<ul id="cat-list"> //列表 ???</ul> ???<section id="cat">//猫图片的显示区域 ???????<h2 id="cat-name"></h2> ???????<div id="cat-count"></div> ???????<img src="" alt="" id="cat-img"> ???</section></body>
我们将数据存储在一个名为model的对象中。
var model = { ???currentCat: null, ???cats: [ //猫的图片数据 ???????{ ???????????clickCount : 0, ???????????name : ‘Tabby‘, ???????????imgSrc : ‘img/434164568_fea0ad4013_z.jpg‘, ???????}, ???????//省略余下的图片数据 ???]}在初始化页面的时候，我们要加载数据，渲染页面。
var catView = { //图片区域的视图 ???init: function() { ???????//储存DOM元素，方便后续操作 ???????this.cat = document.getElementById(‘cat‘); ???????this.catName = document.getElementById(‘cat-name‘); ???????this.catCount = document.getElementById(‘cat-count‘); ???????this.catImg = document.getElementById(‘cat-img‘); ???????this.cat.addEventListener(‘click‘,function() {//给每张图片添加点击事件 ???????????controler.addCount(); ???????},false); ???????this.render(); ???}, ???render: function() { ???????let currentCat = controler.getCurrentCat(); ???????this.catName.textContent = currentCat.name; ???????this.catCount.textContent = currentCat.clickCount; ???????this.catImg.src = ‘../‘ + currentCat.imgSrc; ???}}var listView = { ???//列表区域的视图 ???init: function() { ???????this.catList = document.getElementById(‘cat-list‘); ???????this.render(); ???}, ???render: function() { ???????let cats = controler.getCats(); ???????let fragment = document.createDocumentFragment(‘ul‘); ???????cats.forEach((item,index) => { ???????????let li = document.createElement(‘li‘); ???????????li.textContent = item.name; ???????????li.setAttribute(‘class‘,‘item‘); ???????????li.addEventListener(‘click‘,function() {//给li添加点击事件 ???????????????controler.setCurrentCat(item); ???????????????catView.render(); ???????????}) ???????????fragment.appendChild(li); ???????}) ???????this.catList.appendChild(fragment); ???????fragment = null; ???}}从上面的视图对象可以知道，视图并不直接从model中获取数据，而是通过一个中间对象controler来间接访问model，也就是说controler对象实现了所有的视图和数据间的逻辑操作。
var controler = { ???init: function() { ???????model.currentCat = model.cats[0]; ???????catView.init(); ???????listView.init(); ???}, ???//获取全部的猫 ???getCats: function() { ???????return model.cats; ???}, ???//获取当前显示的猫 ???getCurrentCat: function() { ???????return model.currentCat; ???}, ???//设置当前被点击的猫 ???setCurrentCat: function(cat) { ???????return model.currentCat = cat; ???}, ???addCount: function() { ???????model.currentCat.clickCount++; ???????catView.render(); ???} }到这里，我们用数据、视图、逻辑分离的代码组织方式重构了一个小型的项目，从该项目中可以清楚的看到：数据model只负责存储数据，而视图view只负责页面的渲染，而controler负责view和model之间的交互逻辑的实现。
等一下，既然说交互逻辑是放在controler中实现的，而视图只负责渲染页面，那为什么click点击事件会放在视图层呢？
这里要明确一下的就是（仅个人理解）：视图并不是侠义上的静态页面，视图指的是静态页面和动态入口（用户交互，如点击事件），所以事件的绑定放在view层是完全可以理解的，view层实现了一个动态的入口，而用户点击后的所有逻辑操作都是在controler层实现的。
记一次数据、逻辑、视图分离的原生JS项目实践
原文地址：https://www.cnblogs.com/yuliangbin/p/9463114.html