用原生js做單頁應用-js教程-PHP中文網

用原生js做單頁應用

高洛峰

發布： 2016-11-30 17:04:40

原創

1137 人瀏覽過

主要思路

透過改變url的hash值，跳到對應模組。先把預設模組顯示出來，其他模組隱藏，分別給三個模組定義三個hash值，點選預設模組的選項的時候，改變hash值，同時在window上監聽hashchange事件，並作對應模組跳轉邏輯處理。這樣即可模擬瀏覽器的前進後退，而且使用者體驗也比較好。

下面詳細來看看，現在有一個場景，選擇順序是：車牌子->車型->車系。

首先HTML部分。預設顯示車牌子選擇列表，其他兩個模組隱藏。

<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邏輯控制部分

①定義一個變數對象，儲存三個模組中分別選取的資料、定義hash值、對應模組的處理邏輯函數。

   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入口檔案（這裡用了zepto.js來選擇一個