avalon模块：依赖链 #18
Comments
|
新的依赖链推导
var list = []
var a = function(){
list.push("a")
}
var b = function(){
list.push("b")
}
var c = function(){
list.push("c")
}
var d = function(){
list.push("d")
list.push("[");//注册e
a();
b();
list.push("]");//注册e
}
var e = function(){
list.push("e")
list.push("[");//注册e
d();
c()
list.push("]")
}
e();
console.log(list)
|
|
依赖链V3，使用了能往后回退的链表 var cur, ID = 1;
var registry = {}
var dependent = {}
var detect = {
begin: function( field ){
var uuid = detect.register( field )
if( cur ){
cur[uuid] = field
}
//用于收集依赖
var prev = cur;
cur = dependent[uuid];
cur.prev = prev
},
register: function( field ){
var uuid = field.observableID
if(!uuid || !registry[uuid] ){
field.observableID = uuid = "observable" +(++ID);
registry[uuid] = field;//供发布者使用
dependent[uuid] = {};//收集依赖
field.list = []
field.ensure = function(d){
if(field.list.indexOf(d) == -1){
field.list.push(d);
}
}
}
return uuid;
},
add: function( field ){
if(cur){
var uuid = detect.register( field )
cur[ uuid ] = field;
}
},
end: function( field ){
var deps = dependent[ field.observableID ] || {};
cur = deps.prev;
for(var key in deps){
if(deps.hasOwnProperty(key) && (key != "prev")){
var low = registry[key];
low.ensure(field)
}
}
console.log(deps)
}
}
var a = function(){
detect.add(a)
}
var b = function(){
detect.add(b)
}
var c = function(){
detect.begin(c)
a();
b();
detect.end(c)
}
var d = function(){
detect.begin(d)
c();
detect.end(d)
}
d()
执行完毕后，得到各函数的依赖情况！ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>mass Framework</title>
<script type="text/javascript" src="../src/mass.js" charset="UTF-8"></script>
<script type="text/javascript" src="ko.js" charset="UTF-8"></script>
</head>
<body>
<script type="text/javascript">
$.require("ready,more/avalon",function(){
var mode = {
people: $.observableArray([
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
])
}
$.applyBindings(mode);
setTimeout(function(){
mode.people.push({
firstName: 'XXX', lastName: 'CCC'
});
},1000);
setTimeout(function(){
mode.people.slice(2,4)
},2000);
});
</script>
<div>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName">XXX</td>
<td data-bind="text: lastName">YYY</td>
</tr>
</tbody>
</table>
</table>
</div>
</body>
</html>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
依赖链是MVVM的核心之一，由$.observable,$.observableArray与$ .computed组成。它们都返回一种叫field的可读写函数，来操作用户的数据！
The text was updated successfully, but these errors were encountered: