用原生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中注册和移除事件的4种方式
Mar 20 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
详解如何较好的使用js
Dec 16 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
ES6对象操作实例详解
May 23 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
Vue 组件注册全解析
Dec 17 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
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
php实现复制移动文件的方法
2015/07/29 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
python 内置函数filter
2017/06/01 Python
Python断言assert的用法代码解析
2018/02/03 Python
python自动化报告的输出用例详解
2018/05/30 Python
python实现支付宝转账接口
2019/05/07 Python
int在python中的含义以及用法
2019/06/27 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
Python json转字典字符方法实例解析
2020/04/13 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
.net软件工程师面试题
2015/03/31 面试题
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
期末自我鉴定
2014/02/02 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL