记一次数据逻辑视图分离的原生JS项目实践

Posted 余大彬

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记一次数据逻辑视图分离的原生JS项目实践相关的知识，希望对你有一定的参考价值。

一切的开始源于这篇文章：一句话理解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项目实践的主要内容，如果未能解决你的问题，请参考以下文章

记一次腾讯TBS浏览服务集成实践

记一次腾讯TBS浏览服务集成实践

记一次腾讯TBS浏览服务集成实践

记一次接口性能优化实践总结：优化接口性能的八个建议

前后端分离实践——Jsonp数据交互

记一次编译失败与browerlist实践