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 { isWidget, isString } from "../2.base"; |
||||
|
||||
export let Element = class { |
||||
constructor(widget, attribs) { |
||||
this.l = this.r = this.t = this.b = 0; // 边框
|
||||
this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; // 间距
|
||||
this.position = {}; |
||||
this.classMap = {}; |
||||
this.classList = []; |
||||
this.children = []; |
||||
this.attribs = attribs || {}; |
||||
this.styles = {}; |
||||
// 兼容处理
|
||||
this["0"] = this; |
||||
this.style = {}; |
||||
if (!widget) { |
||||
this.nodeName = "body"; |
||||
this.position.x = 0; |
||||
this.position.y = 0; |
||||
this.attribs.id = "body"; |
||||
} else if (isWidget(widget)) { |
||||
this.widget = widget; |
||||
this.nodeName = widget.options.tagName; |
||||
this.textBaseLine = widget.options.textBaseLine; |
||||
} else if (isString(widget)) { |
||||
this.nodeName = widget; |
||||
} |
||||
export function Element(widget, attribs) { |
||||
this.l = this.r = this.t = this.b = 0; // 边框
|
||||
this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; // 间距
|
||||
this.position = {}; |
||||
this.classMap = {}; |
||||
this.classList = []; |
||||
this.children = []; |
||||
this.attribs = attribs || {}; |
||||
this.styles = {}; |
||||
// 兼容处理
|
||||
this["0"] = this; |
||||
this.style = {}; |
||||
if (!widget) { |
||||
this.nodeName = "body"; |
||||
this.position.x = 0; |
||||
this.position.y = 0; |
||||
this.attribs.id = "body"; |
||||
} else if (isWidget(widget)) { |
||||
this.widget = widget; |
||||
this.nodeName = widget.options.tagName; |
||||
this.textBaseLine = widget.options.textBaseLine; |
||||
} else if (isString(widget)) { |
||||
this.nodeName = widget; |
||||
} |
||||
} |
||||
|
||||
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(); |
||||
|
||||
return parent ? parent.getChildren() : [this]; |
||||
} |
||||
initElement(Element); |
||||
registFunction(Element); |
||||
|
||||
getChildren() { |
||||
return this.children; |
||||
} |
||||
function initElement(element) { |
||||
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 {}; |
||||
} |
||||
return parent ? parent.getChildren() : [this]; |
||||
}, |
||||
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