用原生js做單頁應用

主要思路

    透過改變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:'',
            carType:'',
            carSeries:'',
            pages:['Brand','Type','Series'] 
        };
info.selectBrand=function(){
      document.title = '选择商标';
      brandEvent();
}
//选择车型
info.selectType=function(){
      document.title = '选择车型';
      document.body.scrollTop = 0;  //滚到顶部
       window.scrollTo(0, 0);
       typeEvent();  //为该模块的dom绑定事件或做其他逻辑
}
//选择车系
info.selectSeries=function(){
      document.title = '选择车系';
      document.body.scrollTop = 0;
      window.scrollTo(0, 0);
      seriesEvent();
}

②dom綁定事件&其他邏輯

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

③goPage邏輯跳轉控制

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

④js入口檔案（這裡用了zepto.js來選擇一個