MIP1 改造需求

[PengXing]

前提

梳理清楚 MIP1 和 MIP2 的区别，弄明白哪些是要在 MIP2 中去掉的，哪些是为了兼容 MIP1 而添加的模块

MIP2 在初期会兼容 MIP1 组件的运行，但需要 MIP1 进行如下的低成本的改造，这是最低限度的要求

MIP1 需要改造的点

• MIP1 的页面都是在单个 iframe 中，所以组件是伴随着 iframe 销毁而销毁的，MIP2 不是，多个 MIP2 页面会运行在同一个页面中，因此 MIP1 组件如果要能正常在 MIP2 中运行，需要实现 customElement 完整的声明周期，如 disconnectCallback
• MIP1 页面存在大量操作全局的操作，如 mip-nav-slidedown，作为一个浏览器的自定义标签，居然把事件代理到 document，customElement 只能负责自己的逻辑，不能越界
• MIP2 不允许使用 AMD 的 require 和 define，只能使用 ES Module，那么对于 MIP 提供的模块依赖只能通过全局的 MIP 对象来获取，比如 require('util') => window.MIP.util
• MIP2 组件编写方式和 MIP 1 有很大变化，有两种方式，1. 通过 extends MIP.BaseElement，然后重写父类的方法来编写 MIP2 的组件 2. 编写 Vue 文件
• MIP2 是基于 customElement v1 标准，如果采用 extends 方式编写组件，需要实现 v1 的回调，而非 v0

[Ricardo-Li]

MIP2 中引入 MIP1 相关文件依赖情况如下：

文件	MIP2 源码依赖	官方组件依赖	第三方组件依赖
mip1-polyfill/customElement.js	false	all	all
mip1-polyfill/element.js	false	0	0
mip1-polyfill/naboo.js	false	1	7
mip1-polyfill/resources.js 和 customElement/utils/resource.js（需合并）	true	0	0
fixed-element.js	true	5	9
performance.js	true	1	1
sleepWakeModule.js	true	0	0
utils/dom/css-loader.js	true	0	1
utils/dom/css.js	true	18	32
utils/dom/dom.js	true	3	9
utils/dom/event.js	true	3	6
utils/dom/rect.js	true	2	13
utils/gesture	true	4	13
utils/customStorage.js	true	2	39
utils/event-action.js	true	0	0
utils/event-emitter.js	true	2	0
utils/fn.js	true	12	39
utils/hash.js	true	0	1
layout.js	true	0	0
utils/platform.js	true	6	69
utils/templates.js	false	5	39
viewer.js	true	11	35
viewport.js	true	6	38

[tayqassqan]

各模块JS的职责描述如下： mip1-polyfill/element.js 元素的抽象，提供注册封装 mip1-polyfill/naboo.js 动画库，后续可以考虑webAnimation mip1-polyfill/resources.js customElement管理，是否是必要模块待讨论 fixed-element.js 处理iframe下悬浮元素兼容性问题 performance.js 性能监控模块 sleepWakeModule.js 定制化的页面，对内容做定制化控制，功能比较迷。。。 utils/dom/css-loader.js 组件css加载器 utils/dom/css.js dom的css API utils/dom/event.js dom的event API utils/dom/rect.js dom布局/宽高 API utils/gesture 页面手势封装 utils/customStorage.js 为MIP页在Iframe下单独做的本地存储模块 utils/event-action.js 行为事件封装，例如click/tap utils/event-emitter.js 事件监听与派发 utils/fn.js 类构造器 utils/hash.js hash操作API layout.js 布局计算 utils/platform.js ua、os API utils/templates.js 模板 viewer.js 与外层容器交互 viewport.js 内部视图API，例如scroll,height

[PengXing]

前几天我通读了一下 mip1 的代码，发现这里面能够去掉的模块技术没有 [手动捂脸]