mmRouter
mmRouter copied to clipboard
Published
20 hours ago •
RubyLouvre
RubyLouvre
状态的迁移
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<script src="avalon.js"></script>
<meta name="viewport" content="width=device-width">
<script>
var rootState = {}
var Router = function() {
this.states = {
"": rootState
}
this.currentState = ""
this.stateArray = []
}
Router.prototype = {
add: function(obj) {
this.registerState(obj, true)
},
_getLevel: function(state) {
if (state == "") {
return 0
}
return state.split(".").length
},
_transitionTo: function(from, to) {
//情况1 "" T aaa
var curr = from
var fromList = []
do {
fromList.push(from)
} while ((from = this.states[from].parentNode) != null);
var toList = []
do {
toList.push(to)
} while ((to = this.states[to].parentNode) != null);
do {
if (fromList[fromList.length - 1] === toList[toList.length - 1]) {
fromList.pop()
toList.pop()
} else {
break
}
} while (true)
var array = fromList.concat(toList.reverse())
if (array[0] == curr) {
array.shift()
}
return array
}
,
transitionTo: function(to) {
var from = this.currentState
this.currentState = to
return this._transitionTo(from, to)
},
registerState: function(obj, recursive) {
var state = obj.state //这是一个字符串
var match = state.match(/([\.\w]+)\./) || ["", ""]
var parentNode = match[1]
obj.parentNode = parentNode
var parent = this.states[parentNode]
if (parent) {
parent.children = parent.children || []
avalon.Array.ensure(parent.children, obj)
this.states[state] = obj
avalon.Array.ensure(this.stateArray, obj)
}
if (recursive) {
for (var i = 0, el; el = this.stateArray[i++]; ) {
if (el !== obj)
this.registerState(el)
}
}
}
}
var router = new Router
router.add({state: "contacts"})
router.add({state: "contacts.list"})
router.add({state: "contacts.detail"})
router.add({state: "contacts.detail.item"})
router.add({state: "home"})
router.add({state: "home.eee"})
router.add({state: "abouts"})
console.log(router)
router.currentState = "home.eee"
var array = router.transitionTo("contacts.detail.item")
console.log(array)
</script>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
