前端架构探索与实践
共 6215字,需浏览 13分钟
·
2020-12-08 10:45
前文
从思考、到探索、到脚手架的产生,后面经过一系列的项目开发,不断优化和改良。目前已经成功应用到房产中间页(改名天猫房产)中。这里,做一下总结。
❝「仅为抛砖,希望看完这个系列的同学可以相互探讨学习一下」
❞
为什么使用源码
目前,我们大多数页面,包括搜索页、频道页都是大黄蜂搭建的页面。至于搭建的优点,这里就不多赘述了。而我们使用源码编写,主要是基于以下几点思考:
稳定性要求高 页面模块多而不定 快速回滚方案 模块通信复杂
源码架构
❝架构图需要调整。此为稿图,位置放的有些不合理,表述不清
❞
底层技术支撑主要采用 Rax1.0
+ TypeScript
+ Jest
编码。通过 pmcli
生成项目脚手架。脚手架提供基础的文件代码组织和组件。包括 Components
,commonUtils
,document
,modules
等。当然,这些组件最终会被抽离到 puicom
group
下。
再往上,是容器层。容器提供一些可插拔的 hooks
能力。并且根据 component
的配置来渲染不同的组件到页面中,首屏组件和按需加载组件。最后,支撑到每一个对应的页面里面。
分工组织
对于一个页面,无论是 react
还是 rax
,其实都是 fn(x)=>UI
的过程。所以整理流程无非就是拿到接口属于渲染到 UI
中。所以对于中间页的架构而言也是如此。
首先拿到基本的接口数据,通过自定义的状态管理,挂载到全局 state
对应的组件名下。容器层通过组件的配置文件,渲染对应的组件。最终呈现出完成的一个页面。当然,其中会有一些额外的容器附属功能,比如唤起手淘、监听键盘弹起等这个按需插入对应 hooks 即可。属于业务层逻辑。
工程目录
工程结构
页面结构
模块结构
❝以上结构在之前文章中都有介绍到
❞
补充
❝这里补充下动态加载,以及入口 index 的写法。理论上这部分,在使用这套架构的同学,无需关心
❞
index.tsx
return (
<H5PageContainer
title={PAGE_TITLE}
showPlaceHolder={isLoading}
renderPlaceHolder={renderLoadingPage}
renderHeader={renderHeader}
renderFooter={renderFooter}
toTopProps={{
threshold: 400,
bottom: 203,
}}
customStyles={{
headWrapStyles: {
zIndex: 6,
},
}}
>
{renderSyncCom(
asyncComConfig,
dao,
dispatch,
reloadPageNotRefresh,
reloadTick
)}
{renderDemandCom(
demandComConfig,
offsetBottom,
dao,
dispatch,
reloadPageNotRefresh,
reloadTick
)}
<BottomAttention />
H5PageContainer>
);
模块动态加载
/**
* 按需按需加载容器组件
*
* @export
* @param {*} props 按需加载的组件 props+path
* @returns 需按需加载的子组件
*/
export default function(props: IWrapperProps) {
const placeHolderRef: any = useRef(null);
const { offsetBottom, ...otherProps } = props;
const canLoad = useDemandLoad(offsetBottom, placeHolderRef);
const [comLoaded, setComLoaded] = useState(false);
// 加入 hasLoaded 回调
const wrapProps = {
...otherProps,
hasLoaded: setComLoaded,
};
return (
);
}
/**
* 动态加载
* @param props
*/
function ImportWrap(props: IWrapperProps) {
const { path, ...otherProps } = props;
const [Com, error] = useImport(path);
if (Com) {
return ;
} else if (error) {
console.error(error);
return null;
} else {
return null;
}
}
use-demand-load.ts
import { useState, useEffect } from 'rax';
import { px2rem } from '@ali/puicom-universal-common-unit';
/**
* 判断组件按需加载,即将进去可视区
*/
export function useDemandLoad(offsetBottom, comRef): boolean {
const [canLoad, setCanLoad] = useState(false);
const comOffsetTop = px2rem(comRef?.current?.offsetTop || 0);
useEffect(() => {
if (canLoad) return;
if (offsetBottom > comOffsetTop && !canLoad) {
setCanLoad(true);
}
}, [offsetBottom]);
useEffect(() => {
setCanLoad(comRef?.current?.offsetTop < (screen.height || screen.availHeight || 0));
}, [comRef]);
return canLoad;
}
模块编写与状态分发
模块编写
types
编写模块数据类型
挂载到 dao(dataAccessObject) 下
统一导出
❝避免文件引入过多过杂
❞
type/index.d.ts
reducers
编写模块对应reducer
在 daoReducer 中统一挂载
数据分发
componentConfig
❝此处 keyName 是 type/dao.d.ts 下声明的值。会进行强校验。填错则分发不到对应的组件中
❞
component
数据在 props.dataSource
中
状态分发
模块声明需要挂载到 type/dao.d.ts
中reducer
需要combine
到dao.reduer.ts
中在 useDataInit
中dispatch
对应Action
在 config
中配置 (才会被渲染到 UI)
Demo 演示
❝以弹层为例
❞
将所有弹层看做为一个模块,只是内容不同而已。而内容,即为我们之前说的组件目录结构中的 components
内容
定义模块 Models
定义模块类型
编写模块属于类型
挂载到 dao 中
reducer
编写组件所需的 reducer
❝actions 的注释非常有必要
❞
combine 到 dao 中
编写组件
组件编写
通信
导入对应 action
import { actions as modelActions } from "../../../reducers/models.reducer";
dispatch
dispatch([modelActions.setModelVisible(true),modelActions.setModelType("setSubscribeType")])
❝触发 ts 校验
❞
效果
页面容器
❝基于拍卖通用容器组件改造
❞
改造点:「基于 body 滚动」。
因为我们目前页面都是 h5
页面了,之前则是 weex
的。所以对于容器的底层,之前使用的 RecycleView
:固定 div
高度,基于 overflow
来实现滚动的。
虽然,在 h5 里面这种滚动机制有些”难受“,但是罪不至”换“。但是尴尬至于在于,iOS 的橡皮筋想过,在页面滚动到顶部以后,如果页面有频繁的动画或者 setState
的时候,会导致页面重绘,重新回到顶部。与手动下拉页面容器的橡皮筋效果冲突,而「倒是页面疯狂抖动」。所以。。。。重构。
旧版容器功能点
❝源码页面中使用的部分
❞
重构后的使用
❝基本没有太大改变
❞
简单拆解实现
type
import { FunctionComponent, RaxChild, RaxChildren, RaxNode, CSSProperties } from 'rax';
export interface IHeadFootWrapperProps {
/**
* 需要渲染的子组件
*/
comFunc?: () => FunctionComponent | JSX.Element;
/**
* 组件类型
*/
type: "head" | "foot",
/**
* 容器样式
*/
wrapStyles?: CSSProperties;
}
/**
* 滚动到顶部组件属性
*/
export interface IScrollToTopProps {
/**
* 距离底部距离
*/
bottom?: number;
/**
* zIndex
*/
zIndex?: number;
/**
* icon 图片地址
*/
icon?: string;
/**
* 暗黑模式的 icon 图片地址
*/
darkModeIcon?: string;
/**
* icon宽度
*/
iconWidth?: number;
/**
* icon 高度
*/
iconHeight?: number;
/**
* 滚动距离(滚动多少触发)
*/
threshold?: number;
/**
* 点击回滚到顶部是否有动画
*/
animated?: boolean;
/**
* 距离容器右侧距离
*/
right?: number;
/**
* 展示回调
*/
onShow?: (...args) => void;
/**
* 消失回调
*/
onHide?: (...args) => void;
}
/**
* 内容容器
*/
export interface IContentWrapProps{
/**
* children
*/
children:RaxNode;
/**
* 隐藏滚动到顶部
*/
hiddenScrollToTop?:boolean;
/**
* 返回顶部组件 Props
*/
toTopProps?: IScrollToTopProps;
/**
* 渲染头部
*/
renderHeader?: () => FunctionComponent | JSX.Element;
/**
* 渲染底部
*/
renderFooter?: () => FunctionComponent | JSX.Element;
/**
* 自定义容器样式
*/
customStyles?: {
/**
* body 容器样式
*/
contentWrapStyles?: CSSProperties;
/**
* 头部容器样式
*/
headWrapStyles?: CSSProperties;
/**
* 底部容器样式
*/
bottomWrapStyle?: CSSProperties;
};
/**
* 距离底部多少距离开始触发 endReached
*/
onEndReachedThreshold?: number;
}
export interface IContainerProps extends IContentWrapProps {
/**
* 页面标题
*/
title: string;
/**
* 页面 placeHolder
*/
renderPlaceHolder?: () => FunctionComponent | JSX.Element;
/**
* 是否展示 placeH
*/
showPlaceHolder?: boolean;
}
index.tsx
const isDebug = isTrue(getUrlParam('pm-debug'));
export default function({
children,
renderFooter,
renderHeader,
title,
onEndReachedThreshold = 0,
customStyles = {},
toTopProps = {},
showPlaceHolder,
renderPlaceHolder,
hiddenScrollToTop=false
}: IContainerProps) {
if (!isWeb) return null;
// 监听滚动
useListenScroll();
// 设置标题
useSetTitle(title);
// 监听 error 界面触发
const { errorType } = useListenError();
return (
x-if={errorType === "" && !showPlaceHolder}
renderFooter={renderFooter}
customStyles={customStyles}
renderHeader={renderHeader}
onEndReachedThreshold={onEndReachedThreshold}
toTopProps={toTopProps}
hiddenScrollToTop={hiddenScrollToTop}
>
{children}
{renderPlaceHolder && showPlaceHolder && renderPlaceHolder()}
);
}
export { APP_CONTAINER_EVENTS };
通过 Fragment 包裹,主题是 ContentWrap
,ErrorPage
、VConsole
、Holder
放置主体以外。
❝相关 hooks 功能点完全区分开来
❞
广播事件
/**
* Events 以页面为单位
*/
export const APP_CONTAINER_EVENTS = {
SCROLL: 'H5_PAGE_CONTAINER:SCROLL',
TRIGGER_ERROR: 'H5_PAGE_CONTAINER:TRIGGER_ERROR',
END_REACHED: 'H5_PAGE_CONTAINER:END_REACHED',
HIDE_TO_TOP: 'H5_PAGE_CONTAINER:HIDE_TO_TOP',
RESET_SCROLL: 'H5_PAGE_CONTAINER:RESET_SCROLL',
ENABLE_SCROLL:"H5_PAGE_CONTAINER:H5_PAGE_CONTAINER"
}
pm-cli
安装:tnpm install -g @ali/pmcli
这里在介绍下命令:
基本使用
pmc init
在空目录中调用,则分两步工作: 首先调用 tnpm init rax
初始化出来 rax 官方脚手架目录修改 package.json
中name
为当前所在文件夹的文件夹名称升级为拍卖源码架构,下载对应脚手架模板:init-project 在已 init rax
后的项目中调用升级为拍卖源码架构,下载对应脚手架模板:init-project
❝注意:经过 pmc 初始化的项目,在项目根目录下回存有
❞.pm-cli.config.json
配置文件
pmc add-page
在当前 项目中新增页面,选择三种页面类型
推荐使用 simpleSource
、customStateManage
页面模板地址:add-page
pmc add-mod
根据所选择页面,初始化不同类型的模块
模块模板地址为:add-mod
pmc init-mod
调用def init tbe-mod
,并且将仓库升级为支持 ts 开发模式
pmc publish-init
发布端架构初始化,基于 react
应用
发布端架构模板地址:publish-project
pmc publish-add
添加发布端模块
模块模板地址:publish-mod
pmc init-mod
调用 def init tbe-mod
命令,并同时升级为 ts
编码环境。
❝配置环境、安装依赖、直接运行
❞
相关体验地址(部分无法访问)
阿里房产 底层容器 (单独抽离组件ing) pmCli ts tbeMod