用原生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 相关文章推荐
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
JavaScript实现滚动加载更多
Dec 27 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
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php编写简单的文章发布程序
2015/06/18 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
js闭包实例汇总
2014/11/09 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
js date 格式化
2017/02/15 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
js操作二进制数据方法
2018/03/03 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
python音频处理用到的操作的示例代码
2017/10/27 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
python palywright库基本使用
2021/01/21 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
中学生英语演讲稿
2014/04/26 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
党的作风建设心得体会
2014/10/22 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python