13518219792

NEWS

网站建设资讯

如何使用原生js做单页应用

这篇文章将为大家详细讲解有关如何使用原生js做单页应用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

我们提供的服务有：成都网站设计、做网站、成都外贸网站建设公司、微信公众号开发、网站优化、网站认证、昭阳ssl等。为上1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的昭阳网站制作公司

主要思路

通过改变url的hash值，跳到相应模块。先把默认模块显示出来，其他模块隐藏，分别给三个模块定义三个hash值，点击默认模块的选项的时候，改变hash值，同时在window上监听hashchange事件，并作相应模块跳转逻辑处理。这样即可模拟浏览器的前进后退，而且用户体验也比较好。

下面详细来看看，现在有一个场景，选择顺序是：车牌子->车型->车系。

首先HTML部分。默认显示车牌子选择列表，其他两个模块隐藏。

 
  
品牌
   
    

     
大众
    
   
  

      

   

比亚迪汽车

   

宋

  

 

         

     2013年款     

    

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来选择dom）

window.onload=function(){
    info.selectBrand(); //为默认显示的模块中的元素绑定相应的事件及其他逻辑
    $(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();  
  //执行每个模块不同的方法
  if(typeof(info['select' + tag]) == "function"){
    info['select' + tag]();
  }
  //展示对应dom
  $('#' + tag).show();
}

关于“如何使用原生js做单页应用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。