关于MockView中“Mock“编程思想的个人理解及实践

49 篇文章 0 订阅
47 篇文章 0 订阅

MockView

MockView 很早之前就有接触过,虽然阅读了大佬的文章:Why Mocking Matters,但是并没有很好地理解。随着开发经验的不断积累,以及在flutter_hybird_webview 跨进程渲染的实践中,模块跨进程迁移的开发过程中对Mock有了更进一步的理解,在此分享一下本菜鸡的理解。
004DCCAF.jpg

介绍

MovkView位于com.android.layoutlib.bridge包下,并继承自FrameLayout,同时禁止添加其它子view,内部代码如下:

public class MockView extends FrameLayout {

    private final TextView mView;

   ///...省略构造函数

    // Only allow adding one TextView.
    @Override
    public void addView(View child) {
        if (child == mView) {
            super.addView(child);
        }
    }

    @Override
    public void addView(View child, int index) {
        if (child == mView) {
            super.addView(child, index);
        }
    }

    @Override
    public void addView(View child, int width, int height) {
        if (child == mView) {
            super.addView(child, width, height);
        }
    }

    @Override
    public void addView(View child, ViewGroup.LayoutParams params) {
        if (child == mView) {
            super.addView(child, params);
        }
    }

    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        if (child == mView) {
            super.addView(child, index, params);
        }
    }


}

android中使用这个类的地方也不多,如webview,surface view等,他们比较突出的特点就是跨sdk跨进程,这里我以webview谈一下个人的理解。

Mock编程思维的个人认识:webview

早期版本的webview继承自AbsoluteLayout(见 WebView | Android Developers),在最近的android(27或者28)版本才继承自MockView

引起webview继承变化的原因,我认为大致有以下几点:

  1. AbsoluteLayout过期了。 01DD4F77.gif

  2. 随着app的发展,对于webview在表现上有了更复杂的需求,这点从AbsoluteLayout的注释可见一斑。

    /*
    ... Absolute layouts are less flexible and harder to maintain
        than other types of layouts without absolute positioning.
        在布局上的灵活性和操控性相对较差。
    */
    public class AbsoluteLayout extends ViewGroup {
        ...
    }
  1. 更复杂的测试和协同开发需求,这个参见大佬的文章和当下app的规模。

  2. webviewrendererandroid(26)开始,工作在独立的进程,进一步讲就是沙箱化

    Starting in Oreo (API 26) WebView has a single out-of-process renderer 
    (we sometimes refer to this as "multiprocess mode"). This is enabled
    for high-memory devices (low-memory devices still use an in-process renderer 
    as before).

    The out-of-process renderer is enabled by a new Android API (`android:externalService`),
    to create sandboxed processes which run in the *embedding app's context* rather than 
    the WebView provider's context.

Chromium本身含有这个机制,只是Android-Chromium(来源于Chromium)可能是由于早期设备资源不足才无法支持此机制(个人推测)。

综合上述几点,我认为之所以做如此改动,是因为模块达到一定复杂度和特征后,需要结合其特征进行进一步的模型化(这同时也是一种对外约束)。

通过对`View`的`Mock`表明其在`ui`系统中的身份特性
通过对`addChild()`的禁止,可以表明渲染的独立性,以及对外的约束
通过整体模型化,可以满足跨域/协同开发的联调及测试问题。

Mock编程思维的实践

这里我介绍一下在flutter_hybird_webview和日常开发中的实践。

flutter_hybird_webview的Channel Mock

在对Flutter的webview插件中的android模块进行跨进程迁移的过程中,需要对模块的通信方式进行分析,并对通信点(或者说它们的通信接口模型)进行Mock。 这样即保证了最小迁移工作量,同时因为遵从原通信模型(对修改封闭,对拓展开放),而确保了向后兼容。

在Flutter中webview插件的原通信方式大致如下图:

plugin-comm.png

迁移后的通信方式大致如下:

ab-p.png

这样,整个迁移过程就类似于平移了。

日常开发中的应用

在日常开发中,会有一些功能极为复杂的页面,如购物车,它可能包含:

  • 各种路由跳转逻辑
  • 复杂的交互逻辑
  • 复杂的数据显示逻辑
  • 缓存、数据封包传递 等等

MVVM架构下,上述功能的累加及不断地迭代会导致vm异常臃肿。因此,我们会对vm进行下沉式的拆分,这样不仅代码结构清晰,且更精细的控制也带来了更高的性能。与此同时还可以基于ui/业务逻辑数据模型进行进一步的Mock,这样不仅可以进一步优化代码结构,提高开发自测效率,还可以平抑掉迭代过程中数据实体或逻辑变化对vm内部结构的影响。

mvvm.png

以上就是我对Mock的浅见及在开发过程中的实践,如有不足或错误的地方还请指出,谢谢阅读。

其他文章

Android源码——WebView拉起软键盘的流程浅析

Flutter在Android平台上启动时,Native层做了什么?

Flutter版 仿.知乎列表的视差效果

Flutter——实现网易云音乐的渐进式卡片切换

Flutter 仿同花顺自选股列表

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue项目Mock是一种用于模拟接口数据的技术。它可以在测试过程,用虚拟的对象来代替一些不容易构造或获取的对象,以便进行测试。\[1\] 在Vue项目使用Mock,一般需要进行以下几个步骤: 1. 创建mock文件夹:在项目的src目录下创建一个名为mock的文件夹,用于存放Mock相关的文件。 2. 配置vue.config.js文件:在项目的根目录下找到vue.config.js文件(如果没有则需要手动创建),在该文件进行Mock的配置。可以通过配置webpack的devServer属性来启用Mock服务。 3. 编写Mock接口:在mock文件夹下创建一个index.js文件,用于配置Mock服务。在该文件,可以使用Mock.js来模拟接口数据。可以根据需要创建多个模拟接口的文件,放在api文件夹下。 4. 在项目使用Mock:在需要使用Mock数据的地方,可以通过import语句引入Mock接口文件,并使用其定义的接口进行数据模拟。 5. 添加环境变量:为了在不同的环境使用不同的Mock配置,可以在项目添加环境变量,根据环境变量的值来判断是否启用Mock服务。\[2\]\[3\] 需要注意的是,Mock只在开发环境使用,不会影响生产环境。在生产环境Mock相关的代码会被自动剔除。 #### 引用[.reference_title] - *1* *3* [mock在vue项目的使用 —— json写法](https://blog.csdn.net/myisyourbb/article/details/118759231)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [在Vue项目使用Mock](https://blog.csdn.net/weixin_42275702/article/details/117621167)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值