「JS上昇」 - コードがどのように保守書き込みする方法を教えるために

1はじめに

通常の開発作業では、ほとんどの開発者は、他の職員のコードのメンテナンスに多くの時間を費やしています。多くの場合は、に基づいて、他人の結果に基づいており、最初から新しいコードを開発することは困難であるため、高品質を書くために、他の開発者によって呼び出される独自のコードを記述するための要件を変更したり、追加し、保守性コードそれは非常に重要です。

2、コードの保守性とは何ですか

保守性のコードは次のような特徴を追跡する必要があります。

1. 明瞭度 -他の人がコードを引き継ぎ、その意図と一般的な方法を理解することができます。
2. 直感的な -コードの1が理解できる何か、その動作を複雑どんなに。
3. 適応性 -コードは、完全な書き換えのデータ書き込み方法の変更を必要としません。
4. スケーラビリティ -コードアーキテクチャ上のコア機能のためにできるように拡張され、将来的に考慮されています。
5. debuggability -間違ってそこに行く場合は、コードはどこに問題が嘘を見つけるために迅速かつ直接あなたに十分な情報を与えることができます。

3、コーディング規約

単純にコードの保守性は、JavaScriptコードの書き込み規則のセットを形成することであるようにする方法となります。適応JavaScriptコードのためには、それは非常に重要であることに合意しました。次のセクションでは、コード規則の導入を検討します。

1.読みやすさ

コードのメンテナンスを行うことができる、それが最初に読まなければなりません。コードのインデント関連のコードの内容と読みやすさのほとんどはきちんとコードブロックは、機能の一部であるインデントを一目で見ることができ、それは一般的なインデントの4つのスペースの大きさ、そして今ではほとんどのエディタでもサポートしていますメンバーは、コードをフォーマットします。可読性が一方のコメントで、一般的に、私たちは、地域のニーズに以下のコメントを持っています。

関数やメソッド -各方法は、タスクを完了するために使用され、そして使用することができるアルゴリズムの説明のために、コメントまたは注釈を含むべきです。
コードの大部分 -単一のタスクを達成するためのコードの複数の行は、上記で説明したアノテーション・タスクを排出されます。
複雑なアルゴリズム -行う方法を説明する注釈を付けることにするユニークな方法を使用して問題を解決します。
ハック -ブラウザの互換性プロセス。

変数と関数の命名

それはクラスという名前の変数や命名の方法である名前の中で最も刺激性のものの正常な発達の言葉で、またはかどうか、その時々の助け名に翻訳ソフトの一部に頼らなければなりませんでした。コードの理解と保守性を高めるために、変数や関数に名前を付けるために、適切なことは非常に重要です。次のように命名規則は、一般的に以下のとおりです。

変数名は、そのような車や人などの名詞、する必要があります。
関数名は、のgetNameとして、動詞で始まる必要があります（）。
例えばisEnableとしてブール型は、一般的に最初に使用される関数に戻り、（）。
定数はMAX_LENGTHとして、すべて大文字で表現されなければなりません。

3.変数の型の透明

JavaScriptで変数が緩んタイプなので、変数に含まれるデータの種類を忘れがちです。適した命名ある程度は、この問題を軽減が、すべての状況は十分ではありません置くことができ、データ型のデータを表現するための3つの変数があります。

3.3.1初期化

後で変数を定義する場合、将来的に適用されるべきかを提案するために、値に初期化されなければなりません。

// 通过初始化指定变量类型
var found=false; //布尔型
var count=-1; //数字型
var name=""; //字符串
var person=null; //对象

3.3.2、指定された変数タイプハンガリー語表記法を使用して

データ・タイプを表す一つ以上の文字を変数名の前にハンガリー語表記。0-オブジェクト、S-文字列、I-整数、F-フロート、B-ブールタイプ：JS最も伝統的なハンガリー表記法は、単一の文字の基本的なタイプを表すために使用されます。

// 用于指定数据类型的匈牙利命名法
var bFound //布尔型
var iCount; //数字型
var sName; //字符串
var oPerson; //对象

ハンガリー語の表記の利点は、使用することができる同じパラメータの関数であるが、欠点は、コードがある程度それを読み取ることができることです。

3.3.3、型注釈を使用して

変数の型は、型注釈を使用することで、最後の指定。変数名の右側のタイプについての注意が、初期化の前インチ

// 用于指定类型的类型注释
var found /*Boolean*/ = false;
var count /*int*/ = 10;
var name /*String*/ = "Tom";
var person /*Object*/ = null;

短所：複数行のコメントは、コードブロックと競合します

データの3つの一般的なタイプは、変数の方法は、自分の長所と短所があり、その後の使用のために評価され、あなたはまた、独自のプロジェクトに応じて活字体の下で使用することを学ぶことができ、指定しました。

4、疎結合

長い間、時折維持が困難きつすぎるコードの別の部分に過度に依存のアプリケーションの一部としてとして。Webアプリケーションの技術なので、多くの場合は、あまりにも密結合させるためにそこにバックアップされているため、これらの状況を回避し、可能な限りコードの弱い結合を維持する必要があります。

1.切り離されたHTML / JavaScriptの

直接HTML内のJavaScriptは、インラインコードを含む<script>要素またはHTMLが割り当てられたイベント処理手順を属性を、きつく結合されています。
次のコードを考えてみましょう

<button onclick="doSomeThing()">Click Me</button>

ボタンの動作に変更が同時にタッチHTMLとJSことがあるため、この例では、doSomethingの（）関数が使用可能である前よく、ボタンは、JSエラーをもたらす、押された、保守性に影響を与えます。

同様にJS HTMLの多数が含まれています

// 将HTML紧密耦合到js中
function insertMessage(){
  document.getElementById('container').innerHTML='<div>Hello World</div>'
}

符号誤りがしばしば見つけることが困難であるページに挿入されたコードを動的に生成されたコードブロックの方法。

唯一のJavaScriptファイルの変更行動する必要があり、その後、レンダリングされたファイル限りのマークを変更：HTMLとJavaScriptは、エラーの原因を決定するために、試運転中簡単に時間を節約するだけでなく、メンテナンスの難しさを減らすことができデカップリング

2.デカップリングCSS / JavaScriptの

別のWeb層は、ページ表示のために主に責任があるCSS、です。JavaScriptとCSSも非常に密接に関連している：彼らはHTMLのレベルを超えているので、しばしば一緒に使用します。しかし、HTMLやJavaScriptなど、CSSおよびJavaScriptの場合は、あまりにも緊密に結合することができます。次のように最も一般的な例はしっかり、JavaScriptを使用するためにいくつかのスタイルを変更するように結合されています。

//CSS 对 JavaScript 的紧密耦合
element.style.color = "red"; 
element.style.backgroundColor = "blue";

直接CSSスタイルを変更するなどで、我々は直接style要素タグクラスのクラス名を変更することで、より容易に制御することができます。

3.デカップルアプリケーションロジック/イベント・ハンドラ

各Webアプリケーションは、一般的に、多くの異なるイベントを監視し、イベントハンドラのかなりの数を持っています。しかし、持っている可能性があり、いくつかは、慎重にイベントハンドラからアプリケーションロジックを分離します。次の例を考えてみます。

function handleKeyPress(event) {
        event = EventUtil.getEvent(event);
        if (event.keyCode == 13) {
            var target = EventUtil.getTarget(event);
            var value = 5 * parseInt(target.value);
            if (value > 10) {
                document.getElementById("error-msg").style.display = "block";
            }
        }
    }

アプリケーションロジックが含まれているハンドラこのイベントに加えて、イベントを処理しなければなりませんでした。このアプローチの問題は、その二重の性質を持っています。まず、イベントのほかに困難なデバッグを行うアプリケーション・ロジックを実行することによって何のメソッドを持っていません。期待される結果が発生しなかった場合はどのように行うには？それは、イベントハンドラが呼び出されないことを意味するか、アプリケーション・ロジックを参照してくださいに失敗していますか？その後のイベントは、同じアプリケーション・ロジックをトリガーした場合第二に、あなたはコードや別の関数の中に描かれた機能コードをコピーする必要があります。いずれにせよ、それは必要以上の変更を行う必要があります。

より良いアプローチは、両方がそれぞれのものを処理するように、それぞれ、アプリケーションロジックとイベントハンドラの相分離です。イベントハンドラは、イベントオブジェクトから関連情報を抽出し、アプリケーションロジックを処理する方法に情報を送信すべきです。例えば、前のコードは次のように書き換えることができます。

 function validateValue(value) {
        value = 5 * parseInt(value);
        if (value > 10) {
            document.getElementById("error-msg").style.display = "block";
        }
    }

    function handleKeyPress(event) {
        event = EventUtil.getEvent(event);
        if (event.keyCode == 13) {
            var target = EventUtil.getTarget(event);
            validateValue(target.value);
        }
    }

いくつかの原則の間でアプリケーションとビジネス・ロジックの疎結合：

他の方法にイベントオブジェクトを行い、イベント・オブジェクトからの送信のみ所望のデータ。
アプリケーションレベルの動作中の任意のイベントハンドラを実行することなく行われるべきである何。
任意のイベントハンドラは、処理アプリケーションロジックに移し、イベントを処理する必要があります。

いくつかは任意のコードが大幅に改善されたメンテナンス性を獲得し、さらにテストと開発のための可能性の多くを作成している可能性があることに注意してください。

5、プログラミングの練習

保守性JavaScriptを書くことは、コードをフォーマットする方法についてだけではありません。それはまた、コードが何をするかの問題に関するものです。Webアプリケーションは、多数の人々の作成と同時に、多くの場合、エンタープライズ環境で作成されました。この場合の目標は、ブラウザ環境を使用して、各人物のルールが一貫して変わらない持っていることを確認することです。だから、最高のは、次のようなプログラミング手法のいくつかに固執します。

1.尊重オブジェクトの所有権

JavaScriptを動的な性質は、ほとんど何をいつでも変更することができます。おそらく、実際のプログラミング企業環境の中で最も重要なのは、あなたがオブジェクトを変更できないことを意味しますが、あなたに属していないオブジェクトの所有権を尊重することです。単にあなたが、そのオブジェクトまたはそのメソッドのオブジェクトを作成したり、維持する責任がされていない場合、あなたがそれらを変更することはできません、置きます。具体的には：

インスタンスまたはprototypeプロパティを追加しないでください。
インスタンスまたはプロトタイプメソッドを追加しないでください。
既存の方法を再定義しないでください。

2.避けグローバル変数

密接にグローバル変数や関数を避けるために、できるだけオブジェクトの所有権の尊重に関連します。これは、スクリプトの実行のための一貫した環境の作成と保守に関連しています。他のオブジェクトや関数が存在するように、グローバル変数まで作成します。次の例を考えてみます。

// 两个全局量——避免！！
var name = "Nicholas"; 
function sayName(){ 
 alert(name); 
}

変数名や関数sayName（）：このコードは2つのグローバルな量を含んでいます。実際には、両方の次の例では、を含むオブジェクトを作成することができます。

// 一个全局量——推荐
var MyApplication = { 
 name: "Nicholas", 
 sayName: function(){ 
 alert(this.name); 
 } 
};

単一のグローバル・オブジェクトMyApplicationを、名前とsayName（）に導入コードのこの書き換えは、それに取り付けられています。そうすることでいくつかの問題は、前の段落のコードに存在して排除します。まず、window.nameプロパティをカバーする変数名は、他の機能と競合する可能性があり、第二に、それは機能範囲との間に混乱を解消するのに役立ちます。コールMyApplication.sayNameは（）論理的に問題のあるコードがMyApplicationをコードの定義を調べることによって決定することができることを意味します。

3.定数

定数は、次のタイプのためのいくつかの値を定義するために使用されます。

リピート値 - 多くの用途のいずれかの値が定数として抽出する必要があります。これは、とき、原因の他が変更されていない一方で値が変更されたエラーを制限します。また、CSSのクラス名が含まれています。
文字列のユーザ・インタフェース - ユーザに表示するための任意の文字列、国際的な促進するために、抽出されなければなりません。
URLを - では、Webアプリケーション、リソースの場所が変更に簡単ですが、URLのすべてを格納するための共通の場所を使用することをお勧めします。
任意の値を変更することができる - あなたは自問する必要がありますが、リテラル値を使用するたびに、将来的にこの値は変更されませんです。答えは「イエス」である場合、この値は定数として抽出する必要があります。

これらは、「JS標高」、いくつかの注意事項を読んでいるだけでなく、通常のプロジェクトの開発問題で、自分の存在を反映します。ライト、保守コードはまだ非常に必要である、いくつかの基本的なコーディングのヒントを改善するように思われます。

参考：
「高度なJavaScriptのチュートリアル」