ウェブフロントエンドを共有 JavaScriptの一般的なアンチパターン、はじめに：アンチパターンは 同じ過ちと言って、デザインパターンと非効率的な繰り返しの共通の問題を設計することができないことを指します。 この記事では説明し、共通のJavaScriptでアンチパターンだけでなく、それらを回避するための方法をいくつか。
ハードコード
（ハードコード化されたハードコーディング）文字列、数値、日付......あなたはすべて死んだ人々は物事が死んでいるだろう書き込みを書くことができます。これはまた、女性や子どもを含むアンチパターンが、最も広く使用されているアンチパターンです。最も典型的には、ハードコーディングされただけで、あなたのマシン上で実行することができ、特定のマシンや環境のためのコードを参照するネイティブコード（プラットフォーム関連）は、適切に実行することができ、おそらく、それはWindowsのみであってもよく、アンダーラン。
例えば、中 NPMスクリプト死んスクリプトのパス/ユーザ/ harttle / binに/ fis3を書いて 、 彼らは単にそれなぜならそうすることができ、その理由は、非常に困難をインストールすることであってもよいし、重複を避けるために設置することができます。いずれにせよ、それはすべて私の同僚は、依頼するあなたに来るなり、「なぜ私はここには文句を言うでしょう。」ソリューションは、他のすべての外部依存関係を中に置き、（例えばGitのような）ローカル設定ファイルのバージョン管理から削除することができますよう、それを考えることができる障害が発生した場合、パッケージ・ロックを使用することができ、特定のバージョン要件がある場合は、依存関係の管理にそれを置くことです。
例えば、で CLIツール〜/ .cache、またはパス区切りまたは\\ /、特別なフォルダ死を/ tmpを書きます。そのような文字列は、そのような使用os.homedirとして、一般的に内蔵のNode.jsモジュール（又は他のランタイムAPI）によって得られたos.tmpdir、path.sepたいことができます。
コードを繰り返し
繰り返しコード（複製）はビジネスコードで特に一般的であり、ほぼすべての事業の安定性を維持するの本来の意図を。たとえば、次のようにページが素敵な検索ボックスを必要とし、ページBには、正確に一つあります。（ダイレクトコピーは少し言葉によって妨害される場合）次に、プログラマの弟は困難な選択に直面していました：
- Bのコピーは、方法Aを変更したいです
- C、B及びこの基準符号のAを再構成する検索ボックスにB。
期限に制約が初期の作品を残しておきたい、または不正に変更することにより、 Bが責任取る必要がある（PMを：Bあなたはこの質問に悪い答えを行うことができますなぜ最初はスキップところ、より複雑である？）、いくつかの考えは、2を介してプログラムを取ることにした後。
この時点で、全体的な話は、おそらく広く使用されている繰り返しのコードの理由である、非常に自然で非常に滑らかであることを。 この物語は、質問に対するいくつかのポイントがあります。
- BはBの悪い記述を変更するので、簡単に再利用を考慮していません。それは、メンテナンスを引き継ぐことを決定しない限り、あなたは、コードBを再利用してはなりません。
- 悪いプログラマの弟を変更するよりもBの責任：著者はBテスト、テスターの回帰テストBのページを書いているかどうかどうか？
- 時間は必ずしもない自分自身を納得させる理由として、アンチパターンにはならない実行されています。優雅さを達成するための短期的な計画もあります。
溶液は、次のとおり抽出コードBの再開発は、検索ボックス組立体Cを形成ページにそれを使用します。同時にまた、統一されたメンテナンスを移行CにBを促す著者を含め、将来のジュニアパートナーを使用します。
偽 AMD
モジュラーは、別々のモジュールに分割ソフトウェアの機能を指すことを意図し、各モジュールは、機能の完全な破壊を含みます。 で JavaScriptを、それが別個に切断コンテキストスクリプトに特異的である、再利用可能なコードを意味します。
以来、元のページのスクリプトとしてJavaScriptや文法のグローバルスコープに多くの参照だけでなく、グローバル変数に基づいて、多くのプラクティスがあります。$のjQueryの例では、BOMはVAR定義された変数を省略し、窓を設けます。AMDは、JavaScriptのコミュニティ以前のモジュラー仕様です。これは、問題はここにある、紳士協定です。偽AMDモジュールを書くための無数の方法があります。
- 戻り値なし。はい、それは副作用のため、です。
- 直接の定義が必要です。右、それはすぐに実行されます。
- 副作用。修正ウィンドウまたはそのような他のモジュールの静的特性などの他の共有変数を、。
- 同時実行の問題。不明な依存関係を簡単に並行性の問題につながります。
、全体的な副作用を欠点ほぼすべてのグローバル変数を正確に同じグローバル変数に影響を与える： 実行ロジックは容易に理解されていない、暗黙的な連結関係を、書き込まれたテストが難しいです。具体的な例には、以下：
| //ファイル：login.js （ 'ログイン'、関数（）{定義 フェッチ（ '/アカウント/ログイン'）。次いで、（X => { window.login =真 }） }） 必要（[ 'ログイン']） |
AMDモジュールと<スクリプト>差がない、（requirejs実装は非同期である）、より正確に制御不能に直接書き込みます。それは任意のインターフェイスを返しませんでしたので、（例えば、ログオフ後に再度ログインを達成するために）他のモジュールで使用することはできません。さらに、このモジュールの並行性の問題（競合状態）の存在は：使用して、タッチでの記号かどうかを判断window.login。
解決策は、外部符号によって、その実行を制御し、結果を得るために、それを抽象モジュールを置くことです。 モジュラー良いプロジェクト、全ての最終的な状態で生成されたエントリAPP、モジュール間の共有状態は、最も近い共通の祖先に描かれています。
| （関数（）{定義 リターンは、（「/アカウント/ログイン」）をフェッチ .then（（）=> TRUE） .catch（E => { console.error（E） falseを返します } }） |
メモ拡張
メモの意図は、読者にコードの意図をより良く理解を与えることですが、実際にはちょうど逆であってもよいです。例えば、直接生命：
| 携帯電話の//裁判官Baiduのバージョン15以上 IF（navigator.userAgent.match（/クローム：（\ D +））[1] <15）{ // ... } |
あなたはこの段落を読んだとき母は、私は上記のコメントが正常にお時間を消費していると信じています。 あなたは、このようなコメントを参照してください最初の時間は、信じられないかもしれないが、本当のプロジェクトでは、この状態で最もコメントがある場合。 コードは常にコードを維持するほか、メンテナンスノートを維持するために覚えていないので、通常、複数の人です。また、非常に悪い教えである「チャンコメントが書いた」という名前の変数よりもC言語プログラムの後遺症。
透明な溶液が次のようにサンプルコードを書き換え、コメントを配置するためのロジックを使用することです。
| IF（isHttpsSupported（））{ //この関数は+名を抽出して、コメントを追加しないようにします } 機能isHttpsSupported（）{ [1] <15：navigator.userAgent.match（（\ D +）/クロム）を返します } |
機能拡張
「通常」のグローバル変数および機能拡張アルゴリズムクラスは後遺症だと思います。しかし、実際に異なる複雑なビジネス・シナリオとアルゴリズムは、前者はコンセプトや操作と仕上げを説明するためのより多くの必要性を持っています。最も効果的な方法のビジネスロジックを仕上げと（もちろん、また、対応する閉鎖またはオブジェクトを持っている）よりも、変数の命名を抽出するための手段。
しかし、実際のビジネスの維持に、合理的には容易ではないまま。 あなたは、ビジネスロジックを追加するために何十回も、同じファイルを入力すると、あなたの関数は、ふしだらな女バインディングなどの長くて悪臭を放つようになります。
| 関数submitForm（）{ var username = $('form input#username').val() if (username === 'harttle') { username = 'God' } else { username = 'Mortal' if ($('form input#words').val().indexOf('harttle')) { username = 'prophet' } } $('form input#username').val(username) $('form').submit() } |
这只是用来示例，十几行还远远没有达到“又臭又长”的地步。 但已经可以看到各种目的的修改让 submitForm() 的职责远不止提交一个表单。 一个可能的重构方案是这样的：
| function submitForm() { normalize() $('form').submit() } function normalize() { var username = parseUsername( $('form input#username').val(), $('form input#words').val() ) $('form input#username').val(username) } function parseUsername(username, words) if (username === 'harttle') { return 'God' } return words.indexOf('harttle') ? 'prophet' : 'Mortal' } |
在重构后的版本中，我们把原始输入解析、数据归一化等操作分离到了不同的函数， 这些抽离不仅让 submitForm() 更容易理解，也让进一步扩展业务更为方便。 比如在 normalize() 方法中对 input#password 字段也进行检查， 比如新增一个 parseWords() 方法对 input#words 字段进行解析等等。
总结
常见的反模式还有许多，比如 == 和 != 的使用；扩展原生对象；还有 Promise 相关的 等等。