ネイティブ JS を使用して単一ページアプリケーションを構築する-jsチュートリアル-php.cn

ネイティブ JS を使用して単一ページアプリケーションを構築する

高洛峰

リリース： 2016-11-30 17:04:40

オリジナル

1138 人が閲覧しました

主なアイデア

URLのハッシュ値を変更することで、対応するモジュールにジャンプします。まずデフォルトのモジュールを表示し、他のモジュールを非表示にします。デフォルトのモジュールのオプションをクリックすると、同時にウィンドウ上の hashchange イベントを監視して実行します。対応するモジュールジャンプロジック処理を行います。このようにして、ブラウザの前後の動きをシミュレートでき、ユーザーエクスペリエンスが向上します。

以下で詳しく見てみましょう。選択順序は、自動車ブランド -> 自動車モデル -> 自動車シリーズです。

まずHTML部分です。車両ブランド選択リストはデフォルトで表示され、他の 2 つのモジュールは非表示になります。

<div class="wrap">
  <div id="Brand">
    <div>品牌</div>
      <ul class="mycar_hot_list">
        <li>
          <p>大众</p>
        </li>
      </ul>
    </div>
    <div id="Type"  style="display:none">
      <dl>
      <dt>比亚迪汽车</dt>
      <dd>宋</dd>
    </dl>
  </div>
  <div id="Series" style="display:none">
    <ul class="mycar_datalist">
       <li>
         2013年款
       <li>
    </ul>
  </div>
</div>

ログイン後にコピー

jsロジック制御部

① 3つのモジュールで選択したデータを格納する変数オブジェクトを定義し、ハッシュ値と、対応するモジュールの処理ロジック関数を定義します。

   info={
            brand:&#39;&#39;,
            carType:&#39;&#39;,
            carSeries:&#39;&#39;,
            pages:[&#39;Brand&#39;,&#39;Type&#39;,&#39;Series&#39;] 
        };
info.selectBrand=function(){
      document.title = &#39;选择商标&#39;;
      brandEvent();
}
//选择车型
info.selectType=function(){
      document.title = &#39;选择车型&#39;;
      document.body.scrollTop = 0;  //滚到顶部
       window.scrollTo(0, 0);
       typeEvent();  //为该模块的dom绑定事件或做其他逻辑
}
//选择车系
info.selectSeries=function(){
      document.title = &#39;选择车系&#39;;
      document.body.scrollTop = 0;
      window.scrollTo(0, 0);
      seriesEvent();
}

ログイン後にコピー

②domバインディングイベントとその他のロジック

  function brandEvent(){
//绑定跳转
   $(&#39;#Brand ul li&#39;).click(function(){
       info.brand=$(this).find(&#39;p&#39;).text();
       goPage(&#39;Type&#39;);
   })
  }
  function typeEvent(){
//绑定跳转
   $(&#39;#Type  dd&#39;).click(function(){
       info.carType=$(this).text();
       goPage(&#39;Series&#39;);
   })
  }
  function seriesEvent(){...}

ログイン後にコピー

③goPageロジックジャンプ制御

function goPage(tag) {
    if ((tag == &#39;Brand&#39;)&&(location.hash.indexOf(&#39;Type&#39;)!=-1)){ // 后退操作
            history.back();
            document.title = &#39;选择商标&#39;; 
    }else if ((tag == &#39;Type&#39;)&&(location.hash.indexOf(&#39;Series&#39;)!=-1)){
            history.back();
            document.title = &#39;选择车型&#39;;
    }else {
        location.hash = tag;
    }
}

ログイン後にコピー

④jsエントリファイル(ここではdomの選択にzepto.jsを使用)

window.onload=function(){
        info.selectBrand();  //为默认显示的模块中的元素绑定相应的事件及其他逻辑
        $(window).on("hashchange", function (e) {
            doHashChange();
       });
}

ログイン後にコピー

⑤最も重要なハッシュ変更ロジック制御

function doHashChange(){
    //获取hash的值
    var hash = location.hash.split(&#39;|&#39;)[0],
        tag = hash.replace(/#/g, &#39;&#39;);
    if (info.pages.indexOf(tag) == -1) {
        tag = &#39;Brand&#39;;
    }
    $(&#39;.wrap&#39;).children(&#39;div&#39;).hide();   
    //执行每个模块不同的方法
    if(typeof(info[&#39;select&#39; + tag]) == "function"){
        info[&#39;select&#39; + tag]();
    }
    //展示对应dom
    $(&#39;#&#39; + tag).show();
}

ログイン後にコピー