-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
25 lines (15 loc) · 8.75 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>CORS-浏览器跨域方法</title>
<link href="/2018/11/14/CORS-%E6%B5%8F%E8%A7%88%E5%99%A8%E8%B7%A8%E5%9F%9F%E6%96%B9%E6%B3%95/"/>
<url>/2018/11/14/CORS-%E6%B5%8F%E8%A7%88%E5%99%A8%E8%B7%A8%E5%9F%9F%E6%96%B9%E6%B3%95/</url>
<content type="html"><![CDATA[<h2 id="CORS"><a href="#CORS" class="headerlink" title="CORS"></a>CORS</h2><blockquote><p>CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。</p></blockquote><h2 id="什么是跨域"><a href="#什么是跨域" class="headerlink" title="什么是跨域"></a>什么是跨域</h2><blockquote><p>跨域指的是 通过js在不同的域进行通信或传输数据。比如通过<br><code><img></code> 标签加载其他域的资源图片，<code><script></code> 标签加载其他域的js文件，或者通过js获取页面中不同域的框架中(<code>iframe</code>)的数据。只要域名、协议、端口号有任何一个不同，就属于不同的域。</p></blockquote><h2 id="跨域方法"><a href="#跨域方法" class="headerlink" title="跨域方法"></a>跨域方法</h2><h3 id="XMLHttpRequest对象"><a href="#XMLHttpRequest对象" class="headerlink" title="XMLHttpRequest对象"></a>XMLHttpRequest对象</h3><blockquote><p>通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。默认情况下,XHR 对象只能访问与包含它的页面位于同一个域中的资源。但是，浏览器（IE除外）都通过 XMLHttpRequest对象实现了对 CORS 的原生支持。在尝试打开不同来源的资源时，无需额外编写代码就可以触发这个行为。要请求位于另一个域中的资源，使用标准的 XHR对象并在 open() 方法中传入绝对 URL即可。比如:</p></blockquote><pre><code>var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if (xhr.readyState == 4){ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status== 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } }};xhr.open("get", "https://jsonplaceholder.typicode.com/users", true);xhr.send(null);</code></pre><h3 id="Jsonp跨域"><a href="#Jsonp跨域" class="headerlink" title="Jsonp跨域"></a>Jsonp跨域</h3><blockquote><p>通过<code><script></code>标签加载其他域的资源，服务器端设置一个辅助函数配合前端回调函数，返回的是可执行的js把它作为回调函数的参数即可得到我们获取的数据。但缺点是只能进行get方法请求。</p></blockquote><p><strong>页面代码如下:</strong></p><pre><code><!DOCTYPE html><html><head> <title>Jsonp</title> <meta charset="utf-8"></head><body> <div id="show"></div> <script type="text/javascript"> function showData(data) { console.table(data); } showData();</script><script type="text/javascript"> window.onload = function(){ let script = document.createElement('script'); script.src = 'https://jsonplaceholder.typicode.com/users'+'?callback=showData'; document.body.appendChild(script); } </script></body></html></code></pre><p><strong>Google控制台输出结果</strong></p><blockquote><p><img src="https://upload-images.jianshu.io/upload_images/11575712-d3802e9e24eddc3b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="result.png"></p></blockquote><h3 id="跨文档消息传递"><a href="#跨文档消息传递" class="headerlink" title="跨文档消息传递"></a>跨文档消息传递</h3><blockquote><p>跨文档消息传送（cross-document messaging），有时候简称为 XDM，指的是在来自不同域的页面间传递消息。例如,<a href="http://www.aa.com域中的页面与位于一个内嵌框架p2p.aa.com域中的页面通信。" target="_blank" rel="noopener">www.aa.com域中的页面与位于一个内嵌框架p2p.aa.com域中的页面通信。</a></p></blockquote><hr><blockquote><p>XDM 的核心方法是PostMessage。在 HTML5 规范中，除了 XDM部分之外的其他部分也会提到这个方法名，但都是为了同一个目的：向另一个地方传递数据。对于 XDM 而言，“另一个地方”指的是包含在当前页面中的 <iframe> 元素，或者由当前页面弹出的窗口。</p></blockquote><hr><blockquote><p>postMessage() 方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。<br>接收到 XDM 消息时，会触发 window 对象的 message 事件传递给 onmessage 处理程序的事件对象包含以下三方面的重要信息<br><strong>data</strong> ：作为 postMessage() 第一个参数传入的字符串数据。<br><strong>origin</strong> ：发送消息的文档所在的域，例如 “<a href="http://www.wrox.com"" target="_blank" rel="noopener">http://www.wrox.com"</a><br><strong>source</strong> ：发送消息的文档的 window 对象的代理。这个代理对象主要用于在发送上一条消息的窗口中调用 postMessage() 方法。如果发送消息的窗口来自同一个域，那这个对象就是window </p></blockquote><hr><p><em>在 onmessage 处理程序中检测消息来源可以确保传入的消息来自已知的页面</em><br><strong>检测方法如下</strong></p><pre><code>EventUtil.addHandler(window, "message", function(event){//确保发送消息的域是已知的域if (event.origin == "http://www.wrox.com"){//处理接收到的数据processMessage(event.data);//可选：向来源窗口发送回执event.source.postMessage("Received!", "http://p2p.wrox.com");}});</code></pre>]]></content>
</entry>
<entry>
<title>排序算法总结</title>
<link href="/2018/09/23/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95%E6%80%BB%E7%BB%93/"/>
<url>/2018/09/23/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95%E6%80%BB%E7%BB%93/</url>
<content type="html"><![CDATA[<h1 id="常用排序算法总结"><a href="#常用排序算法总结" class="headerlink" title="常用排序算法总结"></a>常用排序算法总结</h1><h3 id="插入排序"><a href="#插入排序" class="headerlink" title="插入排序"></a>插入排序</h3><ul><li><p>一般方法 ：</p><blockquote><p>在第P趟，将位置P上的元素向左移动到它在前P+1个元素中的正确位置上。对于P=1到P=N-1趟，插入排序保证从位置0到位置P上的元素为已排序状态。</p></blockquote></li><li><p>复杂度 </p><blockquote><p>最好的情况：数组完全有序，每次插入只需要和插入位置的前一个元素，因此复杂度为O(N);<br>最坏的情况：数组完全逆序，在插入第n个位置时，需要比较前n-1 个，次数为1+2+···+n-1+n=n*(n-1)/2. 因此复杂度为O(n^2).</p></blockquote></li></ul><hr><p><strong>JavaScript算法实现</strong></p><pre><code>function InsertionSort(arr,n) {var j,p,temp;//p趟插入,n=arr.length时能完全排序for (p = 1; p < n; p++) { temp = arr[p]; for(j=p; j>0&&arr[j-1]>temp; j--) { arr[j] = arr[j-1]; } arr[j] = temp;}return arr;}</code></pre><hr><h3 id="快速排序"><a href="#快速排序" class="headerlink" title="快速排序"></a>快速排序</h3><ul><li><p>算法步骤</p><blockquote><ol><li>如果数组S的元素个数是1或0，则返回。<ol start="2"><li>取S中任一元素v，作为枢纽 元。</li><li>将S-{v} 分为两个不相交的集合：S1={x∊S-{v} | x<=v} 和 S2={x∊S-{v} | x>=v} </li><li>返回 { quicksort(s1)后，继而v,进而 quicksort(s2) }</li></ol></li></ol></blockquote></li><li><p>算法分析</p><blockquote><p>它的平均运行时间为O(N log N),它的最坏性能为O(N^2).</p></blockquote></li><li><p>算法思想以及算法实现</p></li></ul><ol><li><p>选取枢纽元</p><blockquote><p>三中值法：一般方法是选择左端、右端和中心位置上的三个元素中值作为枢纽元</p></blockquote><pre><code>var media3 = arr[0].concat(pivot,arr.pop()).sort((a,b)=>{return a-b;})[1];</code></pre><blockquote><p>后面用递归法实现s1 . s2 的排序</p></blockquote><p> function quickSort(arr) {</p><pre><code>if(arr.length<=1){ return arr;}var pivotIndex = parseInt(arr.length/2);var pivot = arr[pivotIndex];//直接选取中间值为枢纽元var left = [];var right = [];for(var i=0;i<arr.length;i++) { if(arr[i]<pivot){ left.push(arr[i]); } else{ right.push(arr[i]); }}return quickSort(left).concat(pivot,quickSort(right));</code></pre><p> }</p></li></ol>]]></content>
</entry>
</search>