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

7次阅读

共计 889 个字符，预计需要花费 3 分钟才能阅读完成。

上一篇咱们聊到，如果要实现组件的跨端复用，那么必然就要复用逻辑层。
回过头来，扫视过来几年前端的倒退，咱们能够看出，因为 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;
}

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

正文完