JavaScript_javascript ヒントを使用して保守可能なスライドショー効果コードを作成する

明らかに、その効果は非常に実用的です。このエフェクトについては、エフェクト ライブラリの使用方法は説明しませんが、同様のエフェクトを作成し、それを使いやすく、目立たず、保守しやすい状態に保つ方法 (将来の保守担当者が変更する必要がないようにするため) を説明します。スクリプトの場合は、画像を変更します。 、外観またはテキストラベル）。

ステップ 1: 問題の分析
優れたスクリプトを作成するには、最初のステップは、達成したいことを分析することです。写真のスライドショー効果を作成したいのですが、メンテナンスを簡単にしたいのです。

スライドショー効果を作成する方法

Web サイトでスライドショーを表示するには、いくつかの方法があります。

ドキュメントにすべての画像を含めます。
JavaScript を使用せずに実行する場合、これは安全な選択です。さらに、ページが読み込まれると、すべての画像も読み込まれます。ただし、この方法は少数の画像に対してのみ機能します。

ドキュメント内の最初の画像が含まれており、スライドショー機能を作成するサーバー側スクリプトがあります。
これも非常に安全ですが、次の写真を取得するためだけにページ全体をロードしたくないので、エンド ユーザーにとっては非常に煩わしいものです。ただし、ページ表示や広告クリックにとってはより効果的であるため、多くのニュース サイトがこの方法を使用しています。

ドキュメント内の最初の画像を含め、必要に応じて追加の画像を読み込みます。
このメソッドで気になるのは、JavaScript に依存し、写真リストを保持する JavaScript 配列を持たなければならないことです。また、何かが起こっていることをユーザーに示すための読み込みインジケーターを提供する必要もあります。

この場合、以下の写真のリストを取得し、進むボタンと戻るボタンを使用してスライドショー効果に変換します。また、写真の総数のうちどの写真が現在表示されているかを示すインジケーターを使用します。

• 
;

• 


• 

>
• 

最終的な出力は、サンプルのスライドショー効果のようになります。

依存関係のチェック

ここには、JavaScript の生成に依存する要素がいくつかあります: テキスト インジケーター、前方およびダウン リンク。ソリューションを使用可能な状態に保つには、次のことを確認する必要があります:

これらの要素は、JavaScript が利用可能な場合にのみ表示されます (ユーザーが提供を信頼している機能)。リンクは、ユーザーが当社に寄せる信頼を損なうことはできません。
インタラクティブな要素は、入力デバイスに関係なく利用できる必要があります (ユーザーがマウスを持っているかどうかには依存しません)。
ユーザーが再度アクセスできない限り、画像を非表示にすべきではありません。技術的には、前方リンクと後方リンクなしで最初の画像のみを表示するのはフォールバックですが、なぜユーザーはすべての画像をダウンロードし、最初の画像だけを表示する必要があるのでしょうか?
ステップ 2: スクリプトを計画する
問題を評価し、使用する解決策を選択したら、スクリプトの計画を開始できます。基本的に、スクリプトは次のことを行う必要があります:

スライド リストが存在し、いくつかの画像が含まれているかどうかを確認します (画像のスライドショー効果を作成する理由はありますか?)。
最初の写真を除き、すべての写真を非表示にします。
前方リンクと後方リンク、および現在の位置を示すインジケーターを作成します。
現在表示されている画像の番号をリンクで増減させるイベント ハンドラーを追加します。
スライド効果が範囲を超えていないことを確認してください。画像番号が 0 未満の場合は最後の画像になり、その逆も同様です。
さまざまな機能の処理

この問題を処理する方法がいくつかあります。その 1 つは、DOM を使用して各 LI エントリを反復処理し、それを非表示にすることです。このイベント リスナー関数では、まず以前に表示されていた LI (存在する場合) を非表示にし、現在の LI を表示します。

注: 画像の代わりに LI を表示または非表示にすることは、管理者が一部のタイトルなどの他の要素を各スライドに追加できるため、より合理的です。

このメソッドの問題は、必要なスタイル変更を JavaScript で行っていることです。つまり、スクリプト内で表示をブロックからなしに変更するだけではなく、より複雑なスタイル変更が必要な場合、スクリプトはさらに整理されなくなります (パフォーマンスと動作が分離されなくなります)。

スタイルは CSS パーサーに任せられます

よりクリーンなアプローチは、すべての外観変更 (すべてのリスト項目がダウンロードされた後にリスト項目の一部を非表示にする) をブラウザーの CSS パーサーに任せることです。この例では、スライドショーで CSS ルールを使用して、すべてのリスト項目を簡単に非表示にし、現在の項目のスタイルを特定のクラスでオーバーライドできます。

HTML：

• 

"
• 

img src="img; / flat3.jpg" alt="バスルーム" />

• 
  
  
  #slideshow li{
  display:none;
  }
  #slideshow li.current{
  display:block;
  }
  唯一の問題はCSS と JavaScript を無効にすると、訪問者は他の画像にアクセスできなくなります。したがって、JavaScript が使用可能な場合にのみこれらのスタイルを適用する必要があります。トリックは、JavaScript が利用可能な場合、スライドの UL にクラス (例: js ) を適用することです。これにより、CSS で次のように変更するだけで、JavaScript が使用可能な場合にのみエフェクトを表示できるようになります。 🎜>}
  #slideshow.js li.current{
  display:block;
  }
  このクラスのフックは、スライドショーの静的バージョンと動的バージョンを提供するために使用することもできます。
  
  スクリプトで行う必要があるのは、現在のクラスを削除または追加して、現在および以前の写真を表示または非表示にすることだけです。
  
  スクリプトが同じページ上の他のスクリプトに影響を与えないように、メイン オブジェクトを作成し、その上にすべてのメソッドとプロパティを構築します。これにより、init() 関数が上書きされたり、同じ名前の他の関数をオーバーライドしたりすることがなくなります。
  
  JavaScript:
  
  
  slideshow = {
  current:0, // 現在のスライドのエンコーディング
  init:function(){
  // 初期化と設定 イベントhandle function
  },
  show:function(e){
  // イベントリスナー
  }
  }
  第 3 ステップ、基本的なツールの方法 (Essential Tools)
  、スクリプトを計画して構築するためのフレームワークがあります。この機能を実現するために必要なツールについて考えてみましょう。 DOM スクリプトのヘルパー ライブラリには、少なくとも次のものが含まれている必要があります:
  
  イベント ハンドラーを登録する方法。現在は John Resig の addEvent() メソッドを使用します。
  CSS スタイル名を追加および削除するメソッド。
  HTML 要素のデフォルトの動作をオーバーライドするメソッド。リンクのターゲット ページを表示する必要はなく、スクリプトを実行するだけです。
  これらのユーティリティ メソッドをメイン オブジェクトに追加して開始します。
  
  JavaScript:
  
  
  slideshow = {
  current:0, // 現在のスライドのコーディング
  init:function(){
  // イベントハンドラー関数の初期化と設定
  },
  show:function(e){
  // イベントリスナー
  },
  addEvent:function(obj, type, fn) {
  if (obj.attachEvent) {
  obj['e' type fn] = fn;
  obj[type fn] = function( ){
  obj['e' type fn]( window.event );
              obj.attachEvent('on' type, obj[type fn]);
  } else
  obj.addEventListener( type, fn, false );
  },
  removeClass:function(o,c){
  var rep=o.className.match(' ‘ c)?' 「 c:c;
  o.className=o.className.replace(rep,”);
  },
  addClass:function(o,c){
  var test = new RegExp(”(^|\s)” c ”(\s|$)”).test(o.className );
  if(!test){o.className =o.className?' ‘ c:c;}
  },
  cancelClick:function(e){
  if (window.event){
  window.event.cancelBubble = true;
  window.event.returnValue = false;
  }
  if (e && e.stopPropagation && e.preventDefault){
  e.stopPropagation();
  e.preventDefault();
  }
  }
  }
  当文档完全ダウンロード完了，第一件事情要要执実行 init() 方法：
  
  JavaScript：
  
  
  slideshow = {
  current:0, // 当前幻灯片编码
  init:function(){
  // 初期化和设置イベント处理関数
  },
  show:function(e) {
  // イベント监听器
  },
  addEvent:function( obj, type, fn ) {
  if ( obj.attachEvent ) {
  obj['e' type fn ] =ふん;
  obj[type fn] = function(){
  obj['e' type fn]( window.event );
  }
  obj.attachEvent('on' type, obj[type fn] );
  } else
  obj.addEventListener( type, fn, false );
  },
  removeClass:function(o,c){
  var rep=o.className.match(' ‘ c)?' 「 c:c;
  o.className=o.className.replace(rep,”);
  },
  addClass:function(o,c){
  var test = new RegExp(”(^|\s)” c ”(\s|$)”).test(o.className );
  if(!test){o.className =o.className?' ‘ c:c;}
  },
  cancelClick:function(e){
  if (window.event){
  window.event.cancelBubble = true;
  window.event.returnValue = false;
  }
  if (e && e.stopPropagation && e.preventDefault){
  e.stopPropagation();
  e.preventDefault();
  }
  }
  }
  
  slideshow.addEvent(window,'load',slideshow.init);
  ステップ 4: スクリプト (スクリプト)
  これで、すべてのメソッド ツールが配置され、ウィンドウがロードされたときに init() を呼び出します。 、このメソッドのインスタンス化を開始できます。
  
  注: これは init() メソッドのみであり、スクリプト全体ではありません。行番号があるため、スクリプトをコピーして貼り付けるとエラーが発生します。
  
  
  1: init:function(){
  2: if(document.getElementById && document.createTextNode){
  3: var list = document.getElementById(' '); 🎜> 4: if(list){
  5: slideshow.items = list.getElementsByTagName('li'); if(slideshow .all > 1){
  8: slideshow.addClass(list, 'js '); }
  12: slideshow.show();
  13: }
  2 行目は、DOM がサポートされているかどうかを検出します。
  行 3 と 4、ID スライドショーを使用して要素を取得しようとします。これが定義されていない場合、残りのメソッドは実行されません。
  5 行目と 6 行目では、リスト項目とリスト項目の数を取得し、それぞれ属性 item と all に格納します。
  行 7 はリスト項目がもう 1 つあるかどうかを確認し、リスト項目が多すぎない場合は残りは実行されません。
  8 行目、js スタイル クラス名をリストに追加します。これにより、異なるはずのリスト項目とスタイルが非表示になります。
  9 行目、createNav() を呼び出し、このリストをパラメータとして指定します。
  行 12、show() を呼び出して、事前定義された現在の属性でスライド ドアを表示します。
  createNav() メソッドは、DOM スクリプトを使用して、スライドショーが適切に動作するために必要な HTML を作成します。
  
  
  1: createNav:function(o){
  2: var p = document.createElement('p');
  3: slideshow.addClass(p, 'slidenav') ;
  4: slideshow.prev = document.createElement('a');
  5: slideshow.prev.setAttribute('href', '#');
  6: var templabel = document.createTextNode ('<<');
  7: slideshow.prev.appendChild(templabel);
  8: slideshow.addEvent(slideshow.prev, 'click', slideshow.show); p.appendChild(slideshow.prev);
  10: slideshow.count = document.createElement('span') );
  12: slideshow.count.appendChild(templabel); appendChild(slideshow.count);
  14: slideshow.next = document.createElement('a');
  15: slideshow.next.setAttribute('href', '#');
  16: var templabel = document.createTextNode('>>');
  17: slideshow.next.appendChild(templabel );
  18: slideshow.addEvent(slideshow.next, 'click', slideshow.show) ;
  19: p.appendChild(slideshow.next);
  20: o.parentNode.insertBefore(p , o);
  2 行目と 3 行目は P を作成します。要素を使用してスライド ナビゲーション全体を含め、slidenav という名前のクラスを適用します。
  行 4 と 5、新しいリンク要素を作成し、それを prev という属性に保存し、href 属性を # に設定します。リンクが実際のリンクとして表示され、キーボードが有効になることが必要です。
  6 行目では、新しいテキスト ラベルを作成します。
  7 行目、リンクにテキスト ラベルを追加します。
  8 行目に、show() リスニング メソッドを指すイベント処理関数を追加します。
  9 行目、段落に新しいリンクを追加します。
  行 10、カウンタの開始では、SPAN 要素を作成し、それを count 属性とともに保存します。
  行 11 は、合計内の現在のスライドの位置を表示する新しいテキスト ノードを作成します。人間のカウントは 0 からではなく 1 から始まるため、現在の属性に 1 を追加する必要があります。
  行 12、テキストを新しい子ノードとして SPAN に追加します。
  13 行目、SPAN 要素を段落に追加します。
  14 行目から 19 行目は、基本的に 4 行目から 9 行目のコピーです。今回のリンクの再作成における唯一の違いは、next 属性に格納されるテキスト ラベルです。
  行 20、最近作成した段落をドキュメント内の最初の画像リストの前に挿入します。
  作成したタグはすべて必要です。残っているのは、リンクがクリックされたときに呼び出されるリスナー メソッド show() を定義することだけです。
  
  
  1: show:function(e){
  2: if(this === slideshow.next || this === slideshow.prev){
  3: スライドショー。 RemoveClass(slideshow.items[slideshow.current], 'current');
  4: var addto = (this === slideshow.next) ? 1: -1;
  5: slideshow.current = スライドショー。現在の追加先;
  6: if (slideshow.current & lt; 0) {
  7: Slideshow.current = (SlideShow.all-1);
  8: 🎜> 9: if (SLIDESHOW.current > slideshow.all-1){
  10: slideshow.current = 0; ' / ' slideshow.all);
  15: slideshow.addClass(slideshow.items[slideshow.current], 'current' ;
  行 2、クリックされた要素が下向きリンクか前方リンクかを検出します (これは addEvent() によって返されます)。
  行 3、現在表示されているスライドから現在のクラスを削除します。クリックされたリンクがあるため、これが可能になります。
  行 4 では、この属性と次の属性を比較することにより、現在のカウンターを増やすか減らすかを決定します。
  5行目、カウンターを修正します。
  6 行目から 11 行目、カウンターが範囲外にならないことを確認します。最初のスライドで前方リンクをクリックすると最後に設定され、最後のスライドで をクリックします。逆方向リンクの場合、最初のリンクに設定されます。
  行 13 と 14、新しいカウンター テキストを生成し、古いものを置き換えます。
  行 15 は、current という名前のクラスを設定することによって、新しい現在のスライドを表示します。
  行 16、cancelClick() を呼び出して、リンクのデフォルトの動作を防止します。
  これらはスクリプトのすべての内容です。このスクリプトは動作するようになりましたが、まだ保守可能ではありません。
  
  ステップ 5: メンテナンスの容易化
  スクリプトは完全に機能し、分離されており、完璧です。本当の問題は、現状を維持するのが簡単ではないということです。
  
  おそらく、スクリプト アプリケーションに関する最大の問題は、すべてのメンテナが JavaScript を理解しているわけではなく、スクリプトの変更が必要な部分を積極的に探してくれないことです。
  
  メンテナがこれを行うのを防ぐための最も安全な方法は、スクリプトと CSS で使用される名前と ID をスクリプトの機能から分離することです。また、テキスト ラベルは変更される可能性があるため、使用するスクリプトから分離することをお勧めします。たとえば、スクリプトが別の言語にローカライズされている場合です。
  
  ツールメソッドの再利用
  
  最初に行うことは、他のスクリプトで再利用できるユーティリティ関数をメイン スクリプトから分離することです。おそらく、ほとんどの JavaScript ライブラリはここから始まります。
  
  tools.js：
  
  
  /* ヘルパー メソッド */
  tools = {
  addEvent:function(obj, type, fn) {
  if ( obj.attachEvent ) {
  obj['e' type fn] 🎜> 🎜> },
  RemoveClass :function(o,c){
  var rep=o.className.match(' 'c) ?' ' c:c;
  o.className=o.className.replace(rep,”);
  addClass:function(o,c){
  var test = new RegExp (”(^|\s)” c “(\s|$)”).test(o.className) ;
  if(!test){o.className =o.className?' c:c;
  },
  cancelClick:function(e){
  if (window.event){
  window.event.cancelBubble = true;
  window.event.returnValue = false; > }
  if (e && e.stopPropagation && e.preventDefault) {
  e.stopPropagation() ;
  e.preventDefault();
  }
  }
  }
  CSS クラスと ID - 外観
  
  次のステップでは、外観クラスと ID を別のインクルード ファイルに分割します。他のスクリプトがこれらを使用する可能性は低いため、スライドショーの名前空間内で安全であることを確認してください。簡単な説明メモを書くのにも邪魔になりません。
  
  slideshow-css.js:
  
  
  slideshow.css = {
  /*
  これらは、スライド効果で使用されるクラスと ID です。
  ここでそれらのいずれかを変更できます。
  名前は必ず引用符で囲み、カンマで終了してください (最後のものを除く)。
  */
  
  showID :'slideshow',
  DynamicClass :'js',
  slideNavigationClass :'slidenav',
  currentClass :'current'
  }
  テキスト ラベル - エンド ユーザーへの説明
  
  最後になりましたが、やはりスライドショー名前空間を使用して、テキスト ラベルを別のインクルード ファイルに入れてみましょう。
  
  slideshow-labels.js:
  
  
  slideshow.labels = {
  /*
  これらは、スライド効果で使用されるテキスト ラベルです。
  ここでそれらのいずれかを変更できます。
  名前は必ず引用符で囲んでください。
  最後にカンマはありません。
  */
  
  前: '<<',
  次: '>>',
  counterpider : ‘ of ‘
  }
  メイン スクリプトを変更します
  
  次に、埋め込みデータに依存するのではなく、この情報を使用するようにメイン スクリプトを変更する必要があります。変更はそれほど多くなく、検索と置換で簡単に行うことができます。
  
  slideshow.js:
  
  
  slideshow = {
  current:0,
  init:function(){
  if(document.getElementById && document.createTextNode ){
  var list =document.getElementById(slideshow.css.showID);
  if(list){
  slideshow.items = list.getElementsByTagName('li') > slideshow.all = スライドショー。 items.length;
  if(slideshow.all > 1){
  tools.addClass(list, slideshow.css.dynamicClass);
  }
  
  slideshow.show();
  tools .addClass(p, slideshow.css.slideNavigationClass);
  slideshow.prev = document.createElement('a'); .prev.setAttribute('href', '#');
  var templabel = document.createTextNode(slideshow.labels.previous);
  slideshow.prev.appendChild(templabel); slideshow.prev, 'click', slideshow.show);
  p.appendChild(slideshow.prev)
  slideshow.count = document.createElement('span'); (slideshow.current 1) slideshow.labels.counterpider slideshow.all);
  slideshow.count.appendChild(templabel);
  p.appendChild(slideshow.count)
  slideshow.next = document.createElement ('a');
  slideshow.next.setAttribute('href' , '#');
  var templabel = document.createTextNode(
  slideshow.labels.next); .appendChild(templabel);
  tools.addEvent(slideshow.next, ' click', slideshow.show);
  p.appendChild(slideshow.next);
  o.parentNode.insertBefore(p, o) );
  },
  show:function(e){
  if(this === slideshow.next || this === slideshow.prev){
  tools.removeClass(slideshow.items) [slideshow.current],
  slideshow.css.currentClass);
  var addto = this === slideshow.next ? 1 : -1;
  slideshow.current = slideshow.current addto;if(slideshow.current < 0){
  slideshow.current = (slideshow.all-1)
  .count.replaceChild(templabel, slideshow.count.firstChild); > tools.addClass(slideshow.items[slideshow.current], slideshow.css.currentClass);
  tools.cancelClick(e);
  }
  }
  tools.addEvent(window,'load) ',slideshow.init);
  これらはすべて、将来のメンテナが手間をかけずにスクリプトを操作できるようにするために必要なファイルです。ファイル名はそれが何であるか明らかである必要があり、時間が経つにつれて標準スクリプトになります: