私は長い間JavaScriptコードを書いてきましたが、それがどのような時代に始まったのか思い出せません。私は近年JavaScriptの成果に非常に興奮しています。これらの成果の受益者になれたことは非常に幸運です。私は多くの記事、章、それに捧げられた本を書きましたが、今でもこの言語に関する新しい知識を見つけることができます。以下は、「ああ！」とため息をついたプログラミングスキルについて説明しています。過去に。将来、誤ってそれらを発見するのを待つのではなく、これらのスキルを試してみるべきです。
簡潔な文章
JavaScriptの私のお気に入りの1つは、オブジェクトと配列を生成する略語方法です。過去には、オブジェクトを作成したい場合は、これを行う必要があります。
var car = new object（）; car.colour = 'red'; car.wheels = 4; car.hubcaps = 'Spinning'; car.age = 4;
次の執筆方法は同じ効果を達成できます。
var car = {color： 'red'、wheels：4、hubcaps： 'spinning'、age：4}それははるかに簡単です。このオブジェクトの名前を繰り返し使用する必要はありません。このようにして、車が定義されています。 InvaliduserInsessionの問題に遭遇するかもしれません。これは、IEを使用したときにのみ遭遇します。 1つのことを覚えておいて、閉鎖ブレースの前にコンマを書かないでください。問題はありません。
もう1つの非常に便利な略語は、配列用です。配列を定義する従来の方法は次のとおりです。
var moviesthatneedbetterwriters = new Array（ 'Transformers'、 'Transformers2'、 'avatar'、 'indianajones 4'）;
略語バージョンは次のようなものです。
var moviesthatneedbetterwriters = ['transformers'、 'transformers2'、 'avatar'、 'indianajones 4'];
配列の場合、ここには問題がありますが、実際にはグラフグループ機能はありません。しかし、あなたはしばしば誰かがこのように上記の車をこのように定義していることに気付くでしょう
var car = new Array（）; car ['color'] = 'red'; car ['wheels'] = 4; car ['hubcaps'] = '回転'; car ['age'] = 4;
配列は全能ではありません。それらが誤って書かれている場合、それらは混乱します。グラフグループは実際にはオブジェクトの機能であり、人々はこれら2つの概念を混乱させています。
別の非常にクールな略語方法は、三元条件記号を使用することです。以下のように書く必要はありません...
var方向; if（x <200）{方向= 1; } else {方向= -1; }…3成分条件付き表記で簡素化できます。
var方向= x <200？ 1：-1;
条件が真である場合、疑問符の後の値は、それ以外の場合はコロンの後の値を取得します。
JSONにデータを保存します
JSONを発見する前に、さまざまなクレイジーな方法を使用して、Array、文字列、分割しやすいグリフなど、JavaScriptの固有のデータ型にデータを保存しました。ダグラス・クロックフォードがJSONを発明した後、すべてが変わりました。 JSONを使用して、JavaScriptの独自の関数を使用してデータを複雑な形式に保存できます。他の追加の変換を行う必要はありません。直接アクセスできます。 JSONは、上記の2つの略語方法を使用する「JavaScriptオブジェクト表記」の略語です。だから、あなたがバンドを説明したいなら、あなたは次のように書くかもしれません：
var band = {"name"： "The Red Hot Chili Peppers"、 "Members"：[{"name"： "Anthony Kiedis"、 "least"： "lead vocals"}、{"name"： "michael 'flea' balzary"、 "leas"： "bass guitar、bucking bocals" }、{"name"： "John Frusciante"、 "role"： "leadギター"}]、 "year"： "2009"}JSONをJavaScriptで直接使用したり、関数にカプセル化するか、APIの返品値形式として使用することもできます。これをJSON-Pと呼び、多くのAPIがこのフォームを使用しています。
データサプライソースを呼び出して、スクリプトコードでJSON-Pデータを直接返すことができます。
<div id = "delicious"> </div> <script> function delicious（o）{var out = '<ul>'; for（var i = 0; i <o.length; i ++）{out + = '<li> <a href = "' + o [i] .u + '">' + o [i] .d + '</a> </li>'; } out += '</ul>'; document.getElementById（ 'Delicious'）。innerhtml = out; } </script> <script src = "http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"> </script>これは、Delicious Webサイトから提供されるWebサービス機能を呼び出して、JSON形式の最新の順序付けられていないブックマークリストを取得します。
基本的に、JSONは複雑なデータ構造を説明する最も軽い方法であり、ブラウザで実行できます。 json_decode（）関数を使用してPHPで実行することもできます。 JavaScript自身の機能（数学、配列、文字列）について驚いたことの1つは、JavaScriptで数学と文字列の機能を研究した後、プログラミング作業を大幅に簡素化できることを発見したことです。それらを使用すると、複雑なループ処理と条件付き判断を保存できます。たとえば、数字アレイで最大数を見つけるために関数を実装する必要がある場合、このループを次のように書きました。
var番号= [3,342,23,22,124]; var max = 0; for（var i = 0; i <numbers.length; i ++）{if（numbers [i]> max）{max = numbers [i]; }} alert（max）;ループせずに行うことができます：
var番号= [3,342,23,22,124]; numbers.sort（function（a、b）{return b -a}）;アラート（番号[0]）;この場合、アルファベット順でのみソートするため、数値文字の配列を並べ替えることはできないことに注意する必要があります。使用についてもっと知りたい場合は、sort（）に関するこの良い記事を読むことができます。
もう1つの興味深い機能は、math.max（）です。この関数は、パラメーターの最大数を返します。
Math.max（12,123,3,2,433,4）; // 433を返します
この関数は数値を検証し、最大のものを返すことができるため、それを使用して、機能のブラウザのサポートをテストできます。
var scrolltop = math.max（doc.documentelement.scrolltop、doc.body.scrolltop）;
これは、IEの問題を解決するために使用されます。現在のページのスクロールトップ値を取得できますが、ページのDoctypeに応じて、上記の2つのプロパティのうち1つのみがこの値を保存し、他のプロパティは未定義になります。この記事を読むと、JavaScriptを簡素化するために数学関数を使用することに関する知識が増えます。
文字列を操作する非常に便利な関数のペアもあります（）とJoin（）があります。最も代表的な例は、CSSスタイルをページ要素に添付する関数を書くことだと思います。
こんな感じです。 CSSクラスをページ要素に追加すると、この要素の最初のCSSクラスであるか、すでにいくつかのクラスがあります。既存のクラスの後にスペースを追加してから、クラスに従う必要があります。また、このクラスを削除したい場合は、このクラスの前のスペースを削除する必要があります（これは、一部の古いブラウザがクラスの後にスペースが続くことを認識していなかったため、過去に非常に重要でした）。
したがって、元の文章は次のようになります：
関数addclass（elm、newclass）{var c = elm.classname; elm.classname =（c === ''）？ NewClass：C+''+NewClass; }Split（）およびJoin（）関数を使用して、このタスクを自動的に完了できます。
関数addclass（elm、newclass）{var classes = elm.classname.split（ ''）; classes.push（newclass）; elm.classname = classes.join（ ''）; }これにより、すべてのクラスがスペースで区切られ、追加するクラスが最後のクラスに正確に配置されることが保証されます。
イベント委任
Webアプリケーションはすべてイベントによって駆動されます。私はイベントの取り扱いが好きです、特に私はイベントを自分で定義するのが好きです。コアコードを変更せずに製品をスケーラブルにします。ページ上のイベントの削除については、大きな問題があります（これも強力な症状です）。イベントリスナーを要素にインストールすることができ、イベントリスナーは動作し始めます。しかし、ページにリスナーがいるという兆候はありません。この予測不可能な問題（一部の初心者にとっては特に面倒です）、およびIE6のような「ブラウザ」がイベントリスニングが多すぎるようなさまざまなメモリの問題のために、イベントプログラミングを可能な限り使用しようとするのが賢明であることを認める必要があります。
そのため、事件の委員会が発生しました。
ページ上の要素のイベントがトリガーされ、DOM相続関係では、この要素のすべての子供もこのイベントを受信することができます。現時点では、イベントリスナーをたくさんの子要素に使用して処理するのではなく、親要素のイベントハンドラーを使用して処理できます。それは正確にはどういう意味ですか？このように言えば、ページには多くのハイパーリンクがあります。これらのリンクを直接使用したくありません。関数を介してこのリンクを呼び出します。 HTMLコードは次のようなものです。
<h2>優れたWebリソース</h2> <ul id = "resources"> <li> <a href = "http://opera.com/wsc"> Opera Web Standards curriculum </li> <li> <a href = "http:///sitepoint.com" href = "http://alistapart.com"> aリストアパート</a> </li> <li> <a href = "http://yuiblog.com"> yui blog </a> <li> <li> href = "http://oddlyspecific.com">奇妙な具体</a> </li> </ul>
これらのリンクをループして、各リンクにイベントハンドラーを添付することは一般的な慣行です。
//典型的なイベント処理例（function（）{var resources = document.getElementbyId（ 'resources'）; var links = resources.getelementsbytagname（ 'a'）; var all = links.length; for（var i = 0; i <all; i ++）{//リスナーを各リンクにリスナーを添付します[i]。ハンドラー（e）{e.target;また、イベントプロセッサでこのタスクを達成することもできます。
（function（）{var resources = document.getElementbyId（ 'resources'）; resources.addeventlistener（ 'click'、handler、false）; function handler（e）{var x = e.target; // link tha if（x.nodename.tolowercase（）=== 'a'）{alert（ 'event deftion：' eave defed（ };}）（）;クリックイベントはこれらのページ要素で発生するため、あなたがしなければならないことは、ノーデネームを比較して、イベントにどの要素が応答するかを見つけることだけです。
免責事項：上記のイベントに関する2つの例は、すべてのブラウザーで実行できます。 IE6を除き、単純なW3C標準実装ではなく、IE6でイベントモデルを使用する必要があります。これが、いくつかのツールキットを使用することをお勧めする理由です。
このアプローチの利点は、複数のイベントプロセッサを1つに減らすことに限定されません。それについて考えてみてください。たとえば、このリンクテーブルにさらにリンクを動的に追加する必要があります。イベント委任を使用した後、他の変更を加える必要はありません。それ以外の場合は、このリンクテーブルを再ループして、各リンクのイベントハンドラーを再度インストールする必要があります。
匿名の関数とモジュール性
JavaScriptで最も厄介なことは、変数に使用する範囲がないことです。変数、関数、配列、オブジェクトは、関数内にない限り、グローバルと見なされます。つまり、このページの他のスクリプトもアクセスしてオーバーライドできます。
解決策は、変数を匿名関数内に配置し、定義された直後に呼び出すことです。たとえば、次の執筆方法では、3つのグローバル変数と2つのグローバル機能を生成します。
var name = 'chris'; var age = '34'; var status = 'single'; function createmember（）{// [...]} function getMemberDetails（）{// [...]}このページの他のスクリプトにステータスと呼ばれる変数がある場合、トラブルが発生します。 myApplicationでそれらをカプセル化すると、この問題は解決されます。
var myApplication = function（）{var name = 'chris'; var age = '34'; var status = 'single'; function createmember（）{// [...]} function getMemberDetails（）{// [...]}}（）;ただし、このようにして、関数の外側に関数はありません。これがあなたが必要とするなら、それは大丈夫です。関数の名前を省略することもできます。
（function（）{var name = 'chris'; var age = '34'; var status = 'single'; function createmember（）{// [...]} function getMemberDetails（）{// [...]}}）（）;関数の内部を使用する場合は、いくつかの変更を行う必要があります。 createMember（）またはgetMemberDetails（）にアクセスするには、それらを外部世界にさらすためにそれらをmyApplicationプロパティに変える必要があります。
var myApplication = function（）{var name = 'chris'; var age = '34'; var status = 'single'; return {createmember：function（）{// [...]}、getMemberDetails：function（）{// [...]}}}（）; //MYAPPLICATION.CREATEMEMBER（）および//MYAPPLICATION.GETMEMBERDETAILS（）を使用できます。これは、モジュールモードまたはシングルトンと呼ばれます。ダグラス・クロックフォードはこれについて何度も話しており、YahooユーザーインターフェイスライブラリYuiで広く使用されています。しかし、私が不便になっているのは、外部の世界で機能と変数にアクセスできるように、文の構造を変更する必要があるということです。さらに、呼び出し時にmyApplicationのプレフィックスを追加する必要があります。だから、私はこれをやりたくない、私は外の世界からアクセスする必要がある要素にポインターを単にエクスポートすることを好む。これを行うと、外部呼び出しの書き込みが簡素化されます。
var myApplication = function（）{var name = 'chris'; var age = '34'; var status = 'single'; function createmember（）{// [...]} function getMemberDetails（）{// [...]} return {create：createmember、get：getMemberDetails}}（）; //次に、myApplication.get（）およびmyApplication.create（）として書きます。これを「モジュールパターンを明らかにする」と呼びます。
設定可能
私がこの世界に書いたJavaScriptコードを公開した後、誰かがそれを変更したかったのです。通常、人々はそれ自体を完成させることができないタスクを完了したいと思っていましたが、通常、私が書いたプログラムは十分に柔軟ではなく、ユーザー定義の関数を提供しませんでした。解決策は、スクリプトに構成アイテムオブジェクトを追加することです。私はかつて、JavaScript構成アイテムオブジェクトを詳細に導入する記事を書きました。ここに重要なポイントがあります：
----スクリプトで、Configurationというオブジェクトを追加します。
----このオブジェクトは、このスクリプトを使用するときに人々がよく変更する必要があるすべてのものを保存します。
** CSS IDおよびクラス名。
**ボタン名、ラベルワードなど。
**「ページごとに表示される写真数」や「表示される画像のサイズ」などの値。
**場所、場所、言語設定。
---ユーザーがそれを変更して上書きできるように、このオブジェクトを共通プロパティとしてユーザーに返します。
これは通常、プログラミングプロセスの最後のステップで行う必要があることです。これらを1つの例に集中しました。「次の開発者に引き渡す前に、スクリプトに5つのことをする必要があります。」
実際、コードを非常に良い方法で使用し、それぞれのニーズに応じていくつかの変更を加えることを望んでいます。この機能を実装すると、スクリプトについて不平を言う人から、混乱を招くメールを受け取ります。
背景と対話します
長年にわたるプログラミングの経験で私が学んだ重要なことの1つは、JavaScriptがインターフェイス相互作用を開発するための優れた言語であることですが、データソースの処理またはアクセスに使用される場合は、少し不満です。
当初、Perlを実行するためにCGI-Binフォルダーにコードをコピーする必要があるため、Perlを置き換えるJavaScriptを学びました。後で、バックエンドの動作言語を使用してメインデータを処理する必要があることに気付き、JavaScriptにすべてを実行させることはできません。さらに重要なことは、セキュリティと言語の特性を考慮する必要があることです。
Webサービスにアクセスすると、JSON-P形式でデータを取得できます。クライアントブラウザでは、さまざまなデータ変換を行いますが、サーバーを持っている場合、データを変換する方法がさらにあります。サーバー側にJSONまたはHTML形式のデータを生成してクライアントに返すことができます。また、データなどをキャッシュすることもできます。これらを事前に理解して準備すると、長期的な利益を上げて多くの頭痛を節約できます。さまざまなブラウザに適したプログラムを作成することは時間の無駄です。ツールキットを使用してください！
私が最初にWeb開発を始めたとき、私はページにアクセスするときにdocument.allまたはdocument.layersを使用するかどうかについて長い間苦労しました。 document.layersを選択しました。なぜなら、レイヤーは独自のドキュメントであるという考えが好きだからです（そして、私はあまりにも多くのdocument.writeを書き、要素を生成するために書き込みました）。レイヤーパターンが最終的に失敗したため、document.allの使用を開始しました。 Netscape 6がW3C DOMモデルのみをサポートしていると発表したとき、私は非常に嬉しかったですが、実際にはユーザーはこれを気にしませんでした。ユーザーは、そのようなブラウザがほとんどのブラウザが正常に表示できるものを表示できないことを確認してください。これはエンコードの問題です。現在の環境でしか実行できない近視のコードを書きましたが、残念ながら、私たちの運用環境は絶えず変化しています。
私は、さまざまなブラウザやさまざまなバージョンとの互換性に対処する時間を無駄にしてきました。この種の問題に対処するのが得意であることは、私に良い仕事の機会を与えます。しかし今、私たちはこの痛みに耐える必要はありません。
Yui、Jquery、Dojoなどのいくつかのツールキットは、この種の問題に対処するのに役立ちます。バージョンの非互換性、デザインの欠陥など、さまざまなインターフェイスの実装を抽象化することにより、さまざまなブラウザの問題を解決し、痛みから私たちを救います。特定のベータブラウザをテストしたい場合を除き、ブラウザの欠陥を修正するために独自のプログラムにコードを追加しないでください。ブラウザがこの問題を変更したときにコードを削除するのを忘れる可能性が高いためです。
一方、ツールキットに完全に依存することも近視の動作です。ツールキットはすぐに開発するのに役立ちますが、JavaScriptを深く理解していない場合は、何か間違ったことをします。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。