《单页Web应用 JavaScript从前端到后端》的第三章提到了这个JQuery插件,但是书上提到的信息很少,所以我去github查看了该项目,学习后,发现好像有一些坑,特意来记录一下.
$.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的正确性.
但是问题在于官方给大说法很模糊,难以理解到底怎么使用,后来我查看了如下回答,然后找到了答案.原提问地址:
拿一个简单的例子来看看,假如我如下调用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,作者说这是一个特性