关于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.tsxconst wrapModel = ({fetch})=()=> {    const getUserInfo = ()=>{      fetch(url,{xxx})  } const useActions = ()=>{    getUserInfo    }}// rn page.tsxconst model = wrapModel({fetch: rnFetch})const Page = ()=> {    const { getUserInfo } = model.useActions();    return xxxx;}

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