快捷導(dǎo)航

用原生js做單頁應(yīng)用

更新時間：2017年01月17日 11:22:08 作者：小蚊

本文主要介紹了用原生js做單頁應(yīng)用的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧

最近在公司接到一個需求，里面有一個三級跳轉(zhuǎn)。類似于選擇地址的時候，選擇的順序是：省份->市->區(qū)。如果分三個頁面跳轉(zhuǎn)，那么體驗非常不好，如果引入其他框架做成單頁應(yīng)用，又比較麻煩。所以可以用js把這一塊做成單頁應(yīng)用的樣子。。。

主要思路

通過改變url的hash值，跳到相應(yīng)模塊。先把默認(rèn)模塊顯示出來，其他模塊隱藏，分別給三個模塊定義三個hash值，點擊默認(rèn)模塊的選項的時候，改變hash值，同時在window上監(jiān)聽hashchange事件，并作相應(yīng)模塊跳轉(zhuǎn)邏輯處理。這樣即可模擬瀏覽器的前進(jìn)后退，而且用戶體驗也比較好。

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

首先HTML部分。默認(rèn)顯示車牌子選擇列表，其他兩個模塊隱藏。

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

①定義一個變量對象，存儲三個模塊中分別選擇的數(shù)據(jù)、定義hash值、相應(yīng)模塊的處理邏輯函數(shù)。

info={
      brand:'',
      carType:'',
      carSeries:'',
      pages:['Brand','Type','Series'] 
    };
info.selectBrand=function(){
   document.title = '選擇商標(biāo)';
   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(){
//綁定跳轉(zhuǎn)
  $('#Brand ul li').click(function(){
    info.brand=$(this).find('p').text();
    goPage('Type');
  })
 }
 function typeEvent(){
//綁定跳轉(zhuǎn)
  $('#Type dd').click(function(){
    info.carType=$(this).text();
    goPage('Series');
  })
 }
 function seriesEvent(){...}

③goPage邏輯跳轉(zhuǎn)控制

function goPage(tag) {
  if ((tag == 'Brand')&&(location.hash.indexOf('Type')!=-1)){ // 后退操作
      history.back();
      document.title = '選擇商標(biāo)'; 
  }else if ((tag == 'Type')&&(location.hash.indexOf('Series')!=-1)){
      history.back();
      document.title = '選擇車型';
  }else {
    location.hash = tag;
  }
}

④js入口文件（這里用了zepto.js來選擇dom）

window.onload=function(){
    info.selectBrand(); //為默認(rèn)顯示的模塊中的元素綁定相應(yīng)的事件及其他邏輯
    $(window).on("hashchange", function (e) {
      doHashChange();
    });
}

⑤最重要的hash改變邏輯控制

function doHashChange(){
  //獲取hash的值
  var hash = location.hash.split('|')[0],
    tag = hash.replace(/#/g, '');
  if (info.pages.indexOf(tag) == -1) {
    tag = 'Brand';
  }
  $('.wrap').children('div').hide();  
  //執(zhí)行每個模塊不同的方法
  if(typeof(info['select' + tag]) == "function"){
    info['select' + tag]();
  }
  //展示對應(yīng)dom
  $('#' + tag).show();
}

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: