標準化された JavaScript コードの書き方

開発者 (WEB フロントエンド JavaScript 開発) として、非標準的な開発は将来のコードの保守を困難にするだけでなく、通常、コードのセキュリティと実行効率にも問題をもたらします。私は開発の仕事で、標準に従って開発していない同僚と仕事をしてきましたが、彼と一緒に仕事をするのは「楽しい」とは言えません。さて、この記事を書く目的は、ちょっとした経験を皆さんと共有するだけでなく、将来のパートナーにとって参考になることを願っています。もちろん、私の発言が非科学的であれば、各界の先輩方からアドバイスをいただければと思います。さまざまな標準要件は、以下のサブ項目にリストされています。これらの要件はすべて、同僚のコーディングの問題に対して提案されているものであり、多くの業界で合意された他の標準については再度言及することはできません。

1. コード圧縮後にエラーがないことを確認します

大規模な JavaScript プロジェクトの場合、通常、製品のリリース時にプロジェクトに含まれるすべての JavaScript ファイルが圧縮されます。新しいバージョンの jQuery では、代わりにこのツールを使用してコードを圧縮します。これにより、通常、開発中に書き込まれたコメントが削除され、すべてのスペースと改行が削除され、元の長い変数名が短く意味のない変数名に置き換えられます。これにより、ファイルのダウンロードが高速化され、Web サイトへのアクセスによる余分なデータ トラフィックが削減されます。また、少なくとも、圧縮されたコードが復元された場合でも、読みにくくなります。コードが正しく圧縮されるためには、通常、ステートメントがセミコロンで終了する必要があり、中括弧も厳密に終了する必要があります。特定の要件は、圧縮ツールの要件にも依存します。したがって、最初に基準に従って実行しないと、圧縮が失敗した後に戻ってエラーを見つけるのは時間の無駄になります。

2. コードが特定の IDE の自動フォーマット機能を通過できることを確認します

一般に、より完成度の高い開発ツール (Aptana Studio など) には、コードの「自動フォーマット」機能があり、統一された行を実現するのに役立ちます。コードを整理するときに、左中括弧 { で改行を開始するかどうかなど、好みの書式設定基準を設定できます。この要件を達成する目的は、開発チームのメンバーがコードのコピーを取り、IDE を使用して、好みの、または読み慣れているスタイルに自動的にフォーマットすることを容易にすることです。同僚はあなたのコードを読む必要があります。これは、あなたが他のモジュールの開発プロセスでも使用する必要がある共通のメソッドを作成しているためです。コードを読むことで、メソッドの呼び出しと実装の詳細をより深く理解できるようになります。単純な API ドキュメントでは実現できない効果があります。

3. 標準のドキュメント コメントを使用する

この要件は、メソッド呼び出し時にメソッドの特定のパラメーターを渡すプロンプトを確認するのに役立ちます。また、サポートするドキュメント ツールを使用して HTML で開発ドキュメントを生成することもできます。他のチーム メンバーが読むことができるように、jsdoc-toolkit を使用してみてください。自動生成された API が facebook.com アプリケーションなどのオープン プラットフォームからのものである場合、ドキュメントは世界中のすべての開発者に公開されます。さらに、完全なコメントを書くことで、チーム メンバーがコードを読みやすくなり、パラメーターの説明を通じて、作成したメソッドの実装の詳細を簡単に知ることができます。もちろん、将来のコードのメンテナンスも容易になります。そのため、プロジェクトがどんなに大きくても、時間が経ってから戻って何かを変更した場合でも、その時に書いたコードが何であったかを忘れることはありません。

4. 標準化された意味のある変数名を使用する

大規模なプロジェクトの開発メンバーとして、作成したコードは他の人にとって理解しやすいだけではありません。実際、大規模なプロジェクトを開発する場合、誰でも比較的大量のコードを作成することがあります。標準的な名前を付けておくと、将来システムのアップグレードや新しい機能が追加されたときに、コードを明確に理解しやすくなります。将来追加されると、コードの変更がはるかに簡単になります。最初に書いたコードが今では理解できないことが最終的に判明したとしたら、それは大冗談です。

もちろん、意味のある変数名を使用し、次のような標準的な命名を使用するようにしてください: var me = this は var self = this ほど良くないかもしれません。self は Python のキーワードであり、Python では self は一般的なものであるためです。言語のこの用法。次の例をもう一度見てください。 s を追加しないよりも、追加する方が明らかに科学的です。これにより、変数名に複数の数値 (配列など) が格納されていることがわかります。

var li = document.getElementsByTagName('li')
var lis = document.getElementsByTagName('li')

5. 偏った構文を使用しないでください

ご存知のとおり、動的スクリプト言語としての JavaScript の柔軟性は長所でもあり、短所でもあります。動的言語のレベルが異なると、開発者によってコードの標準や構文が異なります。同じ機能を実装するのに大きな違いがあります。何はともあれ、誰もがすべきことは、コーディングを標準化して間違いを避けること、単純な問題を複雑にしないこと、コードの可読性の原則に違反しないことです。

たとえば、次のステートメント: typeof(b) == 'string' && alter(b) は、次のように変更する必要があります: if (typeof(b) == 'string') alter(b)、前の使用法と同様に、次のように使用します。 && 演算子の解析メカニズム: && より前のステートメントが検出されて false を返した場合、それ以降のステートメントは検出されなくなります。コードの最適化の観点から、最も可能性の高い状況が最初に判断されることも述べられています。条件が少ない場合は良いですが、条件が多い場合はさらに、ステートメントも長いため、コードの可読性はかなり悪くなります。

別の例: +function(a){var p = a;}('a') は、(function(a){var p = a;})('a') に変更する必要があります。関数の前の + () 括弧の機能は、関数を含む () 括弧の機能と同じです。どちらも操作の優先順位の役割を果たします。後者は、変数の汚染を防ぐための一般的でわかりやすい方法です。たとえば、多くの一般的な JavaScript フレームワークは後者の方法を使用します。

次のような、コードの可読性を低下させる別の例について説明します。 function getPostionTxt(type){return type == 2 ? "Wild" : (type == 3 ? "Mall" : (type == 4 ? "Copy" : null));} を次のように変更する必要があります: function getPostionTxt(type){var typeData={"2":"Wild","3":"Mall","4":"Copy"};if (typeData[type] ) return typeData[type]; それ以外の場合は null を返します。 type が 0 から始まる途切れのない整数の場合、配列を直接使用する方が簡単です。上記の多層の 3 項式のネストを見て、目まいがしませんか。

6. ステートメントの非代入領域に中国語を記述しないでください

プログラムの動作には影響しませんが、明らかに業界標準の要件に準拠していることはほとんどの人が知っていると思います。もちろん「Easy Language」を使って開発しているわけではありません。この問題については、話したくなかったのですが、英語が下手だからかどうかはわかりませんが、少なくともピンインを使える人に会いました。翻訳ツールを利用するのも良い選択肢です。次のような例を挙げます:

this.user['name'] = 'Zhang San' または this.user.name = 'Zhang San'

7 を明確に定義します。関数の固定 パラメーターの数

パラメーターの数が固定されている関数は、パラメーターを取得するために引数を使用しません。このため、定義したメソッドに多くのスクリプトが含まれている場合、そのメソッドがどのパラメーターを受け入れ、どのパラメーターが受け入れられるのかが一目でわかりません。パラメータの数。たとえば、次のようになります。

var $ = function(){return document.getElementById(arguments[0]);}应该改成：var $ = function(elemID){return document.getElementById(elemID);}

8. 動的イベント バインディングに夢中にならないでください

addEventListener や jQuery のバインド メソッドを使用するなど、イベントを動的にバインドできることは知っていますが、dynamic メソッドを使用することも知っています。イベント バインディングは XHTML をよりクリーンにすることができますが、この場合、一般的には、DOM ノードにイベントを直接記述することをお勧めします。そうすることで、どの要素がバインドされているかを簡単に知ることができるため、コードの保守が容易になると思います。簡単に言えば、これにより、ボタンまたはリンクがクリックされたときにどのメソッド スクリプトが呼び出されるのかが分かりやすくなります。

9. コードとリンクの間の結合を減らし、メソッド呼び出しはすべて同じです。たとえば、次の実装には明らかに問題があります:

function myBtnClick(obj)
{
　if (/确定/.test(obj.innerHTML)) 
　　alert('OK');
　else if (/取消/.test(obj.innerHTML)) 
　　alert('Cancel');
　else
　　alert('Other');
}
<a herf="javascript:;" onclick="myBtnClick(this)">确定</a><a herf="javascript:;" onclick="myBtnClick(this)">取消</a>

上記の例は実際には 1 つの関数で 2 つのことを処理するため、分割する必要があります。上記のように 2 つの関数に分割します。リンクがボタンに変更されている場合は、たとえば次のように変更します。 a32282902ed3a88b5eae1b287cf5f973この時点では obj.value である必要があるため、myBtnClick 関数内の obj.innerHTML に問題が発生します。さらに、ボタン名が中国語から英語に変更された場合にも問題が発生するため、このアプローチも問題になります。たくさんの問題。

10. 一个函数应该返回统一的数据类型

因为JavaScrip是弱类型的，在编写函数的时候有些人对于返回类型的处理显得比较随便，我觉得应该像强类型语言那样返回，看看下面的两个例子：

function getUserName(userID)
{
　if (data[userID])
　　return data[userID];
　else
　　return false;
}
应该改为：
function getUserName(userID)
{
　if (data[userID])
　　return data[userID];
　else
　　return "";
}

这个方法如果在C#中定义，我们知道它准备返回的数据类型应该是字符串，所以如果没有找到这个数据我们就应该返回空的字符串，而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用，因为返回的空字符串在逻辑判断上可被认作"非"，即与false一样，除非我们使用全等于"==="或typeof进行判断。

11. 规范定义JSON对象，补全双引号

使用标准肯定是有好处的，那么为什么还是有人不使用标准呢？我想这可能是懒或习惯问题。也许还会有人跟我说，少写引号可以减轻文件体积，我认为这有道理但不是重点。对于服务器返回的JSON数据，使用标准结构可以利用Firefox浏览器的JSONView插件方便查看（像查看XML那样树形显示），另外你如果使用jQuery做开发，最新版本jQuery1.4+是对JSON格式有更高要求的，具体的可以自己查阅jQuery更新文档。比如：{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。

12. 不在文件中留下未来确定不再使用的代码片段

当代码调整或重构后，之前编写的不再使用的代码应该及时删除，如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积，这对团队其它成员甚至自己都起到一定干扰作用，怕将来自己看回代码都搞不懂这方法是干什么的，是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。

13. 不重复定义其他团队成员已经实现的方法

对于大型项目，一般会有部分开发成员实现一些通用方法，而另外一些开发成员则要去熟悉这些通用方法，然后在自己编写模块遇到有调用的需要就直接调用，而不是像有些开发者喜欢"单干"，根本不会阅读这些通用方法文档，在自己代码中又写了一遍实现，这不仅产生多余的代码量，当然也是会影响团队开发效率的，这是没有团队合作精神的表现，是重复造轮子的悲剧。

比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义，对于一些复杂的方法更应该如此。

14. 调用合适的方法

当有几个方法都可以实现同类功能的时候，我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON，而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型（设置dataType参数）的做法。如果使用$.getJSON，在代码中我们一眼能看出本次请求服务器返回的是JSON。

温馨提示：jQuery1.4后，如果服务器有设置数据输出的ContentType，比如ASP.NET C#设置 Response.ContentType = "application/json"，那么$.get将与$.getJSON的使用没有什么区别。

15. 使用合适的控件存储合适的数据

私はかつて、次のように、DIV を使用して、ページのダウンロード後に将来使用するために JSON データを保存している人を見つけました: 89923c40e0d946f0d39d4e1a2a6bc916{ "name":"Tom"}16b28748ea4df4d9c2150843fecfba68、明らかにこれです。 DIV これはインターフェイスの表示には使用されません。データ キャッシュに HTML ファイルを使用する効果を得るためにこれを行う必要がある場合は、少なくともこのデータを格納するために隠しフィールドを使用する方が合理的です。たとえば、次のように変更します。 ;input type="hidden" value= " { "name":"Tom"}" />。

実際、上記の例と同様に、window オブジェクトを使用してデータを保存することもできます。3f1c4e4b6b16bbbd69b2ee476dc4f83awindow.userData = { "name":" のように、そのようなスクリプト ブロックを AJAX リクエスト ページに直接含めることができます。 Tom"};< ;/script>、AJAX リクエスト コールバック関数で $( "#MyDiv ").html(data) が実行されると、この変数はウィンドウ上ですぐに使用できるようになります。最初の方法を採用する場合、eval(document.getElementById("UserData").innerHTML) は避けられません。大量のデータがウィンドウ オブジェクトに保存されている場合、使用されていないときにデータを手動で消去する必要があり、ブラウザが更新されるか再起動されるまでデータは消去されないため、メモリのオーバーヘッドが増加します。

16. コードの最適化作業を決して無視しないでください

コードの最適化は、すべてのプログラマーが達成するために努力すべき目標であり、プログラマーの永遠の追求でもあります。コードを記述するときは、関数の実装を急ぐ必要はなく、コードの実行効率が良くなるようにコードを記述する方法を検討してください。

例: getElementById を定義するショートカット メソッド functoin $(elemID){return document.getElementById(elemID)} があるとします。その後、誰かがそのようなコード $("MyDiv").parentNode.removeChild($( "MyDiv "))、実際、ここでは 2 つの getElementById DOM 検索が実行されます。var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv) に変更した方がよいでしょう。幸いなことに、getElementById の DOM 検索は比較的高速です。これを getElementsByTagName に変更する場合は、最適化にさらに注意を払う必要があります。 jQuery 開発チームも、この問題に注意を払うよう全員に呼び掛けています。

もちろん、コード最適化スキルは個人による継続的な蓄積も必要です。ある友人は、Web サイトが Xeon クアッドコア サーバーを使用しているため、Web サイトのバックエンド コードを作成するときに最適化を考慮する必要がなかったと私に言いました。これはばかげていると思いました。

17. 計画文書を分析し、オブジェクト指向の手法を使用してインターフェイスを定義し、コードを整理できるようにする

この能力はすべてのプログラマーにとって非常に重要であり、プログラマーのレベルを決定する重要な要素でもあります。要件を絞り込んでさまざまなクラスに抽象化し、コード構造が明確で可読性が高く、保守が容易で、手続き的で煩雑になりすぎないように、順序立ててコードを記述することができれば、優れたプログラマーとみなされるでしょう。 。

上記は標準化された JavaScript コードの記述方法です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。