Vue中视图层的拆分

一、组件的划分

思路: 将可共用的视图组件剥离出去，如常见的header、footer、nav等，这些剥离复用的组件甚至可以带有完整的业务逻辑，这种方法比较常用，具体不同业务有不同做法。

二、剥离业务逻辑代码

的部分通常包含有交互逻辑，业务逻辑，数据转换以及**DOM操作，**过多的业务逻辑代码显得杂糅。如：

    export default{
        name:'XXX',
        methods:{
            // 交互逻辑，点击触发
            handleEditFormClick(){
              this.sendEdit();
            },
            
            // 业务代码，提交编辑表单
            sendEditForm(){
              //.... 
            }
        }
    }

因此可以保留交互逻辑部分，将业务逻辑剥离出去，改为：

// service.js 剥离出来的业务模块
export const FormService =  {
   snedEditForm(){
     //....     
   },
   
   // 更多表单业务
   sendCreateForm(){
     
   }
}

 import {FormServicer} from './service.js'
  export default{
      name:'XXX',
      methods:{
          // 交互逻辑，点击触发
          handleEditFormClick(){
              FormService.sendEditForm(); 
          },
      }
  }

这样改写，保留在View层中的代码很容易转换为使用vuex时的编码风格。

三、剥离数据转换代码

在前后端分离模式中，后端给的数据并不一定能直接使用，比如时间戳需要转为相应格式才能展示等等，如果每次都在请求数据回调到客户端之后再做判断处理，代码会过于杂糅，不符合拆分思想。

一般请求数据的过程：

为避免在视图层中处理数据转换逻辑，可以在post/get返回请求后进行处理，再回传给视图层。

api层

import {get,post} from './http' //axios封装方法
import userUrl from './module/user' // 存放请求url
/*
export default {
    getUsers:'user/query'
}
*/
import {dateTrans} from '../assets/js/util/DateTrans' // 处理时间戳方法
/*
export const dateTrans = function(timestamp){
    // 这里简单直接转化为具体日期
    return new Date(timestamp * 1000).toLocaleString()
}
*/

// 获取用户列表方法
export function getUserQuery(){
    return new Promise((resolve,reject)=>{
        get(userUrl.getUsers).then(res=>{
            if(res){
                res['result_rows'].forEach(user=>{
                    user.last_login_time = dateTrans(user.last_login_time); // 处理时间戳
                })
                resolve(res);
            }else{
                resolve('user query not found');
            }
        }).catch(err=>{
            reject('request err');
        })
    })
}
// 其他接口
export function getItemQuery(){
    // ... 
}

数据格式：

{
    "res_code" : "0",
    "result_rows":[
      {
        "uname":"jenson",
        "last_login_time": "1573638377"
      },
      {
        "uname":"lee",
        "last_login_time": "1573638344"
      }
    ]
  }

Vue中调用：

import {getUserQuery} from '../request/api'
handleGetUserQuery(){
     getUserQuery().then(result=>{
         // ...
     })
 }

这样一样，数据格式处理的部分剥离到相应工具模块(util)中，并在请求api中调用，使视图层代码更简洁。

四、用computed和filters处理数据展示

对原始数据的转换并不能覆盖所有场景，在特定场景中需要一些定制的数据过滤转换器。

**computed : **较常用，不过只能用于组件内部，不具备通用性。

<h2 v-text="upperCaseName"></h2> //LIUJIAPENG
<script>
    data(){
      return{
        name:'liujiapeng'
      }
    }
    computed:{
        upperCaseName(){
            return this.name.toUpperCase()
        }
    },
</script>

filters : 可以全局使用，也可以局部使用

<h2>{{name|checkCase(name)}}</h2> //LIUJIAPENG

<script>
    data(){
      return{
        name:'liujiapeng'
      }
    }
    filters:{
        checkCase:function(data){
            return data.toUpperCase()
        }
    },
</script>

全局使用

Vue.filter('checkCase', function (data) {
     return data.toUpperCase()
})

五. 使用directive处理DOM操作