摘要：單頁應用從前端到后端的第三章提到了這個插件但是書上提到的信息很少所以我去查看了該項目學習后發現好像有一些坑特意來記錄一下主頁方法使用一個映射來修改的值有三個參數這個映射會被編碼到中映射的選項布爾值當為時這個方法會替換掉所以前一個不會出現在瀏

《單頁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