DOMの概要
25. DOMイベントモデルとは何ですか？
- バブリングとキャプチャ
- この要素がクリックされた要素である場合、取得は、順序は、リスナーの順序によって決定され、バブル前に必ずではありません。
26.どのようなイベントデリゲートのメリットは何ですか？
イベントデリゲートは、の使用である原理をバブリングのノードにイベントをバインドする、親ノード、それによって効果のイベントコードをトリガー、。
イベントデリゲートのメリット：
1）JSは、パフォーマンスを向上させます。
2）以降の添加元素は、同じイベントをトリガすることができます。
コード：
var ul = document.querySelector('ul')
ul.addEventListener('click',function(e){
var el = e.target
while(el.tagName !== 'LI'){
if(el === ul){
el = null
break
}
el = el.parentNode
}
if(el){
console.log('你点击了 li 元素')
}else{
console.log('你点击的不是 li 元素')
}
})
27、タッチイベントのモバイル終わりには、それを理解するには？
touchstart、touchmove、touchend、touchcancel
アナログスワイプイベント：記録位置倍touchmove差、前記載スライド右向き後右側場合。
HTTPレビュー：
28、HTTPキャッシュをどのように行うには？違いとコントラストキャッシュバッファを強制。
キャッシュデータが単独に基づいて、存在する場合には強制的にキャッシュ次のように、要求データ・フローは、
キャッシュされたデータが既に存在する場合、もっぱら基づいてキャッシュの比較次のようにデータ要求プロセスは、
我々はルールをキャッシュのさまざまな種類を見ることができ、キャッシュが必要でない場合は有効になりますことを余儀なく再び、サーバの相互作用が発生し、コントラスト、サーバーと対話する必要の力へのキャッシュエントリかどうか。
キャッシュ・ルール2種類のキャッシュ強制的に、同時に存在することができ、より高い優先順位を直接キャッシュを使用して、力にキャッシュエントリ場合、強制キャッシュルール、ある比較キャッシュ内に、キャッシュはもはやルールを比較行われません。
概要
必須のキャッシュのためには、サーバがない比較キャッシュポリシーを実行する時間に、バッファ時間の時間キャッシュブラウザ、次の要求、キャッシュを直接使用することを伝えます。
比較のためにキャッシュ、のEtagのキャッシュ情報と検証サーバはステータスコード304、直接ブラウザのキャッシュを返すことで、送信することにより、サーバーへのLast-Modified要求。
29.どのようなクッキーの？セッションは何ですか？
クッキー
HTTP応答がのSet-Cookieクッキーによって提供され
、指定したドメイン名は、クッキーが要求としてヘッダーを持参しなければならないでアクセスするには、ブラウザ
のCookieは、一般的に記録するユーザー情報に使用
セッション
セッションは、サーバメモリ（データ）は
、典型的にはクッキーSessionIDを記録することによって達成さセッションの
セッションID一般乱数を
30のlocalStorageとクッキーがある違いは何ですか？
クッキーはリクエストでサーバーに送信されますが、localStorageをなしている
クッキーのサイズで5 MBのlocalStorageについて一般的に、一般的に4K以下であり、
31. GETとPOSTの違いは何ですか？
1）パラメータ。GETパラメータURL内のクエリ上のPOSTパラメータ（データ）、内のパラメータリクエストボディにメッセージ。
2）GETパラメータ（URLクエリパラメータ）は、一般的に、長さの制限を持っている1024の文字。POSTパラメータ（データ）ない長さの制限（実際に存在する4〜た10Mb限界）
3）パッケージ。のみ送信GET要求必要パケットを、POSTリクエストを送信する必要が二つ以上のパケットを（そこPOSTメッセージ本体ため）（ナンセンス、GETメッセージ本体を使用することができる）
。4）GETが使用されているデータを読み取るために、POSTをするために使用される書き込みデータ、POSTは電力ありませんなど（リクエストが送信された回数に関係なく、結果は同じであることを意味べき等、。）
5）セキュリティ。POSTは（安全ではない）に固定されていないGET
特定のHTTP簡単な説明を、リンクを参照してください
32、どのようにクロスドメイン？何JSONP、何CORS、何のpostMessageはい。
JSONP（JSONパディングとは）他のドメインからのデータにWebページを可能にするデータフォーマットJSON「使用モード」です。
ページ上、事前に関数宣言を実行するためにJSコードなどのデータを取得するために、負荷データにスクリプトタグとして、関数名は、生データに「ラップ」への関数名解決さの後にインタフェース舞台裏を渡すパラメータによって戻さ前に送信された関数名、。換言すれば、JSONPは、バックエンド・インターフェイスを実現することができると一致する必要があります。
JSONPのテキストフロー
JSONP要求者：ブラウザにリクエストを送信します
JSONPの応答：サーバーは、要求を送信します
1、チャネル応答とクエリパラメータの側に通過させながら、SRC応答ポイントをスクリプトを作成するための要求当事者
script src = '/路径?callback =' + functionName図2に示すように、このような形状に構成されたコールバッククエリパラメータに従って応答
${query.callback}.call(undefined,'你要的数据')、そのような応答図3に示すように、ブラウザは、応答が実行される受信します
${query.callback}.call(undefined,'你要的数据')4、要求当事者は、彼が望んでいるデータを知ることができます
条約：
functionNameを、関数の名前で、名前はランダムに生成され、フォーム
var functionName = 'keduoc' + parseInt(Math.random()*100000,10) // keduoc23238
window[functionName] = function(response){
if(response === '你要的数据'){
......
}
}
jQueryの道のJSONP：
$.ajax({
url:"/路径", // 不传查询参数是因为jQuery会自动生成并添加
dataType:"jsonp", // 记得每行结尾的逗号
success: function(response){
if(response === '你要的数据'){
......(函数)
}
}
})
さらに：
1）JSONPは、主な目的は、ページとバックエンドを更新せずに、インタラクティブに解決することで、Ajaxの前に現れます。
2）主な方法は、動的JSONPを通じて作成することです
アクセス制御 - 許可 - 起源
このフィールドは必須です。その値は、Originフィールドの特定の要求の値は、いずれか*、ドメイン名の受け入れのための要求のいずれかです。
コード部
リクエスタ一体コード
<!DOCTYPE html>
<html lang="en">
<head>
<title>首页</title>
<link rel = "stylesheet" href = "/style.css">
<meta charset="UTF-8">
</head>
<body>
<h5>您的账户余额是 <span id = "amount">&&&amount&&&</span></h5>
<button id="button">打钱</button>
<script >
button.addEventListener('click',(e) =>{
let script = document.createElement('script');
let functionName = 'keduo' + parseInt(Math.random()*100000,10)
window[functionName] = function (response) {
if (response === '你要的数据') {
amount.innerText = amount.innerText - 1
}
}
script.src = '/pay?callback='+functionName // 注意要加上查询参数 ?callback=functionName 且注意是'...' + functionName
document.body.appendChild(script)
script.onload = function (e) {
e.currentTarget.remove()
delete window[functionName]
}
script.onerror = function (e) {
e.currentTarget.remove()
delete window[functionName]
}
})
</script>
</body>
</html>
リクエスタ全体のコードはjQueryのように簡略化することができます
<!DOCTYPE html>
<html lang="en">
<head>
<title>首页</title>
<link rel = "stylesheet" href = "/style.css">
<meta charset="UTF-8">
</head>
<body>
<h5>您的账户余额是 <span id = "amount">&&&amount&&&</span></h5>
<button id="button">打钱</button>
<script >
button.addEventListener('click',(e) =>{
$.ajax({
url:"/路径", // 不传查询参数是因为jQuery会自动生成并添加
dataType:"jsonp", // 记得逗号
success: function(response){
if(response === '你要的数据'){
amount.innerText = amount.innerText - 1
}
}
})
})
</script>
</body>
</html>
コードの全体的な応答
var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]
if(!port){
console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
process.exit(1)
}
var server = http.createServer(function(request, response){
var parsedUrl = url.parse(request.url, true)
var pathWithQuery = request.url
var queryString = ''
if(pathWithQuery.indexOf('?') >= 0){ queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
var path = parsedUrl.pathname
var query = parsedUrl.query
var method = request.method
/******** 从这里开始看，上面不要看 ************/
console.log('方方说：含查询字符串的路径\n' + pathWithQuery)
if(path === '/'){
var string = fs.readFileSync('./index.html','utf8')
var amount = fs.readFileSync('./db','utf8')
string = string.replace('&&&amount&&&',amount) //将数据库中的数据代替占位符
response.statusCode = 200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(string)
response.end()
}else if(path ==='/style.css'){
var string = fs.readFileSync('./style.css','utf8')
response.setHeader('Content-Type', 'text/css;charset=utf-8')
response.write(string)
response.end()
}else if(path === '/main.js'){
var string = fs.readFileSync('./main.js','utf8')
response.setHeader('Content-Type','application/javascript')
response.write(string)
response.end()
}else if(path === '/pay'){
var amount = fs.readFileSync('./db','utf8')
var newAmount = amount - 1
fs.writeFileSync('./db',newAmount)
response.setHeader('Content-Type','application/javascript')
response.write(`${query.callback}.call(undefined,'你要的数据')`)
response.end()
}else{
response.statusCode = 404
response.setHeader('Content-Type','text/html;chatset=utf-8')
response.write('找不到对应的路径，你需要自行修改 index.js')
response.end()
}
})
