Compare commits
No commits in common. 'master' and 'es6' have entirely different histories.
207 changed files with 2000 additions and 5403 deletions
@ -1,142 +0,0 @@ |
|||||||
<html> |
|
||||||
<head> |
|
||||||
<meta charset="utf-8"> |
|
||||||
<title></title> |
|
||||||
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/> |
|
||||||
<script src="../dist/2.0/fineui.js"></script> --> |
|
||||||
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/> |
|
||||||
<script src="http://localhost:9001/fineui.js"></script> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div id="wrapper"></div> |
|
||||||
<script> |
|
||||||
var ParentModel = BI.inherit(BI.Model, { |
|
||||||
state: function () { |
|
||||||
return { |
|
||||||
widget: { |
|
||||||
name: "触发arr和dims变化", |
|
||||||
arr: [], |
|
||||||
dims: [], |
|
||||||
} |
|
||||||
}; |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
'widget.**': function () { |
|
||||||
console.log(Math.random().toFixed(3) + ': widget.** changed'); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
childContext: ["widget"], |
|
||||||
|
|
||||||
}); |
|
||||||
BI.model("demo.model.parent", ParentModel); |
|
||||||
|
|
||||||
var Parent = BI.inherit(BI.Widget, { |
|
||||||
|
|
||||||
_store: function () { |
|
||||||
return BI.Models.getModel('demo.model.parent'); |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
|
||||||
return { |
|
||||||
type: "bi.vertical", |
|
||||||
bgap: 10, |
|
||||||
items: [{ |
|
||||||
type: 'bi.label', |
|
||||||
text: '父组件watch widget.**, 子组件watch了widget.arr, 修改widget中arr和dims的先后顺序不一样，会导致watch顺序不一样。' |
|
||||||
}, { |
|
||||||
type: 'bi.label', |
|
||||||
text: '不应该在修改属性，watch到修改后，还修改配置，或者使用同步watch把配置修改全' |
|
||||||
}, { |
|
||||||
type: 'demo.child' |
|
||||||
}], |
|
||||||
text: function () { |
|
||||||
return this.model.name; |
|
||||||
} |
|
||||||
}; |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.shortcut("demo.parent", Parent); |
|
||||||
|
|
||||||
var ChildModel = BI.inherit(BI.Model, { |
|
||||||
|
|
||||||
context: ["widget"], |
|
||||||
|
|
||||||
watch: { |
|
||||||
arr: { |
|
||||||
handler: function () { |
|
||||||
console.log(Math.random().toFixed(3) + ': arr changed'); |
|
||||||
}, |
|
||||||
sync: false // 改成true 同步watch 修改也行 |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
computed: { |
|
||||||
arr: function () { |
|
||||||
return this.model.widget.arr; |
|
||||||
}, |
|
||||||
dims: function () { |
|
||||||
return this.model.widget.dims; |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
actions: { |
|
||||||
addArrFirst: function () { |
|
||||||
// 修改arr在前，先触发arr的watch 再触发widget.**的监听 |
|
||||||
this.model.widget.arr.push(BI.UUID()); |
|
||||||
this.model.widget.dims.push(BI.UUID()); |
|
||||||
|
|
||||||
}, |
|
||||||
addDimFirst: function () { |
|
||||||
// 修改dim在前先执行 widget.** 再出发arr的watch |
|
||||||
this.model.widget.dims.push(BI.UUID()); |
|
||||||
this.model.widget.arr.push(BI.UUID()); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.model("demo.model.child", ChildModel); |
|
||||||
|
|
||||||
var Child = BI.inherit(BI.Widget, { |
|
||||||
|
|
||||||
_store: function () { |
|
||||||
return BI.Models.getModel('demo.model.child'); |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
|
||||||
var self = this; |
|
||||||
return { |
|
||||||
type: 'bi.left', |
|
||||||
rgap: 20, |
|
||||||
items: [{ |
|
||||||
type: "bi.button", |
|
||||||
text: '先修改widget.arr', |
|
||||||
handler: function () { |
|
||||||
self.store.addArrFirst(); |
|
||||||
} |
|
||||||
}, { |
|
||||||
type: "bi.button", |
|
||||||
text: '先修改widget.dims', |
|
||||||
handler: function () { |
|
||||||
self.store.addDimFirst(); |
|
||||||
} |
|
||||||
}] |
|
||||||
}; |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.shortcut("demo.child", Child); |
|
||||||
|
|
||||||
|
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.absolute", |
|
||||||
items: [{ |
|
||||||
el: { |
|
||||||
type: "demo.parent" |
|
||||||
}, |
|
||||||
top: 100, |
|
||||||
left: 100 |
|
||||||
}], |
|
||||||
element: "#wrapper" |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 898 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,78 +1,76 @@ |
|||||||
import { registFunction } from "./plugins"; |
import { registFunction } from "./plugins"; |
||||||
import { isWidget, isString } from "../2.base"; |
import { isWidget, isString } from "../2.base"; |
||||||
|
|
||||||
export let Element = class { |
export function Element(widget, attribs) { |
||||||
constructor(widget, attribs) { |
this.l = this.r = this.t = this.b = 0; // 边框
|
||||||
this.l = this.r = this.t = this.b = 0; // 边框
|
this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; // 间距
|
||||||
this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; // 间距
|
this.position = {}; |
||||||
this.position = {}; |
this.classMap = {}; |
||||||
this.classMap = {}; |
this.classList = []; |
||||||
this.classList = []; |
this.children = []; |
||||||
this.children = []; |
this.attribs = attribs || {}; |
||||||
this.attribs = attribs || {}; |
this.styles = {}; |
||||||
this.styles = {}; |
// 兼容处理
|
||||||
// 兼容处理
|
this["0"] = this; |
||||||
this["0"] = this; |
this.style = {}; |
||||||
this.style = {}; |
if (!widget) { |
||||||
if (!widget) { |
this.nodeName = "body"; |
||||||
this.nodeName = "body"; |
this.position.x = 0; |
||||||
this.position.x = 0; |
this.position.y = 0; |
||||||
this.position.y = 0; |
this.attribs.id = "body"; |
||||||
this.attribs.id = "body"; |
} else if (isWidget(widget)) { |
||||||
} else if (isWidget(widget)) { |
this.widget = widget; |
||||||
this.widget = widget; |
this.nodeName = widget.options.tagName; |
||||||
this.nodeName = widget.options.tagName; |
this.textBaseLine = widget.options.textBaseLine; |
||||||
this.textBaseLine = widget.options.textBaseLine; |
} else if (isString(widget)) { |
||||||
} else if (isString(widget)) { |
this.nodeName = widget; |
||||||
this.nodeName = widget; |
|
||||||
} |
|
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
appendChild(child) { |
initElement(Element); |
||||||
child.parent = this; |
registFunction(Element); |
||||||
if (this.children.push(child) !== 1) { |
|
||||||
const sibling = this.children[this.children.length - 2]; |
|
||||||
sibling.next = child; |
|
||||||
child.prev = sibling; |
|
||||||
child.next = null; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
append(child) { |
|
||||||
child.parent = this; |
|
||||||
if (this.children.push(child) !== 1) { |
|
||||||
const sibling = this.children[this.children.length - 2]; |
|
||||||
sibling.next = child; |
|
||||||
child.prev = sibling; |
|
||||||
child.next = null; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
getParent() { |
|
||||||
return this.parent; |
|
||||||
} |
|
||||||
|
|
||||||
getSiblings() { |
|
||||||
const parent = this.getParent(); |
|
||||||
|
|
||||||
return parent ? parent.getChildren() : [this]; |
|
||||||
} |
|
||||||
|
|
||||||
getChildren() { |
function initElement(element) { |
||||||
return this.children; |
element.prototype = { |
||||||
} |
appendChild(child) { |
||||||
|
child.parent = this; |
||||||
|
if (this.children.push(child) !== 1) { |
||||||
|
const sibling = this.children[this.children.length - 2]; |
||||||
|
sibling.next = child; |
||||||
|
child.prev = sibling; |
||||||
|
child.next = null; |
||||||
|
} |
||||||
|
}, |
||||||
|
append(child) { |
||||||
|
child.parent = this; |
||||||
|
if (this.children.push(child) !== 1) { |
||||||
|
const sibling = this.children[this.children.length - 2]; |
||||||
|
sibling.next = child; |
||||||
|
child.prev = sibling; |
||||||
|
child.next = null; |
||||||
|
} |
||||||
|
}, |
||||||
|
getParent() { |
||||||
|
return this.parent; |
||||||
|
}, |
||||||
|
getSiblings() { |
||||||
|
const parent = this.getParent(); |
||||||
|
|
||||||
getBounds() { |
return parent ? parent.getChildren() : [this]; |
||||||
return {}; |
}, |
||||||
} |
getChildren() { |
||||||
|
return this.children; |
||||||
|
}, |
||||||
|
|
||||||
width() {} |
getBounds() { |
||||||
|
return {}; |
||||||
|
}, |
||||||
|
|
||||||
height() {} |
width() { |
||||||
} |
|
||||||
|
|
||||||
registFunction(Element); |
}, |
||||||
|
height() { |
||||||
|
|
||||||
export function setElement(element) { |
}, |
||||||
Element = element; |
}; |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,96 @@ |
|||||||
|
/** |
||||||
|
* 用于 jquery 在 worker 环境或者 V8 引擎的 polyfill |
||||||
|
*/ |
||||||
|
// import { _global } from "@/core/0.foundation";
|
||||||
|
|
||||||
|
const _global = globalThis; |
||||||
|
|
||||||
|
const document = {}; |
||||||
|
const fakeElement = Object.create(document); |
||||||
|
|
||||||
|
Object.assign(document, { |
||||||
|
parentNode: null, |
||||||
|
nodeType: 9, |
||||||
|
head: fakeElement, |
||||||
|
body: fakeElement, |
||||||
|
ownerDocument: document, |
||||||
|
documentElement: document, |
||||||
|
toString() { |
||||||
|
return "FakeDocument"; |
||||||
|
}, |
||||||
|
appendChild(child) { |
||||||
|
return child; |
||||||
|
}, |
||||||
|
implementation: { |
||||||
|
createHTMLDocument() { |
||||||
|
return { |
||||||
|
body: { |
||||||
|
childNodes: [], |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
createDocumentFragment() { |
||||||
|
return this; |
||||||
|
}, |
||||||
|
}, |
||||||
|
getElementById() { |
||||||
|
return fakeElement; |
||||||
|
}, |
||||||
|
createElement() { |
||||||
|
return fakeElement; |
||||||
|
}, |
||||||
|
createDocumentFragment() { |
||||||
|
return this; |
||||||
|
}, |
||||||
|
cloneNode() { |
||||||
|
return this; |
||||||
|
}, |
||||||
|
getElementsByTagName() { |
||||||
|
return [fakeElement]; |
||||||
|
}, |
||||||
|
getElementsByClassName() { |
||||||
|
return [fakeElement]; |
||||||
|
}, |
||||||
|
setAttribute() { |
||||||
|
return null; |
||||||
|
}, |
||||||
|
getAttribute() { |
||||||
|
return null; |
||||||
|
}, |
||||||
|
removeChild() { |
||||||
|
return null; |
||||||
|
}, |
||||||
|
addEventListener() { |
||||||
|
return null; |
||||||
|
}, |
||||||
|
removeEventListener() { |
||||||
|
return null; |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
Object.assign(fakeElement, { |
||||||
|
nodeType: 1, |
||||||
|
style: {}, |
||||||
|
ownerDocument: document, |
||||||
|
parentNod: fakeElement, |
||||||
|
firstChild: fakeElement, |
||||||
|
lastChild: fakeElement, |
||||||
|
toString() { |
||||||
|
return "FakeElement"; |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
function polyfillProps(key, obj) { |
||||||
|
_global[key] = _global[key] || obj; |
||||||
|
if (typeof obj === "object") { |
||||||
|
try { |
||||||
|
Object.assign(_global[key], obj); |
||||||
|
} catch(err) { |
||||||
|
// _global[key] 可能只有 get 方法
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
_global.window = _global; |
||||||
|
polyfillProps("XMLHttpRequest", function () {}); |
||||||
|
polyfillProps("document", document); |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue