標準化された 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 つの関数に分割します。リンクがボタンに変更されている場合は、たとえば次のように変更します。 この時点では 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 データを保存している人を見つけました:
実際、上記の例と同様に、window オブジェクトを使用してデータを保存することもできます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7317
9
1625
14
1349
46
1261
25
1209
29
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
jQuery日付が有効かどうかを確認します
Mar 01, 2025 am 08:51 AM
単純なJavaScript関数は、日付が有効かどうかを確認するために使用されます。 関数isvaliddate（s）{ var bits = s.split（ '/'）; var d = new Date（bits [2] '/' bits [1] '/'ビット[0]）; return !!（d &&（d.getmonth（）1）== bits [1] && d.getdate（）== number（bits [0]））; } //テスト var
jQueryは要素のパディング/マージンを取得します
Mar 01, 2025 am 08:53 AM
この記事では、jQueryを使用して、DOM要素の内側のマージン値とマージン値、特に外側の縁と要素の内側の縁の特定の位置を取得して設定する方法について説明します。 CSSを使用して要素の内側と外側の縁を設定することは可能ですが、正確な値を取得するのは難しい場合があります。 // 設定 $（ "div.header"）。css（ "margin"、 "10px"）; $（ "div.header"）。css（ "padding"、 "10px"）; このコードはそうだと思うかもしれません
10 jQuery Accordionsタブ
Mar 01, 2025 am 01:34 AM
この記事では、10個の例外的なjQueryタブとアコーディオンについて説明します。 タブとアコーディオンの重要な違いは、コンテンツパネルの表示方法と非表示にあります。これらの10の例を掘り下げましょう。 関連記事：10 jQueryタブプラグイン
10 jqueryプラグインをチェックする価値があります
Mar 01, 2025 am 01:29 AM
ウェブサイトのダイナミズムと視覚的な魅力を高めるために、10の例外的なjQueryプラグインを発見してください！このキュレーションされたコレクションは、画像アニメーションからインタラクティブなギャラリーまで、多様な機能を提供します。これらの強力なツールを探りましょう。 関連投稿： 1
ノードとHTTPコンソールを使用したHTTPデバッグ
Mar 01, 2025 am 01:37 AM
HTTP-Consoleは、HTTPコマンドを実行するためのコマンドラインインターフェイスを提供するノードモジュールです。 Webサーバー、Web Servに対して作成されているかどうかに関係なく、HTTPリクエストで何が起こっているかをデバッグして正確に確認するのに最適です
カスタムGoogle検索APIセットアップチュートリアル
Mar 04, 2025 am 01:06 AM
このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です！検索をyに制限することができます
jQueryはscrollbarをdivに追加します
Mar 01, 2025 am 01:30 AM
次のjQueryコードスニペットを使用して、Divコンテンツがコンテナ要素領域を超えたときにスクロールバーを追加できます。 （デモンストレーションはありません、それを直接firebugにコピーしてください） // d =ドキュメント // w =ウィンドウ // $ = jQuery var contentarea = $（this）、 wintop = contentarea.scrolltop（）、 docheight = $（d）.height（）、 winheight = $（w）.height（）、 divheight = $（ '＃c
