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

    xiaoxiao2024-01-22  184

    本节书摘来自异步社区《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请求时会很有用。它通过比较传递参数的协议还有域名,来判断它们是否在同一个域中。该函数还会比较子域名。

    相关资源:虚拟网卡tap_Windows_9.21.2.exe.7z
    最新回复(0)