《单页Web应用 JavaScript从前端到后端》的第三章提到了这个JQuery插件,但是书上提到的信息很少,所以我去github查看了该项目,学习后,发现好像有一些坑,特意来记录一下.
urianchor主页

$.uriAnchor.setAnchor()方法

使用一个映射来修改anchor的值
有三个参数:
1. anchor_map: 这个映射会被编码到URL中
2. option_map: 映射的选项
3. replace_flag: 布尔值.当为ture时,这个方法会替换掉URI,所以前一个URL不会出现在浏览器的历史中.

anchor_map的使用

示例:

$.uriAnchor.setAnchor({
    page   : 'profile',
    slider : 'confirm',
    color  : 'red'
});

输出:

#!page=profile&slider=confirm&color=red

上面的参数是各自独立的,也可以使用依赖值(dependent values)–它的值取决于其他的值.依赖值带有”_”前缀并且和对应的独立值同名,而独立值没有该前缀.

$.uriAnchor.setAnchor({
    page   : 'profile',
    _page  : {
    uname   : 'wendy',
    online  : 'today'
  }
});

输出:

#!page=profile:uname,wendy|online,today

option_map的使用

这是第二个参数,提供了一些设置分隔符(delimiters)的选项.我没用过,大家随意看看

delimit_char : Delimiter between independent args. Default is &.
delimit_kv_char: Delimiter between key and value of independent args. Default is =.
sub_delimit_char : Delimiter between independent and dependent args. Defaults is :.
dep_delimit_char : Delimiter between key-value pairs in dependent args. Default is |.
dep_kv_delimit_char : Delimiter between key and value of dependent args. Default is ‘,’

replace_flag
这个很简单,没啥好说的

$uriAnchor.configModule()方法

接下来才是重点,这就是坑的地方
先贴一下urianchor主页里的教程:

Validation:

As of 1.0, the ability to optionally check the validity of the Anchor against a schema has been included. Since we don’t expect the allowable schema to change during run-time, we use a module configuration to set the schema, like so:

$uriAnchor.configModule({
  schema_map : {
    page    : { profile : true, pdf : true },
    _page   : {
      uname   : true,
      online  : [ 'today','yesterday','earlier' ]
    },
    slider  : { confirm : 'deny' },
    _slider : { text : 'goodbye' },
    color   : { red : true, green : true, blue : true }
  }
});

大概意思是说,urianchor提供了一种方法,通过使用方案(schema)来验证anchor的正确性.
但是问题在于官方给大说法很模糊,难以理解到底怎么使用,后来我查看了如下回答,然后找到了答案.

原提问地址:http://stackoverflow.com/questions/25840457/jquery-library-urianchor-i…

拿一个简单的例子来看看,假如我如下调用configModule()方法

$.uriAnchor.configModule({
  schema_map: {
    page: 'yes',
    slider: 3,
    color: true
  }
});

先进行这种设置,

$.uriAnchor.setAnchor({
  page   : 'profile',
  slider : 'confirm',
  color  : 'white'
});

输出:

#!page=profile&slider=confirm&color=white

再换另一个设置

$.uriAnchor.setAnchor({
  page   : 'profile',
  slider : 'confirm',
  color  : 'white',
  test: 'test'
});

输出(报错了):

$.uriAnchor.setAnchor({   page   : 'profile',   s...confirm',   color  : 'white',   test: 'test' });
    Anchor Schema Reject: Independent key |test| not authorized by anchor schema
    var error     = new Error();

如果你直接看,你会发现你很难理解configModule()方法到底是怎么生效的.其实是这样的,在configModule()方法中,如果你允许给某个键设置值,那么就在configModule()方法中进行设置,例如:

color: true

但是为什么这个也能生效呢?

page: 'yes'

‘yes’又是怎么回事?其实configModule()方法需要的就是一个真值(true),如果右边的值能够转行为真值,那么configModule方法就接受它,我觉得,还是直接设置为true会比较清晰.另外,你也可以显式的把某个键设置为false,不过这没必要.
(上面提到的原提问地址里面的回答提到依赖值就算没有在configModule()方法里面设置为true也不会导致报错,今天我试了一下发现回报错了,应该是作者修复了这个问题)

$.uriAnchor.makeAnchorMap()方法

分析URL并生成一个映射,这个方法会在返回的映射里面为带有依赖值的独立值创建额外的键_s_<indendent_arg>,这些额外的键的值是一个独立值后面跟着所有的依赖值.

示例:
假如有如下anchor,

#!page=profile:uname,wendy|online,true&slider=confirm:text,hello|pretty,false&color=red

输出:

{ page : 'profile',
  _page : {
    uname   : 'wendy',
    online  : 'true'
  },
  _s_page : 'profile:uname,wendy|online,true',
  slider  : 'confirm',
  _slider : {
   text   : 'hello',
   pretty : false
  },
  _s_slider : 'confirm:text,hello|pretty,false',
  color : 'red'
};

我的感觉是这个插件有bug,因为在我的linux firefox 37和chrome 41中测试,发现没有依赖值的独立值color也返回了_s_color: “red”,实际上我的输出如下

[2015.04.19]
好吧,这个不是bug,作者说这是一个特性
https://github.com/mmikowski/urianchor/issues/7#issuecomment-92168863