摘要：?jiǎn)雾?yè)應(yīng)用從前端到后端的第三章提到了這個(gè)插件但是書(shū)上提到的信息很少所以我去查看了該項(xiàng)目學(xué)習(xí)后發(fā)現(xiàn)好像有一些坑特意來(lái)記錄一下主頁(yè)方法使用一個(gè)映射來(lái)修改的值有三個(gè)參數(shù)這個(gè)映射會(huì)被編碼到中映射的選項(xiàng)布爾值當(dāng)為時(shí)這個(gè)方法會(huì)替換掉所以前一個(gè)不會(huì)出現(xiàn)在瀏

《單頁(yè)Web應(yīng)用 JavaScript從前端到后端》的第三章提到了這個(gè)JQuery插件,但是書(shū)上提到的信息很少,所以我去github查看了該項(xiàng)目,學(xué)習(xí)后,發(fā)現(xiàn)好像有一些坑,特意來(lái)記錄一下.
urianchor主頁(yè)

使用一個(gè)映射來(lái)修改anchor的值
有三個(gè)參數(shù):
1. anchor_map: 這個(gè)映射會(huì)被編碼到URL中
2. option_map: 映射的選項(xiàng)
3. replace_flag: 布爾值.當(dāng)為ture時(shí),這個(gè)方法會(huì)替換掉URI,所以前一個(gè)URL不會(huì)出現(xiàn)在瀏覽器的歷史中.

anchor_map的使用

示例:

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

輸出:

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

上面的參數(shù)是各自獨(dú)立的,也可以使用依賴(lài)值(dependent values)--它的值取決于其他的值.依賴(lài)值帶有"_"前綴并且和對(duì)應(yīng)的獨(dú)立值同名,而獨(dú)立值沒(méi)有該前綴.

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

輸出:

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

option_map的使用

這是第二個(gè)參數(shù),提供了一些設(shè)置分隔符(delimiters)的選項(xiàng).我沒(méi)用過(guò),大家隨意看看

  
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
這個(gè)很簡(jiǎn)單,沒(méi)啥好說(shuō)的

接下來(lái)才是重點(diǎn),這就是坑的地方
先貼一下urianchor主頁(yè)里的教程:

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 }
  }
});

大概意思是說(shuō),urianchor提供了一種方法,通過(guò)使用方案(schema)來(lái)驗(yàn)證anchor的正確性.
但是問(wèn)題在于官方給大說(shuō)法很模糊,難以理解到底怎么使用,后來(lái)我查看了如下回答,然后找到了答案.

原提問(wèn)地址:http://stackoverflow.com/questions/25840457/jquery-library-urianchor-i...

拿一個(gè)簡(jiǎn)單的例子來(lái)看看,假如我如下調(diào)用configModule()方法

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

先進(jìn)行這種設(shè)置,

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

輸出:

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

再換另一個(gè)設(shè)置

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

輸出(報(bào)錯(cuò)了):

$.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();

如果你直接看,你會(huì)發(fā)現(xiàn)你很難理解configModule()方法到底是怎么生效的.其實(shí)是這樣的,在configModule()方法中,如果你允許給某個(gè)鍵設(shè)置值,那么就在configModule()方法中進(jìn)行設(shè)置,例如:

color: true

但是為什么這個(gè)也能生效呢?

page: "yes"

"yes"又是怎么回事?其實(shí)configModule()方法需要的就是一個(gè)真值(true),如果右邊的值能夠轉(zhuǎn)行為真值,那么configModule方法就接受它,我覺(jué)得,還是直接設(shè)置為true會(huì)比較清晰.另外,你也可以顯式的把某個(gè)鍵設(shè)置為false,不過(guò)這沒(méi)必要.
(上面提到的原提問(wèn)地址里面的回答提到依賴(lài)值就算沒(méi)有在configModule()方法里面設(shè)置為true也不會(huì)導(dǎo)致報(bào)錯(cuò),今天我試了一下發(fā)現(xiàn)回報(bào)錯(cuò)了,應(yīng)該是作者修復(fù)了這個(gè)問(wèn)題)

分析URL并生成一個(gè)映射,這個(gè)方法會(huì)在返回的映射里面為帶有依賴(lài)值的獨(dú)立值創(chuàng)建額外的鍵_s_,這些額外的鍵的值是一個(gè)獨(dú)立值后面跟著所有的依賴(lài)值.

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

我的感覺(jué)是這個(gè)插件有bug,因?yàn)樵谖业膌inux firefox 37和chrome 41中測(cè)試,發(fā)現(xiàn)沒(méi)有依賴(lài)值的獨(dú)立值color也返回了_s_color: "red",實(shí)際上我的輸出如下

[2015.04.19]
好吧,這個(gè)不是bug,作者說(shuō)這是一個(gè)特性
https://github.com/mmikowski/urianchor/issues/7#issuecomment-92168863