ppk談javascript--第二章--大背景

侵入なしスクリプトプログラミング(unobtrusive scripting)
    侵入していないスクリプトには以下のような特徴があります.
   1、それは使えるはずです.ウェブサイトに明確な利用可能性の利点をもたらしました.
2、アクセスできるはずです.つまり、javascriptが失効した場合、ウェブページは依然として閲覧可能であり、理解可能であり、適時に避けられない損失がいくつかの利用可能性を失うべきである.
3、それは簡単に実現するべきです.典型的な場合:web開発者は、ページにスクリプト自体とjavascriptフックを導入して、シナリオを実行するだけです.
4、分離すべきです.それは自分のjsファイルの中にだけ存在します.HTMLの隅々に散らばっているのではありません.
 
三つの層
ウェブページは次の3つの層から構成されています.
1、HTML構造層     2、CSS表現層    3、JavaScript行為層
 
懸念点を分離
クライアントコードを3つの層に分けて、もう一つの話題を紹介しました.一般的に3つの層を分けて管理したほうがいいです.最も基本的な要求は以下のようにすることです.
1、HTMLは構造化されていますので、あまり複雑ではなく、CSSとJavaScriptがない場合には意味があります.
2、CSS表現層とJavaScript行動層は.cssファイルと.jsファイルにそれぞれ配置されています.
ポイントを分離してメンテナンスしやすく、また分離してCSSの表現層全体を変えることができます.あなたのウェブサイトに全く新しいデザインを提供します.HTML構造を書き換える必要もないし、JavaScript行為層を書き換える必要もないです.
 
三つの分離--表現と構造の分離
表現層と構造層を分離する基本的な考え方は、HTMLによって構造を定義することを確保することであり、すべての表現は別の個別のCSSファイルに定義される.
cssの修正:javascriptはcssを修正することができます.通常はcssをリアルタイムで修正する一番いい方法は元素のclassNameを変えることです.
構造を変更しますか?それとも表現しますか?フォームドメインを隠すための2つの方法があります.
1、cssを使って、それらが見えない(display:none)です.表現層
2、文書構造から完全に削除します.構造層
ただし、フォームを提出すると、ブラウザはすべてのフォームドメインに名前と値のペアを作成してサーバに送信します.必要でないフォームをcssで隠しても、フォームドメインはフォームの一部になります.隠しているだけです.したがって、それらはサーバに送信されます.たとえ無駄であっても.
これに対して、これらのフォームドメインがドキュメント構造から完全に削除されると、サーバに送信されなくなります.
推荐:表のフィールドを直接削除して、非表示にしないほうがいいです.
 
三つの分離--挙動と構造の分離
行動と構造の分離は分かりやすいです.javascriptコードをあなたのHTMLページに書かないでください.これは二つのステップが必要です.
1、すべてのjavascript関数を一つの独立した.jsファイルに入れて、それをすべての必要なHTMLページにチェーンします.
2、HTMLからすべてのイベントハンドラを削除して、それらを同一のjsファイルに入れます.
 

<a href="somepage.html" id="nifty">DO it!</a>



//   js   



document.getElementById('nifty').onclick = doAllKindOfNiftyThings;

 
 三つの分離--行為と表現は分離します.
実際には、CSSとjavascriptが重なるグレーゾーンがあり、ある効果をクリアできないまま表現したり行動したりします.
したがって、もし「似ていますが、全く同じではありません」という効果を作成する必要がある場合、例えばmouseover、javascriptは最も効果的な方法です.cssとjavascriptの間で選択しなければならない時、この点を覚えてください.
 
アクセス可能な規則
1、条理がはっきりしているHTML(ハードコードのリンクはhrefが必要)
　　  2、スクリプトユーザにとって有意義な内容を生成する
a.アドバンストスクリプトのリンクをトリガする(リンクにhrefを加えるといけないなら、javascriptを長く使ってリンクを生成する.以下のコード:)
 

var link = document.createElement("a");

     link.href = "#";

     link.onclick = starUpAjaxStuff;

     var linkText = document.createTextNode('Commmence coolness');

     link.appendChild(linkText);

     document.body.appendChild(link);

     

     function starUpAjaxStuff(){

         alert("ok");

     }

 
b.javascriptで内容を隠す(隠し内容は危険です.javascriptがないと、内容はいつまでも変わりません.このページはアクセス可能性がありません.)
c.リダイレクトユーザ
時には、アクセス可能な問題を解決する一番いい方法は、あなたのウェブサイトのためにスクリプトバージョンとスクリプトなしバージョンを同時に作成することです.私はこの解決策が好きではないので、できるだけ避けます.
明らかにそれは価値があります.
この方法を使うなら、次の二つの規則に従うべきです.
まず、あなたのウェブサイトの入り口ページはスクリプトなしのページであるべきです.このように、すべてのブラウザは、たとえHTMLをサポートするブラウザであっても、使えるページを得ることができます.このように
HTMLのみのブラウザでも、使えるページがあります.
第二に、ブラウザがこのスクリプトなしページに到達した時に、スクリプトを起動して、それがあなたの高級スクリプトをサポートできるかどうかを検出します.できれば、replace()方法でスクリプトページがあります.
 　　　　　  ここで注意したいのは、location.hrefはブラウザの履歴に新しい記録を作成します.もしユーザがスクリプトページがないと、彼女はスクリプトページに転向します.しかし、いったん彼女が
後退ボタンを押すと、スクリプトがないページに戻されます.上記のスクリプトはすぐに起動し、スクリプトページに戻します.バックボタンの機能は事実上破壊されました.
ですから、location.replace()の方法を使って、新しいページをロードしますが、古いページのブラウザでの履歴を上書きします.この時はボタンを引くと正常に動作します.