《单页Web应用 JavaScript从前端到后端》的第三章提到了这个JQuery插件,但是书上提到的信息很少,所以我去github查看了该项目,学习后,发现好像有一些坑,特意来记录一下.
urianchor主页
$.uriAnchor.setAnchor()方法
使用一个映射来修改anchor的值
有三个参数:
- anchor_map: 这个映射会被编码到URL中
- option_map: 映射的选项
- 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,作者说这是一个特性
https://github.com/mmikowski/urianchor/issues/7#issuecomment-92168863
