用原生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的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
AngularJS指令用法详解
Nov 02 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 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图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
js解决movebox移动问题
2016/03/29 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
python 读取DICOM头文件的实例
2018/05/07 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
自荐信格式
2013/12/01 职场文书
小学教师个人总结
2015/02/05 职场文书
学习心理学心得体会
2016/01/22 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
MySQL基础(二)
2021/04/05 MySQL
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle