JavaScriptの一般的な使用法と記述仕様

JavaScriptは、セキュリティ機能を備えたオブジェクト駆動型およびイベント駆動型のスクリプト言語です。

JavaScriptの一般的な使用法:

(1)HTML出力ストリームに直接書き込むことができます

<script>
document.write("<h1>标题</h1>");
document.write("<p>这是一个 <strong>段落</strong>。</p>");
</script>

(2)インシデントへの対応

<button type="button" onclick="alert('欢迎!')">点击我!</button>

(3)HTML要素の内容を変更する

<p id="demo">
可以改变 HTML 元素的内容
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

(4)HTML画像を変更する

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

(5)HTML要素のスタイルを変更する

<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

(6)入力を確認する

<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
    var x=document.getElementById("demo").value;
    if(x==""||isNaN(x))
    {
        alert("不是数字");
    }
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

規範を書く

1)ファイルエンコーディングがutf-8に統合されました

2)書き込みプロセスの後、コードの各行の最後にセミコロンが必要です。

3)ライブラリの紹介:原則として、jQueryライブラリのみが紹介されます

4)変数の命名:各単語をアンダースコア、type_variable名でリンクします

  • s:文字列を表します。
  • n:数値を表します。
  • b:ロジックを表します。
  • a:配列を表します。
  • r:正規表現を表します。
  • f:関数を表します。
  • o:上記以外の他のオブジェクトを示します。

変数はスコープの先頭で宣言されます

5)定数:ウェブサイトのURL、ドメイン、画像のディレクトリパス、jsやcssで使用されるディレクトリパスなどのアンダースコアで区切られたすべての大文字

6)クラスの命名:最初の大文字、キャメルケースの命名。コメントなど。

7)関数の命名:最初の文字の小文字のキャメルケース名。getUserName();など。

8)クラス内のプライベートメソッドは、アンダースコア+メソッド名でマークされています。プライベートメソッドをクラス外で呼び出すことはできません。

8)意味的な命名、英語の単語またはその略語を可能な限り使用します。

9)コード構造が明確で、適切なコメントが追加されています。関数の再利用率を向上させます。
(1)大きな機能ブロック(クラス、関数)の関数の説明
(2)1行のコメント(行の終わりに配置) )

10)htmlからの分離に注意を払い、リフローを減らし、パフォーマンスに焦点を合わせます。

11)j_classnameの形式のDomのカスタムクラス

12)外部JavaScriptファイルをHTMLの下部の前に配置します

13)ループを最適化します(ループ本体にDom操作がある場合、Dom操作をループの外側に追加する必要があります。同じスコープで、Domはローカル変数に値を割り当てることを選択します。)

14)より単純な形式を使用して内部スクリプトを記述します

15)常にデータを確認します。
方法で入力されたすべてのデータを、一方では安全性について、もう一方では使いやすさについて確認します。

16)他のテクノロジーとの混合を避けてください。jsはcssの詳細設定を直接制御しませんが、クラス名は制御できます。

17)グローバル変数(クラス名前空間のApp.dialog。)を避けるグローバル変数
とグローバル関数は非常に悪いです。ページに含まれるすべてのJavaScriptが同じドメインで実行されるためです。したがって、コードでグローバル変数またはグローバル関数を宣言すると、次のコードでロードされたスクリプトファイルで同じ名前の変数と関数が上書きされます。

18)変数を宣言するときは、常にvarを使用してください。JavaScriptの
変数はグローバルでもローカルでもかまいません。varで宣言する方が直感的です。

19)eval()メソッドの使用を避ける(ajaxデータリクエスト検証)
JavaScriptのeval()メソッドは、実行時にオブジェクトとしてコードを計算/実行するメソッドです。実際、安全上の理由から、ほとんどの場合eval()は使用しないでください。同じジョブを実行するには、常により「正しい」方法があります。

20)怠惰にならず、「と{}」を省略します

21)オブジェクトのプロパティを取得するときは、ドットの代わりに角かっこ
を使用します。ドット表記を使用してオブジェクトのプロパティを取得する場合、プロパティ名はハードコーディングされており、実行時に変更できません。角かっこを使用している間、JavaScriptは角括弧次に、結果を計算して属性名を取得することにより、値が計算されます。つまり、角かっこを使用すると、属性名をハードコーディングすることも、変数または関数の戻り値にすることもできます。

おすすめ

転載: blog.csdn.net/QIANDXX/article/details/113351998