JavaScriptは、ネットワークに属するスクリプト言語です!
JavaScriptは、何百万ものWebページで使用され、設計を改善し、フォームの検証、ブラウザーの検出、Cookieの作成などを行います。
JavaScriptは、インターネット上で最も人気のあるスクリプト言語です。
JavaScriptは使いやすいです!あなたはそれを気に入るはずです!
JavaScriptは、柔軟な構文を備えた解釈されたスクリプト言語であり、さまざまな人々がさまざまな方法で異なる機能を書くことができます。 JavaScriptコードを整理して、他の人があなたがシンプルではないことを一目で見ることができるようにする方法は?あなたのコードを読んだ後、他の誰かがため息をつくのを楽しみにしていますか?
n匿名関数を書く方法
JSの匿名関数は、宣言されていない関数名を持つ自己執行関数であり、形式は次のとおりです。
(関数(){})();実際、私たちはしばしば「;」プロジェクトの前:
;関数(){}();JSの構文はセミコロンを省略する可能性があるためですが、このメカニズムは予期しないエラーにもつながる可能性があります。コードが起動した後にファイルをマージして圧縮して「;」を追加して「;」を追加して、構文エラーを回避するために。不明なエラーを回避できます。
しかし、他の人のライブラリやプラグインが次のような匿名関数を書いていることがわかります。
+function(){}();「+」はここでオペレーターであり、オペレーターは非常に優先度が高いため、右側の関数宣言の一部は、ブラケット(実際には機能実行を記述する方法)を直接実行します。実際、それは前の「+」サインだけでなく、「 - 」、「!」、「〜」、「++」などの演算子を使用できます。ここでは、拡張機能の紹介にすぎません。どの特定のライティング方法が使用されるかは、チームの統一された基準に依存します。
Math.ceil()およびMath.Floorの丸めを放棄します
他のコードでこれらの2つのシンボルを見たことがあるかもしれません~~と| 0を見て、実行中の結果を直接見てください。
>> var a1 = 1.23 >> ~~ a11 >> var a2 = 2.345 >> a2 | 02 >> var a3 = -3.45 >> ~~ a3-3 >> var a4 = -4.5 >> a4 | 0-4
この執筆方法はオリジナルではありませんが、この代替書き込み方法を分析および説明するために引用されていることに注意してください。簡単な説明は、〜〜がビトルに逆演算子であり、小数点後のすべてのビットを破棄することにより、浮動小数点数を整数に変換できることです。正の整数は、署名されていない16進数に変換できます。その後、逆(~~)が再び負と負にして陽性になり、元の整数を取得します。それは彼がとても故意で無制限であるというだけです。最適化だと思いますか?
注:厳格な丸め操作を行う必要がある場合は、この方法を注意して使用する必要があります。その後、数学関数を使用する必要があります。
もしそうであるなら、それだけではありません
IF-ELSE条件を使用することは非常に明確なロジックであり、データの処理が大きくない場合はそれほど簡潔に見えません。
if(a === 1){//ここで厳密に等しいシンボル "==="を使用することを強くお勧めします。タイプ変換は実行されませんa = 2} else if(a === 3){a = 4} else {a = 5}||を使用するには、以下を見てくださいコードを減らすために&&:
((a === 1)&&(true、a = 2))||((a === 3)&&(true、a = 4))||(a = 5)
それは1行で行われ、あなたは正常に体重を減らすでしょう。 ||そして&&、単純な原則は言うまでもなく。コンマオペレーターを使用するとき、理解するのは簡単ではありません。あなたはそれを引き続き3成分演算子に変更することができます:
(a === 1)? a = 2 :((a === 3)?(a = 4):( a = 5))
この書き方は十分に簡素化されているようですが、他の人があなたのコードを見るのは少し難しいでしょう。
迷惑な文字列ステッチDOM構造をToStringに置き換えます
DOM構造を動的に生成したい場合は、一般に次のように実装します。
var template = "<div>"+ "<h2> {title} </h2>"+ "<div class = 'content' yattr = ''> {content} </div>"+ "</div>"さまざまな属性とパラメーターが追加されている場合、大小の引用が混乱している場合、エラーを簡単に報告できます。ただし、ES6はこの問題を解決するのに役立つテンプレート文字列を提供します。次のように書くことができます。
var template = <div> <h2> {title} </h2> <div class = 'content' yattr = ''> {content} </div> </div>しかし、問題は、ES6がまだ正式に到着していないことです...恐れないでください、function.tostringは私たちが接続されていないときに恥ずかしさを解決します:
var rcomment = ////*([/s/s]*?)/*///; //文字列関数ms(fn){return fn.tostring()。match(rcomment)[1]}; ms(function(){/ * <div> <h2> {title} </h2> <div class = 'content' yattr = ''> {content} </div> </div> */})ここの出力は、以前の文字列出力と同じです。フロントエンドプログラマーは、独自のDOM構造に注意を払うだけです。
AMDモジュールサポート、プロンプトコードbを追加します
他の人がAMD仕様を介してモジュールを直接ロードできるように、作成したコードにAMD(非同期モジュール定義)モジュールの仕様を宣言します。他の人が仕様を介してモジュールをロードしない場合は、通常のグローバルオブジェクトをエレガントに返すこともできます。 jqueryuiの執筆方法を見てみましょう。
(function(factory){if(typeof define === "function" && define.amd){// amdモード。そして、プラグインに依存し、 "jquery" define define(["jquery"]、Factory);}それをAMDモジュールの構造に変更して、ブラウザー側の読み込みスクリプト依存関係にコードをより適しています。この形式でコードを記述して、コードを見るとすぐに、他の人があなたがプロの開発者であることを知っていることを確認してください。
継承の最良の方法
JavaScriptには、大小さまざまな10を超える継承方法があります。各ライティング方法の利点と短所は異なり、各方法は1つずつリストされていません。一般的な継承方法を例として、プロトタイプ継承:
function parent(){} function child(){} child.prototype = parent.prototypechild.prototype.constructor = child;この方法は、実際にchild.prototypeとparent.prototypeに保存されたポインターを同じオブジェクトに指しているため、子オブジェクトのプロトタイプが後で継承し続けるように子オブジェクトのプロトタイプにいくつかのプロパティが拡張された場合、親オブジェクトのプロトタイプも書き直されます。したがって、この問題を解決するために、一時的なコンストラクターライティング方法を借りてみてください。
function empty(){} empty.prototype = parent.prototype; child.prototype = new empty(); child.prototype.constructor = child;このようにして、親オブジェクト自身のプロパティとプロトタイプメソッドが保護されています。 「最適」は少し誇張されていますが、比較して。誰もが独自の執筆スタイルを持っていると信じています。また、借入コールと属性継承を実装するために適用することの利点と短所もあります。長さは限られており、私はそれらを1つずつ紹介しません。
要約します
上記のJavaScriptの代替執筆方法はすべて、理解しやすいまたは改善された効率のための構文糖です。このような方法は、上記のようにif-elseを省略する慣行など、好ましいです。一部は、AMDや継承方法など、コードの互換性とパフォーマンスを向上させるように設計されています。 ...私は新人であり、上記のコンテンツには確かに不完全で説明のつかないコンテンツがあります。
上記のコンテンツは、JavaScriptの代替執筆方法の関連紹介です。誰にとっても役立つことを願っています!