使用设计模式六大原则之一（单一职责原则）

单一职责原则

（一个方法只做一件事，请求数据的函数就不要渲染数据了，吃饭和上厕所别用同一个地方）

我们来写一个根据数据来渲染dom的方法

		function view(url, data, dom){
            // 获取数据功能
            $.ajax({
                url: url,
                data: data,
                success: function(json){
                    var arr=JSON.parse(json);
                    // 渲染数据功能
                    var htmlStr = '';
                    arr.forEach(function(ele,index){
                        html += `<li>${ele.name}</li>` 
                    });
                    dom.innerHTML = htmlStr;
                }
            })
        }

如果现在又增加一需求，让你从缓存里面那数据，那么你会怎么修改这段代码呢？

		function view(url, data, dom){
            if(localStorage.getItem('list')){
                var arr = JSON.parse(localStorage.getItem('list'));
                // 渲染数据功能
                var htmlStr = '';
                arr.forEach(function(ele,index){
                    html += `<li>${ele.name}</li>` 
                });
                dom.innerHTML = htmlStr;
            } else {
                // 获取数据功能
                $.ajax({
                    url: url,
                    data: data,
                    success: function(json){
                        var arr=JSON.parse(json);
                        //缓存数据功能
                        localStorage.setItem('list',json)
                        // 渲染数据功能
                        var htmlStr = '';
                        arr.forEach(function(ele,index){
                            html += `<li>${ele.name}</li>` 
                        });
                        dom.innerHTML = htmlStr;
                    }
                })
            }
        }

现在看这段代码已经相当冗余了，那么，此时如果在有一需求，增加一按钮，当点击按钮时，从网络中获取数据

		function view(url, data, dom, flag){
            if(localStorage.getItem('list') && !flag){
                var arr = JSON.parse(localStorage.getItem('list'));
                // 渲染数据功能
               。。。。
            } else {
                // 获取数据功能
                。。。。
        }
        btn.onclick=function(){
            view('xxx','page=2',ul,true)
        }

现在看上面那段代码是不是很恶心，那么现在又加了一个需求，离线缓存功能，如果是有网络的情况下，你点击按钮时，通过网络请求获取数据，当没有网络时，你点击了按钮，那么依然是从缓存中拿数据

		function view(url, data, dom, flag){
            if(navigator.onLine){
                // 是不是还要往里面加逻辑
            }
            if(localStorage.getItem('list') && !flag){
                var arr = JSON.parse(localStorage.getItem('list'));
                // 渲染数据功能
                。。。。
            } else {
                // 获取数据功能
                。。。。
            }
        }
        btn.onclick=function(){
            view('xxx','page=2',ul,true)
        }

现在我们来按照单一职责原则来写是什么样呢？

		// 获取数据
        function GetData(callBackArr){
            this.getData = function(url,param){
                $.ajax({
                    url: url,
                    data: param,
                    success: function(json){
                        callBackArr.forEach(function(ele,index){
                            ele.do(json);
                        })
                    }
                })
            }
        }
        var oG = new GetData([oR,oC]);

        // 渲染数据
        function Render(dom){
            this.do = function(data){
                var htmlStr = '';
                arr.forEach(function(ele,index){
                    html += `<li>${ele.name}</li>` 
                });
                dom.innerHTML = htmlStr;
            }
        }
        var oR = new Render(ul);
        // 缓存数据
        function CacheData(type){
            this.do = function(data){
                // 缓存数据
                localStorage.setItem(type, data);
            }
            this.returnCacheData=function(){
                return localStorage.getItem(type);
            }
        }
        var oC = new CacheData('list');

        // 如果是离线的情况下。、 我们直接取缓存数据 并且点击按钮也不通过网络获取数据
        // 不离线 通过缓存获取数据 点击按钮通过网络获取数据
        if(oC.returnCacheData()){
            if(!navigator.onLine) {
                oG.getData();
            } else {
                oR.do(oC.returnCacheData());
            }
        } else {
            oG.getData();
        }

        btn.onclick=function(){
            oG.getData('xxx', 'page=2');
        }