SPZServices 对象

SPZServices 对象挂载在 window 上，可以在全局中使用。该对象定义了注册方法、模版等服务。

获取 Action 服务

在定义组件时，如果有要抛出的事件，就需要通过 Action 服务的 trigger 方法来实现。

属性	说明	类型
trigger	触发目标元素指定的事件	(target, eventType, event, opt_args) => boolean

this.actions_ = SPZServices.actionServiceForDoc(); // 获取服务

const event = SPZUtils.Event.create(
  this.win,
  'spz-render.finish',
  {}
);

this.actions_.trigger(this.element, 'finish', event);

获取 Template 服务

当定义组件需要用到模版时，需要该服务来查找、渲染模版。

属性	说明	类型
renderTemplate	使用提供的数据渲染模版，并返回渲染结果	(templateElement, data) => Promise<Element>
renderTemplateArray	使用提供的数据数组渲染指定的模板元素，并返回结果元素的数组	(templateElement, data) => Promise<Array<Element>>
findAndRenderTemplate	查找并使用提供的数据渲染模版，并返回渲染结果	(parentElement, data) => Promise<Element>
findAndRenderTemplateArray	查找并使用提供的数据数组渲染指定的模板元素，并返回结果元素的数组	(parentElement, data) => Promise<Array<Element>>
findTemplate	查找模版	(parentElement, opt_querySelector) => Element

this.templates_ = SPZServices.templatesForDoc(); // 获取服务
this.templates_.findAndRenderTemplate(this.element, data).then((el) => {
  // ...
});

获取 XHR 服务

需要请求接口数据时，可以使用 XHR 服务来请求。

属性	说明	类型
fetchJson	请求接口，返回 JSON 类型数据格式。`opt_init` 可选项，包括所有对请求的设置，参考 fetch	(input, opt_init) => Object \| Array
fetchText	请求接口，返回文本类型（`text/plain`）数据格式。`opt_init` 可选项，包括所有对请求的设置，参考 fetch	(input, opt_init) => string

this.xhr_ = SPZServices.xhrFor(this.win); // 获取服务
this.xhr_.fetchJson('/api/cart').then((data) => {
  // ...
});

获取 BatchedXHR 服务

需要请求接口数据且可以通过给定元素的 items 来获取返回的数据路径时，可以使用 BatchedXHR 服务来请求。

属性	说明	类型
batchFetchJsonFor	获取元素的 `src` 属性作为默认的请求URL（如果没有传递 `url` 参数时使用）。当请求成功后，通过元素的 `items`（默认为 `.`）属性来从结果数据中获取指定路径的数据返回	(element, options) => any

this.batchedXhrFor_ = SPZServices.batchedXhrFor(this.win); // 获取服务
this.batchedXhrFor_.fetchJson(this.element, {
  url: '...',
  method: 'POST'
}).then((data) => {
  // ...
});

获取 Viewport 服务

该对象表示视口。它跟踪滚动位置、调整大小和其他事件，并在视口发生变化以及如何变化时通知感兴趣的各方。

属性	说明	类型
onResize	文档视口大小调整时触发	(handler) => removeHandlerFunc
removeResize	移除 `onResize` 的监听	(handler) => void
onScroll	文档视口滚动时触发	(handler) => removeHandlerFunc
getScrollTop	获取 `scrollTop` 值	() => number
getSize	获取视口的 `width` 和 `height` 对象	() => Object
getWidth	获取视口的宽度	() => number
getHeight	获取视口的高度	() => number
enterOverlayMode	进入蒙层模式，禁止页面底部滚动	(element) => void
leaveOverlayMode	离开蒙层模式，允许页面底部滚动	(element) => void

this.viewport_ = this.getViewport(); // 获取服务