JavaScript FAQ：パート2

約2か月前、 TheShockと私はJavaScriptのFAQトピックであるJavaScriptの質問を集めました：質問をします。 最初の部分、私が得た質問は、数日後にJavaScript FAQ：パート1に現れましたが、2番目の部分はうまくいかず、うまくいきません。 TheShockは現在、別の国に移動しているため、答えに応じていません。 彼は私に彼の部分に答えるように頼んだ。 したがって、答えの2番目の部分は、私も得た質問です。

このパートでは：

1. eval = evilなのはなぜですか？
2. evalを置き換える方法は？
3. フラッシュなしでJSを使用してサウンドを再生する方法 どの形式がサポートされていますか？
4. グローバル変数を使用すると、スクリプトがどれくらい遅くなりますか？
5. JSでテキストが選択されないようにする方法は？
6. （関数（）{}）（）; このデザインは何に使用されますか？
7. イベントをリセットしてアイテムの状態を復元する方法は？
8. Ajaxアプリケーションでパラメータ付きのjsコマンドを正しく転送するにはどうすればよいですか？
9. すでにjQueryパスウィンドウが既にグローバルであるのに、なぜ未定義なのですか？
10. ユーザーがマウスホイールを回転させる方法を見つける方法
11. 要素フォーカスイベントがありますか？ない場合、それを実装することは可能ですか？
12. 不変オブジェクト（フリーズ）の作り方
13. DomElementのカスタム実装を作成して、タグのサブセットを解析するときに使用できるようにすることは可能ですか？
14. どのクライアントMVCフレームワークをお勧めしますか？
15. リファラー制限のバイパス
16. JavaScriptでのGOTO
17. JavaScriptの継承。 男と女を人間から拡張するイデオロギー的に正しい方法
18. レイアウトとサーバーサイドを掘り下げることなく、JavaScriptプログラマーを獲得することは可能ですか？
19. サーバーから.jsから実行されるコードにデータを転送する方法は何ですか？
20. 通常のDOMElemen（div）を使用してDOMInputElementの動作を取得（エミュレート）できますか？
21. プライベートおよびパブリックメソッドの問題
22. JSを使用して複数のファイルを同時に選択してアップロードする方法
23. FileおよびFormDataを使用してファイルをダウンロードする場合、ユーザーがディレクトリをロードしようとしているかどうかをどのように判断できますか？
24. JavaScriptの宣言/注釈（それぞれPython / Javaからの用語）に類似するものはありますか？

1.なぜeval = evilなのですか？

1. Evalはプログラムの通常のロジックに違反し、コードを生成します。
2.現在のコンテキストでコードを実行し、それを変更できます-攻撃の潜在的な場所。 コンテキストは、次のトリックを実行することで変更できます。

(1,eval)(code); 

ここで何が起こるか：evalは、呼び出し方法に依存する同じ関数です。 この場合、コンテキストをグローバルに変更します。

3. evalによって生成されたコードはデバッグが困難です。
4. Evalの完了には非常に長い時間がかかります。

読む
グローバル評価。 オプションは何ですか？
stackoverflowに関する質問の束：
stackoverflow.com/questions/197769/when-is-javascripts-eval-not-evil
stackoverflow.com/questions/646597/eval-is-evil-so-what-should-i-use-instead
stackoverflow.com/questions/86513/why-is-using-javascript-eval-function-a-bad-idea
...

2. evalを置き換える方法は？

evalの最良の代替は、evalの使用を伴わない優れたコード構造です。 ただし、evalは常に簡単に拒否できるとは限りません（JSON Parsing、Pattern Resizer）。
evalの適切な代替は、Functionコンストラクターです。 しかし、これはグローバルコンテキストで実行されるのと同じ評価です。

 new Function('return ' + code)(); //    (1,eval)(code); 

3.フラッシュなしでJSを使用してサウンドを再生する方法 どの形式がサポートされていますか？

最も簡単な解決策：

 <audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> Your browser does not support the <code>audio</code> element. </audio> 

ただし、これはHTML5オーディオに限定されません。 フォーマット：Ogg Vorbis、WAV PCM、MP3、AAC、Speex（ブラウザ依存）フォーマットについて： オーディオフォーマットのサポート

読む
HTML5オーディオおよびゲーム開発：ブラウザーのバグ、問題と解決策、アイデア
WHATWG-オーディオ要素
MDN-HTMLオーディオ
例： シンプルなシンセの作成
例： オーディオサンプルを含むグラフィックの表示
例： オーディオスペクトルの視覚化
例： Webベースのトーンジェネレーターの作成

4.グローバル変数を使用すると、スクリプトがどれだけ遅くなりますか？

特定のブラウザに依存します。 最新のブラウザでは、この瞬間は最適化されており、違いはありません。 古いものでは、グローバル変数へのアクセスは2倍遅くなります。

テストは次のとおりです。jsperf.com / global-vs-local-valiable-access
これはテストであり、各操作は1秒あたり最大100万回実行されるという事実を考慮してください。 テストの増加が30％であっても、最初の操作の実際の増加は悲惨です（マイクロ秒）。

5. JSでテキスト選択を無効にする方法は？

いくつかのオプションがあります。

1. onselectstartおよびonmousedown preventDefaultを実行しonmousedown

 var element = document.getElementById('content'); element.onselectstart = function () { return false; } element.onmousedown = function () { return false; } 

2. unselectable属性を追加する

 $(document.body).attr('unselectable', 'on') 

3. user-select: noneスタイルを追加しuser-select: none

 .g-unselectable { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } 

この問題にはとんでもない解決策があります。
4. Range, TextRange, Selectionをクリーニングするタイマー
説明しません。 Selectionの操作方法は、 Range、TextRange、およびSelectionで確認できます。
5.キャンバスにテキストをレンダリングする
6.無効なテキストエリアを使用する

 <textarea disabled="disabled" style="border:none;color:#000;background:#fff; font-family:Arial;">      JS? </textarea> 

以下は、メソッド1〜3を使用したjQueryのマイクロプラグインです。

 $.fn.disableSelection = function() { function preventDefault () { return false; } $(this).attr('unselectable', 'on') .css('-moz-user-select', 'none') .css('-khtml-user-select', 'none') .css('-o-user-select', 'none') .css('-msie-user-select', 'none') .css('-webkit-user-select', 'none') .css('user-select', 'none') .mousedown(preventDefault); .each(function() { this.onselectstart = preventDefault; }); }; 

このプラグインは、ユーザー選択または選択不可をサポートしていないブラウザーでは、Ctrl + A Ctrl + Cから保存しません。 注意：選択を禁止することは悪です。

6.（関数（）{}）（）; このデザインは何に使用されますか？

これは、即時起動関数式（IIFE）と呼ばれます。これは、作成直後に呼び出された式関数です。

IIFEを作成するいくつかの方法を次に示します

 (function(){ /* code */ })(); //  IIFE (function(){ /* code */ }()); //   //     "" true && function(){ /* code */ }(); 0,function(){ /* code */ }(); //  ,      !function(){ /* code */ }(); // Facebook style ~function(){ /* code */ }(); -function(){ /* code */ }(); +function(){ /* code */ }(); //  new new function(){ /* code */ } new function(){ /* code */ }() //   ,    

使用場所：
1.外部環境に入らないためにいくつかの変数が必要な場合（letなど）

 var APPLICATION_ID = function(){ var keys = { 'pew.ru': 15486, 'pew.pew.ru': 15487, 'pew.pew.pew.ru': 1548 }; return keys[window.location.host]; }(); 

2.ローカル回路の作成-モジュールの基礎、状態を保存するオブジェクト

 var Module = (function(){ function privateMethod () { }; return { publicMethod: function () { return privateMethod(); } }; }()); 

読む
即時呼び出し関数式（IIFE）
ECMA-262-3の詳細。 第5章機能
関数と関数スコープ
名前付き関数式
JavaScriptモジュールパターン：詳細
JavaScriptで説明された閉鎖

7.イベントをリセットし、要素の状態を復元する方法は？

HTMLとCSSを使用して最初に設定された「A」パラメータを持つある種のDOMオブジェクトがあります。 このプロセスでは、パラメーターを動的に「B」に変更します。 オブジェクトの状態を初期状態「A」に「リセット」する簡単な方法はありますか？ イベントも同様です。 初期状態にロールバックする方法は？

オブジェクトの状態のロールバックは機能しません。 要素はさまざまな方法で取得できるため、DOMは状態を保存しません。htmlコードや生成されたJavaScriptから直接取得できます。

イベントを使用すると、すべてが簡単になります。 DOMには優れたcloneNodeメソッドがあります。 要素をそのすべてのコンテンツで複製し（イベントはありません）、古い要素を新しい要素で置き換えます。

 //   $('input').click(function(){alert('')}); function resetEvents(element) { var newElement = element.cloneNode(true); element.parentNode.insertBefore(newElement, element); // fixed by @spmbt element.parentNode.removeChild(element); return newElement; } resetEvents($('input')[0]); //       

8. ajaxアプリケーションでパラメーターを使用してjsコマンドを正しく転送する方法

引用符で大騒ぎせずにajaxアプリケーションでパラメータ付きのjsコマンドを正しく転送するにはどうすればよいですか？ これは、上記のajaxシステムでのデータ転送に関連しています。 ネストパラメーターのいくつかのレベル（たとえば、 "setTimeout（ 'alert（" Boom !!! "）;'、200）;"）で複雑なコマンドを送信すると、引用符を使用すると問題が発生します。 それらを解決する方法、またはそれらの設計に関する一般的なルールはありますか？

サーバーからクライアントへのコードの転送は悪いです。 これは、evalの問題に似ています。 正しく、迅速かつ安全に、送信されるのはコードではなく、ブラウザーが処理するデータです。

RPCを使用できます。 NowJSを使用すると、非常に透過的なRPCを取得できます。 NowJSは、クライアント上で機能を実行するときにサーバー上で機能を実行できるフレームワークです。

ここにサイトからの例があります：
サーバー上：Node.JSサーバー

 var nowjs = require("now"); //   http  var everyone = nowjs.initialize(httpServer); everyone.now.getServerInfo = function(callback){ db.doQuery(callback); } 

クライアントで

 now.getServerInfo(function(data){ //   }); 

シンプルで透明、美しい！

読む
NowJSの開始

9. jQueryパスウィンドウが既にグローバルであるのになぜ未定義なのですか？

jQueryはクロージャーを作成し、ウィンドウをスローして未定義にします。
1. undefinedは、コードの量を減らし、 undefinedを書き換える問題を回避するために渡されます。 jQueryはしばしばundefinedと比較され、圧縮されるとundefinedは1文字の変数に変わります。
2.コードの量を減らすためにwindowが渡されます。 jQueryは、 window.setInterval()などを使用して、独自のウィンドウメソッドを分離する適切なポリシーを適用します。 圧縮されると、 windowは1文字の変数に変わり、コード内ではc.setInterval()

10.ユーザーがマウスホイールをどの方向に回すかを調べる方法

スクロールホイール ' DOMMouseScroll '（Firefox）および ' mousewheel '（残り）に応答する2つのイベントがあります。
イベントをハングアップする方法、私は誰もが理解していると思う、そのハンドラを見てみましょう

 function wheel(event){ var delta = 0; if (!event) event = window.event; //  IE. //   delta if (event.wheelDelta) { // IE, Opera, safari, chrome -    120 delta = event.wheelDelta/120; } else if (event.detail) { // Mozilla,    3 delta = -event.detail/3; } if (delta) { //    -   ( ). if (event.preventDefault) { event.preventDefault(); } event.returnValue = false; //  IE //    0,    ,   var dir = delta > 0 ? 'Up' : 'Down', } } 

jQueryには、 マウスホイールプラグイン jQueryマウスホイールプラグインデモがあります

すべての要素がスクロールイベントを生成できるわけではありません。 特定のブラウザに依存します。 続きを読む： スクロールとマウスホイール

11.要素にフォーカスイベントがありますか？ない場合は、実装できますか？

フォーカスは論理的なイベントであり、オブジェクトが選択されたことを示します。

標準を読むと、 focusおよびblurイベントはフォーム要素（LABEL、INPUT、SELECT、TEXTAREA、およびBUTTON）専用であると書かれていfocus 。 標準では、他の要素はこのイベントを生成できません。 他のすべての要素には、他のDOMFocusOutとDOMFocusOut 。 IEはいつものように、独自のイベントfocusinとfocusoutます。
また、Firefoxは標準に特に準拠していません。 focusとblurスローできる形式を除き、いくつかの要素があります。

focus, blur, focusin, focusout, DOMFocusIn, DOMFocusOutアウトfocus, blur, focusin, focusout, DOMFocusIn, DOMFocusOutます。
www.quirksmode.org/dom/events/tests/blurfocus.html
要素の3つのイベントすべてをリッスンすると、要素がフォーカスを受け取ったかどうかを判断できます。

読む
ぼかしとフォーカス

12.不変オブジェクトを作成する方法（フリーズ）

ECMAScript 3（すべてのJavaScriptエンジンがサポートする標準）では、オブジェクトをフリーズすることはできませんでしたが、ECMAScript 5では、オブジェクトの変更をすぐに制限するいくつかの関数が登場しました。

Object.preventExtensionsは最も弱い制限です。 オブジェクトは追加のパラメーターを受け取ることができません
Object.seal - preventExtensions +パラメータは削除できません
Object.freeze - preventExtensions + seal +パラメータは読み取り専用になります
すべてのブラウザがこれらの新しいメソッドをサポートしているわけではありません 。

読む
JavaScript 1.8.5の新機能
Object.preventExtensions / seal / freeze関数（JavaScript）
ECMAScript 5互換性テーブル

13.タグのサブセットの解析に使用されるように、DomElementのカスタム実装を作成することは可能ですか？

直接いいえ。 DOMはJavaScriptとは別であるため、いくつかの制限があります。
1.特定の要素のコンストラクターはありません-要素のファクトリーのみがありますString.prototype.anchor document.createElement('')および要素を作成するための文字列メソッドString.prototype.anchorなど。 HTMLElementとHTMLDivElementはコンストラクターではありません。
2.コンストラクタをエミュレートしても、DOMはオブジェクトをツリーに挿入した後、オブジェクトを「クリア」します。
例

 //   - var HTMLZzzElement = function () { var self = document.createElement('zzz'); self.__proto__ = HTMLZzzElement.prototype; return self; }; //   HTMLUnknownElement function F(){} F.prototype = HTMLUnknownElement.prototype; HTMLZzzElement.prototype = new F(); HTMLZzzElement.prototype.constructor = HTMLZzzElement; HTMLZzzElement.prototype.pewpewpew = function () {}; //  var zzz = new HTMLZzzElement(); // ,  zzz.innerHTML = 'Yohoho!'; //  console.log(zzz instanceof HTMLZzzElement); // true console.log(zzz instanceof HTMLUnknownElement); // true console.log(zzz instanceof HTMLElement); // true console.log(typeof zzz.pewpewpew); // function //  -   //   DOM document.body.appendChild(zzz); //   zzz = document.querySelector('zzz') //   console.log(zzz instanceof HTMLZzzElement); // false console.log(zzz instanceof HTMLUnknownElement); // true console.log(zzz instanceof HTMLElement); // true console.log(typeof zzz.pewpewpew); // undefined 

ただし、メソッドとプロパティをHTML要素の「クラス」のプロトタイプに追加して、将来使用することができます。

 HTMLUnknownElement.prototype.pewpewpew = function () {}; console.log(typeof zzz.pewpewpew); // function 

「クラス」の継承チェーンは
Node -> Element -> HTMLElement -> HTMLDivElement/HTMLMetaElement ...
要素のプロトタイプにメソッドを追加できますが、他の人のオブジェクトにパッチを当てるのは悪いことを忘れないでください！

このメソッドは、最新のブラウザーでのみ機能します。 IE8以下では、html要素は空中から取られるため、プロトタイプを低レベルで書き換えることはできません。

 >>document.createElement('div').constructor //undefined --   null... 

 >>document.createElement('div') instanceof Object //false -- , ?    toString   >>Object.prototype.toString.call(document.createElement('div')); //"[object Object]" 

14.クライアントMVCフレームワークのアドバイスは何ですか？

多くのフレームワークがあります。
JavaScriptMVC
Backbone.js
スプラウトコア
トリムジャンクション

すべてを見て、あなたが一番好きなものを選択してください。 Backbone.jsとのみ緊密に連携しました

読む
Backbone.jsを使用した複雑なインターフェイスの作成
そして再びMVCについて
Javascript mvc

15.リファラーのバイパスの制限

blabla.ruサーバーに画像があり、別のサーバー（pewpew.com）からリファラーを送信した場合、サーバーはそれを提供しません。 写真の内容を取得してユーザーに表示する方法は？

何らかの方法でブラウザから直接。 リファラーを変更するサーバープロキシを作成できます。

16. JavaScriptのGOTO

実際問題は、JavaScriptでgoto動作を繰り返す方法です。 （良いスタイルとgotoについて話す必要はありません:)生成されたコードについて話している。 ブロックとサイクルの復元は簡単なプロセスではありません）

JavaScriptにはタグがありますが、gotoはありません（予約語のみがあります）。 ラベルは他のすべての言語と同じように見えますが、動作が異なります。 ラベルはブロックを選択します。 ブロック内に他のマークされたブロックがある場合があります。 このブロック内にあるbreakとcontinueを使用してラベルに移動できます。

例：

 loop1: for (var a = 0; a < 10; a++) { if (a == 4) { break loop1; //  4  } alert('a = ' + a); loop2: for (var b = 0; b < 10; ++b) { if (b == 3) { continue loop2; //  3 } if (b == 6) { continue loop1; //   loop1 'finished'    } alert('b = ' + b); } alert('finished') } block1: { alert('hello'); //  'hello' break block1; alert('world'); //     } goto block1; // Parse error - goto  

17. JavaScriptの継承。 男と女を人間から拡張するイデオロギー的に正しい方法

プロトタイプ継承を使用することは、イデオロギー的に正しいです。 継承プロセスについては、記事「 JavaScriptの基本と誤解 」 で詳しく説明されています 。

18.レイアウトとサーバーサイドを掘り下げることなく、javascriptプログラマーを獲得することは可能ですか？

プロジェクト、会社の規模、および経験に依存します。
大企業でブラウザベースのゲームの開発者になると、JavaScriptのみを扱う可能性が非常に高くなります。 大企業では独立したフロントエンドプログラマを購入する余裕がありますが、中小企業ではできません。 専攻経験がなくてもラッキーですか？！
Webの学習を始めたばかりの場合は、すべてが好きな場所に行く必要があります。

19.サーバーから.jsから実行されるコードにデータを転送する方法は何ですか？

データを転送する方法は多数あります：XHR、SSE、WebSockets、JSONP：
サーバー送信イベントを使用したHTTPサーバープッシュの実装
新しいXMLHttpRequest2機能
サーバー送信イベントを使用したリアルタイムアプリケーションの作成
Ajaxについてたくさん

選択するトランスポートと形式は、アプリケーションの要件によって異なります。 たとえば、これがチャットの場合、SSEまたはWebSocketsの方が優れています（メッセージの配信時間が重要です）。 また、このチャットがIE6でクロスドメインで機能する場合、iframeまたはflashを使用して魔法を追加する必要があります。

20.通常のDOMElemen（div）を使用してDOMInputElementの動作を取得（エミュレート）することは可能ですか？

低レベルではできません。 その理由を13番目の例で説明しました。 DOMDivElementに基づく入力をエミュレートするラッパーを作成できます。
簡単なエミュレーターjsfiddle.net/azproduction/Kz4d9をスケッチしました-非常に悪い入力であることが判明しました（送信方法がわからない、フォーカスを失う方法がわからないなど）。
同じ問題は、1つの属性のみを追加することで、よりエレガントに解決できます（ Finomに思い出させてくれます ）contenteditable、 デスクトップブラウザーのみがサポートします-同じ入力が判明しましたが、はるかにシンプルで優れたjsfiddle.net/azproduction/ZTqRe

21.プライベートメソッドとパブリックメソッドの問題

オブジェクトのプライベート変数とメソッドを使用したい場合は、JavaScriptでパブリックからプライベートメソッドにアクセスする問題があります。 そして、コンストラクタ内で定義された特権メソッドは、正しく理解すれば、インスタンスごとに複製されます。これはパフォーマンスの点ではあまり良くありません。 このアプローチはどうですか？

TheShock ：

いいアプローチ。 少なくともコンストラクターですべてのメソッドを宣言するよりはましです。

 // our constructor function Person(name, age){ this.name = name; this.age = age; }; // prototype assignment Person.prototype = new function(){ // we have a scope for private stuff // created once and not for every instance function toString(){ return this.name + " is " + this.age; }; // create the prototype and return them this.constructor = Person; this._protectedMethod = function (){ // act here }; this.publicMethod = function() { this._protectedMethod(); }; // "magic" toString method this.toString = function(){ // call private toString method return toString.call(this); } }; 

モジュラーアプローチ：

 var Module = (function (window) { function privateFunction() { console.log('pass'); }; var privateClass = function () {}; var publicClass = function () {}; publicClass.prototype.publicMethod = function () { privateFunction(); // ... }; return { //  publicClass: publicClass }; }(this)); //  (new Module.publicClass()).publicMethod(); 

22. JSを使用して複数のファイルを同時に選択してアップロードする方法

すべてが一度ではなく長い間書かれています：
1. HTML5 File API：サーバーへの複数のファイルのアップロード
2. HTML5を使用してファイルをアップロードし、悪口を言った回数
3. 複数のファイルを読み込むブラウザー
4. ajaxがphpフォームで複数のファイルをアップロードする
5. html5 File APIを使用して、好みとダンサーを含むファイルをダウンロードする

23. FileおよびFormDataを使用してファイルをダウンロードする場合、ユーザーがディレクトリをロードしようとしているかどうかを確認するにはどうすればよいですか？

FileおよびFormDataを使用してファイルをダウンロードする場合-ユーザーがディレクトリをロードしようとしているかどうかを判断する方法。 File.typeプロパティは残念ながら役に立たない（いくつかのタイプでは、dir-空の文字列など）、sizeプロパティも（ffとsafariは異なって表示される）

File.typeに関しては、これはMIMEタイプであると言われ、定義されていない場合は空の文字列になります。 MIMEタイプは、通常どおり、ファイル/フォルダーの拡張子から取得されます。 「pewpew」という名前の実際のファイルをスリップすると、mimeは「」になり、ディレクトリの名前が「pewpew.html」になると、mimeは"text/html"ます。 これは私たちには合いません。
フォルダーのサイズは常に0ですが、サイズが0バイトのファイルが存在する場合があります。 100％の信頼を得るために、これは私たちには適していません。
標準のwww.w3.org/TR/FileAPIはディレクトリについて個別に話しませんが、ユーザーが不正なファイル（保護されている、読み取り不可など）を操作しようとすると、ブラウザーはSECURITY_ERRをスローできると述べています。これ。

私が取った基礎は、 ドラッグアンドドロップの例です
FileReaderを使用して、リソースのタイプを決定します。 firefoxでは、フォルダーをファイルとして読み取ると、 reader.readAsDataURLメソッドは例外をスローします。 クロムでは、この例外はスローされませんが、 reader onerrorイベントがonerrorます。 クロスして、ファイルかどうかを判断する関数を取得します。

 function isReadableFile(file, callback) { var reader = new FileReader(); reader.onload = function () { callback && callback(true); callback = null; } reader.onerror = function () { callback && callback(false); callback = null; } try { reader.readAsDataURL(file); } catch (e) { callback && callback(false); callback = null; } } 

関数では、セキュリティのために、コールバックを削除して、再度呼び出されないようにします（将来、 FileReaderの動作が変更される可能性があります）。
Jsfiddle.net/azproduction/3sV23/8の例

たぶんそれはファイルサイズによって制限されていました。 0の場合、これはファイルではないと考えます（サイズが0バイトのファイルをアップロードするのは奇妙だからです）。

24. JavaScriptの宣言/注釈（それぞれPython / Javaからの用語）に類似するものはありますか？

直接のアナログはありません。

PS質問への回答を忘れた場合は、もう一度質問してください。 最初または2番目の部分のいずれにも回答がない質問がある場合-質問-3番目にあります;）