8.27 核心上线 (#690)

* 单页跳转透传 hash * add cambrian logo and title * add cambrian logo and title * fixed: 修复 iOS 百度 APP 下的页面无法滚动的问题 * [feat] MIP 交互机制升级 (#656) * add parser * 添加全局行为 * 增加 event 语法规则 * 添加 navigateTo，fix code * rewrite mip event * finish mip event parse * add visitor * update * add arrow * fix property & callexpression bug * 整合全局方法 * fix callexpression bug * 调整代码 * update code * fix objectexpression bug * update whitelist * update test case * add test case * modify test case * add DOM * 修复 Identifier bug * 修复 Identifier bug * add mip-action * update code * add argument scope * 修改路径 * update path * 打通 action 数据传递 * fix mdata bug * fix element action bug * 增加兼容逻辑 * 重写 mip-bind 方法 * update code * add setData parse fallback * update bindStyle * update bindStyle * update bindStyle * 增加 watch * 增加 input 的双向绑定 * 删除无用文件 * 修改 mip-bin 入口 * update code * 拆分 bind.js * 拆分 mip-bind/bind.js * add input global event * update event action spec * 修复 style binding * remove only * update input global event and toggleVisibility * 去除 mip-shell/render.js 调用 MIP. 的逻辑 * change lexer from class to function * add test page * 优化 lexer 机制 * 修改 lexer 策略 * update test page * update unit test * 补 testcase * 补全 testcase * 修改 ArrayLiteral 对最后一个 comma 的处理 * 增加测试描述 * add unit test * add complex function testcase * fix scrollTO hidden element * fix can not find mip1 custom element action * 修复 setData 接收 Vue 响应式对象时疯狂报错的问题 * fix isObject * 修复 mip-bind 覆盖 MIP.setData 的bug * 修复 lgtm 所提示的循环中使用 splice 的问题 * fix lgtm alerts * 修复 bind & vnavigateTo 在 IOS8 下面无法正常工作的兼容性 bug * 移除 mip-img popup 对 loaded 的筛选 (#668) * 移除 mip-img popup 对 loaded 的筛选 * fix: hash 锚点追加的问题&pc 页面空白问题&添加百度 APP iOS 通信功能 * fix: hash 锚点追加的问题&pc 页面空白问题&添加百度 APP iOS 通信功能 * fix: hash 锚点追加的问题&pc 页面空白问题&添加百度 APP iOS 通信功能 * fix: hash 锚点追加的问题&pc 页面空白问题&添加百度 APP iOS 通信功能 * 修复 scrollToHash 当锚点的祖先存在�定位元素时不能滚动到锚点的问题 (#675) * [feat] mip-bind 功能升级 (#685) * add scoped mip-data * update mip-bind dom diff * 增加 mip-data 的 refresh * update dom watch * update dom watcher * change scoped to scope * 修复部分 test case * 优化报错信息 * fix docs * 增加单测覆盖率 * 补充 testcase * 新增 mip-data fetchjsonp 支持 * 去掉 mip-data 的 JSONP 支持
mipengine · Aug 27, 2019 · 6e98d19 · 6e98d19
1 parent 98c1468
commit 6e98d19
Show file tree

Hide file tree

Showing 19 changed files with 662 additions and 235 deletions.
diff --git a/docs/docs/interactive-mip/data-binding/global-data-definition.md b/docs/docs/interactive-mip/data-binding/global-data-definition.md
@@ -206,7 +206,7 @@ MIP 提供 SPA 的整站沉浸式的体验，如果要打造复杂的业务场
 2. 如果要修改的数据字段仅为页面数据，将不影响共享数据
 
     如：在 C 页面调用
-    `MIP.setData({'name': 'name-c'})`
+    `MIP.setData({'name': 'new-c'})`
 
     此时 C 页面可用的数据源为
     ```json

diff --git a/docs/docs/interactive-mip/data-binding/mip-bind.md b/docs/docs/interactive-mip/data-binding/mip-bind.md
@@ -247,13 +247,13 @@ export default {
     let selected = MIP.getData('selected')
     let index = selected.indexOf(newVal)
 
-    if (index) {
+    if (index !== -1) {
       selected.splice(index, 1)
     } else {
-      selected.push(index)
+      selected.push(newVal)
     }
 
-    MIP.setData('selectedStr', selected.join(','))
+    MIP.setData({'selectedStr': selected.join(',')})
   })
 </mip-script>
 ```
diff --git a/packages/mip/src/components/index.js b/packages/mip/src/components/index.js
@@ -12,6 +12,7 @@ import MipCarousel from './mip-carousel'
 import MipIframe from './mip-iframe'
 import MipPix from './mip-pix'
 import mipBindInit from './mip-bind/init'
+import MipDataWatch from './mip-bind/mip-data-watch'
 import MipData from './mip-bind/mip-data'
 import MipShell from './mip-shell/index'
 import MipFixed from './mip-fixed/index'
@@ -34,7 +35,7 @@ export default {
     registerElement('mip-video', MipVideo)
     registerElement('mip-fixed', MipFixed)
     mipBindInit()
-    // new MipBind()
+    registerElement('mip-data-watch', MipDataWatch)
     registerElement('mip-data', MipData)
     isMIPShellDisabled() || registerElement('mip-shell', MipShell)
   }

diff --git a/packages/mip/src/components/mip-bind/binding-attr.js b/packages/mip/src/components/mip-bind/binding-attr.js
@@ -28,12 +28,10 @@ export function bindingAttr (node, key, value, oldValue) {
   }
 
   let attr = key.slice(prefixLen)
-
   let prop = typeof value === 'object' ? JSON.stringify(value) : value
   if (prop === oldValue) {
     return prop
   }
-
   if (prop === '' || prop === undefined) {
     node.removeAttribute(attr)
   } else {
@@ -44,7 +42,6 @@ export function bindingAttr (node, key, value, oldValue) {
   } else if (BOOLEAN_ATTRS.indexOf(attr) > -1) {
     node[attr] = !!prop
   }
-
   return prop
 }
 
diff --git a/packages/mip/src/components/mip-bind/binding-dom-watcher.js b/packages/mip/src/components/mip-bind/binding-dom-watcher.js
@@ -0,0 +1,140 @@
+/**
+ * @file dom-watcher.js
+ * @author clark-t ([email protected])
+ */
+
+import { isElementNode } from '../../util/dom/dom'
+import {
+  traverse
+} from '../../util/fn'
+
+import {
+  isBindingAttr
+} from './binding'
+
+class DOMWatcher {
+  constructor () {
+    this.doms = []
+    this.watchers = []
+  }
+
+  watch (watcher) {
+    this.watchers.push(watcher)
+  }
+
+  add (doms) {
+    for (let dom of doms) {
+      this.doms.push(dom)
+    }
+  }
+
+  remove (doms) {
+    let tmps = doms.slice()
+    for (let i = this.doms.length - 1; i > -1; i--) {
+      for (let j = tmps.length - 1; j > -1; j--) {
+        if (this.doms[i].node === tmps[j].node) {
+          this.doms.splice(i, 1)
+          tmps.splice(j, 1)
+          break
+        }
+      }
+    }
+  }
+
+  update ({add: domList}) {
+    let bindings = []
+
+    for (let dom of domList) {
+      uniqueMerge(bindings, queryBindings(dom))
+    }
+
+    let changed = diffBindingDOMs(this.doms, bindings)
+
+    this.remove(changed.removed)
+    this.add(changed.add)
+
+    for (let watcher of this.watchers) {
+      watcher(changed, this.doms)
+    }
+  }
+}
+
+function uniqueMerge (oldList, newList) {
+  for (let i = 0; i < newList.length; i++) {
+    let len = oldList.length
+    let j = 0
+    for (j = 0; j < len; j++) {
+      if (oldList[j].node === newList[i].node) {
+        break
+      }
+    }
+    if (j === len) {
+      oldList.push(newList[i])
+    }
+  }
+  return oldList
+}
+
+function createBindingNodeWrapper (node, attrs) {
+  let wrapper = { node, attrs }
+  if (attrs) {
+    wrapper.keys = Object.keys(attrs)
+  }
+  return wrapper
+}
+
+function queryBindings (root) {
+  let results = []
+  traverse(root, node => {
+    /* istanbul ignore if */
+    if (!isElementNode(node)) {
+      return
+    }
+    let attrs = queryBindingAttrs(node)
+    attrs && results.push(createBindingNodeWrapper(node, attrs))
+    if (node.children) {
+      return Array.from(node.children)
+    }
+  })
+  return results
+}
+
+function queryBindingAttrs (node) {
+  let attrs
+  for (let i = 0; i < node.attributes.length; i++) {
+    let attr = node.attributes[i]
+    if (!isBindingAttr(attr.name)) {
+      continue
+    }
+    attrs = attrs || {}
+    attrs[attr.name] = {expr: attr.value}
+  }
+  return attrs
+}
+
+function diffBindingDOMs (storeList, newList) {
+  let output = {
+    removed: [],
+    add: newList.slice()
+  }
+
+  for (let i = storeList.length - 1; i > -1; i--) {
+    let stored = storeList[i]
+    if (!document.contains(stored.node)) {
+      output.removed.push(stored)
+      continue
+    }
+
+    for (let j = output.add.length - 1; j > -1; j--) {
+      if (stored.node === newList[j].node) {
+        output.add.splice(j, 1)
+        break
+      }
+    }
+  }
+
+  return output
+}
+
+export const instance = new DOMWatcher()
+
diff --git a/packages/mip/src/components/mip-bind/binding-value.js b/packages/mip/src/components/mip-bind/binding-value.js
@@ -0,0 +1,39 @@
+/**
+ * @file binding-value.js
+ * @author clark-t ([email protected])
+ */
+
+import { throttle } from '../../util/fn'
+import { createSetDataObject } from './util'
+
+export function addInputListener (add, store) {
+  const key = 'm-bind:value'
+
+  const FORM_ELEMENTS = [
+    'INPUT',
+    'TEXTAREA',
+    'SELECT'
+  ]
+
+  for (let info of add) {
+    let {node, attrs} = info
+    if (FORM_ELEMENTS.indexOf(node.tagName) === -1) {
+    // if (!FORM_ELEMENTS.includes(node.tagName)) {
+      continue
+    }
+
+    let expression = attrs[key] && attrs[key].expr
+
+    if (!expression) {
+      continue
+    }
+
+    const properties = expression.split('.')
+    const inputThrottle = throttle(function (e) {
+      let obj = createSetDataObject(properties, e.target.value)
+      store.set(obj)
+    }, 100)
+    node.addEventListener('input', inputThrottle)
+  }
+}
+
diff --git a/packages/mip/src/components/mip-bind/data-store.js b/packages/mip/src/components/mip-bind/data-store.js
@@ -7,6 +7,7 @@ import DataWatcher from './data-watcher'
 import GlobalData from './global-data'
 import { merge, getProperty } from './util'
 import { isObject } from '../../util/fn'
+
 export default class DataStore {
   constructor () {
     const storage = {}