目立たない JavaScript_javascript スキルのための 7 つの原則のコレクション

スクリプトの設計を始める前に、まず考慮すべきことは、スクリプトを作成する HTML コードをチェックし、目標の達成に役立つものがないかどうかを確認することです。

1. いかなる思い込みもしない
(JavaScript は信頼性の低いアシスタントです)
控えめな JavaScript の最も重要な特徴は、おそらく、あらゆる思い込みをやめなければならないことです。 :
* JavaScript が利用できるとは想定しないでください。JavaScript に直接依存するのではなく、利用できない可能性が高いと想定したほうがよいでしょう。
* テストして機能することを確認するまで、ブラウザーがメソッドとプロパティをサポートしていると想定しないでください。
* HTML コードが思っているほど正しいとは考えず、毎回チェックして、利用できない場合は何もしません。
* JavaScript 関数を入力デバイスから独立させます
* 他のスクリプトが JavaScript の機能に影響を与える可能性があることに注意してください。そのため、スクリプトのスコープが可能な限り安全であることを確認してください。
スクリプトの設計を始める前に、まず考慮すべきことは、スクリプトを作成する HTML コードをチェックし、目標の達成に役立つものがないかどうかを確認することです。
2. フックとノードの関係を見つける
(HTML はスクリプト作成の基礎です)
スクリプトを書き始める前に、JavaScript を作成する HTML を確認してください。 HTML が整理されていない、または不明な場合、適切なスクリプト ソリューションを用意することはほぼ不可能です。JavaScript で過剰なマークアップを作成するか、アプリケーションが JavaScript に過度に依存する可能性があります。
HTML では考慮すべき点がいくつかあります。それは、フックとノードの関係です。
<1>.HTML フック
HTML の元の最も重要なフックは ID であり、ID には最速の DOM メソッドである getElementById を通じてアクセスできます。有効な HTML ドキュメント内のすべての ID が一意である場合 (IE には名前と ID に関するバグがありますが、優れたライブラリによってはこの問題が解決されます)、ID を使用することは安全で信頼性が高く、テストが簡単です。
その他のフックには HTML 要素と CSS クラスがあります。HTML 要素には getElementsByTagName メソッドを通じてアクセスできますが、CSS クラスにはほとんどのブラウザでネイティブ DOM メソッドを通じてアクセスできません。ただし、CSS クラス名にアクセスするメソッド (getElementsByClassName と同様) を提供する外部ライブラリが多数あります。
<2>.HTML ノードの関係
HTML に関するもう 1 つの興味深い点は、次の質問について考えてみましょう:
* 最も簡単に到達できる最小限の DOM を渡すにはどうすればよいでしょうか。ターゲットノード?
* どのタグを変更すると、変更が必要なできるだけ多くの子ノードにアクセスできるようになりますか?
* 特定の要素には、別の要素に到達するために使用できるどのような属性または情報がありますか?
DOM のトラバースはリソースを大量に消費し、時間がかかるため、ブラウザですでに使用されているテクノロジを使用して実行する必要があります。
3. 走査を専門家に任せる
(CSS、DOM の走査を高速化)
走査する DOM に関するメソッドまたはプロパティ (getElementsByTagName、nextSibling、previousSibling、parentNode など) を使用するDOM は多くの人を混乱させているようですが、これは興味深いことです。興味深いのは、これらのことを別のテクノロジーである CSS を通じてすでに実行していることです。
CSS は、CSS セレクターを使用してターゲット要素にアクセスし、DOM をトラバースすることでその視覚的プロパティを変更するテクノロジーです。 DOM を使用する JavaScript の複雑な部分は、CSS セレクターで置き換えることができます:

コードをコピー コードは次のとおりです:

var n = document.getElementById ('nav');
if(n){
var as = n.getElementsByTagName('a');
if(as.length > 0){
for (var i= 0;as[i];i ){
as[i].style.color = '#369';
as[i].style.textDecoration = 'none'; }
}
}
/* 次のコードは上記と同じ機能です*/
#nav a{
color:#369;
text-decoration:none;
}

これは有効に活用できる非常に強力なテクニックです。これを実現するには、DOM 内の高レベルの要素にクラスを動的に追加するか、要素 ID を変更します。 DOM を使用して CSS クラスをドキュメントの本文に追加すると、デザイナーはドキュメントの静的バージョンと動的バージョンを簡単に定義できます。
JavaScript:

コードをコピーします コードは次のとおりです。

vardynamicClass = 'js'; document.body ;
b.className = b.className ? b.className ' js' : 'js';
CSS:
/* 静的バージョン */
#nav {
...
}
/* 動的バージョン*/
body.js #nav {
....
}

4. ブラウザとユーザーを理解する
(既存の使用パターンに基づいて必要なものを作成する)
控えめな JavaScript の重要な部分は、ブラウザの動作方法 (特にブラウザの仕組み) を理解することです。クラッシュ）とユーザーが期待するもの。ブラウザに関係なく、JavaScript を使用してまったく異なるインターフェイスを簡単に作成できます。ドラッグ アンド ドロップ インターフェイス、折りたたみ領域、スクロール バー、スライダーはすべて JavaScript を使用して作成できますが、この問題は単純な技術的な問題ではなく、次の点について考慮する必要があります:
* この新しいインターフェイスは独立しているかどうか。入力デバイスの?そうでない場合、何を信頼できますか?
* 作成する新しいインターフェイスはブラウザまたは他のリッチ インターフェイスのガイドラインに従っていますか (マウスを使用してマルチレベル メニュー間を直接切り替えることができますか? それともタブ キーを使用する必要がありますか?)
* とは関数を提供する必要がありますか? しかし、この関数は JavaScript に依存していますか?
必要に応じて DOM を使用して何もないところから HTML を作成できるため、最後の質問は実際には問題ありません。この例としては、「印刷」リンクがあります。ブラウザにはドキュメントを印刷するための JavaScript 以外の機能が提供されていないため、このタイプのリンクを作成するには DOM を使用する必要があります。展開および折りたたみコンテンツ モジュールを実装するクリック可能なタイトル バーにも同じことが当てはまります。タイトル バーはキーボードでアクティブにすることはできませんが、リンクはアクティブにすることができます。したがって、クリック可能なタイトル バーを作成するには、JavaScript を使用してリンクを追加する必要があります。そうすれば、キーボードを使用するすべてのユーザーがコンテンツ モジュールを折りたたんだり展開したりできるようになります。
この種の問題を解決するための優れたリソースは、デザイン パターン ライブラリです。ブラウザー内のどのものが入力デバイスに依存しないのかを知ることについては、経験の蓄積に依存します。最初に理解する必要があるのは、イベント処理メカニズムです。
5. イベントを理解する
(イベント処理により変更が発生します)
イベント処理は、目立たない JavaScript への第 2 ステップです。重要なのは、すべてをドラッグ可能にしたり、クリック可能にしたり、インライン処理を追加したりすることではなく、イベント処理は完全に分離できるものであることを理解することです。 HTML、CSS、JavaScript は分離しましたが、イベント処理の分離はそれほど進んでいません。
イベント プロセッサは、ドキュメント内の要素で発生する変更を監視します。イベントが発生すると、プロセッサは素晴らしいオブジェクト (通常は e という名前のパラメータ) を見つけ、それが何であるか、また何が可能かを要素に伝えます。それで終わりました。
ほとんどのイベント処理で本当に興味深いのは、アクセスしたい要素だけでなく、DOM の上位のすべての要素でも発生することです (ただし、すべてのイベントがこのようになるわけではなく、フォーカス イベントやブラー イベントは例外）。たとえば、この機能を使用してナビゲーション リストにイベント ハンドラーを 1 つだけ追加し、イベント ハンドラー メソッドを使用して実際にイベントをトリガーした要素を取得できます。この手法はイベント委任と呼ばれ、次のような利点があります。
* すべての要素をチェックするのではなく、要素が存在するかどうかだけをチェックするだけで済みます。
* 対応するイベント ハンドラーを削除せずに、子ノードを動的に追加または削除できます。
* 異なる要素の同じイベントに応答できます
もう 1 つ覚えておくべきことは、イベントが親要素に伝播している間にイベントを停止でき、HTML 要素 (リンクなど) のデフォルトの動作をオーバーライドできることです。 ）。ただし、ブラウザーは HTML 要素に理由があって動作を与えるため、これは良い考えではない場合があります。たとえば、リンクはページ内のターゲットを指す場合があり、リンクを変更しないでおくと、ユーザーはページの現在のスクリプト状態をブックマークすることもできます。
6. 他の人のことを考える
(名前空間、スコープ、パターン)
あなたのコードがドキュメント内の唯一のスクリプト コードになることはほとんどありません。したがって、他のスクリプトによってオーバーライドされる可能性のあるグローバル関数やグローバル変数がコード内に存在しないことを確認することが特に重要です。この問題を回避するために使用できるパターンがいくつかありますが、最も基本的なパターンは、var キーワードを使用してすべての変数を初期化することです。次のスクリプトを作成するとします。

コードをコピー コードは次のとおりです:

var nav = document.getElementById('nav') ;
function init(){
// 処理
}
function show(){
// 処理
}
function restart(){
// do things
}

上記のコードには、nav というグローバル変数と、init、show、reset という 3 つの関数が含まれています。これらの関数は nav 変数にアクセスでき、関数名を通じて相互にアクセスできます:

コードをコピー コードは次のとおりです:

var nav = document .getElementById('nav');
関数 init(){
show();
if(nav.className === 'show'){
reset(); 🎜>}
// 実行
}
function show(){
var c = nav.className;
// 実行
}
function restart(){
// 何かをします
}

コードをオブジェクトにカプセル化して、上記のグローバル コーディングを回避できます。これにより、関数をオブジェクト内のメソッドに変換したり、グローバル変数をオブジェクト内のプロパティに変換したりできます。 メソッドとプロパティを定義するには「名前コロン」メソッドを使用する必要があり、各プロパティまたはメソッドの後に区切り文字としてカンマを追加する必要があります。

コードをコピー コードは次のとおりです:

var myScript = {
nav:document.getElementById('nav'),
init:function(){
// 処理
},
show:function(){
// 処理
},
reset:function() {
// do things
}
}

すべてのメソッドとプロパティは、「クラス名ドット演算子」を使用して外部および内部で使用できます。 。

コードをコピー コードは次のとおりです:

var myScript = {
nav:document.getElementById('nav'),
init:function(){
myScript.show();
if(myScript.nav.className === 'show'){
myScript.reset();
/ / 処理
},
show:function(){
var c = myScript.nav.className
// 処理
},
reset:function; (){
// do things
}
}

このパターンの欠点は、メソッドから他のメソッドまたはプロパティにアクセスするたびに、前に置く必要があります オブジェクトの名前を追加すると、オブジェクト内のすべてに外部からアクセスできるようになります。コードの一部だけをドキュメント内の他のスクリプトからアクセスできるようにしたい場合は、次のモジュール パターンを検討してください:

コードをコピー コードは次のとおりです:

var myScript = function(){
//これらはプライベート メソッドとプロパティです
var nav = document.getElementById('nav');
function init(){
// 処理
}
function show(){
// 処理
}
function restart(){
// 処理
}
/ /パブリック メソッドとプロパティは、オブジェクト構文を使用して return ステートメントでラップされます。
return {
public:function(){
},
foo:'bar'
}
} ( );

前のコードと同じ方法で、返されたパブリック プロパティとメソッドにアクセスできます (この例では、myScript.public() と myScript)。しかし、ここにはもう 1 つの不快な点があります。外部からパブリック メソッドにアクセスする場合、または内部のプライベート メソッドからアクセスする場合は、依然として長い名前を記述する必要があります (オブジェクトの名前は非常に長くなる場合があります)。これを回避するには、それらをプライベートとして定義し、return ステートメントでエイリアスのみを返す必要があります:

コードをコピー コードは次のとおりです:

var myScript = function(){
// これらはプライベート メソッドとプロパティです
var nav = document.getElementById('nav');
function init(){
// doスタッフ
}
function show(){
// スタッフ
// スタッフ
}
function restart(){
// スタッフ
}
var foo = 'bar';
function public(){
}
return {
public:public,
foo:foo
}
}() ;

これにより、コード スタイルの一貫性が保証され、メソッドまたはプロパティにアクセスするために短いエイリアスを使用できます。
メソッドやプロパティを外部に公開したくない場合は、すべてのコードを匿名メソッドにカプセル化し、定義直後に実行できます:

コードをコピー コードは次のとおりです。

(function(){
// これらはすべてプライベート メソッドとプロパティです。
var nav = document.getElementById('nav' );
function init(){
// 実行します
show() // ここにはクラス名のプレフィックスは必要ありません
}
function show(){
// 実行しますスタッフ
}
関数リセット(){
// スタッフ
}
})();

このパターンは、一度だけ実行され、他の関数に依存しないコード モジュールに最適です。
上記のルールに従うことで、コードはユーザーにとってより適切に機能するだけでなく、マシン上でのコードの実行も向上し、他の開発者のコ​​ードとより適切に連携できるようになります。ただし、考慮する必要があるグループが 1 つあります。
7.
を引き継ぐ開発者向けの考慮事項 (メンテナンスが容易になります)
スクリプトを本当に目立たないものにするための最後のステップは、スクリプトを作成した後に再確認することです。スクリプトが公開されたらコードを引き継ぐ開発者に注意してください。次の質問について考えてみましょう:
* すべての変数名と関数名は意味があり、理解しやすいものですか?
* コードはよく整理されていますか?最初から最後までスムーズに流れますか？
* すべての依存関係は明らかですか?
* 混乱を引き起こす可能性のあるコメントが可能な限り追加されていますか?
注意すべき最も重要なことは、ドキュメント内の HTML コードと CSS コードは JavaScript よりも変更される可能性が高いことを認識することです (視覚効果を担うため)。したがって、スクリプト コードにはエンド ユーザーが参照できるクラスと ID を含めず、構成情報を保持するオブジェクトに分離します。

コードをコピー コードは次のとおりです:

myscript = function(){
var config = {
navigationID: 'nav' ,
visibleClass:'show'
};
var nav = document.getElementById(config.navigationID);
function init(){
show(); if(nav .className === config.visibleClass){
reset();
// 処理
}; = nav.className;
// 処理
} {
// 処理
}();

このようにして、管理者は他のコードを変更せずにこれらのプロパティを変更する場所を知ることができます。