《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.21 技巧:利用jQuery Mobile的辅助函数

简介: 第25行演示了parseUrl()函数。它是一个从URL字符串读取多个部分信息的便捷函数。该函数返回一个对象。在这个示例中,它是字符串形式的JSON,为可读性的需要在每个逗号后面添加了一个换行。表9-3列出了parseUrl()函数的返回值。

本节书摘来自异步社区《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()函数的返回值。
screenshot
screenshot
第33~36行演示了makePathAbsolute()函数。当你拥有的是相对路径(可以是文件名、路径名、两者的混合体或者可能以../开始的值)时,可以和一个绝对路径一起使用,然后计算出新的绝对路径。

第42~45行做了相同的事情,只是它是使用makeUrlAbsolute()函数来操作URL。类似地,第51~53行通过使用isAbsoluteUrl()函数,可以检查字符串来判断它是否为绝对URL。第59~61行演示了isRelativeUrl()函数,这个函数做的工作恰好相反。

第67~70行使用isSameDomain()函数来检查两个URL是否指向相同的域名。该函数在想判断是否能用AJAX请求时会很有用。它通过比较传递参数的协议还有域名,来判断它们是否在同一个域中。该函数还会比较子域名。

相关文章
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
22 1
|
3月前
|
存储 前端开发
SAP UI5 federatedLogout 函数源代码分析
SAP UI5 federatedLogout 函数源代码分析
22 0
|
3月前
|
缓存 JavaScript 前端开发
如何理解 SAP UI5 的 sap.ui.define 函数?
如何理解 SAP UI5 的 sap.ui.define 函数?
45 0
|
5月前
uview-ui工具函数的使用
uview-ui工具函数的使用
|
5月前
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
6月前
|
XML JSON JavaScript
SAP UI5 框架 Manifest.js 里 getObject 函数的实现解析
SAP UI5 框架 Manifest.js 里 getObject 函数的实现解析
27 0
|
6月前
|
XML 数据格式
关于 SAP UI5 XML 视图里控件事件处理函数名称中的 . (点号) 问题的讨论试读版
关于 SAP UI5 XML 视图里控件事件处理函数名称中的 . (点号) 问题的讨论试读版
36 0
|
7月前
|
Web App开发 前端开发 开发者
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
32 1
|
7月前
|
JavaScript
jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果
jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果
|
7月前
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)