JavaScript: ルールを全て破る間違ったことが役に立つかもしれない

北京時間のこの日の早朝、 Twitter のフロントエンドエンジニアである Angus Crol 氏が、ベルリンで開催された JSConf カンファレンスで「Break all the Rulez」と題した講演を行いました。主に、私たちが通常間違っていると考え、使用すべきではないと考えているが、実際には役立ついくつかのことについて語りました。講演に使用されたスライドは、この記事の下部にあります。米国の JavaScript の父は、スライドを見た後、次のようにも述べています。「ほとんどの意見に同意します (まだ問題があるようですね?)」。

以下、説明は省略し、要点のみを翻訳します。

声明文付き

使ってみませんか？

1. 予期しない操作結果により暗黙的にグローバル変数が作成される可能性がある

2. クロージャスコープの解決に時間がかかりすぎる

3. コンパイル後

ES5 の strict モードでは、暗黙的にグローバル変数 (var なし) が作成されることを防ぐことができるため、with の問題を軽減できると言う人もいます。しかし...

厳密モードでは使用できません。

なぜ便利なのでしょうか?

1.ブラウザ開発者ツールを構築する

//Chrome Developer Tools IS._evaluateOn = function (evalFunction, obj, expression) { IS._ensureCommandLineAPIInstalled(); expression = "with (window._inspectorCommandLineAPI) {\ with (window) { " + expression + " } }"を使用します; evalFunction.call(obj, expression); return 。 }

2. ブロックスコープをシミュレートする

//是的,还是这个老掉牙的问题var addHandlers = function (nodes) { ( var i = 0; i < nodes.length; i++) { for nodes[i].onclick = function (e) {alert(i);} } }; //你可以通过在外面包一个函数来解决var addHandlers = function (nodes) { ( var i = 0; i < nodes.length; i++) { for nodes[i].onclick = function (i) { function (e) {alert(i);}; return 。 }(i); } };
//或者使用'with'来模拟块级作用域var addHandlers = function (nodes) { ( var i = 0; i < nodes.length; i++) { for ({i:i}) { with { nodes[i].onclick = function (e) {alert(i);} } } };

eval ステートメント

使ってみませんか？

1. コードインジェクション

2. クロージャの最適化は不可能

3. コンパイル後

なぜ便利なのでしょうか?

1. JSON.parseが利用できない場合

Stack Overflow の誰かがこう言っていました:

「JavaScript eval は安全ではありません。JSON を解析するには、json.org の JSON パーサーを使用してください」

他の人はこう言います。

「JSON を解析するために eval を使用しないでください。Douglas による json2.js を使用してください。」

しかし：

// From JSON2.js if (/^[\],:{}\s]*$/ .test(text.replace( /*regEx*/ , '@' ) .replace( /*regEx*/ , ']' ) .replace( /*regEx*/ , '' ))) { j = eval( '(' + text + ')' ); }

2. ブラウザのJavaScriptコンソールはevalを使用して実装されています

WebkitコンソールまたはJSBinで次のコードを実行します。

>( function () { console.log(String(arguments.callee.caller)) })() function eval() { [native code] }

ジョン・レシグ氏はこう語った。

「eval と with は、ほとんどの JavaScriptプログラマーから軽蔑され、誤用され、非難されていますが、正しく使用すれば、他の関数では実現できない素晴らしいコードを書くことができます。」

関数コンストラクタ

なぜ便利なのでしょうか?

1. コードは予測可能な範囲で実行される

2. 動的に作成できるのはグローバル変数のみ

3. クロージャ最適化の問題はない

どこで使われていますか?

1. jQueryのparseJSON

// jQuery parseJSON // Logic borrowed from http://json.org/json2.js if (rvalidchars.test(data.replace(rvalidescape, "@" ) .replace( rvalidtokens, "]" ) .replace( rvalidbraces, "" ))) { return ( new Function( "return " + data ) )(); }

2. Underscore.js での文字列補間

//from _.template // If a variable is not specified, // place data values in local scope. if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n' ; //.. var render = new Function( settings.variable || 'obj' , '_' , source);

== 演算子

使ってみませんか？

1. 両方のオペランドを同じ型に変換する

なぜ便利なのでしょうか?

1. 両方のオペランドを同じ型に変換する

2. 未定義 == null

//这样写是不是很麻烦if ((x === null ) || (x === undefined)) //完全可以下面这样写if (x == null )

3. 両側のオペランドの型が明らかに同じである場合に使用する

typeof thing == "function" ; //typeof运算符肯定返回字符串myArray.length == 2; //length属性肯定返回数字myString.indexOf( 'x' ) == 0; //indeOf方法肯定返回数字

真の値は必ずしも真とは限らず、偽の値は必ずしも偽とは限らない。

if ( "potato" ) { "potato" == true ; //false }

配列コンストラクタ

使ってみませんか？

1. new Array() も悪ですか? JS Lint也推荐使用[].

なぜ便利なのでしょうか?

//String.prototype function times(count) { //From prototype.js extension of { return count < 1 ? '' : new Array(count + 1).join( this ); } 'me' .times(10); //"memememememememememe"

他の

ネイティブプロトタイプオブジェクトを拡張しない

(すべての es 5 シムはこれを実行します)

for/inを反復処理するときは常にhasOwnPropertyを使用する

(オブジェクトのプロトタイプを拡張しない場合は、これは必要ありません。)

すべてのvarステートメントを先頭に置く

（初期化式にfor文を入れるのが良いでしょう）

関数を呼び出す前に宣言する必要があります。

(実装の詳細が優先される場合に使用)

カンマ演算子は使用しないでください

（複数の表現を使う場合に使えます）

parseIntを使用する場合は、2番目のパラメータを常に10に指定します。

(文字列が '0' または 'x' で始まらない限り必要ありません)

翻訳者メモ

上記でいろいろ述べましたが、誤解されていることとして、エスケープについても考えました。インターネット上では、「エスケープを使用しないでください」と言う人がたくさんいます。

なぜ便利なのでしょうか?

1. escape はさらに多くの文字をエスケープしますが、最後の 2 つの関数でエスケープされない文字をエスケープする必要がある場合もあります。

escape は、utf16 でエンコードされた文字列をエスケープすることと同等でありencodeURIComponent utf16 文字列を utf8 エンコードに変換してからエスケープすることと同等です。2 . 文字列を、通常は base64 で使用される UTF8 エンコードに変換します。

encodeURIComponent (str) === escape(UTF16ToUTF8(str))

UTF16ToUTF8(str) === unescape( encodeURIComponent( str )と推測できます。

次に、インターネットで見られるものよりもはるかに単純な base64 エンコードで使用できます。btoa と atob には互換性の問題があることに注意してください。

function base64Encode(str) { btoa(unescape(encodeURIComponent(str))); return 。 } function base64Decode(str) { decodeURIComponent(escape(atob(str))); return 。 }

出典: Zi Yunfei のブログ、@紫云妃 http://www.cnblogs.com/ziyunfei/archive/2012/10/07/2713505.html

元のタイトル: JavaScript: ルールを破る間違ったことが役に立つかもしれない

キーワード: JavaScript、破壊、いくつかの、エラー、物事、実際、北京時間、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化

<<: 百度の2ページ目に関連キーワードが表示されるという考え方

>>: Webmaster.com からの毎日のレポート: Pinterest のような企業は締め出され、Kuxun の航空券代理店は逃げ出している