vue 页面逻辑复用

在开发表单页面时, 经常碰到一种情况。 同一表单存在 新建 编辑 查看 几种状态。页面的大体组成基本相同，但又需要做部分针对当前状态的处理，处理这类问题，一般存在两种方式

1. 直接拷贝多分，在不同页面中做处理
   • 优点: 处理简单，页面各个状态之间不会相互影响
   • 缺点: 复用率低，后期修改麻烦
2. 在同一页面中做处理，页面跳转时提供状态标识符号，通过标识符切换页面显示
   • 优点：复用率高，修改同一
   • 缺点：逻辑复杂度高， 状态处理麻烦，页面逻辑不利于阅读

jsx + mixins 页面复用

这里提供一种使用 jsx 编写基础页面，子类页面通过修改基础页面对象，实现属于子类的页面对象

例子

这里是用 ant 实现简单表单，表单存在两种状态 新增 编辑

• 目录结构

    - view
        - base-form.jsx
        - create-form.vue
        - edit-form.vue

• base-form.jsx

/*
 * 表单组件列表
 */
export function formCmps(vm, form){

    return [

       {
           key: 'orderName',
           cmp: (h) =>{
                return (
                    
                    { form.getFieldDecorator('orderName')() } 
                    
                )
            }
       },

       {
           key: 'orderType',
           cmp: (h) =>{

            const options = [
                {
                    key: 'inland',
                    label: '国内'
                },
                {
                    key: 'overseas',
                    label: '海外'
                }
            ]
            
            return (
                    
                    {   
                        form.getFieldDecorator('orderType')(
                            
                                { options.map(({key, label}) =>  { label }  ) }
                            
                        ) 
                    } 
                    
                )
            }
       },

       {
           key: 'createTime',
           cmp:  (h) =>{
                return (
                    
                    { 
                        form.getFieldDecorator('createTime', {
                            initialValue: (new Date()).toString()
                        })(  ) 
                    } 
                    
                )
            }
       },

       {
        key: 'controll',
        cmp:  (h) =>{
             return (
                 
                     提交 
                     重置 
                 
             )
         }
    }


        
    ]
    
}


/**
 * 渲染函数(render)
 * 这里提供渲染模板，通过包装函数传递相应的上下文对象既 vue 实例
 */ 
export function warpRender({vm, formItems}){

    formItems = formItems || formCmps(vm, vm.form)
    
    // 这里 h 时必须的
    return function(h){
        
        return (
            

                

                    { vm.title }
                
                
                    { formItems.map(item => item.cmp(h)) }
                
            
        )
        
    }
        
}

/**
 * 基础组件实例
 * 这里将挂载通用属性及方法
 */

const BaseForm = {

    name: 'base-form',
    computed:{
        orderId(){
            return this.$route.params.id
        },
    },
    data(){
        return{
            title: '默认标题',
            form: this.$form.createForm(this)
        }
    },  
    methods: {

        reset(){},
        submit(){},

        upDate(data){
            console.log(`submit data:`, data)
        },
      
    },
    
    
}

export default BaseForm

• create-form.vue

新增 一基础信息出入为主，主要继承基础组件

• edit-form.vue

编辑 状态下， 需要提供默认数据。同时禁用部分功能

优点

• 保证复用的情况下，劲量分割差异。

缺点

• 基础组件编写相较模板模式复杂，更接近react

总结

这里使用 jsx 的目的在于可以动态编辑页面模板。在需要增减组件时，能提供比较灵活的手段。

其实这种处理方式，使用 vue 组件和模板方式依然可以做到。只是相较之下使用组件的方式，将产生很多碎片文件，且需要提供数据接口。对于只是小幅修改的情况比较麻烦。