组件化的原因
近年来,随着手机性能的提高。Web页面也变的更加流畅,用户体验也逼近原生。而Web以他快速适应变化的特点,对原生的App开发冲击很大。各种混合开发框架也如雨后春笋般冒出。而就目前来看原生App凭借速度优势仍然占据开发的主流。但是,随着技术的进步Web的优势将更加明显。他可以快速适应变化,可以根据需求随时变动。原生App变的愈发困难。当然,热更新的应用也使得原生App变的相对灵活。但是对于页面结构的调整,模块的大的变动还是显得力不从心。如果原生App也可以如Web那样随意调整页面结构。那样既可以可变又不失体验。这样就要求我们以一种新的模式去开发-组件化开发。
当前模式的探索
当前App开发使用的框架基本都是MVP。从MVC到MVP为了释放页面逻辑。我们将数据交互都从页面中摘除。页面来负责数据的展示和用户操作。随着页面展示的样式增加和对页面展示可变行的要求,MVP模式也同样使得页面变得冗长而难以调整。以汽车制造为类。MVP就相当于生产功能零件和组装在一个车间完成。现在需要进一步的简化和提取。需要将功能零件的生产从页面中拿走。页面变成一个组装车间,只是用适合的零件造出合适的车子。这样让功能进一步细化。页面更加的干净整洁也更加的清晰,页面可以根据不同需求去拿到不同的零件展示不同的功能。那么如何生产零件以及如何拼装页面呢。也就是如何实现页面的组件化。
具体的实现
通过上面的啰里八嗦,下面我们进入正题。我们都知道页面的拼凑有两种一种是静态添加,一种是动态生成。我们平常使用的大都是静态xml书写,那么组件化就需要动态添加。我们对一个零件的要求就是,1.有什么功能。2.怎么用。组件提供一个视图(view)和一份使用说明书。页面根据需求去添加。下面我们看一下具体的效果。
代码实现banner
public class BannerActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_banner);
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll_bannerContainer);
BannerViewModel bannerViewModel = new BannerViewModel(this, BannerConfig.CENTER);//添加banner组件一
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.topMargin = 100;
linearLayout.addView(bannerViewModel.getView(), layoutParams);
BannerViewModel bannerViewModel2 = new BannerViewModel(this, BannerConfig.LEFT);//添加banner组件二
linearLayout.addView(bannerViewModel2.getView(), layoutParams);
} }
上面就是banner页面的拼凑一个组件根据类型不同展示不同的样子和体现不同的功能。当然,组件也不依赖于特定页面可以在多个页面复用提高代码的可维护性。也便于整体置换。这是一个简单的应用上面的登录页面也是组装的,当然复杂的页面也是可以组装的。目前这种模式已经应用到项目中。显著提高代码的可读性和灵活性。当然,也是和MVP结合使用的避免出现冗余。github
结语
最后,欢迎大家一起加入组件的生产,共享觉得有意思有用的组件,让开发变的更加简单和高效。也希望大家提出建议和意见,一起进步。demo组件会陆续更新。欢迎分享。结合当下的共享经济。共享组件,欢迎共享。大家也可以关注一下前端开发框架Angular2。一个不错的组件化框架。