urianchor

摘要：单页应用从前端到后端的第三章提到了这个插件但是书上提到的信息很少所以我去查看了该项目学习后发现好像有一些坑特意来记录一下主页方法使用一个映射来修改的值有三个参数这个映射会被编码到中映射的选项布尔值当为时这个方法会替换掉所以前一个不会出现在浏

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

使用一个映射来修改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主页里的教程:

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也不会导致报错,今天我试了一下发现回报错了,应该是作者修复了这个问题)

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

示例:
假如有如下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