本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章,第9.21节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看
9.21 技巧:利用jQuery Mobile的辅助函数
jQuery Mobile在发起AJAX请求的背后使用了许多实用函数(utility function)。为了方便起见,这些实用函数也是可以复用的。代码清单9-25演示了为自己的目的而使用与URL相关的实用函数。
代码清单9-25 使用parseUrl()函数读取URL
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>URL Utilities</title>
04 <meta name="viewport"
05 content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" href=
07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08 <script type="text/javascript"
09 src="http://code.jquery.com/jquery-1.7.1.min.js">
10 </script>
11 <script type="text/javascript" src=
12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13 </script>
14 <script>
15 $(document).ready(function() {
16
17 $('#parse').on('click', function() {
18
19 var url = 'http://user:password@www.pearsonhighered.com' +
20 ':80/educator/series/Developers-Library' +
21 '/10483.page?key=value#first-id';
22
23 var parsedUrl =
24 JSON.stringify(
25 $.mobile.path.parseUrl(url)
26 )
27 .replace(/,/g, ',<br>');
28 $('#output').html(parsedUrl);
29 });
30 $('#absolutepath').on('click', function() {
31
32 $('#output').html(
33 $.mobile.path.makePathAbsolute(
34 'newfile.html',
35 '/root/path/oldfile.html'
36 )
37 );
38 });
39 $('#absoluteurl').on('click', function() {
40
41 $('#output').html(
42 $.mobile.path.makeUrlAbsolute(
43 'newfile.html',
44 'http://www.domain.com/root/path/oldfile.html'
45 )
46 );
47 });
48 $('#isabsolute').on('click', function() {
49
50 $('#output').html('isAbsoluteUrl=' +
51 $.mobile.path.isAbsoluteUrl(
52 'http://www.domain.com/root/path/oldfile.html'
53 )
54 );
55 });
56 $('#isrelative').on('click', function() {
57
58 $('#output').html('isRelativeUrl=' +
59 $.mobile.path.isRelativeUrl(
60 'http://www.domain.com/root/path/oldfile.html'
61 )
62 );
63 });
64 $('#samedomain').on('click', function() {
65
66 $('#output').html('isSameDomain=' +
67 $.mobile.path.isSameDomain(
68 'http://www.domain.com/root/path/oldfile.html',
69 'http://www.domain.com/root/path/newfile.html'
70 )
71 );
72 });
73 });
74 </script>
75 </head>
76 <body>
77
78 <div data-role="page">
79
80 <div data-role="header">
81 <h1>URL Utilities</h1>
82 </div>
83
84 <div data-role="content">
85 <a href="#" id="parse" data-role="button">Parse URL</a>
86 <a href="#" id="absolutepath" data-role="button">Make Path
87 Absolute</a>
88 <a href="#" id="absoluteurl" data-role="button">Make URL
89 Absolute</a>
90 <a href="#" id="isabsolute" data-role="button">Is Absolute
91 Url</a>
92 <a href="#" id="isrelative" data-role="button">Is Relative
93 Url</a>
94 <a href="#" id="samedomain" data-role="button">Is Same
95 Domain</a>
96
97 <p id="output">Placeholder for the output</p>
98 </div>
99
100 </div>
101
102 </body>
103 </html>
上面的示例代码是多种实用函数的聚集。让我们一个一个地来讨论它们。
第25行演示了parseUrl()函数。它是一个从URL字符串读取多个部分信息的便捷函数。该函数返回一个对象。在这个示例中,它是字符串形式的JSON,为可读性的需要在每个逗号后面添加了一个换行。表9-3列出了parseUrl()函数的返回值。
第33~36行演示了makePathAbsolute()函数。当你拥有的是相对路径(可以是文件名、路径名、两者的混合体或者可能以../开始的值)时,可以和一个绝对路径一起使用,然后计算出新的绝对路径。
第42~45行做了相同的事情,只是它是使用makeUrlAbsolute()函数来操作URL。类似地,第51~53行通过使用isAbsoluteUrl()函数,可以检查字符串来判断它是否为绝对URL。第59~61行演示了isRelativeUrl()函数,这个函数做的工作恰好相反。
第67~70行使用isSameDomain()函数来检查两个URL是否指向相同的域名。该函数在想判断是否能用AJAX请求时会很有用。它通过比较传递参数的协议还有域名,来判断它们是否在同一个域中。该函数还会比较子域名。