Browse Source

整理代码

es6
guy 3 years ago
parent
commit
f027ac1051
  1. 124
      examples/dev.html
  2. 142
      examples/插件设计.html
  3. 10
      src/core/wrapper/layout.js
  4. 2
      template/index.html

124
examples/dev.html

@ -9,85 +9,6 @@
<body>
<div id="wrapper"></div>
<script>
BI.config("demo.parent", function (config){
console.log("123");
return config;
}, {
version: "1.0"
});
BI.module("my.module", {
// version不设置的话默认就用接口的version作为判断条件
version: "1.0",
components: {
"demo.parent": "1.0"
}
})
// 主线代码里加这个
BI.config("bi.provider.system", function (provider) {
provider.addDependencies({
"my.module": {
minVersion: "2.0",
maxVersion: "4.0"
}
})
})
</script>
<script>
var Model = BI.inherit(Fix.Model, {
state: function () {
return {
expand: false
};
},
childContext: ["text"],
computed: {
text: function () {
return this.model.expand ? "text-yes" : "text-not";
}
},
actions: {
toggle: function () {
this.model.expand = !this.model.expand;
}
}
});
BI.model("demo.model", Model);
var ChildModel = BI.inherit(Fix.Model, {
context: ["text"]
});
BI.model("demo.child_model", ChildModel);
var Child = BI.inherit(BI.Widget, {
setup: function () {
var store = BI.useStore(function () {
return BI.Models.getModel("demo.child_model");
});
return {
render: function () {
return {
type: "bi.vertical",
items: [{
type: "bi.button",
text: store.model.text,
handler: function () {
console.log("click");
}
}, {
type: "bi.label",
text: store.model.text
}]
};
}
};
}
});
BI.shortcut("demo.child", Child);
var Widget = BI.inherit(BI.Widget, {
props: {
@ -99,27 +20,40 @@
}
},
setup: function () {
var child;
var store = BI.useStore(function () {
return BI.Models.getModel("demo.model");
});
setInterval(function () {
store.toggle();
}, 1000);
// BI.watch("text", function () {
// child.reset();
// });
var layout;
return function () {
return {
type: "bi.vertical",
vgap: store.model.expand ? 20 : 30,
type: "bi.left",
items: [{
type: "demo.child",
ref: function (_ref) {
child = _ref;
type: "bi.button",
text: "点击",
handler: function () {
debugger;
layout.populate([{
type: "bi.label",
key: "1",
text: 1
}, {
type: "bi.label",
key: "2",
text: 2
}])
}
}, {
type: "demo.child"
type: "bi.left",
lgap: 10,
items: [{
type: "bi.label",
key: "123",
text: 1
}, {
type: "bi.label",
key: "245",
text: 2
}],
ref: function (_ref) {
layout = _ref;
}
}]
};
};

142
examples/插件设计.html

@ -0,0 +1,142 @@
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<!-- <script src="../dist/2.0/fineui.js"></script>-->
<script src="http://localhost:9001/fineui.js"></script>
</head>
<body>
<div id="wrapper"></div>
<script>
BI.config("demo.parent", function (config){
console.log("123");
return config;
}, {
version: "1.0"
});
BI.module("my.module", {
// version不设置的话默认就用接口的version作为判断条件
version: "1.0",
components: {
"demo.parent": "1.0"
}
})
// 主线代码里加这个
BI.config("bi.provider.system", function (provider) {
provider.addDependencies({
"my.module": {
minVersion: "2.0",
maxVersion: "4.0"
}
})
})
</script>
<script>
var Model = BI.inherit(Fix.Model, {
state: function () {
return {
expand: false
};
},
childContext: ["text"],
computed: {
text: function () {
return this.model.expand ? "text-yes" : "text-not";
}
},
actions: {
toggle: function () {
this.model.expand = !this.model.expand;
}
}
});
BI.model("demo.model", Model);
var ChildModel = BI.inherit(Fix.Model, {
context: ["text"]
});
BI.model("demo.child_model", ChildModel);
var Child = BI.inherit(BI.Widget, {
setup: function () {
var store = BI.useStore(function () {
return BI.Models.getModel("demo.child_model");
});
return {
render: function () {
return {
type: "bi.vertical",
items: [{
type: "bi.button",
text: store.model.text,
handler: function () {
console.log("click");
}
}, {
type: "bi.label",
text: store.model.text
}]
};
}
};
}
});
BI.shortcut("demo.child", Child);
var Widget = BI.inherit(BI.Widget, {
props: {
vdom: true
},
watch: {
text: function () {
this.reset();
}
},
setup: function () {
var child;
var store = BI.useStore(function () {
return BI.Models.getModel("demo.model");
});
setInterval(function () {
store.toggle();
}, 1000);
// BI.watch("text", function () {
// child.reset();
// });
return function () {
return {
type: "bi.vertical",
vgap: store.model.expand ? 20 : 30,
items: [{
type: "demo.child",
ref: function (_ref) {
child = _ref;
}
}, {
type: "demo.child"
}]
};
};
}
});
BI.shortcut("demo.parent", Widget);
BI.createWidget({
type: "bi.absolute",
items: [{
el: {
type: "demo.parent"
},
top: 100,
left: 100
}],
element: "#wrapper"
});
</script>
</body>
</html>

10
src/core/wrapper/layout.js

@ -441,10 +441,10 @@ BI.Layout = BI.inherit(BI.Widget, {
} else {
var sameOldVnode = findOldVnode(oldCh, newStartVnode, oldStartIdx, oldEndIdx);
if (BI.isNull(sameOldVnode)) { // 不存在就把新的放到左边
delete self._children[self._getChildName(newStartIdx)];
var node = addNode(newStartVnode, newStartIdx);
insertBefore(node, oldStartVnode);
newStartVnode = newCh[++newStartIdx];
} else { // 如果新节点在就旧节点区间中存在就复用一下
} else { // 如果新节点在旧节点区间中存在就复用一下
BI.each(oldCh, function (index, child) {
if (child && sameVnode(child, newStartVnode)) {
updated = self.patchItem(sameOldVnode, newStartVnode, index, index) || updated;
@ -453,8 +453,8 @@ BI.Layout = BI.inherit(BI.Widget, {
insertBefore(sameOldVnode, oldStartVnode);
}
});
newStartVnode = newCh[++newStartIdx];
}
newStartVnode = newCh[++newStartIdx];
}
}
if (oldStartIdx > oldEndIdx) {
@ -486,7 +486,7 @@ BI.Layout = BI.inherit(BI.Widget, {
function addNode (vnode, index) {
var opt = self._getOptions(vnode);
var key = opt.key == null ? index : opt.key;
return children[key] = self._addElement(key, vnode);
return children[key] = self._addElement(index, vnode);
}
function addVnodes (before, vnodes, startIdx, endIdx) {
@ -502,7 +502,7 @@ BI.Layout = BI.inherit(BI.Widget, {
if (BI.isNotNull(ch)) {
var node = self._getOptions(ch);
var key = node.key == null ? startIdx : node.key;
delete self._children[self._getChildName(key)];
delete self._children[self._getChildName(startIdx)];
children[key]._destroy();
}
}

2
template/index.html

@ -10,6 +10,8 @@
</head>
<body>
<div id="wrapper"></div>
</body>
<script src="../dist/router.js"></script>
</html>

Loading…
Cancel
Save