皮皮网

1.layoutinflater.inflate 和 view.inflate 的区别
2.elementui源码学习之仿写一个el-timeline
3.聊一聊实现Vue路由组件缓存遇到的修改w修险’坑‘

layoutinflater.inflate 和 view.inflate 的区别

       å¹³æ—¶ListView加载item中，adapter的getView方法中，我们经常用到：

       LayoutInflater.from(mContext).inflate(R.layout.it,parent,false);

       è¿™æ ·çš„方法来加载布局xml,平时一直就是这么用的，也没什么疑问。今天网上看了个自定义布局的源码，自定义布局中加载布局xml用的View.inflate方法：

       public class SettingItemView extends RelativeLayout {

       private CheckBox cb_status;

       private TextView tv_description;

       private TextView tv_title;

       private String desc_on;

       private String desc_off;

       private void iniView(Context context) {

       View.inflate(context, R.layout.setting_item_view, this);//第三个参数传布局文件的父类

       cb_status=(CheckBox) this.findViewById(R.id.cb_status);

       tv_description=(TextView) this.findViewById(R.id.tv_description);

       tv_title=(TextView) this.findViewById(R.id.tv_title);

       }

       ç¬¬ä¸€æ¬¡è§ç”¨è¿™ç§æ–¹å¼æ¥åŠ è½½å¸ƒå±€çš„，看了下他的listview加载item,也是用这种方式：

       @Override

       public View getView(final int position, View convertView, ViewGroup parent) {

       View view;

       ViewHolder holder;

       if(convertView==null){

       view=View.inflate(getApplicationContext(), R.layout.list_item_callsms, null);//最后一个传了null

       holder=new ViewHolder();

       holder.tv_number=(TextView) view.findViewById(R.id.tv_black_number);

       holder.tv_mode=(TextView) view.findViewById(R.id.tv_black_mode);

       holder.iv_delete=(ImageView) view.findViewById(R.id.iv_delete);

       view.setTag(holder);

       å¥½å§ï¼Œçœ‹ä¸€ä¸‹View.inflate的说明：

       Open Declaration View android.view.View.inflate(Context context, int resource, ViewGroup root)

       Inflate a view from an XML resource. This convenience method wraps the

       LayoutInflater class, which provides a full range of options for view

       inflation.

       Parameters: context The Context object for your activity or

       application. resource The resource ID to inflate root A view group

       that will be the parent. Used to properly inflate the layout_

       parameters.

       See Also: LayoutInflater

       æœ€åŽæœ‰ä¸€å¥è®©ä½ çœ‹LayoutInflater这个类，怀疑它内部也是用LayoutInflater实现的，进入源码：

       public static View inflate(Context context, int resource, ViewGroup root) {

       LayoutInflater factory = LayoutInflater.from(context);

       return factory.inflate(resource, root);

       }

       æžœç„¶å†…部也是用LayoutInflater实现的，不知道为啥android还要用View.inflat封装一下。。。o(〃’▽’〃)o

       å…¶ä¸­LayoutInflater的Inflate的三个参数意思为：

       å¯¹äºŽInflate的三个参数(int resource, ViewGroup root, boolean attachToRoot)

       å¦‚æžœinflate(layoutId, null )则layoutId的最外层的控件的宽高是没有效果的

       å¦‚æžœinflate(layoutId, root, false ) 则认为和上面效果是一样的

       å¦‚æžœinflate(layoutId, root, true ) 则认为这样的话layoutId的最外层控件的宽高才能正常显示

       å¯¹è¿™ä¸‰ä¸ªå‚数区别不理解的话可以看这篇文章：

       inflate第三个参数意思

       ä»Žæºç è§’度解析的有郭大神的：

       Android LayoutInflater原理分析，带你一步步深入了解View(一)

       ä»¥åŠå¦ä¸€ç¯‡æ„Ÿè§‰å¾ˆä¸é”™çš„：

       Android LayoutInflate深度解析 给你带来全新的认识

       çœ‹å®Œï¼Œä½ åº”该知道这个参数意思了，ok，再来看上面代码， 这时就可以替换为layoutInflater的方式了：

       å¯¹äºŽç¬¬ä¸€ä¸ªè‡ªå®šä¹‰å¸ƒå±€ï¼š

       //View.inflate(context, R.layout.setting_item_view, this);//第三个参数传布局文件的父类

       LayoutInflater.from(context).inflate(R.layout.setting_item_view, this, true);//等价于上面

       ç¬¬äºŒä¸ªé€‚配器中getView：

       //view=View.inflate(getApplicationContext(), R.layout.list_item_callsms, null);

       view=LayoutInflater.from(getApplicationContext()).inflate(R.layout.list_item_callsms,parent,false);

elementui源码学习之仿写一个el-timeline

       本文记录了仿写el-timeline组件的细节，以深入理解饿了么UI组件的源码实现机制。本系列文章将持续更新，改源深入探讨elementui源码的码风学习与实践。可访问开源仓库，采用通过npm start运行代码，什设式动态规划源码lingo结合注释辅助理解。计模

       时间线组件构成包括：时间线小圆点、修改w修险时间线竖线条、源码时间戳与具体内容详情四个部分。改源如图所示。码风

       时间线组件主要需求包括：按时间线正序或倒序展示、采用自定义时间线小圆点样式与颜色、什设式使用小图标替代时间线小圆点、计模控制时间戳与具体内容详情的修改w修险位置、时间戳的显示与隐藏。

       对官方组件的jedis.hse源码见解包括：提供与注入可以简化、时间戳位置优化、简约封装参考其他库组件。Antd与iview的时间线组件参数较为精简。

       回顾知识点：数组方法的使用，如this.$slots.default.reverse()；以及`:style`中的四元表达式应用，如`:style="border: ${ elementIcon} ${ borderColor}"`。

       组件代码示例如下：`myTimeline`、`myTimelineItem`。订座位软件源码完整代码在开源仓库，欢迎访问并star。

       若本文对您有所助益，期待您的star，感谢支持！

聊一聊实现Vue路由组件缓存遇到的’坑‘

       项目背景介绍

       在进行公司后台管理系统开发时，遇到了一个在使用keep-alive和vue-router实现的路由组件缓存不生效的问题。该项目基于iview-admin@2.0进行开发，CHM 反编译 源码全局状态管理采用vuex分module实现，路由配置采用vue-router进行表方式实现。项目属于基于RBAC的后台管理系统，涉及多用户多角色的权限控制和动态系统菜单功能。

       问题解决

       梳理问题并核对官方文档后，发现基本用法和组件缓存原理均无误。但深入检查后发现，问题出现在keep-alive的黑马起飞指标源码include参数设置上。iview-admin@2.0中通过路由meata参数——notCache控制组件缓存。官方文档指出，当设为true时，页面在切换标签后不会缓存，但若需要缓存，则无需设置notCache字段，并确保页面组件的name属性与路由配置的name一致。项目中路由配置由后台功能决定，修改无法缓存页面的路由配置的name即可解决。

       研究iview-admin源码

       研究发现，iview-admin中将navTagList、menuList等数据保存在全局vuex的app模块中，navTagList动态更新当前打开的标签页，menuList根据路由记录的meta参数的access字段过滤。cacheList作为getters，计算出需要keep-alive缓存的组件name数组。通过动态修改keep-alive组件的exclude值来更新路由缓存规则。

       iview-admin的局限性

       iview-admin的权限路由控制采用路由meta参数的access数组来标记路由可访问的用户角色，根据路由记录计算用户菜单。这种实现存在不足，需要优化。

       优化方案

       对iview-admin的权限控制和路由配置进行优化，将路由分为基础路由和业务路由。基础路由直接配置到router中，业务路由动态注册。在vuex的user模块中添加获取用户路由配置的action，在用户登录成功后动态注册路由。

       进一步研究

       未来计划深入研究vue-router的view部分源码，理解router-view与keep-alive的关联。后续更新将在此分享。