refactor(v3): createIntersectionObserver

packages/uni-app-plus/dist/index.v3.js

@@ -7172,11 +7172,11 @@ var serviceContext = (function () {
 
   const requestComponentInfoCallbacks = createCallbacks('requestComponentInfo');
 
-  function requestComponentInfo (pageInstance, queue, callback) {
+  function requestComponentInfo (pageVm, queue, callback) {
     UniServiceJSBridge.publishHandler('requestComponentInfo', {
       reqId: requestComponentInfoCallbacks.push(callback),
       reqs: queue
-    }, pageInstance.$page.id);
+    }, pageVm.$page.id);
   }
 
   function parseDataset (attr) {
@@ -7245,13 +7245,12 @@ var serviceContext = (function () {
     });
   }
 
-  function requestComponentInfo$1 (pageInstance, queue, callback) {
+  function requestComponentInfo$1 (pageVm, queue, callback) {
     // TODO 重构，逻辑不对，queue 里的每一项可能有单独的作用域查找（即 component）
-    const vm = pageInstance.$vm;
-    const dom = vm._$weex.requireModule('dom');
+    const dom = pageVm._$weex.requireModule('dom');
     const selectors = getSelectors(queue);
     let outAttrs = new Array(selectors.length);
-    findAttrs(selectors, vm.$el, outAttrs);
+    findAttrs(selectors, pageVm.$el, outAttrs);
     getComponentRectAll(dom, outAttrs, 0, [], (result) => {
       callback(result);
     });
@@ -8608,6 +8607,76 @@ var serviceContext = (function () {
     createAnimation: createAnimation
   });
 
+  const createIntersectionObserverCallbacks = createCallbacks('requestComponentObserver');
+
+  const defaultOptions = {
+    thresholds: [0],
+    initialRatio: 0,
+    observeAll: false
+  };
+
+  class ServiceIntersectionObserver {
+    constructor (pageId, component, options) {
+      this.pageId = pageId;
+      this.component = component._$id || component; // app-plus 平台传输_$id
+      this.options = Object.assign({}, defaultOptions, options);
+    }
+    _makeRootMargin (margins = {}) {
+      this.options.rootMargin = ['top', 'right', 'bottom', 'left'].map(name => `${Number(margins[name]) || 0}px`).join(
+        ' ');
+    }
+    relativeTo (selector, margins) {
+      this.options.relativeToSelector = selector;
+      this._makeRootMargin(margins);
+      return this
+    }
+    relativeToViewport (margins) {
+      this.options.relativeToSelector = null;
+      this._makeRootMargin(margins);
+      return this
+    }
+    observe (selector, callback) {
+      if (typeof callback !== 'function') {
+        return
+      }
+      this.options.selector = selector;
+
+      this.reqId = createIntersectionObserverCallbacks.push(callback);
+
+      UniServiceJSBridge.publishHandler('requestComponentObserver', {
+        reqId: this.reqId,
+        component: this.component,
+        options: this.options
+      }, this.pageId);
+    }
+    disconnect () {
+      UniServiceJSBridge.publishHandler('destroyComponentObserver', {
+        reqId: this.reqId
+      }, this.pageId);
+    }
+  }
+
+  function createIntersectionObserver (context, options) {
+    if (!context._isVue) {
+      options = context;
+      context = null;
+    }
+    if (context) {
+      return new ServiceIntersectionObserver(context.$page.id, context, options)
+    }
+    const pages = getCurrentPages();
+    const len = pages.length;
+    if (!len) {
+      UniServiceJSBridge.emit('onError', 'createIntersectionObserver:fail');
+    }
+    const page = pages[len - 1];
+    return new ServiceIntersectionObserver(page.$page.id, page.$vm, options)
+  }
+
+  var require_context_module_1_17 = /*#__PURE__*/Object.freeze({
+    createIntersectionObserver: createIntersectionObserver
+  });
+
   class NodesRef {
     constructor (selectorQuery, component, selector, single) {
       this._selectorQuery = selectorQuery;
@@ -8714,10 +8783,10 @@ var serviceContext = (function () {
     if (!len) {
       UniServiceJSBridge.emit('onError', 'createSelectorQuery:fail');
     }
-    return new SelectorQuery(pages[len - 1])
+    return new SelectorQuery(pages[len - 1].$vm)
   }
 
-  var require_context_module_1_17 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_18 = /*#__PURE__*/Object.freeze({
     createSelectorQuery: createSelectorQuery
   });
 
@@ -8733,7 +8802,7 @@ var serviceContext = (function () {
     callbacks$8.push(callbackId);
   }
 
-  var require_context_module_1_18 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_19 = /*#__PURE__*/Object.freeze({
     onKeyboardHeightChange: onKeyboardHeightChange
   });
 
@@ -8745,7 +8814,7 @@ var serviceContext = (function () {
     return {}
   }
 
-  var require_context_module_1_19 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_20 = /*#__PURE__*/Object.freeze({
     pageScrollTo: pageScrollTo$1
   });
 
@@ -8781,7 +8850,7 @@ var serviceContext = (function () {
     callbacks$9.push(callbackId);
   }
 
-  var require_context_module_1_20 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_21 = /*#__PURE__*/Object.freeze({
     removeTabBarBadge: removeTabBarBadge$1,
     showTabBarRedDot: showTabBarRedDot$1,
     hideTabBarRedDot: hideTabBarRedDot$1,
@@ -8804,7 +8873,7 @@ var serviceContext = (function () {
     callbacks$a.splice(callbacks$a.indexOf(callbackId), 1);
   }
 
-  var require_context_module_1_21 = /*#__PURE__*/Object.freeze({
+  var require_context_module_1_22 = /*#__PURE__*/Object.freeze({
     onWindowResize: onWindowResize,
     offWindowResize: offWindowResize
   });
@@ -8831,11 +8900,12 @@ var serviceContext = (function () {
   './network/upload-file.js': require_context_module_1_14,
   './storage/storage.js': require_context_module_1_15,
   './ui/create-animation.js': require_context_module_1_16,
-  './ui/create-selector-query.js': require_context_module_1_17,
-  './ui/keyboard.js': require_context_module_1_18,
-  './ui/page-scroll-to.js': require_context_module_1_19,
-  './ui/tab-bar.js': require_context_module_1_20,
-  './ui/window.js': require_context_module_1_21,
+  './ui/create-intersection-observer.js': require_context_module_1_17,
+  './ui/create-selector-query.js': require_context_module_1_18,
+  './ui/keyboard.js': require_context_module_1_19,
+  './ui/page-scroll-to.js': require_context_module_1_20,
+  './ui/tab-bar.js': require_context_module_1_21,
+  './ui/window.js': require_context_module_1_22,
 
       };
       var req = function req(key) {
@@ -9819,6 +9889,12 @@ var serviceContext = (function () {
       initData(Vue);
       initLifecycle(Vue);
 
+      Object.defineProperty(Vue.prototype, '$page', {
+        get () {
+          return this.$root.$scope.$page
+        }
+      });
+
       const oldMount = Vue.prototype.$mount;
       Vue.prototype.$mount = function mount (el, hydrating) {
         if (this.mpType === 'app') {

packages/webpack-uni-pages-loader/package.json

@@ -21,7 +21,7 @@
     "strip-json-comments": "^2.0.1"
   },
   "uni-app": {
-    "compilerVersion": "2.3.3"
+    "compilerVersion": "2.3.4"
   },
   "gitHead": "10184426b19cb76e01c93fb25c982c72887557e8"
 }

src/platforms/h5/service/api/ui/create-intersection-observer.js → src/core/service/api/ui/create-intersection-observer.js

-import Vue from 'vue'
-import createCallbacks from 'uni-helpers/callbacks'
-
-const createIntersectionObserverCallbacks = createCallbacks('requestComponentObserver')
-
-const defaultOptions = {
-  thresholds: [0],
-  initialRatio: 0,
-  observeAll: false
-}
-
-class MPIntersectionObserver {
-  constructor (pageId, options) {
-    this.pageId = pageId
-    this.options = Object.assign({}, defaultOptions, options)
-  }
-  _makeRootMargin (margins = {}) {
-    this.options.rootMargin = ['top', 'right', 'bottom', 'left'].map(name => `${Number(margins[name]) || 0}px`).join(' ')
-  }
-  relativeTo (selector, margins) {
-    this.options.relativeToSelector = selector
-    this._makeRootMargin(margins)
-    return this
-  }
-  relativeToViewport (margins) {
-    this.options.relativeToSelector = null
-    this._makeRootMargin(margins)
-    return this
-  }
-  observe (selector, callback) {
-    if (typeof callback !== 'function') {
-      return
-    }
-    this.options.selector = selector
-
-    this.reqId = createIntersectionObserverCallbacks.push(callback)
-
-    UniServiceJSBridge.publishHandler('requestComponentObserver', {
-      reqId: this.reqId,
-      options: this.options
-    }, this.pageId)
-  }
-  disconnect () {
-    UniServiceJSBridge.publishHandler('destroyComponentObserver', {
-      reqId: this.reqId
-    }, this.pageId)
-  }
-}
-
-export function createIntersectionObserver (context, options) {
-  if (!(context instanceof Vue)) {
-    options = context
-    context = null
-  }
-  if (context) {
-    return new MPIntersectionObserver(context.$page.id, options)
-  }
-  const app = getApp()
-  if (app.$route && app.$route.params.__id__) {
-    return new MPIntersectionObserver(app.$route.params.__id__, options)
-  } else {
-    UniServiceJSBridge.emit('onError', 'createIntersectionObserver:fail')
-  }
+import createCallbacks from 'uni-helpers/callbacks'
+
+const createIntersectionObserverCallbacks = createCallbacks('requestComponentObserver')
+
+const defaultOptions = {
+  thresholds: [0],
+  initialRatio: 0,
+  observeAll: false
+}
+
+class ServiceIntersectionObserver {
+  constructor (pageId, component, options) {
+    this.pageId = pageId
+    this.component = component._$id || component // app-plus 平台传输_$id
+    this.options = Object.assign({}, defaultOptions, options)
+  }
+  _makeRootMargin (margins = {}) {
+    this.options.rootMargin = ['top', 'right', 'bottom', 'left'].map(name => `${Number(margins[name]) || 0}px`).join(
+      ' ')
+  }
+  relativeTo (selector, margins) {
+    this.options.relativeToSelector = selector
+    this._makeRootMargin(margins)
+    return this
+  }
+  relativeToViewport (margins) {
+    this.options.relativeToSelector = null
+    this._makeRootMargin(margins)
+    return this
+  }
+  observe (selector, callback) {
+    if (typeof callback !== 'function') {
+      return
+    }
+    this.options.selector = selector
+
+    this.reqId = createIntersectionObserverCallbacks.push(callback)
+
+    UniServiceJSBridge.publishHandler('requestComponentObserver', {
+      reqId: this.reqId,
+      component: this.component,
+      options: this.options
+    }, this.pageId)
+  }
+  disconnect () {
+    UniServiceJSBridge.publishHandler('destroyComponentObserver', {
+      reqId: this.reqId
+    }, this.pageId)
+  }
+}
+
+export function createIntersectionObserver (context, options) {
+  if (!context._isVue) {
+    options = context
+    context = null
+  }
+  if (context) {
+    return new ServiceIntersectionObserver(context.$page.id, context, options)
+  }
+  const pages = getCurrentPages()
+  const len = pages.length
+  if (!len) {
+    UniServiceJSBridge.emit('onError', 'createIntersectionObserver:fail')
+  }
+  const page = pages[len - 1]
+  return new ServiceIntersectionObserver(page.$page.id, page.$vm, options)
 }

src/core/service/api/ui/create-selector-query.js

@@ -111,5 +111,5 @@ export function createSelectorQuery (context) {
   if (!len) {
     UniServiceJSBridge.emit('onError', 'createSelectorQuery:fail')
   }
-  return new SelectorQuery(pages[len - 1])
+  return new SelectorQuery(pages[len - 1].$vm)
 }

src/core/view/bridge/subscribe/api/request-component-info.js

@@ -4,6 +4,10 @@ import {
 
 import getWindowOffset from 'uni-platform/helpers/get-window-offset'
 
+import {
+  findElm
+} from './util'
+
 function getRootInfo (fields) {
   const info = {}
   if (fields.id) {
@@ -73,38 +77,8 @@ function getNodeInfo (el, fields) {
   return info
 }
 
-function findElm (id, vm) {
-  if (id === vm._$id) {
-    return vm
-  }
-  const childVms = vm.$children
-  const len = childVms.length
-  for (let i = 0; i < len; i++) {
-    const childVm = findElm(id, childVms[i])
-    if (childVm) {
-      return childVm
-    }
-  }
-}
-
-function getElm (component, pageVm) {
-  if (!component) {
-    return pageVm.$el
-  }
-  if (__PLATFORM__ === 'app-plus') {
-    if (typeof component === 'string') {
-      const componentVm = findElm(component, pageVm)
-      if (!componentVm) {
-        throw new Error(`Not Found：Page[${pageVm.$page.id}][${component}]`)
-      }
-      return componentVm.$el
-    }
-  }
-  return component.$el
-}
-
 function getNodesInfo (pageVm, component, selector, single, fields) {
-  const $el = getElm(component, pageVm)
+  const $el = findElm(component, pageVm)
   if (single) {
     const node = $el && ($el.matches(selector) ? $el : $el.querySelector(selector))
     if (node) {

src/core/view/bridge/subscribe/api/request-component-observer.js

-import 'intersection-observer'
-
-import {
-  normalizeDataset
-} from 'uni-helpers/index'
-
-function getRect (rect) {
-  return {
-    bottom: rect.bottom,
-    height: rect.height,
-    left: rect.left,
-    right: rect.right,
-    top: rect.top,
-    width: rect.width
-  }
-}
-
-const intersectionObservers = {}
-
-export function requestComponentObserver ({
-  reqId,
-  options
-}, pageId) {
-  const pages = getCurrentPages()
-
-  const pageVm = pages.find(page => page.$page.id === pageId)
-
-  if (!pageVm) {
-    throw new Error(`Not Found：Page[${pageId}]`)
+import 'intersection-observer'
+
+import {
+  normalizeDataset
+} from 'uni-helpers/index'
+
+import {
+  findElm
+} from './util'
+
+function getRect (rect) {
+  return {
+    bottom: rect.bottom,
+    height: rect.height,
+    left: rect.left,
+    right: rect.right,
+    top: rect.top,
+    width: rect.width
+  }
+}
+
+const intersectionObservers = {}
+
+export function requestComponentObserver ({
+  reqId,
+  component,
+  options
+}, pageId) {
+  const pages = getCurrentPages()
+
+  const page = pages.find(page => page.$page.id === pageId)
+
+  if (!page) {
+    throw new Error(`Not Found：Page[${pageId}]`)
   }
 
-  const $el = pageVm.$el
-
-  const root = options.relativeToSelector ? $el.querySelector(options.relativeToSelector) : null
-
-  let intersectionObserver = intersectionObservers[reqId] = new IntersectionObserver((entries, observer) => {
-    entries.forEach(entrie => {
-      UniViewJSBridge.publishHandler('onRequestComponentObserver', {
-        reqId,
-        res: {
-          intersectionRatio: entrie.intersectionRatio,
-          intersectionRect: getRect(entrie.intersectionRect),
-          boundingClientRect: getRect(entrie.boundingClientRect),
-          relativeRect: getRect(entrie.rootBounds),
-          time: Date.now(),
-          dataset: normalizeDataset(entrie.target.dataset || {}),
-          id: entrie.target.id
-        }
-      }, pageVm.$page.id)
-    })
-  }, {
-    root,
-    rootMargin: options.rootMargin,
-    threshold: options.thresholds
-  })
-  if (options.observeAll) {
-    intersectionObserver.USE_MUTATION_OBSERVER = true
-    Array.prototype.map.call($el.querySelectorAll(options.selector), el => {
-      intersectionObserver.observe(el)
-    })
-  } else {
-    intersectionObserver.USE_MUTATION_OBSERVER = false
-    intersectionObserver.observe($el.querySelector(options.selector))
-  }
-}
-
-export function destroyComponentObserver ({ reqId }) {
-  const intersectionObserver = intersectionObservers[reqId]
-  if (intersectionObserver) {
-    intersectionObserver.disconnect()
-    UniViewJSBridge.publishHandler('onRequestComponentObserver', {
-      reqId,
-      reqEnd: true
-    })
-  }
+  const pageVm = page.$vm
+
+  const $el = findElm(component, pageVm)
+
+  const root = options.relativeToSelector ? $el.querySelector(options.relativeToSelector) : null
+
+  let intersectionObserver = intersectionObservers[reqId] = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entrie => {
+      UniViewJSBridge.publishHandler('onRequestComponentObserver', {
+        reqId,
+        res: {
+          intersectionRatio: entrie.intersectionRatio,
+          intersectionRect: getRect(entrie.intersectionRect),
+          boundingClientRect: getRect(entrie.boundingClientRect),
+          relativeRect: getRect(entrie.rootBounds),
+          time: Date.now(),
+          dataset: normalizeDataset(entrie.target.dataset || {}),
+          id: entrie.target.id
+        }
+      }, pageVm.$page.id)
+    })
+  }, {
+    root,
+    rootMargin: options.rootMargin,
+    threshold: options.thresholds
+  })
+  if (options.observeAll) {
+    intersectionObserver.USE_MUTATION_OBSERVER = true
+    Array.prototype.map.call($el.querySelectorAll(options.selector), el => {
+      intersectionObserver.observe(el)
+    })
+  } else {
+    intersectionObserver.USE_MUTATION_OBSERVER = false
+    intersectionObserver.observe($el.querySelector(options.selector))
+  }
+}
+
+export function destroyComponentObserver ({
+  reqId
+}) {
+  const intersectionObserver = intersectionObservers[reqId]
+  if (intersectionObserver) {
+    intersectionObserver.disconnect()
+    UniViewJSBridge.publishHandler('onRequestComponentObserver', {
+      reqId,
+      reqEnd: true
+    })
+  }
 }

src/core/view/bridge/subscribe/api/util.js

+function findVmById (id, vm) {
+  if (id === vm._$id) {
+    return vm
+  }
+  const childVms = vm.$children
+  const len = childVms.length
+  for (let i = 0; i < len; i++) {
+    const childVm = findVmById(id, childVms[i])
+    if (childVm) {
+      return childVm
+    }
+  }
+}
+
+export function findElm (component, pageVm) {
+  if (!component) {
+    return pageVm.$el
+  }
+  if (__PLATFORM__ === 'app-plus') {
+    if (typeof component === 'string') {
+      const componentVm = findVmById(component, pageVm)
+      if (!componentVm) {
+        throw new Error(`Not Found：Page[${pageVm.$page.id}][${component}]`)
+      }
+      return componentVm.$el
+    }
+  }
+  return component.$el
+}

src/platforms/app-plus-nvue/service/api/ui/request-component-info.js

@@ -64,13 +64,12 @@ function getComponentRectAll (dom, attrs, index, result, callback) {
   })
 }
 
-export function requestComponentInfo (pageInstance, queue, callback) {
+export function requestComponentInfo (pageVm, queue, callback) {
   // TODO 重构，逻辑不对，queue 里的每一项可能有单独的作用域查找（即 component）
-  const vm = pageInstance.$vm
-  const dom = vm._$weex.requireModule('dom')
+  const dom = pageVm._$weex.requireModule('dom')
   const selectors = getSelectors(queue)
   let outAttrs = new Array(selectors.length)
-  findAttrs(selectors, vm.$el, outAttrs)
+  findAttrs(selectors, pageVm.$el, outAttrs)
   getComponentRectAll(dom, outAttrs, 0, [], (result) => {
     callback(result)
   })

src/platforms/app-plus/service/framework/plugins/index.js

@@ -19,6 +19,12 @@ export default {
     initData(Vue)
     initLifecycle(Vue)
 
+    Object.defineProperty(Vue.prototype, '$page', {
+      get () {
+        return this.$root.$scope.$page
+      }
+    })
+
     const oldMount = Vue.prototype.$mount
     Vue.prototype.$mount = function mount (el, hydrating) {
       if (this.mpType === 'app') {

src/platforms/h5/service/api/ui/request-component-info.js

@@ -2,9 +2,9 @@ import createCallbacks from 'uni-helpers/callbacks'
 
 const requestComponentInfoCallbacks = createCallbacks('requestComponentInfo')
 
-export function requestComponentInfo (pageInstance, queue, callback) {
+export function requestComponentInfo (pageVm, queue, callback) {
   UniServiceJSBridge.publishHandler('requestComponentInfo', {
     reqId: requestComponentInfoCallbacks.push(callback),
     reqs: queue
-  }, pageInstance.$page.id)
+  }, pageVm.$page.id)
 }