平安壹財布二面

9511 ワード
めん経
問題のまとめ
1ブラウザタグページ通信方式
方法1:cookie+setInterval cookie cookieについては、最初にクライアントでユーザのセッション情報を格納するために使用される.クッキーは実際には、クライアントがサーバを要求し、サーバがユーザーの状態を記録する必要がある場合はresponseを使用してクライアントブラウザにクッキーを発行するテキスト情報です.クライアントはクッキーを保存し、ブラウザが再びサイトを要求すると、要求されたURLをクッキーとともにサーバに送信します.サーバは、クッキーをチェックしてユーザの状態を認識します.サーバは、必要に応じてクッキーの内容を変更することもできます.document.クッキーはクッキーを読み取り、書き込み、削除することができます.cookieの特性:1つのページで生成されたcookieは、このページと同じディレクトリまたは他のサブディレクトリの下のページにアクセスすることができ、それによって共有された記憶空間を生成する.通常、クッキーのpathをより高いレベルのディレクトリに設定して、より多くのページを共有します.クッキーが存在するドメインは、デフォルトで要求されたアドレスであり、documentを設定することもできます.domainは親ドメインなどの方法でクッキーがアクセスできるドメインを拡大します.実装原理の要件:ニュース詳細ページ変更データ送信後、リストページに表示
//      1s  tid      
window.onload=function(){
  var tid='';
  setInterval(function(){
    if(tid!=QQ.cookie.get('tid')){
      alert('    ');
      tid=QQ.cookie.get('tid');
    }
  },1000);
}

//             cookie

不足
1 cookie空间有限，浏览器在每一个域名下最多能设置30-50个cookie，容量最多4K左右
2 每次HTTP请求会把当前域的cookie发送到服务器上，而有些cookie只是浏览器才能用到，浪费网络带宽
3 setInterval的频率设置，过大影响浏览器性能，过小影响时效性
优点
兼容性好 几乎所有浏览器都支持

方式二：localStorage

HTML5中加入了一个localStorage特性，主要是用来作为本地存储使用的，解决了cookie存储空间不足的问题。一般浏览器支持的是5M大小，不同浏览器中localStorage也会有所不同。
localStorage提供了JS的读写操作。

if(！window.localStorage){
  alert('      localStorage');
  return false;
}else{
  var storage=window.localStorage;
  storage.a=1;
  storage.setItem('b',2);
  storage.clear();
}

読み書きに加えて、クッキーよりも多くの利点があり、onstorageイベントとstorageイベントを提供し、コールバック関数をバインドすることができます.
window.onstorage=function(e){
  console.log(e);
}
window.addEventListener('storage',function(e){
  console.log(e);
});

localStorageはStorageオブジェクトのインスタンスであり、Storageイベントを変更するとstorageイベントがトリガーされます.属性/setItem保存データdelete/removeItem削除データclearがトリガーされ、このイベントでページカード間の変動リスニングを実現できます.実装の原理
//   

window.addEventListener('storage',function(event){
  console.log('newValue is'+localStorage.getItem('tid'));
  console.log('oldValue is'+event.oldValue);
  alert('    ');
},false);

//   



    window.onload=function(){
        var oBtn=document.getElementById("btn");
        var oInput=document.getElementById("content");
        oBtn.onclick=function(){
            var val=oInput.value;
            localStorage.setItem("tid",val);
        }
    }

注意onstorageイベントおよびstorageイベントは、現在のページ以外のlocalStorageを変更する場合にトリガーされます.また、元のデータの値を変更するときにトリガーされ、例えば、もともとkeyがa、valueが1のlocalStorageがある、localStorageが実行される.setItem(‘a’,1)はリスニング関数をトリガーしない不足ブラウザでありlocalStorageの容量サイズが統一されておらず、高バージョンブラウザではlocalStorageという属性をサポートしている.現在、すべてのブラウザでlocalStorageの値タイプをstringタイプに限定しているが、JSON変換するにはlocalStorageは本質的に文字列の読み取りである.記憶内容が多いとメモリ容量が消費され、ページが変化して自分以外のページのデータの変化を傍受できるようになるという点で、クッキーの容量が小さく、時効性が不足するという問題を解決します
方式3:WebSocket WebSocket APIは次世代クライアント-サーバの非同期通信方法であり、双方向リアルタイム通信である.WebSocketは、Ajax(またはXHR)方式で通信することに限定されない.Ajax技術では、クライアントが要求を開始する必要があり、WebSocketの両端は互いにプッシュすることができるからである.XHRはドメインによって制限され、WebSocketはドメイン間通信を許可する.
//    
var socket=new WebSocket('ws://localhost:8080');
socket.onopen=function(event){
  //  
  socket.send('I am the client..listening..');
  //    
  socket.onmessage=function(event){
    console.log('client received a message',event);
  };
  //  socket  
  socket.onclose=function(event){
    console.log('client notified socket has closed',event);
  };
  //  socket
  socket.close();
}

sendおよびonmessageは、データの送信、受信に使用されます.onmessageイベントは、メッセージのbodyセクションを含むdataプロパティを提供します.bodyセクションは、より多くのデータを渡すためにシーケンス化/逆シーケンス化操作を行う文字列でなければなりません.実装の原理
//     onmessage  socket          

var socket=new WebSocket('ws://localhost:8080');
socket.onopen=function(event){
  socket.onmessage=function(event){
    console.log('Client received a message',event);
  };
};

//         ，  socket  ，         



var socket=new WebSocket('ws://localhost:8080');
window.onload=function(){
  var oBtn=document.getElementById("btn");
  var oInput=document.getElementById("content");
  oBtn.onclick=function(){
    var val=oInput.value;
    socket.onopen=function(event){
      socket.event('    ');
    }
  }
}

WebSocketの構文は簡単ですが、WebSocket通信をサポートするにはIE 10+ブラウザが必要です.IE 8、9の互換性が必要な場合は、Socketなどのサードパーティ製ライブラリを使用してこの問題を解決します.IO. タスクを完了するには、ブラウザ側のサポートが必要です.SOcketデータ量が大きいと、サーバのリソースが大幅に消費されます.シンプルでリアルタイム
方式4:BroadcastChannel BroadcastChannelはブロードキャストチャンネルであり、windowの下のAPIであり、同源の異なるページ間で通信を完了するために使用される.postmessageはデータを伝達し、onmessageはメッセージを傍受する.インスタンスを初期化するときに同じチャネル値が入力されると、同じブロードキャストチャネルにアクセスされます.実装の原理
//       
let listCast=new BroadcastChannel('mychannel');
myObj={tid:'123',title:'      '};
listCast.postMessage(myObj);
//       
let articleCast=new BroadcastChannel('mychannel');
articleCast.onmessage=function(e){
  console.log(e.data);
}

互換性に欠けているのは最新版ChromeとFirefoxのみで、IEとSafariは全くサポートされていません.長所は単純で単一である.
方法5:SharedWorker SharedWorkerはHTML 5で新しく提供されたブラウザAPIで、共有ワークスレッドと呼ばれています.複数のページを共有してスレッドを使用できます.各ページは、共有作業スレッドのポート番号にリンクされます.ページは、このポートを介して共有ワークプロセスと通信します.実装の原理
//   

var s=new SharedWorker('x.js');
s.port.onmessage=function(e){
  console.log(e.data);
  alert('    ');
};
s.port.start();

//      SharedWorker         


var s=new SharedWorker('x.js');
btn.onclick=function(){
  s.port.postMessage(document.getElementById('content').value);
  s.port.start();
}

//    x.js                    
// sharedWorker     js  ，        ，         
let data = ''
onconnect = function (e) {
  let port = e.ports[0]
  port.onmessage = function (e) {
    if (e.data === 'get') {
      port.postMessage(data)
    } else {
      data = e.data
    }
  }
}

SharedWorkerは複数のwindowで同時に使用できますが、これらのラベルページが同じソースであることを保証する必要があります.互換性が不足し、IE APIをサポートしないのは簡単で、構成の煩雑な利点は別の新しいスレッドを起動し、メインスレッドコード業務に影響を与えず、サーバーを借りる必要はない.
2 Ajax提出フォームの書き方
提出フォームのGETとPOSTの違いを復習する
  • GETはRequest URLの後ろにパラメータを追加し、POSTパラメータはメッセージ内(chromeではFormDataが要求の第4部分-メッセージ体)
    • である.
  • GETの安全性はPOSTより
    • 低い.
  • GET要求はキャッシュされてもよく、長さ制限(URLに追加され、URLに長さ制限2048文字)がある.POSTはありません.ajaxコミットフォームjqueryは、次の
    • を使用します.
    function login(){
  $.ajax({
    type:'POST',
    dataType:'json',//            
    url:'users/login',
    data:$('#form1').serialize(),
    success:function(result){
      if(result.resultCode==200){
        console.log('SUCCESS');
      }
    },
    error:function(){
      console.log('ERROR');
    }
  });
}

    serialize()メソッドは、フォーム値をシーケンス化することによって、URL符号化テキスト文字列を作成します.1つまたは複数のフォーム要素(inputおよび/またはテキストボックスなど)またはform要素自体を選択できます.シーケンス化された値は、AJAXリクエストの生成時にURLクエリー文字列に使用できます.フォーム要素の値をシーケンス文字列に含める場合は、要素はname属性を使用する必要があります.
    3 jsonオブジェクトの判断方法
    まずJSON形式を復習し、JSONとJS対象の違いを添付しますhttps://www.jb51.net/article/107041.htm判断方法
    function isJson(obj) {
  var isjson =
    typeof obj == 'object' &&
    Object.prototype.toString.call(obj).toLowerCase() == '[object object]' &&
    !obj.length
  return isjson
}

    4 BFC
    参照先:https://www.cnblogs.com/giggle/p/5236982.html https://www.cnblogs.com/giggle/p/5236770.html https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
  • BFCとは?MDNの説明によれば、BFCはブロックフォーマットコンテキストであり、1つの領域として理解できる.ボックスモデルのレイアウトを行う場合、1つの要素がBFCとなる条件に合致すると、その要素は隔離された独立した容器となり、BFCの領域は外部フローティング要素と重ならず、同じBFC内の2つの隣接ブロックレベル要素の外距離は重なり合うが、異なるBFCの外距離は重ならない.BFCの高さを計算するときは、その内部のフローティング要素も含めます.要するに,BFCは外部要素と相互に影響しない.
  • BFCをトリガする条件は?1すべての要素パターンがBFCを生成できるわけではない、w 3 c仕様:display属性はblock、list-item、tableの要素であり、BFCを生成する.2 BFCはいつトリガーされますか?これらの要素に次の属性を追加するとBFCがトリガーされます.一般的な方法:-float属性がnone-positionではなくabsoluteまたはfixed-displayがinline-block、table-cell、table-caption、flex、inline-flex-overflowがvisibleではありません.3 BFCの役割は?
  • 要素の内部フローティング(フローティングコンテンツや周囲のコンテンツなどを高くする)をクリア親要素overflow:hidden/auto
    • を設定
  • 外部距離マージ設定の親要素overflow:hidden/display:table-cell
    • を解決
  • 適応レイアウト/フローティング要素とのオーバーラップ防止両側固定中間適応を例に、両端floatをleft/rightとして設定することができ、その間にoverflow:hidden/display:table-cell+width:9000 px(大きな値)
    • を採用する
    5赤と黒の木
    このマンガのコラムを参考にhttps://zhuanlan.zhihu.com/p/31805309まず,二叉ルックアップツリーとは何かを復習する(BST):1左サブツリーすべてのノード値がルートノード値以下2右サブツリーすべてのノード値がルートノード値以上3程度サブツリーもそれぞれツリーの利点:検索に必要な最大回数がツリーの高さに等しい欠陥:ノードを挿入するとアンバランスになる可能性があります赤黒ツリー:自己バランスのツリー付加特性:1ノードが赤/黒2本のノードが黒3各リーフノードが黒の空ノード4各赤ノードの2つのサブノードが黒(各リーフからルートまでのすべてのパスに2つの連続した赤ノードが存在しない)5任意のノードから各リーフまでのすべてのパスには同じ数の黒ノードの完全な説明が含まれていますhttps://huangxsu.com/2018/08/01/js-data-structure/コードが長すぎてぼんやりしていたので、先にコードを見てから見てください.
    6日の時間はどのように手配します
    时间まで具体的に私の答えは毎日の仕事の内容はどのように分けてどのように分块して起きる时间を除いて...固定的な时间に答えていませんこの问题の意义がよく分からないため休みが健康かどうかを见ますか?毎日の仕事は出勤時間が同じで残りは当日の状況によって分けます
    残りは覚えられない
    Treasure Data Update 2015 - Presto
    コンピュータネットワーク---基礎テーマまとめ二