用原生js做单页应用


Posted in Javascript onJanuary 17, 2017

最近在公司接到一个需求,里面有一个三级跳转。类似于选择地址的时候,选择的顺序是:省份->市->区。如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页应用,又比较麻烦。所以可以用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来选择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();
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
第一篇初识bootstrap
Jun 21 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
js cookie实现记住密码功能
Jan 17 #Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 #Javascript
微信小程序 登陆流程详细介绍
Jan 17 #Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 #Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 #Javascript
js处理层级数据结构的方法小结
Jan 17 #Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 #Javascript
You might like
php Smarty 字符比较代码
2011/02/27 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
php微信公众号开发之简答题
2018/10/20 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
python获取中文字符串长度的方法
2018/11/14 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
python自动生成sql语句的脚本
2021/02/24 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
工商管理专业自荐信
2014/06/03 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
项目建议书
2015/02/04 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
入学证明
2015/06/23 职场文书