StateMan: 一个用于创建复杂层级状态SPA的路由库
jopen
10年前
用于构建复杂单页应用的路由库，独立无依赖， 这里有结合regularjs的单页应用的例子。
目前已经用于部分网易的产品中. 兼容 IE6+。中文参考手册
Feature
- nested routing support.
- standalone with tiny codebase.
- async routing support if you need asynchronous logic in navigating.
- html5 history supported, fallback to hash-based in old browser.
- concise API, deadly simple to getting start with it.
- support IE6+ and other modern browsers.
- well tested, born in large product.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>StateMan Test</title> <script src="https://rawgit.com/leeluolee/stateman/master/stateman.js"></script> </head> <body> <ul> <li><a href="#/home">/home"</a></li> <li><a href="#/contact">/contact"</a></li> <li><a href="#/contact/list">/contact/list</a></li> <li><a href="#/contact/2">/contact/2</a></li> <li><a href="#/contact/2/option">/contact/2/option</a></li> <li><a href="#/contact/2/message">/contact/2/message</a></li> </ul> <script> var config = { enter: function(){ console.log("enter: " + this.name) }, leave: function(){ console.log("leave: " + this.name) } } function create(o){ o = o || {}; o.enter= config.enter; o.leave = config.leave; return o; } var stateman = new StateMan(); stateman .state("home", config) .state("contact", config) .state("contact.list", config ) .state("contact.detail", create({url: ":id(\\d+)"})) .state("contact.detail.option", config) .state("contact.detail.message", config) .start({}); </script> </body> </html>