用原生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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
js select option对象小结
2013/12/20 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
如何用Python合并lmdb文件
2018/07/02 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
四年级语文教学反思
2014/02/05 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
导游词之无锡梅园
2019/11/28 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL