关于javascript:前端组件跨端复用实践二

上一篇咱们聊到，如果要实现组件的跨端复用，那么必然就要复用逻辑层。
回过头来，扫视过来几年前端的倒退，咱们能够看出，因为Vue,React框架等的衰亡，前端越发重View层，根本都是以视图组件为主，围绕用户交互的纬度组织代码。比方上面这个组件：

const calendar = (props) => {
    const [state, setState] = React.useState(props)
    return(
        <div onClick={()=> setState()}>
            {state}
        </div>
    )
}

它有本人的View和数据处理逻辑(state+props),这一块的数据怎么解决，取决于View层用户怎么交互，须要什么数据。这在大部分场景下都能施展很好的作用，然而针对咱们目前的多端业务场景，要么每端都独立写各自的逻辑(没有复用，效率太低)，要么复用公共逻辑(公共逻辑外面须要各种判断环境，而后应用对应平台api，很繁琐)
比方会有以下代码：

// 充斥各种环境判断
const fetch = () => {
    if(isRn) return Rnfetch;
    if(isH5) return h5Fetch;
  ...
}

于是，咱们能够把注意力移到逻辑解决这一块来。将model层作为外围，不关怀对接的是哪一端:

这样一来，对于model的能力失去加强，View层就只是简略的从Model层获取state以及扭转state的函数。其次针对不同平台的api，如下面的fetch，那么就能够通过注入的形式解决

// model.tsx
const wrapModel = ({fetch})=()=> {
    const getUserInfo = ()=>{
      fetch(url,{xxx})
  }

 const useActions = ()=>{
    getUserInfo
    }
}
// rn page.tsx
const model = wrapModel({fetch: rnFetch})
const Page = ()=> {
    const { getUserInfo } = model.useActions();
    return xxxx;
}

咱们能够看出，这样一来，既做到了最大水平组件复用，又能防止繁琐的的环境判断