唐突ではないJavaScriptの7条準則を整理して第1/2ページを収集する.
5743 ワード
1.何の仮定もしないでください.
(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ではnameとIDについてのbugがありますが、いくつかの良いクラスがこの問題を解決しました)、IDを使うのは安全で信頼性があり、テストしやすいです.
他のフックはHTML元素とCSSタイプです.HTML要素はgetElements ByTagName方法でアクセスできますが、多くのブラウザではまだ生のDOM方法でCSSクラスにアクセスできません.しかし、多くの外部クラスが、CSSクラス名にアクセスできる方法を提供しています.
＜2>.HTMLノード関係
HTMLの他の比較的面白い点はマーク間の関係です.以下の問題を考えます.
*どのようにすれば一番簡単に、最少のDOMパスで従来の目標ノードに到達できますか?
*どのマークを修正することで、できるだけ多くの修正が必要なサブノードにアクセスできますか?
*与えられた要素の属性や情報は、他の要素に到達するために使用できますか?
DOMを巡回して資源を消耗して速度が遅いです.これはなぜブラウザの中ですでに使っている技術を使うべきですか?
3.遍歴を専門家に任せる
(CSS、より速くDOMを巡回)
DOMのシナリオと使用方法や属性(getElements ByTagName、nextSibling、previous Sibling、parent Nodeその他)に関してDOMを遍歴して多くの人を惑わしているようで面白いです.面白いことに、私たちはもうすでに他の技術――CSS――を通してこれらのことをしました.
CSSは、DOMを巡回することによってターゲット要素にアクセスし、それらの視覚的性質を変更するCSSセレクタを使用する技術である.一セグメントの複雑なDOMを使用するJavaScriptは一つのCSSセレクタによって置き換えられてもよい.
JavaScript:
(既存の使用モードで必要なものを作成する)
唐突ではないJavaScriptの中で重要な部分は、ブラウザがどのように動作しているか(特にブラウザがどのように崩壊しているか)とユーザーの期待を理解することです.ブラウザを考慮しなくても、JavaScriptを使用して、まったく異なるインターフェースを作成することができます.ドラッグ・インターフェース、折りたたみエリア、スクロールバー、スライドブロックはJavaScriptを使って作成できますが、この問題は簡単な技術問題ではなく、次の問題を考える必要があります.
*この新しいインターフェースは入力デバイスと独立してもいいですか?できないなら、どんなものに頼ることができますか?
*私が作成したこの新しいインターフェースは、ブラウザやその他の豊富なインターフェースの基準に従っていますか?
*どんな機能を提供したいですか?しかし、この機能はJavaScriptに依存していますか?
最後の問題は問題ではないです.あなたが必要なら、DOMを使ってHTMLを作成できます.この点の一例は「印刷」リンクです.ブラウザはJavaScript以外の印刷ドキュメント機能を提供していないので、DOMを使ってこのようなリンクを作成する必要があります.同様に、コンテンツモジュールの展開と縮小を実現した、クリックできるタイトルバーもこの場合に該当する.タイトルバーはキーボードではアクティブにできませんが、リンクは可能です.したがって、クリックできるタイトルバーを作成するためには、JavaScriptを使ってリンクを入れて、キーボードを使用するすべてのユーザーがコンテンツモジュールを縮小して展開することができます.
このような問題を解決するための素晴らしい資源はデザインモデルライブラリです.ブラウザのどのようなものが入力デバイスから独立しているかを知るには、経験の積み重ねが必要です.まず理解したいのは、事件処理の仕組みです.
5.事件を理解する
(事件の処理は変更されます)
事件処理は唐突ではないJavaScriptへの第二のステップである.すべてのものをドラッグできるようにするのではなく、クリックしたり、インライン処理を加えたりすることができます.事件処理は完全に分離できるものだと理解することがポイントです.私たちはHTML、CSSとJavaScriptを分離しましたが、事件処理の分離の面では遠くまで行っていません.
イベントプロセッサは、ドキュメント内の要素の変化を傍聴します.イベントが発生すると、プロセッサは奇妙なオブジェクト(一般的にはeというパラメータ)を見つけます.
ほとんどのイベント処理にとって、本当に面白いのは、あなたが訪問したい要素だけではなく、DOMの上位層のすべての要素で発生することです.例えば、この特性を利用して、ナビゲーションリストにイベントプロセッサだけを追加して、イベントプロセッサの方法を使用して、本当にトリガされたイベントの要素を取得することができます.この技術はイベント依頼といいますが、いくつかのメリットがあります.
＊要素が存在するかどうかを確認するだけで、各要素を確認する必要はありません.
*対応するイベントプロセッサを削除する必要はなく、サブノードを動的に追加または削除することができます.
*同じイベントに対して異なる要素で応答することができます.
覚えておくべきもう一つのことは、イベントが親要素に伝播する時には、それを停止することができます.また、HTML要素(例えばリンク)のデフォルト行為を上書きすることができます.しかし、時にはこれは別にいい考えではありません.ブラウザがHTML要素に与える行為には理由があります.例えば、リンクはページ内のあるターゲットを指しているかもしれません.これを修正しないと、ユーザーがページの現在のスクリプト状態をブックマークに入れることができるようになります.
6.他人のことを考える
(名前空間、スコープとモード)
あなたのコードはほとんどこれまでドキュメント内の唯一のスクリプトコードではありません.したがって、あなたのコードの中に他のスクリプトでカバーできる大域関数や大域変数がないことを保証します.いくつかの利用可能なモードがありますが、この問題を回避するために最も基本的なポイントは、すべての変数を初期化するためにvarキーワードを使用することです.次のシナリオを作成したと仮定します.
(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ではnameとIDについてのbugがありますが、いくつかの良いクラスがこの問題を解決しました)、IDを使うのは安全で信頼性があり、テストしやすいです.
他のフックはHTML元素とCSSタイプです.HTML要素はgetElements ByTagName方法でアクセスできますが、多くのブラウザではまだ生のDOM方法でCSSクラスにアクセスできません.しかし、多くの外部クラスが、CSSクラス名にアクセスできる方法を提供しています.
＜2>.HTMLノード関係
HTMLの他の比較的面白い点はマーク間の関係です.以下の問題を考えます.
*どのようにすれば一番簡単に、最少のDOMパスで従来の目標ノードに到達できますか?
*どのマークを修正することで、できるだけ多くの修正が必要なサブノードにアクセスできますか?
*与えられた要素の属性や情報は、他の要素に到達するために使用できますか?
DOMを巡回して資源を消耗して速度が遅いです.これはなぜブラウザの中ですでに使っている技術を使うべきですか?
3.遍歴を専門家に任せる
(CSS、より速くDOMを巡回)
DOMのシナリオと使用方法や属性(getElements ByTagName、nextSibling、previous Sibling、parent Nodeその他)に関してDOMを遍歴して多くの人を惑わしているようで面白いです.面白いことに、私たちはもうすでに他の技術――CSS――を通してこれらのことをしました.
CSSは、DOMを巡回することによってターゲット要素にアクセスし、それらの視覚的性質を変更するCSSセレクタを使用する技術である.一セグメントの複雑な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;
}
JavaScript:
var dynamicClass = 'js';
var b = document.body;
b.className = b.className ? b.className + ' js' : 'js';
CSS:
/* */
#nav {
....
}
/* */
body.js #nav {
....
}
(既存の使用モードで必要なものを作成する)
唐突ではないJavaScriptの中で重要な部分は、ブラウザがどのように動作しているか(特にブラウザがどのように崩壊しているか)とユーザーの期待を理解することです.ブラウザを考慮しなくても、JavaScriptを使用して、まったく異なるインターフェースを作成することができます.ドラッグ・インターフェース、折りたたみエリア、スクロールバー、スライドブロックはJavaScriptを使って作成できますが、この問題は簡単な技術問題ではなく、次の問題を考える必要があります.
*この新しいインターフェースは入力デバイスと独立してもいいですか?できないなら、どんなものに頼ることができますか?
*私が作成したこの新しいインターフェースは、ブラウザやその他の豊富なインターフェースの基準に従っていますか?
*どんな機能を提供したいですか?しかし、この機能はJavaScriptに依存していますか?
最後の問題は問題ではないです.あなたが必要なら、DOMを使ってHTMLを作成できます.この点の一例は「印刷」リンクです.ブラウザはJavaScript以外の印刷ドキュメント機能を提供していないので、DOMを使ってこのようなリンクを作成する必要があります.同様に、コンテンツモジュールの展開と縮小を実現した、クリックできるタイトルバーもこの場合に該当する.タイトルバーはキーボードではアクティブにできませんが、リンクは可能です.したがって、クリックできるタイトルバーを作成するためには、JavaScriptを使ってリンクを入れて、キーボードを使用するすべてのユーザーがコンテンツモジュールを縮小して展開することができます.
このような問題を解決するための素晴らしい資源はデザインモデルライブラリです.ブラウザのどのようなものが入力デバイスから独立しているかを知るには、経験の積み重ねが必要です.まず理解したいのは、事件処理の仕組みです.
5.事件を理解する
(事件の処理は変更されます)
事件処理は唐突ではないJavaScriptへの第二のステップである.すべてのものをドラッグできるようにするのではなく、クリックしたり、インライン処理を加えたりすることができます.事件処理は完全に分離できるものだと理解することがポイントです.私たちはHTML、CSSとJavaScriptを分離しましたが、事件処理の分離の面では遠くまで行っていません.
イベントプロセッサは、ドキュメント内の要素の変化を傍聴します.イベントが発生すると、プロセッサは奇妙なオブジェクト(一般的にはeというパラメータ)を見つけます.
ほとんどのイベント処理にとって、本当に面白いのは、あなたが訪問したい要素だけではなく、DOMの上位層のすべての要素で発生することです.例えば、この特性を利用して、ナビゲーションリストにイベントプロセッサだけを追加して、イベントプロセッサの方法を使用して、本当にトリガされたイベントの要素を取得することができます.この技術はイベント依頼といいますが、いくつかのメリットがあります.
＊要素が存在するかどうかを確認するだけで、各要素を確認する必要はありません.
*対応するイベントプロセッサを削除する必要はなく、サブノードを動的に追加または削除することができます.
*同じイベントに対して異なる要素で応答することができます.
覚えておくべきもう一つのことは、イベントが親要素に伝播する時には、それを停止することができます.また、HTML要素(例えばリンク)のデフォルト行為を上書きすることができます.しかし、時にはこれは別にいい考えではありません.ブラウザがHTML要素に与える行為には理由があります.例えば、リンクはページ内のあるターゲットを指しているかもしれません.これを修正しないと、ユーザーがページの現在のスクリプト状態をブックマークに入れることができるようになります.
6.他人のことを考える
(名前空間、スコープとモード)
あなたのコードはほとんどこれまでドキュメント内の唯一のスクリプトコードではありません.したがって、あなたのコードの中に他のスクリプトでカバーできる大域関数や大域変数がないことを保証します.いくつかの利用可能なモードがありますが、この問題を回避するために最も基本的なポイントは、すべての変数を初期化するためにvarキーワードを使用することです.次のシナリオを作成したと仮定します.
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
var nav = document.getElementById('nav');
function init(){
show();
if(nav.className === 'show'){
reset();
}
// do stuff
}
function show(){
var c = nav.className;
// do stuff
}
function reset(){
// do stuff
}
var myScript = {
nav:document.getElementById('nav'),
init:function(){
// do stuff
},
show:function(){
// do stuff
},
reset:function(){
// do stuff
}
}