网页设计师个人网站,做问卷网站,小程序商城开源,建网站要会什么一直以来#xff0c;如何能更高效地开发与维护页面是Android与iOS开发同学最主要的工作和最关心的问题。随着业务的不断发展#xff0c;根据特定业务场景产生的定制化需求变得越来越多。单一页面往往需要根据不同业务、不同场景甚至不同用户展示不同的内容。在这样的背景下如何能更高效地开发与维护页面是Android与iOS开发同学最主要的工作和最关心的问题。随着业务的不断发展根据特定业务场景产生的定制化需求变得越来越多。单一页面往往需要根据不同业务、不同场景甚至不同用户展示不同的内容。在这样的背景下我们开始考虑对页面进行切分把一个页面切分成多个模块以提高复杂页面的可维护性。 各种不同的定制化页面如下 Shield是美团点评到店综合团队模块化UI界面解决方案它不仅仅是一个NativeAndroidiOS的UI开发框架还是到店综合团队基于自身复杂的业务场景沉淀出来的UI开发最佳实践。它具备高可复用、容易协同开发等特性还包括后端动态配置、动态模块等一系列解决方案目前已经在GitHub上开源https://github.com/Meituan-Dianping/Shield。 在Shield框架里页面是由一个个模块Agent组成的。模块是页面中粗粒度的抽象组件包含部分页面UI展示和与之相关的业务逻辑。这些模块按线性的方式排布在页面中可以很灵活地调换位置且互不影响。每个模块都有自己独立的生命周期可以单独通过网络获取数据、渲染视图等等。 每一个模块都有自己独立的逻辑和UI模块之间完全解耦这样就可以很方便地通过排列模块来完成不同的页面定制化需求使一个页面可以展示不同的内容。同时由于模块并不依赖某一具体页面模块也可以在不同的页面之间进行复用。 不同于MVP或是MVVM的设计模式Shield的模块化拆分方式根据视图和业务逻辑对页面进行横向切分。模块化的拆分与MVP等架构方式的拆分并不冲突。开发者完全可以在Shield的某个模块里运用MVP或MVVM的架构方式来对页面的逻辑进行进一步的拆分以提升代码复用性使模块逻辑变得更加清晰。 为了更好地抽象UI界面开发的各种场景Shield框架赋予了模块完整的页面能力包括完整的页面生命周期和上下文环境Context等。这样模块的开发方式与原有的页面开发方式完全一致页面不再关心具体的UI展现而是把这些都交给模块。同时模块可以单独开发维护运行在任意接入了Shield框架的页面中。 以下是模块Agent的接口定义 public interface AgentInterface {void onCreate(Bundle savedInstanceState);void onStart();void onResume();void onPause();void onStop();void onDestroy();Bundle saveInstanceState();void onActivityResult(int requestCode, int resultCode, Intent data);String getIndex();void setIndex(String index);String getHostName();void setHostName(String hostName);SectionCellInterface getSectionCellInterface();String getAgentCellName();
}一个Agent模块的结构主要包含两部分 1. 生命周期回调。 2. 提供一个SectionCellInterface。 其中SectionCellInterface是模块的视图逻辑抽象。一个模块可以为页面提供一个连续的包含多块Section的UI片段每一块视图可以是视觉上的单行Row视图也可以是多行视图。具体的接口定义如下 public interface SectionCellInterface {int getSectionCount();int getRowCount(int sectionPosition);int getViewType(int sectionPosition, int rowPosition);int getViewTypeCount();View onCreateView(ViewGroup parent, int viewType);void updateView(View view, int sectionPosition, int rowPosition, ViewGroup parent);}有了模块承担绝大部分的页面逻辑Shield框架中的页面就变成了一个单纯的模块容器。页面通过不同的模块配置Config来灵活改变自己的视图展现同时在模块配置Config中定义了模块的位置信息这样除了本地配置之外Shield框架也可以很容易就能支持后端动态下发模块配置以达到客户端的一定动态性。 在接入了Shield框架的页面中还有两个比较重要的角色分别是模块管理器AgentManager和视图管理器CellManager。 其中模块管理器AgentManager负责模块的创建、销毁、生命周期分发等工作。而视图管理器CellManager则负责将模块所提供的视图片段SectionCellInterface有序地添加到页面中并在适当的时候对这些视图进行更新。 在某些场景下页面中的一些视图片段会根据用户操作发生一些联动。而当这些视图片段处于不同的模块中时这些模块就需要进行通信。 在这种情况下如果让模块与模块直接进行交互就无法避免模块之间的耦合这样既无法保证模块的独立性也影响可复用性。于是我们基于RxJava设计实现了观察者模式的白板组件在Shield框架中称之为WhiteBoard。WhiteBoard在一个页面中唯一所有模块共享模块之间或是模块与页面的通信都通过WhiteBoard来进行。 灵活配置 只要把模块配置放到远端通过统一的配置后台进行配置就可以很轻松地实现App中各个页面一定的动态化特性无需借助其它插件化、热补丁等方案。 下图便是美团点评开发的页面模块配置后台 多端统一 我们通过提供多端统一的模块化框架减少开发者在不同平台的视觉实现差异上耗费的精力从而将精力集中于如何实现具体的视图片段。Shield框架针对Native开发中常见的画分隔线、loading动画等一系列场景做了抽象为模块提供了丰富的定制化功能简化了App开发过程中占比较高的视图开发工作。 动态化 模块化框架对模块的业务和视图逻辑行为都做了一定的抽象这样ReactNative一类的动态化方案不仅可以运用到视图绘制层面上同时也可以通过不同的JSBridge实现模块业务逻辑的动态化。而配置后台不仅可以动态调整模块同时可以动态调整模块的内部展示这样整个模块化框架可以通过配置后台实现不同粒度的页面动态化方案。有关动态模块的相关方案后续将另文详述。 页面混排与稳定性 借助于模块化框架可以有效地降低诸如ReactNative等开源框架的接入成本无需对整个页面进行改造而是在模块级的粒度上进行快速试错有效控制影响范围提升页面整体的稳定性。 我们还在逐步建设围绕模块化框架的工具链及生态圈包括基于模块的自动化测试、声明式打点、动态化等项目。 在美团点评的多业务线运营背景下大部分页面通过ActivityFragmentAgent的模块化架构支撑了大量的业务差异化定制需求。同时我们结合业务特点沉淀了列表型模块、Tab锚点型模块等多种组件型模块。除了提升开发效率外模块化框架在我们针对各业务解耦、跨Team协同开发等方面也扮演了重要的角色。 希望大家多多支持我们的开源项目Shield也欢迎大家多提意见互相交流移动端架构方面的经验与心得。 美团点评到店综合前端研发中心招聘大量职位open。 1. 前端研发工程师。 2. Node开发工程师。 3. iOS/Android客户端开发工程师。 欢迎实习生2019年及以后毕业、2018年毕业生及社招同学踊跃投递简历。 工作描述 1. 负责各业务前端研发工作涵盖Mobile Web、小程序、App、自研硬件等多终端平台。 2. 负责前端开发、测试、上线、监控系统研发。 3. 负责开放平台、第三方开发者平台系统构建及研发。 有意者请邮件至nihao#meituan.com。
