MIP 对象

1
2
MIP
window.MIP

描述

MIP 对象是 MIP 对外暴露 API 的唯一方式，以前 AMD 的方式在 MIP2 中已经被废弃，MIP 对象提供了注册自定义组件、工具函数等

属性

version

• type: string

  等于 '2'

standalone

• type: boolean

• 用法：

  常量，不能更改

  • true: 代表当前 MIP 运行在独立模式下，而非百度搜索结果页中
  • false: 代表当前不在独立模式下运行

util

• type: Object

  util 工具，参考工具

viewer

• type: Object

  viewer，参考viewer

viewport

• type: Object

  viewport，参考viewport

hash

• type: Object

  hash 相关的工具，参考hash

CustomElement

• type: CustomElement

• 用法：

  CustomElement 提供直接实现 customElement v1 规范的组件使用，在 MIP 中，采用 JS 而不是 Vue 编写组件都需要继承 CustomElement

  1
  2
  3
  4
  5
  class MIPExample extends MIP.CustomElement {
    constructor (...args) {
      super(...args)
    }
  }

builtinComponents.MIPShell

• type: HTMLElement

• 用法：

  MIPShell 为 MIP Shell 的自定义标签，暴露出来方便开发者进行继承并进行修改。

  1
  2
  3
  4
  5
  6
  class MIPShellTest extends MIP.builtinComponents.MIPShell {
    constructor () {
      super()
      // other
    }
  }

方法

registerElement

• 参数：
  • {string} tag 自定义标签名
  • {CustomElement} clazz customElement v1 标准的自定义 Class
  • {string} css 自定义组件的 css

• 用法：

  1
  2
  3
  4
  5
  6
  MIP.registerElement('mip-test', class MipTest extends MIP.CustomElement {})
  MIP.registerElement('mip-test-2', {
    render () {
      console.log('mip-test')
    }
  })

prerenderElement

• 参数：
  • {MIPElement} element 必须是 MIP 自定义标签，浏览器原生标签不起作用

• 用法：

  MIP 为了首屏性能，不在第一屏的元素不进行渲染，有的时候为了下一屏的效果，可以在合适的时机预渲染节点，这就需要 prerenderElement

  1
  2
  3
  // 获取 MIP 自定义标签
  let element = document.querySelector('#id')
  MIP.prerenderElement(element)