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
commit
a28634183d
  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. 64
      src/core/4.widget.js
  6. 1052
      src/core/8.snabdom.js
  7. 42
      src/core/element2Snabbdom.js

2
changelog.md

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

71
dist/fix/fix.compact.ie.js vendored

@ -163,77 +163,6 @@
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;
BI.Widget.prototype.__d = function () {
unMount.apply(this, arguments);

71
dist/fix/fix.compact.js vendored

@ -163,77 +163,6 @@
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;
BI.Widget.prototype.__d = function () {
try {

20
examples/dev.html

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

64
src/core/4.widget.js

@ -38,7 +38,8 @@
extraCls: "",
cls: "",
css: null,
updateMode: "manual" // manual / auto
vdom: false,
});
},
@ -165,6 +166,7 @@
this.element = BI.Widget._renderEngine.createElement(this);
}
this.element._isWidget = true;
(this.element[0]._Widgets = this.element[0]._Widgets || []).push(this);
this._initCurrent();
},
@ -216,22 +218,51 @@
els = [els];
}
if (BI.isArray(els)) {
BI.each(els, function (i, el) {
if (el) {
BI._lazyCreateWidget(el, {
element: self
});
}
});
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) {
if (el) {
BI._lazyCreateWidget(el, {
element: self
});
}
});
}
}
this._mount();
if (this.__async === true && isMounted) {
callLifeHook(this, "mounted");
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) {
this._parent = parent;
},
@ -290,15 +321,6 @@
callLifeHook(this, "beforeUpdate");
if (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");
return res;
@ -578,6 +600,12 @@
if (this.__async === true || this.__asking === true) {
return;
}
if (this.options.vdom) {
var vnode = this._renderVNode();
BI.patchVNode(this.vnode, vnode);
this.vnode = vnode;
return;
}
// this._isMounted = false;
// this.purgeListeners();
this._empty();

1052
src/core/8.snabdom.js

File diff suppressed because it is too large Load Diff

42
src/core/element2Snabbdom.js

@ -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);
};
}();
Loading…
Cancel
Save