BOM概説とそのトップクラスの対象windowの属性と方法

10798 ワード
BOM
1.BOM概要
1.1 BOMとは何ですか
BOM(Browser Object Model)は、ブラウザオブジェクトモデルであり、コンテンツとは独立してブラウザウィンドウと対話するオブジェクトを提供しており、そのコアオブジェクトはwindowである.
BOMは一連の関連するオブジェクトから構成され、各オブジェクトは多くの属性と方法を提供しています.
BOMは標準に欠けています.JavaScript文法の標準化組織はECMAで、DOMの変準化組織はW 3 Cで、BOMは最初はNetscapeブラウザ標準の一部です.
  • DOM
  • 文書オブジェクトモデル
  • DOMは、文書を対象として扱う
    • です.
  • DOMのトップオブジェクトは、document
    • です.
  • DOMの主な学習は、操作ページ要素
    • である.
  • DOMはW 3 C標準規格
    • である.
  • BOM
  • ブラウザオブジェクトモデル
  • ブラウザを対象として評価する
    • .
  • BOMのトップターゲットはwindow
    • です.
  • BOMで学習されているのは、ブラウザウィンドウの相互作用のいくつかのオブジェクト
    • である.
  • BOMは、ブラウザメーカーがそれぞれのブラウザで定義したもので、互換性が悪い.
    • 1.2 BOMの構成
    windowオブジェクトはブラウザのトップターゲットで、二重の役割を持っています.
  • はJSアクセスブラウザウィンドウのインターフェースです.
  • はグローバルオブジェクトです.グローバルスコープで定義された変数、関数はいずれもwindowオブジェクトの属性と方法になります.
    • 2.window対象のよくあるイベント
    2.1ウィンドウローディングイベント
    //       
window.onload = function() {}
or
window.addEventListener('load/DOMContentLoaded',function(){})
    注意:
  • はwindow.onloadがあったら、JSコードをページ要素の上に書いてもいいです.onloadはページの内容を全部ロードし終わったら、処理関数
    • を実行します.
  • window.onload伝統登録方式は一回しか書けません.もし複数あれば、最後のwindow.onloadを基準にします.
  • addEvent Listenerを使用すれば、
    • は制限されません.
  • ロード:ドキュメントの内容が完全にロードされたときに、このイベント(画像、スクリプトファイル、CSSファイルなどを含む)をトリガする
  • DOMContentLoadedはDOMロード済みで、フラッシュcssなどは含まれていません.
    2.2ウインドウサイズ変更イベント
    window.onresize = function() {}
or
window.addEventListener('resize', function(){})
  • は、ウィンドウサイズがピクセル変化すると、このイベントをトリガする.
  • は、このイベントをよく利用して応答的なレイアウトを達成する.window.inner Width現在のスクリーンの幅
    • 3.タイマー
    3.1二種類のタイマー
  • setTimeout()
    setTimeout(function(){...},    )
// 1.          ，   ，   0
// 2.            ，               （   ）。
// 3.       ，             ，
  • set Interval()
    setInterval(    ,    )
    • 二つの違い:setTimeout:遅延時間が来たら、呼び出し、一回で終了します.set Interval:この時間間隔ごとに呼び出し、何度も呼び出します.
    3.2停止タイマー
    clearTimeout(    )
or
clearInterval(    )
    3.3 this指向問題
    一般的にthisの最終的な方向はその呼び出しの対象です.
  • グローバルスコープまたは一般関数のうち、thisはグローバルオブジェクトwindowを指す(タイマーの中のthisはwindowを指す)
  • メソッドを呼び出し、誰かがthisを実行します.
  • 構造関数におけるthis指向構造関数の例
    • <scrip>
    // 1.             this      window(        this  window)
	console.log(this);//window
    
    function fn() {
    	console.log(this);//window
	}
    setTimeout(function() {
    	console.log(this); //window
    }, 1000)
    
    // 2.         this   
    var o = {
    		sayHi: function() {
    			console.log(this);//o
    	}
    }
    o.sayHi();
    // 3.      this         
    function Fun() {
    	console.log(this); //this   fun    
    }
    var fun = new Fun();
scrip>
    4.JS執行メカニズム
    4.1 JSは単スレッドです
    JavaScript言語の大きな特徴は単一スレッドであり、つまり同じ時間に一つのことしかできないということです.これは、すべてのタスクが列に並んで、前のタスクが終わったら、後のタスクが実行されるということです.問題は、JSが実行する時間が長すぎると、ページのレンダリングが不連続になり、ページのレンダリングがブロックされてしまうということです.
    4.2同期と非同期
    上記の問題を解決するために、マルチコアCPUの計算能力を利用して、HTML 5はWeb Worker標準を提示し、JavaScriptスクリプトに複数のスレッドを作成することができる.
    同期タスク
    同期タスクはメインスレッドで実行され、実行スタックが形成されます.
    非同期の任務
    JSの非同期はコールバック関数によって達成された.
    一般的に、非同期タスクは以下の3つのタイプがあります.
  • 事件、例えばclick、resizeなどの
    • 事件.
  • リソースローディング、ロード、errorなどの
  • タイマーは、set Interval、setTimeoutなどの
    • を含む.
    非同期タスク関連のコールバック関数をタスクキューに追加します.
    4.3 JS執行メカニズム
  • は、まず、スタック内の同期タスクを実行する.
  • 非同期タスク(コールバック関数)をタスクキューに入れます.
  • スタック内の全同期タスクの実行が完了すると、システムは、タスクキューの非同期タスクを順次読み出し、読み出した非同期タスクは、待ち状態を終了し、実行スタックに入り、実行を開始する.
    • ケース1:
    console.log(1);
setTimeout(function() {
    console.log(2);
},0);
console.log(3);
//      1 3 2
    ケース2:
    console.log(1);
document.onclick = function() {
    console.log('click');
}
console.log(2);
setTimeout(function() {
    console.log(3);
}, 3000)
//   
// 1. console.log(1);        1
// 2. document.onclick = fn;    ，         ，         ，            
// 3. console.log(2);        2
// 4. setTimeout(fn, 3000);     ，          
// 5.    1 2                           
//  ：           1 2 click 3
//            1 2 3 click
//              、    、     、   ，           (event loop)
    5.locationオブジェクト
    5.1何がlocationの対象ですか?
    windowオブジェクトは、フォームのURLを取得または設定するためのlocation属性を提供し、URLを解析するために使用できます.
    5.2 locationオブジェクトの属性
  • location.href:URL全体を取得または設定する
  • location.host:ホストに戻る
  • location.port:戻りポート番号
  • locations.pathname:リターンパス
  • location.search:パラメータ
    • を返します.
  • location.hash:戻りフラグメント菗の後の内容はよくアンカーポイント接続
    • にあります.
    5.3 locationオブジェクトの方法
  • location.assign():hrefと同じように、ページをジャンプできます.(リダイレクトページにもなります.)
    • を後退させます.
  • locations.replace():現在のページを置き換えると、履歴が記録されていないので、ページ
    • を後戻りできません.
  • locations.reload():ページを再読み込みすると、リフレッシュボタンまたはf 5に相当します.パラメータがtrueの場合、ctrl+f 5
    • を強制更新します.
    6.navigatorオブジェクト
    navigatorオブジェクトは、ブラウザに関する情報を含み、多くの属性を持っています.最も一般的なのは、クライアントがサーバを送信するuser-agentヘッダの値を返します.
    7.history対象
    windowオブジェクトは私たちにhistoryオブジェクトを提供し、ブラウザの履歴と対話します.このオブジェクトは、ユーザ(ブラウザウィンドウ)がアクセスしたURLを含む.
    history対象方法
  • back():後退機能
  • forward():前進機能
  • go(パラメータ):パラメータは1テーブルに対して1ページ前進し、−1テーブルに対して1ページ後退します.
    • 何が「UMD」ですか