JavaScriptを学ぶ際の7つの注意点【必読】_基礎知識

知識の説明:

JavaScript を学習するときは、同じ機能を実現しながらコードを理解しやすく、より効率的にするために、次の 7 つの詳細に注意してください。

1. 簡略化されたコード

例: オブジェクトの作成

以前はこんな感じでした:

Var car = new object();

Car.color = “赤”;

車.車輪 = 4;

車の年齢 = 8;

そして、次のように書くことができます:

Var car = {color:'red'、wheels:4、age:8}

例: 配列を作成します

以前はこんな感じでした:

VarstudentArray = new Array('zhangsan', 'lisi', 'zhaowu', 'wuliu');

そして、次のように書くことができます:

Var studentsArray = {‘zhangsan’, ‘ lisi’, ‘zhaowu’, ‘wuliu’};

例: 三項演算子を使用してコードを簡素化する

の以前の書き込みは次のとおりです:

Var result;

if(x > 100)

{

    Result = 1;

}else{

    Result = -1;

}

そして、次のように書くことができます:

変数結果 = x >100 ? 1 : -1;

2. データ形式として JSON を使用します

Json 形式を使用してデータを保存します:

var band = {

 "name":"The Red Hot Chili Peppers",

 "members":[

  {

   "name":"Anthony Kiedis",

   "role":"lead vocals"

  },

  {

   "name":"Michael 'Flea' Balzary",

   "role":"bass guitar, trumpet, backing vocals"

  },

  {

   "name":"Chad Smith",

   "role":"drums,percussion"

  },

  {

   "name":"John Frusciante",

   "role":"Lead Guitar"

  }

 ],

 "year":"2009"

}

JS を使用してデータを保存することもできます。コードは次のとおりです:

<div id = “dataDiv”></div>

<script>

    Function saveData(data)

{

    Var out =“<ul>”;

    For(var i=0; i<data.length; i++)

{

    Out += “<li><a href =”'+data[i].url+'”>+

data[i].d+</a></li>”;

}

Out += ‘</ul>';

Document.getElementById(‘dataDiv').innerHTML = out;

}

</script>

上記の JS で生成された保存データを API の戻り値として使用することもできます

3. JavaScript ネイティブ関数を使用してみる

例: データセット内の最大値を取得します

var maxData = Math.max(0,20,50,10);

alert(maxData); //返される最大値は 50

例: JS を使用してクラス スタイルを要素に追加します。 コード スニペットは次のとおりです:

Function addClass(elm, newclass)

{

    Var classes = elm.className.split(‘ ‘ );

    Classes.push(newclass);

    Elm.className = classes.join(‘ ');

}

4. イベントの委任

例:

<h2>Great Web resources</h2>

<ul id="resources">

 <li><a href="http://opera.com/wsc">Opera Web Standards

Curriculum</a></li>

 <li><a href="http://sitepoint.com">Sitepoint</a></li>

 <li><a href="http://alistapart.com">A List Apart</a></li>

 <li><a href="http://yuiblog.com">YUI Blog</a></li>

 <li><a href="http://blameitonthevoices.com">Blame it on the

voices</a></li>

 <li><a href="http://oddlyspecific.com">Oddly specific</a></li>

</ul>

スクリプトを記述するための最良の方法:

(function(){

 var resources = document.getElementById('resources');

 resources.addEventListener('click',handler,false);

 function handler(e){

  var x = e.target; // get the link tha

  if(x.nodeName.toLowerCase() === 'a'){

   alert('Event delegation:' + x);

   e.preventDefault();

  }

 };

})();

5. 匿名関数

var myApplication = function(){

 var name = 'Chris';

 var age = '34';

 var status = 'single';

 function createMember(){

  // [...]

 }

 function getMemberDetails(){

  // [...]

 }

 return{

  create:createMember, get:getMemberDetails

 }

}();

//myApplication.get() and myApplication.create() now work.

6. コードを構成可能

自分が作成したコードを他の人が使用したり変更したりしやすいようにするには、そのコードを構成可能にする必要があります。その解決策は、作成したスクリプトに構成オブジェクトを追加することです。重要なポイントは次のとおりです:

1. スクリプトにconfigurationというオブジェクトを追加します。

2. CSS ID、クラス名、言語など、他の人が変更する可能性のあるすべてのものを設定オブジェクトに保存します。

3. このオブジェクトをパブリック プロパティとして返し、他の人がオーバーライドできるようにします。

7. コードの互換性

初心者が見落としがちなのが互換性です。通常、JavaScript を学習するときは固定ブラウザでテストされますが、このブラウザは IE である可能性が非常に高いです。なぜなら、現在では主要な主流ブラウザの中で IE が少ないからです。標準に対するサポートが最悪です。エンド ユーザーが見た結果として、作成したコードが特定のブラウザでは正しく実行できない場合があります。すべての主要なブラウザでコードをテストする必要があります。これには時間がかかるかもしれませんが、必ず実行する必要があります。

以上、JavaScriptを学ぶ際の7つの注意点【必読】は、すべて編集者が共有した内容ですので、ご参考になれば幸いです、また、皆さんもScript Homeを応援していただければ幸いです。