用原生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 hover 定时器(实例代码)
Nov 12 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
php阳历转农历优化版
2016/08/08 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python获取多线程及子线程的返回值
2017/11/15 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Python 中的lambda函数介绍
2018/10/10 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
护士毕业生自荐信
2014/02/07 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
安全教育培训制度
2015/08/06 职场文书
2015新员工工作总结范文
2015/10/15 职场文书