【JS 】功能類 Url.js

這個(gè)類的主要目的是為了方便平時(shí)編碼中的Url類型的數(shù)據(jù)操作

Github
Url.combine展示

全局名稱

全局名稱是由源碼的最后一行代碼確定的谜洽,默認(rèn)為Url,如存在相同名稱的對(duì)象會(huì)拋出異常蛛勉;
可以通過 requirejs的define獲取

(function (window, name) {
    if (name in window) {
        throw new Error(["already '", name, "' in 'window'"].join(""));
    }
...
    window[name] = Url;
    if (typeof window.define === "function") {
        window.define(name, [], function () { return Url; });
    }
})(window, "Url");

靜態(tài)方法

  • Url.encoded(params)

將對(duì)象編碼為URL參數(shù)痪枫,類似于jQuery.param()喊巍,不包含“搀继?”

var myObject = {
    a: {
        one: 1, 
        two: 2, 
        three: 3
    }, 
    b: [1,2,3]
};
var recursiveEncoded = Url.encoded(myObject);
var recursiveDecoded = decodeURIComponent(recursiveEncoded);
console.log(recursiveEncoded);
console.log(recursiveDecoded);

結(jié)果:

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B1%5D=2&b%5B2%5D=3   
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[1]=2&b[2]=3
  • Url.parseSearch(search)

Url.encoded(params)相反憾筏,將URL參數(shù)字符串轉(zhuǎn)為js對(duì)象

var myObject = {
    a: {
        one: 1, 
        two: 2, 
        three: 3
    }, 
    b: [1,2,3]
};
var recursiveEncoded = Url.encoded(myObject);
var obj = Url.parseSearch(recursiveEncoded);
console.log(JSON.stringify(obj, null, "    "));

結(jié)果:(從URL參數(shù)轉(zhuǎn)為js對(duì)象會(huì)丟失參數(shù)類型任洞,全部變?yōu)閟tring)

 {
    "a": {
        "one": "1",
        "two": "2",
        "three": "3"
    },
    "b": [
        "1",
        "2",
        "3"
    ]
}
  • Url.combine(url1, url2)

將2個(gè)url組合成一個(gè)新的Url

Url.combine("/","/api/user/get").toString();  // /api/user/get
Url.combine("/http/web","/api/user/get").toString();  // /api/user/get
Url.combine("/http/web","api/user/get").toString();  // /api/user/get
Url.combine("/http/web/","api/user/get").toString();  // /http/api/user/get
Url.combine("/http/web/","../api/user/get").toString(); // /http/api/user/get
Url.combine("/http/web","../api/user/get").toString(); // /api/user/get
Url.combine("/http/web","./api/user/get").toString(); // /http/web/api/user/get

帶參數(shù)的情況下蓄喇,默認(rèn)url2的參數(shù)覆蓋url1的參數(shù);
如果希望保留url1的參數(shù)可以將url2的參數(shù)寫做ur2="path?&name=value"交掏,在?與name間插入一個(gè)&符號(hào)妆偏;
如果url2與url1參數(shù)相同會(huì)將參數(shù)改為數(shù)組;

Url.combine("/http/web?id=1","api/user").toString();  // //http/api/user
Url.combine("/http/web?id=1","?name=2").toString();   // /http/web?name=2
Url.combine("/http/web?id=1","?&name=2").toString();  // /http/web?id=1&name=2
Url.combine("/http/web?id=1","?&id=2").toString();  // /http/web?id%5B%5D=1&id%5B1%5D=2
Url.combine("/http/web?id=1","./../?id=2").toString();  // /http/?id=2
Url.combine("/http/web?id=1","./../?&name=2").toString(); // "/http/?id=1&name=2"

url2不存在錨記時(shí)盅弛,保留url1的錨記钱骂,否則url2的錨記覆蓋url1的錨記;
url2結(jié)尾為#號(hào)時(shí)熊尉,直接清除url1的所有錨記

Url.combine("/http/web?id=1#h1","api/user").toString(); ///http/api/user#h1
Url.combine("/http/web?id=1#h1","./../?&name=2#h2").toString();  // /http/?id=1&name=2#h2
Url.combine("/http/web?id=1#h1","api/user#").toString();    // /http/api/user?id=1

也可以傳多個(gè)參數(shù)

function combine(url1, url2) {
    ... ...
}
Url.combine = function (url1, url2) {
    if (arguments.length < 2) {
        return arguments[0];
    }
    var _base = url1;
    for (var i = 1; i < arguments.length; i++) {
        _base = combine(_base, arguments[i]).toString();
    }
    return _base;
};

實(shí)例化

無論是否通過new關(guān)鍵字調(diào)用都會(huì)返回一個(gè)實(shí)例罐柳;
不提供url參數(shù)時(shí),取window.location.href的值狰住;

var token = new Object();
function Url(url) {
    if (arguments[1] !== token) {
        return new Url(url, token);
    }
    url = trim(url || window.location.href);
    ... ...
}

實(shí)例屬性

  • scheme

url協(xié)議類型张吉,如http://https://也可以是//

var url = new Url("http://baidu.com");
console.log(url.scheme); // http://
url.scheme = "https://"
console.log(url.toString()); // https://baidu.com
  • domain

url的域名部分

var url = new Url("http://baidu.com/api/");
console.log(url.domain); // baidu.com
url.domain= "google.com"
console.log(url.toString()); // http://google.com/api/
  • path

url的路徑部分

var url = new Url("http://baidu.com/api/get?id=1");
console.log(url.path); // /api/get
url.path = "api/post"
console.log(url.toString()); // http://baidu.com/api/post?id=1
  • query

url的參數(shù)部分

var url = new Url("http://baidu.com/api/get?id=1#title");
console.log(url.query); // id=1
url.query = "name=1&sex=男"
console.log(url.toString()); // http://baidu.com/api/get?name=1&sex=%E7%94%B7#title
url.query = ""
console.log(url.toString()); // http://baidu.com/api/get#title
  • params

url的參數(shù)部分被解釋后的實(shí)體對(duì)象

var url = new Url("http://baidu.com/api/get?id=1#title");
console.log(url.params.id); // 1
url.params.id = 2;
url.params.name = "blqw";
console.log(url.toString()); // http://baidu.com/api/get?id=2&name=blqw#title
  • anchor

url的錨記部分

var url = new Url("http://baidu.com/api/get?id=1#title");
console.log(url.anchor); // #title
url.anchor = "content";
console.log(url.toString()); // http://baidu.com/api/get?id=1#content
url.anchor = "";
console.log(url.toString()); // http://baidu.com/api/get?id=1
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末催植,一起剝皮案震驚了整個(gè)濱河市肮蛹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌创南,老刑警劉巖伦忠,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異稿辙,居然都是意外死亡昆码,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赋咽,“玉大人旧噪,你說我怎么就攤上這事∨洌” “怎么了淘钟?”我有些...
    開封第一講書人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)陪毡。 經(jīng)常有香客問我米母,道長(zhǎng),這世上最難降的妖魔是什么毡琉? 我笑而不...
    開封第一講書人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任铁瞒,我火速辦了婚禮,結(jié)果婚禮上绊起,老公的妹妹穿的比我還像新娘精拟。我一直安慰自己燎斩,他們只是感情好虱歪,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著栅表,像睡著了一般笋鄙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上怪瓶,一...
    開封第一講書人閱讀 51,365評(píng)論 1 302
  • 那天萧落,我揣著相機(jī)與錄音,去河邊找鬼洗贰。 笑死找岖,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的敛滋。 我是一名探鬼主播许布,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼绎晃!你這毒婦竟也來了蜜唾?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤庶艾,失蹤者是張志新(化名)和其女友劉穎袁余,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咱揍,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡颖榜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掩完。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蟹地,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出藤为,到底是詐尸還是另有隱情怪与,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布缅疟,位于F島的核電站分别,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏存淫。R本人自食惡果不足惜耘斩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望桅咆。 院中可真熱鬧括授,春花似錦、人聲如沸岩饼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽籍茧。三九已至版述,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間寞冯,已是汗流浹背渴析。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留吮龄,地道東北人俭茧。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像漓帚,于是被迫代替她去往敵國(guó)和親母债。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容