JavaScriptベストプラクティス:メンテナンス性

コードの約束
一、可読性

コード字下げ

は注釈

を含む.
二、変数と関数の名前

変数名はcarやpersonなどの名詞であるべきです.

関数名は、get Name()のような動詞で始まるべきです.ブールタイプの値を返す関数は一般にisで始まります.

三、変数の種類が透明である
1.変数タイプを初期化で指定する

var fonund = false; //      
var count = -1;     //     
var name = "";      //      
var person = null;  //  

2.ハンガリーマーカー法を使用して変数タイプ「o」の代表オブジェクトを指定し、「s」は文字列を表し、「i」は整数を表し、「f」は浮動小数点を表し、「b」はブール型を表します.

var bFound;  //   
var iConunt; //  
var sName;   //   
var oPerson; //  

緩い結合
一、結合HTML/JavaScript

インラインコードを含む要素の使用、またはHTML属性を使用してイベントハンドラの割り当てを避ける.ボルトligt;
<ligt;JavaScriptで大量のHTMLを作成しないようにします.ボルトligt;
<ulgt;
<h 2>二、CSS/JavaScript<h 2>
<pregt;lt;codegt/////CSSのJavaScriptに対する緊密な結合
element.style.co lor=「red」
element.style.background="blue"
<codet>ボルトpregt;
<p>クラス名をできるだけ修正してスタイルを変えて、ほとんどのスタイル情報をCSSに厳重に保存させます.ボルトp>
<pregt;lt;codegt/////CSS対JavaScriptの発散結合
element.className="edit"
<codet>ボルトpregt;
<h 2>三、結合アプリケーションロジック/イベントハンドラ<h 2>
<p>一例:</p>
<pregt;lt;codegt;function handleKeyPress{イベント}
イベント=Event Util.getEvent;
if(event.keyCode==13){
var target=EventUtil.get Target;
var value=5*parseInt(target.value)
if(value>10){
Dcument.getElementById.style.display="block"
)
)
)
<codet>ボルトpregt;
<p>Enterキーを押すと、イベントのターゲットを取得し、value属性を伝達するアプリケーションロジックです.属性を取得した後、判定値によりスタイルを変更するとイベント処理になります.lt;bragt;書き換えることができます.p>
<pregt;lt;codegt;function handleKeyPress{イベント}
イベント=Event Util.getEvent;
if(event.keyCode==13){
var target=EventUtil.get Target;
validateValue(targt.value);
)
)
function validateValue(value)｛
var value=5*parseInt(target.value)
if(value>10){
Dcument.getElementById.style.display="block"
)
)
<codet>ボルトpregt;
<p>イベントハンドラからアプリケーションロジックを分離するメリット:</p>
<ulgt;
<ligt;特定のプロセスをトリガするイベントをより容易に変更することができます.最初にイベントをマウスでクリックして起動すると、現在も同様の処理が行われていますので、この変更は簡単です.ボルトligt;
<ligt;イベントに付加されないでコードをテストして、ユニットテストまたは自動化アプリケーションフローを作成しやすくすることができます.ボルトligt;
<ulgt;
<hr>
<h 1>プログラミングの実践</h 1>
<h 2>一、対象の所有権を尊重する</h 2>
<p>企業環境の中で最も重要なプログラミング実践は対象所有権を尊重することです.オブジェクト、オブジェクト、またはその方法を作成または維持する責任がないと、それらを変更することはできません.ボルトp>
<ulgt;
<ligt;インスタンスやプロトタイプに属性を追加しないでください.&ボルトligt;
<ligt;例やプロトタイプに方法を追加しないでください.&ボルトligt;
<ligt;既存の方法を再定義しないでください.ボルトligt;
<ulgt;
<h 2>二、グローバル変数を避ける</h 2>
<pregt;lt;codegt/////二つのグローバル変数——回避!
var URL="zhaoyuxiang.cn"
function say URL(){
alert(URL)
)
<codet>ボルトpregt;
<p>このコードは2つの大域変数を含みます.変数URLと関数say URL().実は両方を含むオブジェクトを作成できます.ボルトp>
<pregt;lt;codegt/////グローバル変数を紹介します.
var MyApplication={
URL:「zhaoyuxiang.cn」
say URL:function(){
alert(this.URL)
)
｝
<codet>ボルトpregt;
<h 2>三、使用量</h 2>
<p>一例:</p>
<pregt;lt;codegt;function validate(value){
if(!value){
alert(Invalid value!);
location.href="zhaoyuxian.cn"
)
)
<codet>ボルトpregt;
<p>後でURLを修正する必要がある場合は、関数を見つけてコードを修正します.アプリケーションロジックのコードを修正するたびに、エラーが導入される可能性があります.データを抽出して単独で定義された定数にすることで、アプリケーションロジックとデータ修正を分離することができます.ボルトp>
<pregt;lt;codegt;var Contstants={
INVLIDUVALUEUMSG:「Invalid value!」
INVAILIDUVALUEU URL:"zhaoyuxian.cn"
｝
function validate(value){
if(!value){
alert(Contstants.INVAILIDUVALEUMSG);
location.href=Constants.INVAILIDUVALUEuURL;
)
)
<codet>ボルトpregt;
<p>メッセージとURLは、Contstantsオブジェクトに定義され、関数はこれらの値を参照する.これらの設定により、データはその関数を使用した場合には触れずに変更されます.Contstantsオブジェクトは、完全に個別のファイルで定義されてもよく、正確な値を含む他のプロセスによって国際的な設定に基づいて生成されてもよい.ボルトp>
<p>注意する値の種類は以下の通りです.p>
<ulgt;
<ligt;繰返し値——何でも多くのところで使われる値は一つの定数として抽出されます.ボルトligt;
<ligt;ユーザーインターフェース文字列――ユーザーに表示する文字列は、国際化に便利なように抽出されるべきです.ボルトligt;
<ligt;URLs-リソース位置は変更しやすいので、共通の場所ですべてのURLを保管することをオススメします.ボルトligt;
<ligt;いずれにしても変更可能な値です.字面の量を使うたびに、自分の価値は未来に変わるかどうか聞いてください.もし「はい」なら、この値は一つの定数として抽出されるべきです.ボルトligt;
<ulgt;
<hr>
<p>(まとめは「JavaScript高級プログラム設計」(第三版)から<p>
<アート>
<div>
<div>
<div>
<!--PCとWAPアダプティブ>
<div id=「SOHUCS」sid=「1247644600366125056」gt;ボルトdiv>
<script type=「text/javascript」src=「/views/front/js/chayan.js」gt;