標準化された JavaScript コードの書き方-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

黄舟

Dec 20, 2016 pm 03:37 PM

開発者 (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(&#39;li&#39;)
var lis = document.getElementsByTagName(&#39;li&#39;)

ログイン後にコピー

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(&#39;OK&#39;);
　else if (/取消/.test(obj.innerHTML)) 
　　alert(&#39;Cancel&#39;);
　else
　　alert(&#39;Other&#39;);
}
<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 データを保存している人を見つけました:

{ "name":"Tom"}

、明らかにこれです。 DIV これはインターフェイスの表示には使用されません。データキャッシュに HTML ファイルを使用する効果を得るためにこれを行う必要がある場合は、少なくともこのデータを格納するために隠しフィールドを使用する方が合理的です。たとえば、次のように変更します。 ;input type="hidden" value= " { "name":"Tom"}" />。

実際、上記の例と同様に、window オブジェクトを使用してデータを保存することもできます。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7675

CakePHP チュートリアル

1393

C# チュートリアル

1207

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。