46JS断片的な知識1

アヤックス:ページ全体をリロードせずに、ページの技術セクションを更新することができます。
、プロトタイプと--proto-- JSとの間の差との関係
1. Foo.prototypeはFooのインスタンスを共有プロトタイプオブジェクトのコンストラクタメソッドを保持し、コンストラクタFooのコンストラクタをバックのポインタがあります。
全ての方法は、(--proto--)、オブジェクトコンストラクタ関数プロトタイプを指し、プロトタイプは、オブジェクトのインスタンスにアクセスすることができる属性2.Foo例です。
3、FOO .--プロト- === Foo.prototype
2、プログラミングモード
(1)プロセス指向のプログラミング:ビジネス・ロジックに基づいて、ダイレクトライトコード。
(2)プログラミング機能:動作中のパッケージの機能。
(3)オブジェクト指向プログラミング:分類およびパッケージングのために機能します。
第三に、クロージャ:全体的なグローバル変数の関数として内部関数の戻り値を解除することができない機能の全体的な範囲で得られ、参照され、この機構は、閉鎖されます。その役割は、このようにグローバル変数の数を減らし、ローカル変数の値を取得するために、グローバル変数を作ることです。それは副作用だ、メモリリークにつながる、解放されません。解決策:代わりにクロージャの自己実行機能を使用しています。
第四に、モバイルエンドポイントを
1、理由:
(1)300ミリ秒の遅延:ブラウザはユーザーが二度目にクリックしたかどうかを確認し、ユーザーがページをクリック、またはダブルクリックしてページを拡大したいかどうかを判断します。
(2)指は、システムは、タッチイベントが直ちに300msの後にクリックイベントを生成する生成、画面をタッチ。タッチの実装の結果が要素である場合は、文書ツリーから消え、要素の位置が検出されたときに300ミリ秒後にシステムを起動するためにクリックするか、入力要素、この要素内の役割の上に、次にクリックイベント。
2.ソリューション:
(1)デフォルトのイベントを防止するために
`` `JavaScriptを:実行
ele.addEventListener( "touchEnd"、関数(イベント){
ele.style.display = "なし"、
event.preventDefault();
});
//タップ・イベント・ポイントを介して、以下zepto溶液
ele.on( "touchend"、関数(E){
$( "#1 AlertBox")非表示();
; e.preventDefault()
);}
`` `
(2)は、遅延タイマー
`のJavaScript:RUN
ele.addEventListener( "touchEnd"、関数(イベント){
たsetTimeout(関数(){
ele.style.display = "なし";
}、400);
});
タップ・イベント・ポイントを介して//以下zepto溶液
ele.on( "touchend"、関数( ){
setTimeout(関数(){
$( "#1 AlertBox")非表示();.
}、350);
});
`` `
ファイブに加入-リリースモード:
1、カスタムイベントを追加するDOMオブジェクト属性:obj.selfEvent = [];
2、サブスクリプション(結合)関数を定義し、複数のカスタム機能、リリース機能
3、複数回のサブスクリプション(結合)関数(1)配列の中に、より多くのカスタム関数
4、実行パブリッシング機能、カスタム機能を実行するために、配列を横断、カスタムイベントのプロパティを見つける
すべての場所で、要するに、「購読(バインドの実装リリース機能「トラバース実行「との適切な時期を待って、DOMオブジェクトのプロパティの配列に(カスタム)関数で、」)機能。
六、タイプJS =「ボタン」とタイプ=「提出」の違い
(1)タイプ=提出し、そのonclickの、フォーム送信後にデフォルトのイベントとして、HTMLのname属性を持つすべてのフォーム、form.submit()を送信することです(等の入力ラベル、ボタンのラベル、ラベルを選択し、含む)入力要素キーと値のペアとして送信され、加えて、オブジェクトを提出するには、
(2)TYPE =ボタンは、純粋に機能上のボタンであり、それはデフォルトのイベントがありません。
七、DOMContentLoadedとwindow.onloadの違い
1、ときに、ページに完全にロードされwindow.onloadイベントがトリガされ、(スタイルファイル、画像ファイル、サブフレームページ(インラインフレーム)を含む)
の負荷とHTML文書の解析が完了すると、2(すなわち、すぐにトリガイベントDOMContentLoaded後)DOMドキュメントオブジェクトモデルを構築したとき。
八、あなたがページを、解析完了したときにスクリプトが実行されますが、延期、非同期を使用しない場合は
、非同期属性はHTML5で新しく追加され、1を(src属性を使用する場合のみ)、唯一の外部スクリプトに適用されます。
図2に示すように、非同期、ページの残りの部分に対して非同期でスクリプトが実行される(ページを解析するときに、スクリプトが実行され、続きます)
3、ページがロードされるまでスクリプトの規定の実施を遅らせるために、IEのサポート延期プロパティを延期。
4、$()を呼び出すことが等しい$(FN)を呼び出す。レディ(FN) 、 $(ドキュメント).ready(FN)を呼び出すに等しい
文書のレンダリングを停止していない延期またはasync属性、スクリプトタグと5を、スクリプトはすぐにダウンロードします実行。例えば、体内の頭の中では、jsの値に失敗します。
九、Jsの3つのイベント
1、マウスイベント
(1)クリック:クリックしてください
(2)DBLCLICK:ダブルクリック
(3)マウスダウン:ダウンマウス
(4)のmouseup:マウスのリフト
(5)マウスオーバー:ホバー
(6)マウスアウト:マウスの葉
(7)のMouseMove:マウスの動きは、
(8)のMouseEnter:マウスに入る
マウス葉(9)mouseleaveが
2は、キーボードイベント
キープレス(1)のKeyDown
(2)keyUpイベント:リフトボタン
(3)キー押下:キーリフト機
3、HTMLのイベント
(1)荷重:ロード文書
(2)を選択:選択された時間
コンテンツが変更された:(3)変更
(4)フォーカス:カーソルを与える
(5)リサイズ:ウィンドウのサイズ変更を
(6 )スクロール:スクロールバー
テン、JSマウスイベントオブジェクト。マウス、キーボード、およびHTMLがイベントをトリガすることができ、マウスによってトリガイベントは、自動的にマウスイベントオブジェクトであり、実行する機能にオブジェクトを渡します。
出典:HTTPS://www.cnblogs.com/nield-bky/p/6081830.html
1、タイプ:そのようなクリックのonlickとしてイベントの種類、;
2、srcElement /ターゲット:イベント・ソース、イベント発生素子です。
3、ボタン:宣言マウスボタンが押下され、整数、代わって押しながら複数のキーを約3、ワイン、これらの値を一緒に押された場合、右2の代わりに、左を表し、4は、結合を表します下;(Firefoxで左のために、重要な中間体を表し、0、2表し右)
4、clientX / clientYプロパティ:イベントが発生した場合、原稿領域の視覚的な位置のブラウザウィンドウの左上隅に対するマウスに対して、DOM標準で(。 IEのように両方のプロパティ値は、イベントを取得するためには、関係なく、イベントは、ウィンドウの左上隅に発生するたびに、文書のスクロールは、clientXとclientYプロパティが0であるところの、つまり、ケースファイルをロール考慮していません文書の先頭に位置を座標、及びdocument.body.scrollLeft document.body.scrollTop追加する
5、offsetX、offsetY / layerX、layerY:イベントが発生し、ソース要素の左上隅にマウスの位置を、
図6に示すように、X- 、Y / pageX、P Agey:親要素マウス水平に対する座標で整数を検索するステップと、
7、altKeyの、ctrlKeyは、好きshiftKey:ブール値を返し、
8キーコード:復帰時間のKeyDownここkeyUpイベントイベントキーコード、およびUnicode文字keypressイベント。 (event.keycodeをサポートしていませんfirefox2、あなたはevent.which代替物を使用することができます)
;:9のfromElement、toElementが前者はマウスでマウスオーバーイベントを指す文書の文書要素にマウスを移動するイベントをマウスアウト参照要素、移動
これがtrueに設定されているブールプロパティ、10、cancelBubbleを要素のさらに包含階層にバブリング停止イベント;(e.cancelBubble =真; e.stopPropagation()の同等;)
11、のreturnValueは:ブール型プロパティは、あなたが組織のイベントアクションを実行するために、デフォルトのブラウザを設定することができたときに偽であります(e.returnValue = FALSE; e.preventDefault()に対応する。)
12は、attachEvent(IS)、detachEvent()/のaddEventListener()にremoveEventListener:イベント登録機能の複数を処理するための方法の開発のためのDOMオブジェクトのイベントタイプ、彼らが持っています二つのパラメータ、イベントの第一種、第二のイベントハンドラ。ときattachEvent()イベント実行、ウィンドウオブジェクトへのこの重要なポイントではなく、事件の要素よりも、
13、がscreenX、screenYの:ディスプレイの左上隅にマウスポインタの相対的な、新しいウィンドウを開きたい場合は、これら二つの特性は重要であり、
XI、相互変換サーバの時刻とローカル時刻
`のJavaScript
関数addZero(番号){
リターン(にNumber.toString())[1]番号:? '0' +数;
}
関数toLocaleDateTime (SERVERTIME){
//と、GetTimezoneOffset()メソッドは、分単位、経度負ローカル時間とGMTとの間の差を返します。
VaRのtimeZoneMilliSeconds =新しいDate()と、GetTimezoneOffset ()* 60 * 1000 ;. // 東地区8の北京は、時間差がX 8 :-( 60)= -480(分)である
VAR =新しい新serverMilliSeconds日(SERVERTIME).getTime( );
VAR = serverMilliSeconds localeMilliSeconds-timeZoneMilliSeconds;
VAR =新しい新しいlocaleDateTime日(localeMilliSeconds);
VAR localeYear localeDateTime.getFullYear =();
VAR = localeMonth addZero(localeDateTime.getMonth());
VAR = localeDate addZero(localeDateTime.getDate()) ;
VAR = localeHours addZero(localeDateTime.getHours());
VAR = localeMinutes addZero(localeDateTime.getMinutes());
VAR = localeSeconds addZero(localeDateTime.getSeconds())。
localeYear + "年" +(localeMonth + 1)+ "月" + localeDate + "日"+ localeHours +"时" + localeMinutes + "分" + localeSeconds + "秒"を返す
}
関数toServerDateTime(localeDateTimeを){
VARのtimeZoneMilliSeconds =新しいDate()。 GetTimezoneOffset()* 60 * 1000;
VaRのlocaleMilliSeconds =新しいDate(localeDateTime).getTime();
VAR serverMilliSeconds = localeMilliSeconds + timeZoneMilliSeconds。
VaRのserverDateTime =新しいDate(serverMilliSeconds)。
VAR serverYear = serverDateTime.getFullYear()。
VAR serverMonth = addZero(serverDateTime.getMonth())。
VAR serverDate = addZero(serverDateTime.getDate())。
VAR serverHours = addZero(serverDateTime.getHours())。
VAR serverMinutes = addZero(serverDateTime。
VAR serverSeconds = addZero(serverDateTime.getSeconds());
戻りserverYear + " - " + serverMonth + " - " + serverDate + "" + serverHours + ":" + serverMinutes + ":" + serverSeconds
}
``
12、Webコンポーネントの機能
Webコンポーネント:4つの部分で構成機能のリストとHTML DOMの仕様を追加し、開発者がWebアプリケーションやドキュメント要素または再利用可能なコンポーネントを作成して自由になるように、
HTMLテンプレート(HTMLテンプレート):HTMLテンプレートのDOM、テンプレート< >要素宣言。
インポートHTML(HTML輸入):文書にインポートHTML文書を定義する他の方法、
カスタム要素(カスタム要素):;新しいHTML APIの一連の要素を定義するには
DOM(シャドウDOM)シャドウ:DOMパッケージ化とのスタイルを。
XIII、追加、削除、検索DOM要素を変更するには
1つの増加:のappendChild、のinsertBefore、setAttributeメソッド
2を、削除:removeChildの
3、変更は:REPLACECHILD
4を、探し:getElementByIdを、getElementsByTagNameの、のgetElementsByClassName、querySelector 、querySelectorAll
フォーティーン、類似点とJavaScript onbeforeunload()とのonunload()イベントの違い。
1、同じポイント:両方がページ上で閉じたり、操作のためのイベントを更新しています。
図2に示すように、異なる点:onbeforeunload()イベントは、偽のプレスF5を防止するために、ページのアンロードトリガ前のlocalStorageデータ記憶装置と、データは、このイベントでのonloadイベントで読み取られ、onunbload()イベントは、ページアンロードした後にトリガされます。前者は後者が発生禁止することができます。
第五に、ネイティブのキーボードイベントは、
(1)にonKeyDownボタンを押したときに発生します。
(2)キーを離したときに発生するonkeyupの。
これは、(3)onkeypressではプレスを発生し、キーを離します。
フォーカスが得られた場合には、ONFOCUS(4)が発生します。
結合およびタイマクリア16個
VAR surplusTimeText = $( "#surplusTimeTextを");
てclearInterval(surplusTimeText.timer);
surplusTimeText.timerでのsetInterval(関数(){}、1000)=、
オブジェクトのXVII取得特性値
VAR OBJ = {名: 'ジョン・ドウ' ,. 1:10000};
はconsole.log(OBJ [ '名前']);
;はconsole.log(OBJ [1])
の基本的なタイプに18は、JavaScript変数そして、参照型。
図1に示すように、基本的なタイプ:スタックメモリデータセグメント簡単に格納された基本的なタイプ、。そこ未定義、ヌル、ブール値、数値、および文字列。メモリのこれらのタイプは、それぞれ、固定サイズの占有スペースで、その値は値によりを通じて、スタック空間にアクセスできます保存されています。基本的なタイプは、現在の実行環境の終わりに破壊されました。
2、参照型:参照型、ヒープメモリ内のオブジェクトを保存します。日付は、Array、数学、正規表現。サイズ値は、ヒープメモリ内のオブジェクトを(マッピングされた参照、ポインタ、)スタックメモリに記憶されたアドレスに固定されていません。それは、参照することによってアクセス可能です。これだけの値に割り当てられたヒープメモリ空間内のオブジェクトに格納されているスタックメモリアクセスアドレス。この値の大きさが固定されていないので、スタックメモリにそれらを保存することはできません。しかし、固定、スタックメモリサイズのメモリアドレスにメモリアドレスを節約することが可能です。このように、クエリ参照型の変数、メモリアドレススタックの読み取りを開始し、その後アドレスを介して、ヒープの値を求めます。
参照型は、すべての変数参照が、それはこのオブジェクトが唯一のガベージコレクションメカニズムをリサイクルした存在しない場合にのみ、破棄、実行環境で終了しません。
3、スタックメモリ:基本タイプを保存します。
4、ヒープメモリ:(オブジェクトを参照するために使用されるスタックメモリのヒープメモリに格納されたオブジェクト・タイプ値のベースメモリアドレス)参照タイプを格納する
19を、データのダウンロードの前端部
`` `のJavaScript
次いで(関数(データ){
VAR = data.data BLOB;
VARのA =のdocument.createElement( 'A');
/*document.body.appendChild(a);*/
a.download = 'pcaps'; //ファイル名を指定するために使用
a.href = URL.createObjectURL(ブロブ); //新しいオブジェクトのURLを作成します
a.click();
/ * $(A).remove(); * /
});
``
20、書かれた3つのサイクルのための
`のJavaScript
(ステートメント1、文2、文3){
//コードブロックが実行される
ステートメント1:@実行サイクルの前に
2文@:サイクリング条件を
3ステートメント@:ループが実行された後、エラー欠失
}
(VARのI = 0;私は10 <。 ++ I){
にconsole.log(I)、
我々は9を介してループ出力0使用する場合//我々が書くことができる
}
(VAR = I 10について、I- = 2;){//サイクル条件は、(真であります)、ループモード(減少)、合わせ
にconsole.log(I);
サイクルが続く場合//文2には、それは真を返します。JSでは0、ヌル、未定義、偽、 「」、「」 偽の結果、それはi-- 0が偽であると言うとき、ループが終了するよう決意条件。
}
(VAR I = 0、ルール、ルールはルール= [I ++];)について{
// VAR I = 0、ルール、文1ループ前に実行され、変数宣言され;
//ルールがルール= [I ++は】 ;これは、ループのための条件である、文は2であり、それは未定義の終了サイクルになりますとき。
}
`
21人は:typeof演算の結果によれば、6つのデータタイプをJS。文字列に加えて、他のデータ値は、引用符は、それは文字列となり、引用される必要はありません。
1、NULLデータ・タイプが初期化またはメモリをクリアするために使用される変数人に割り当てられ、ヌルつのみ値ヌル有し;
2、不定不定データ値の一種類のみを、未定義のデフォルト(割り当てられていない)変数に代入されますそのため、変数は、この値の演劇に割り当てられていません。
3、ブールデータ型が真と偽の2つだけの値を有し、それは、真と偽のプログラミング・ステートメントに表示されること
4、数値データ値の多数の種類があり、それは、多数のデジタルプログラミング文に見出すことができる
5、文字列データそこ値の数多くの種類があるので、あなたが列に表示されたプログラミング・ステートメントの数に制限はありません
、オブジェクトのデータ型は、多数の値を使用すると、オブジェクトの数に制限はありませんので、プログラム文に表示され、そこにある6
XXI共通のコンソール表示つまり
、この変数が存在していた1を、「赤」の単語無定義されて与えられていないされていると、コンソールは、
コンソールが表示未定義、2、変数がありますが、割り当てられていません。
図3に示すように、コンソールディスプレイヌル、変数がNULL割り当てられる
4、(ブランク)コンソール表示は、変数が空の文字列(偶数ブランクを考慮していない)が割り当てられ
XXII、以下の結果がすべてtrueにあり
、ブール(1不定)=== falseに
falseに===ブール(NULL)、2
。3、ブール値(0)=== falseに
。4、ブール(のNaN 3)=== falseに
。5、ブール( '')をfalseに===
二十三、HTML5のBlob実装ファイルのダウンロード機能
1、要素=のdocument.createElement VAR( 'A')を作成します。
2、現在のファイルa.hrefメモリURLを作成= URL.createObjectURL(responseData.data); responseData背景値のためのトータル・リターン;
3、現在のファイルをダウンロード= responseData.headersのa.download( 'ファイル名');
4、オートクリックa.click();
5、要素$(a)の.remove()を削除し、
20 4、およびスクリプトタグの延期特性同期属性
1、延期:非同期延期
同期:2、同期
XXV、要素およびマウスに関連付けられたデータ
ソースをhttps://www.cnblogs.com/ifworld/p/7605954。 HTML
https://www.cnblogs.com/youziclub/p/4811069.html
。1、素子自体(幅、高さ)
(1)style.height:コンテンツ要素の幅のみ;
(2)cli​​entHeight:パディング要素を含みます幅;
(3)offsetHeight:フレーム要素の幅が含まれる。
scrollHeight(4):;パディング要素とオーバーフローの幅
2、素子以外の(左側)
(1)のclientTop:境界要素の高さ。
(2)style.top下部親位置決め要素との間の境界からの距離に上フレーム要素、例えば「は50px」として、読み取り可能、書き込み可能、
(3)offsetTop上部フレーム要素から親要素の上に配置されています50などの下縁との間の距離は、読み取り、および書き込み
ウィンドウの上部の高さが隠されている; scrollTopスプライト(4)
3、マウスイベント(clientX、pageX、がscreenX、offsetX)
clientX:ブラウザにマウスに対して(1)。ウィンドウ(==がscreenX clientX次に、ブラウザウィンドウが最大化されている場合);
(2)pageX:ページへのマウスに対して(ページバー== clientX pageXをスクロールしていない場合);
(3)がscreenX:表示画面にマウスに対して;
4)offsetX:イベントソースフレームに対するマウスに対して、
4、innerHeightは高さjQueryの()()。 outerheight() 区別要約
()(1)高さ:高さ範囲は、素子の高さの高さを一致させます。
(2)はinnerHeight():高要素+パディングマッチングの高さの高さ範囲;
outerHeight()(3);高さ範囲は、素子高さ+パディング+ボーダーの高さと一致している
(4)outerHeight(真の)がファン高さ 要素の高さが一致した高さ+パディング+ボーダー+マージンである
XXVI、関数の実行からの書き込みの6種類
`のJavaScript
(関数(){にconsole.log()})();
(関数(){コンソール.logの()}())。
!機能(){はconsole.log()}();
〜機能(){はconsole.log()}();
void型関数(){はconsole.log()}();
VAR Fnは=関数(){コンソール.logの()}();
``
XXVII、in vivoでの機能は、望ましくない、または削除得ランエラーを回避するために、パラメータ、パラメータを使用して実行される、受信パラメータは変数場合、変数を処理するために必要と同じ名前とパラメータ名、変数はvarステートメントを使用する必要はありませんので
、 `` `のJavaScript:RUNの
機能のFn(パラメータ){
のparam =のparam || ''
//または
VARのparam = MYPARAM || ''
}
` ``
二十から八、モジュラーJS
1、JS commonJSのモジュラープログラムである
図2に示すように、バックグラウンドによって実現プログラムのNode.js
、AMD(require.js)、CMD(sea.jsによってフロントエンド3 ) このソリューションの実装を

おすすめ

転載: www.cnblogs.com/gushixianqiancheng/p/10966936.html