BOMの概要と、その最上位オブジェクトウィンドウのプロパティとメソッド

1.BOMの概要

1.1BOMとは

BOM（Browser Object Model）は、コンテンツに依存せず、ブラウザウィンドウと相互作用するオブジェクトを提供するブラウザオブジェクトモデルです。コアオブジェクトはウィンドウです。

BOMは一連の関連オブジェクトで構成され、各オブジェクトは多くの属性とメソッドを提供します

BOMには標準がありません。JavaScript構文の標準化組織はECMAであり、DOMの標準化組織はW3Cです。BOMは元々Netscapeブラウザ標準の一部でした。

• 判定

  • ドキュメントオブジェクトモデル
  • DOMはドキュメントをオブジェクトとして扱うことです
  • DOMの最上位オブジェクトはドキュメントです
  • DOMは主にページ要素の操作を学習します
  • DOMはW3C標準仕様です

• 良い

  • ブラウザオブジェクトモデル
  • ブラウザをオブジェクトとして扱います
  • BOMの最上位オブジェクトはウィンドウです
  • BOMは、ブラウザウィンドウの相互作用のいくつかのオブジェクトを学習します
  • BOMは、ブラウザの製造元がそれぞれのブラウザで定義しており、互換性が低くなっています。

1.2BOMの構成

ウィンドウオブジェクトはブラウザの最上位オブジェクトであり、2つの役割があります。

1. これは、JSがブラウザウィンドウにアクセスするためのインターフェイスです。

2. これはグローバルオブジェクトです。グローバルスコープで定義された変数と関数は、ウィンドウオブジェクトのプロパティとメソッドになります。

2.ウィンドウオブジェクトの一般的なイベント

2.1ウィンドウ読み込みイベント

// 传统注册方式
window.onload = function() {
    
    }
or
window.addEventListener('load/DOMContentLoaded',function(){
    
    })

注意：

1. window.onloadを使用すると、ページ要素の上にJSコードを記述できます。これは、onloadが処理機能を実行する前に、ページコンテンツがロードされるのを待機するためです。
2. window.onloadの従来の登録方法は、一度しか記述できません。複数ある場合は、最後のwindow.onloadが優先されます。
3. addEventListenerを使用する場合、制限はありません
4. load：このイベントは、ドキュメントコンテンツ（画像、スクリプトファイル、CSSファイルなどを含む）が完全に読み込まれたときにトリガーされます。
5. DOMContentLoadedは、イメージ、フラッシュcssなどを除いてDOMがロードされたことを意味します（ロード速度はロードよりも高速です）

2.2ウィンドウイベントのサイズ変更

window.onresize = function() {
    
    }
or
window.addEventListener('resize', function(){
    
    })

• このイベントは、ウィンドウサイズがピクセル単位で変化する限りトリガーされます。
• 多くの場合、このイベントを使用して応答性の高いレイアウトを完成させます。window.innerWidth現在の画面の幅

3.タイマー

3.12つのタイマー

• setTimeout（）

  setTimeout(function(){
        
        ...},延时时间)
  // 1. 延时时间单位是毫秒，可省略，默认为0
  // 2. 页面中可能有多个计时器，所以经常给计时器赋值一个标识符（变量名）。
  // 3. 这个调用函数，可以直接写函数名不加小括号，把函数内容写在外面
  

• setInterval（）

  setInterval(调用函数,间隔时间)
  

2つの違い：setTimeout：遅延時間が経過したときに呼び出し、1回呼び出した後に終了します。setInterval：時間間隔ごとに呼び出し、複数回呼び出します。

3.2タイマーを停止します

clearTimeout(定时器名)
or
clearInterval(定时器名)

3.3これは問題を示しています

通常の状況では、これの最後のポイントはそれを呼び出すオブジェクトです

1. グローバルスコープまたは通常の関数では、これはグローバルオブジェクトウィンドウを指します（タイマーのこれはウィンドウを指すことに注意してください）
2. メソッド呼び出しで誰がこれを呼び出すか
3. コンストラクター内のこれは、コンストラクターのインスタンスを指します

<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.1JSはシングルスレッドです

JavaScript言語の主な機能はシングルスレッドです。つまり、一度に実行できるのは1つだけです。これは、すべてのタスクをキューに入れる必要があり、次のタスクが実行される前に前のタスクが終了することを意味します。問題は、JSの実行時間が長すぎると、ページのレンダリングに一貫性がなくなり、ページのレンダリングと読み込みがブロックされたように感じることです。

4.2同期および非同期

上記の問題を解決するために、マルチコアCPUの計算能力を使用して、HTML5はJavaScriptスクリプトが複数のスレッドを作成できるようにするWebワーカー標準を提案します。

同期タスク

同期タスクはメインスレッドで実行され、実行スタックを形成します

非同期タスク

JSの非同期性は、コールバック関数によって実現されます。

一般的に、非同期タスクには次の3つのタイプがあります。

1. クリック、サイズ変更などのイベント。

2. ロード、エラーなどのリソースのロード。

3. setInterval、setTimeoutなどを含むタイマー。

非同期タスク関連のコールバック関数がタスクキューに追加されます（タスクキューはメッセージキューとも呼ばれます）

4.3JS実行メカニズム

1. 最初に実行スタックで同期タスクを実行します。
2. 非同期タスク（コールバック関数）はタスクキューに配置されます。
3. 実行スタック内のすべての同期タスクが実行されると、システムはタスクキュー内の非同期タスクを順番に読み取るため、読み取られた非同期タスクは待機状態を終了し、実行スタックに入り、実行を開始します。

ケースナンバーワン：

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.ロケーションオブジェクト

5.1ロケーションオブジェクトとは

ウィンドウオブジェクトは、ウィンドウのURLを取得または設定するためのlocationプロパティを提供し、URLを解析するために使用できます。

5.2ロケーションオブジェクトのプロパティ

• location.href：URL全体を取得または設定します
• location.host：ホスト（ドメイン名）を返します
• location.port：ポート番号を返します
• location.pathname：リターンパス
• location.search：戻り値パラメーター
• location.hash：fragment＃に戻る次のコンテンツは、アンカー接続でよく見られます

5.3ロケーションオブジェクトのメソッド

• location.assign（）：hrefと同様に、ページにジャンプして（リダイレクトページにもなります）、戻ることができます
• location.replace（）：現在のページを置き換えます。履歴が記録されていないため、ページを元に戻すことはできません。
• location.reload（）：ページをリロードします。これは更新ボタンまたはf5に相当し、パラメーターがtrueの場合、強制更新ctrl + f5です。

6.ナビゲーターオブジェクト

ナビゲーターオブジェクトには、ブラウザーに関する情報が含まれています。これには多くの属性があり、最も一般的に使用されるのはuserAgentです。これは、クライアントからサーバーに送信されたuser-agentヘッダーの値を返すことができます。

7.履歴オブジェクト

ウィンドウオブジェクトは、ブラウザの履歴と対話するための履歴オブジェクトを提供します。このオブジェクトには、ユーザー（ブラウザーウィンドウ内）がアクセスしたURLが含まれています。

履歴オブジェクトメソッド

• back（）：戻る関数
• forward（）：フォワード関数
• go（パラメータ）：パラメータは1テーブル前方1ページ、-1テーブル後方1ページです。