源代码仓库:
https://github.com/SAP/openui5
源代码位置:src\sap.m\src\sap\m\SplitContainer.js
SplitContainer.js详细分析
文件定位与总体印象
SplitContainer.js定义的是sap.m.SplitContainer控件。它在openui5里的地位并不是一个零散的小组件,而是一类页面级布局容器。只要应用需要同时承载主列表与明细区域,又希望在桌面、平板、手机上保持可用的导航体验,这个控件就会成为非常核心的基础设施。
从源码开头的注释就能看出,它服务的是典型的master-detail场景。所谓master-detail,可以用现实生活里的图书馆检索台来理解:左边是一列书目清单,帮助你快速浏览、筛选、定位对象;右边是某一本书或某一条记录的完整内容区,负责承载详细信息与操作。用户大多数时候在左边做选择,在右边完成理解与处理。SplitContainer的使命,就是把这种交互模式稳定地搬进浏览器,并处理不同设备下的布局变化、页面切换、按钮显示、滑动手势和无障碍细节。
如果只从界面表面看,它像是一个简单的两栏布局容器;可阅读源码之后会发现,它实际上是一个页面编排器、导航协调器