fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

Pull request #2012: 无JIRA任务 支持虚拟dom 

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit '7005c744b85d4335a22c438f10ba802a9efc8afb':
  add
  add
  虚拟dom
es6
guy 3 years ago
parent
62c5593361 7005c744b8
commit
a28634183d
7 changed files with 1155 additions and 167 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      changelog.md
  2. 71
      dist/fix/fix.compact.ie.js
  3. 71
      dist/fix/fix.compact.js
  4. 20
      examples/dev.html
  5. 50
      src/core/4.widget.js
  6. 1052
      src/core/8.snabdom.js
  7. 42
      src/core/element2Snabbdom.js

2
changelog.md
Unescape View File

@ -1,5 +1,6 @@
# 更新日志 # 更新日志
2.0(2021-07) 2.0(2021-07)
- 支持虚拟dom
- 修复了树控件节点未初始化时调用树的getValue始终为空的问题 - 修复了树控件节点未初始化时调用树的getValue始终为空的问题
2.0(2021-05) 2.0(2021-05)
@ -13,7 +14,6 @@
- 时间类型控件优化动态时间面板的交互 - 时间类型控件优化动态时间面板的交互
2.0(2021-02) 2.0(2021-02)
- 增加updateModel属性，可以配置自动模式，自动watch属性并响应变化
- 增加beforeRender生命周期函数 - 增加beforeRender生命周期函数
2.0(2021-01) 2.0(2021-01)

71
dist/fix/fix.compact.ie.js vendored
Unescape View File

@ -163,77 +163,6 @@
needPop && popTarget(); needPop && popTarget();
}; };
// BI.Widget.prototype._initElement = function () {
// var self = this;
// var render = BI.isFunction(this.options.render) ? this.options.render : this.render;
// var els;
// if (this.options.updateMode === "auto" && this._store) {
// // 自动更新模式
// var childComponents = {};
// var rendered = false;
// this._watchers.push(Fix.watch(this.model, function () {
// if (rendered) {
// var newEls = render && render.call(this);
// BI.each(childComponents, function (i, childComponent) {
// if (childComponent.component instanceof BI.Layout) {
// return; // 布局的过滤掉
// }
// var nextProps = BI.get([newEls], childComponent.path);
// if (nextProps) {
// var shouldUpdate = childComponent.component.shouldUpdate && childComponent.component.shouldUpdate(nextProps);
// childComponent.component._update(nextProps, shouldUpdate);
// childComponent.props = BI.extend(childComponent.props, nextProps);
// }
// });
// } else {
// els = render && render.call(this);
//
// function traverse (parent, path) {
// BI.each(parent, function (i, child) {
// var childPath = path.concat(i);
// if (BI.isArray(child)) {
// traverse(child, childPath);
// } else if (BI.isPlainObject(child)) {
// if (child.type) {
// child.__ref = function (_ref) {
// if (_ref) {
// var comp = childComponents[this.getName()] = {};
// comp.component = _ref;
// comp.props = child;
// comp.path = childPath;
// } else {
// delete childComponents[this.getName()];
// }
// };
// }
// traverse(child, childPath);
// }
// });
// }
//
// traverse([els], []);
// rendered = true;
// }
// }));
// } else {
// els = render && render.call(this);
// }
// if (BI.isPlainObject(els)) {
// els = [els];
// }
// if (BI.isArray(els)) {
// BI.each(els, function (i, el) {
// if (el) {
// BI._lazyCreateWidget(el, {
// element: self
// });
// }
// });
// }
// // if (this._isRoot === true || !(this instanceof BI.Layout)) {
// this._mount();
// };
var unMount = BI.Widget.prototype.__d; var unMount = BI.Widget.prototype.__d;
BI.Widget.prototype.__d = function () { BI.Widget.prototype.__d = function () {
unMount.apply(this, arguments); unMount.apply(this, arguments);

71
dist/fix/fix.compact.js vendored
Unescape View File

@ -163,77 +163,6 @@
needPop && popTarget(); needPop && popTarget();
}; };
// BI.Widget.prototype._initElement = function () {
// var self = this;
// var render = BI.isFunction(this.options.render) ? this.options.render : this.render;
// var els;
// if (this.options.updateMode === "auto" && this._store) {
// // 自动更新模式
// var childComponents = {};
// var rendered = false;
// this._watchers.push(Fix.watch(this.model, function () {
// if (rendered) {
// var newEls = render && render.call(this);
// BI.each(childComponents, function (i, childComponent) {
// if (childComponent.component instanceof BI.Layout) {
// return; // 布局的过滤掉
// }
// var nextProps = BI.get([newEls], childComponent.path);
// if (nextProps) {
// var shouldUpdate = childComponent.component.shouldUpdate && childComponent.component.shouldUpdate(nextProps);
// childComponent.component._update(nextProps, shouldUpdate);
// childComponent.props = BI.extend(childComponent.props, nextProps);
// }
// });
// } else {
// els = render && render.call(this);
//
// function traverse (parent, path) {
// BI.each(parent, function (i, child) {
// var childPath = path.concat(i);
// if (BI.isArray(child)) {
// traverse(child, childPath);
// } else if (BI.isPlainObject(child)) {
// if (child.type) {
// child.__ref = function (_ref) {
// if (_ref) {
// var comp = childComponents[this.getName()] = {};
// comp.component = _ref;
// comp.props = child;
// comp.path = childPath;
// } else {
// delete childComponents[this.getName()];
// }
// };
// }
// traverse(child, childPath);
// }
// });
// }
//
// traverse([els], []);
// rendered = true;
// }
// }));
// } else {
// els = render && render.call(this);
// }
// if (BI.isPlainObject(els)) {
// els = [els];
// }
// if (BI.isArray(els)) {
// BI.each(els, function (i, el) {
// if (el) {
// BI._lazyCreateWidget(el, {
// element: self
// });
// }
// });
// }
// // if (this._isRoot === true || !(this instanceof BI.Layout)) {
// this._mount();
// };
var unMount = BI.Widget.prototype.__d; var unMount = BI.Widget.prototype.__d;
BI.Widget.prototype.__d = function () { BI.Widget.prototype.__d = function () {
try { try {

20
examples/dev.html
Unescape View File

@ -48,7 +48,10 @@
type: "bi.vertical", type: "bi.vertical",
items: [{ items: [{
type: "bi.button", type: "bi.button",
text: store.model.text text: store.model.text,
handler: function () {
console.log("click");
}
}, { }, {
type: "bi.label", type: "bi.label",
text: store.model.text text: store.model.text
@ -62,7 +65,12 @@
var Widget = BI.inherit(BI.Widget, { var Widget = BI.inherit(BI.Widget, {
props: { props: {
updateMode: "auto" vdom: true
},
watch: {
text: function () {
this.reset();
}
}, },
setup: function () { setup: function () {
var child; var child;
@ -72,13 +80,13 @@
setInterval(function () { setInterval(function () {
store.toggle(); store.toggle();
}, 1000); }, 1000);
BI.watch("text", function () { // BI.watch("text", function () {
child.reset(); // child.reset();
}); // });
return function () { return function () {
return { return {
type: "bi.vertical", type: "bi.vertical",
vgap: 20, vgap: store.model.expand ? 20 : 30,
items: [{ items: [{
type: "demo.child", type: "demo.child",
ref: function (_ref) { ref: function (_ref) {

50
src/core/4.widget.js
Unescape View File

@ -38,7 +38,8 @@
extraCls: "", extraCls: "",
cls: "", cls: "",
css: null, css: null,
updateMode: "manual" // manual / auto
vdom: false,
}); });
}, },
@ -165,6 +166,7 @@
this.element = BI.Widget._renderEngine.createElement(this); this.element = BI.Widget._renderEngine.createElement(this);
} }
this.element._isWidget = true; this.element._isWidget = true;
(this.element[0]._Widgets = this.element[0]._Widgets || []).push(this);
this._initCurrent(); this._initCurrent();
}, },
@ -216,6 +218,13 @@
els = [els]; els = [els];
} }
if (BI.isArray(els)) { if (BI.isArray(els)) {
if (this.options.vdom) {
this.vnode = this._renderVNode();
var div = document.createElement("div");
this.element.append(div);
BI.patchVNode(div, this.vnode);
// this.element = $(div);
} else {
BI.each(els, function (i, el) { BI.each(els, function (i, el) {
if (el) { if (el) {
BI._lazyCreateWidget(el, { BI._lazyCreateWidget(el, {
@ -224,14 +233,36 @@
} }
}); });
} }
}
this._mount(); this._mount();
if (this.__async === true && isMounted) { if (this.__async === true && isMounted) {
callLifeHook(this, "mounted"); callLifeHook(this, "mounted");
this.fireEvent(BI.Events.MOUNT); this.fireEvent(BI.Events.MOUNT);
} }
}, },
_renderVNode: function () {
var self = this;
var render = BI.isFunction(this.options.render) ? this.options.render : this.render;
var els = render && render.call(this);
if (BI.isPlainObject(els)) {
els = [els];
}
if (BI.isArray(els)) {
var container = document.createElement("div");
this._children = {};
BI.each(els, function (i, el) {
if (el) {
var w = BI._lazyCreateWidget(el, {
element: container,
});
self.addWidget(w);
}
});
}
return BI.Element2Snabbdom(container);
},
_setParent: function (parent) { _setParent: function (parent) {
this._parent = parent; this._parent = parent;
}, },
@ -290,15 +321,6 @@
callLifeHook(this, "beforeUpdate"); callLifeHook(this, "beforeUpdate");
if (shouldUpdate) { if (shouldUpdate) {
var res = this.update && this.update(nextProps, shouldUpdate); var res = this.update && this.update(nextProps, shouldUpdate);
} else if (BI.isNull(shouldUpdate)) {
// 默认使用shallowCompare的方式进行更新
var nextChange = {};
BI.each(nextProps, function (key, value) {
if (o[key] !== value) {
nextChange[key] = value;
}
});
var res = this.update && BI.isNotEmptyObject(nextChange) && this.update(nextChange);
} }
callLifeHook(this, "updated"); callLifeHook(this, "updated");
return res; return res;
@ -578,6 +600,12 @@
if (this.__async === true || this.__asking === true) { if (this.__async === true || this.__asking === true) {
return; return;
} }
if (this.options.vdom) {
var vnode = this._renderVNode();
BI.patchVNode(this.vnode, vnode);
this.vnode = vnode;
return;
}
// this._isMounted = false; // this._isMounted = false;
// this.purgeListeners(); // this.purgeListeners();
this._empty(); this._empty();

1052
src/core/8.snabdom.js
View File

File diff suppressed because it is too large Load Diff

42
src/core/element2Snabbdom.js
Unescape View File

@ -0,0 +1,42 @@
!function () {
var patch = BI.Snabbdom.init([BI.Snabbdom.attributesModule, BI.Snabbdom.classModule, BI.Snabbdom.datasetModule, BI.Snabbdom.propsModule, BI.Snabbdom.styleModule, BI.Snabbdom.eventListenersModule]);
BI.Element2Snabbdom = function (parentNode) {
if (parentNode.nodeType === 3) {
return parentNode.textContent;
}
var data = BI.jQuery._data(parentNode);
var on = {};
BI.each(data && data.events, function (eventName, events) {
on[eventName] = function () {
var ob = this, args = arguments;
BI.each(events, function (i, ev) {
ev.handler.apply(ob, args);
});
};
});
var style = parentNode.getAttribute("style");
// var claz = parentNode.getAttribute("class");
var vnode = BI.Snabbdom.h(parentNode.nodeName, {
class: BI.makeObject(parentNode.classList),
props: {
style: style
},
on: on,
hook: {
create: function () {
BI.each(parentNode._Widgets, function (i, w) {
w.element = BI.Widget._renderEngine.createElement(vnode.elm);
});
}
}
}, BI.map(parentNode.childNodes, function (i, childNode) {
return BI.Element2Snabbdom(childNode);
}));
return vnode;
};
BI.patchVNode = function (element, node) {
patch(element, node);
};
}();
Write Preview
Loading…
Cancel
Save