用原生js做单页应用

作者:小蚊 时间:2024-04-16 09:51:27 

最近在公司接到一个需求,里面有一个 * 跳转。类似于选择地址的时候,选择的顺序是:省份->市->区。如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页应用,又比较麻烦。所以可以用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();
}

来源:http://www.cnblogs.com/LuckyWinty/p/6090430.html

标签:原生js,单页应用
0
投稿

猜你喜欢

  • python字符串拼接.join()和拆分.split()详解

    2021-11-12 04:09:17
  • Python for循环搭配else常见问题解决

    2021-04-23 06:08:56
  • ASP中转换unicode编码为gb2312函数

    2007-10-22 17:46:00
  • antd通过 filterDropdown 自定义按某天时间搜索功能

    2023-08-25 07:57:05
  • JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解

    2024-04-22 22:13:35
  • 基于python使用OpenCV进行物体轮廓排序

    2022-06-27 23:25:01
  • 基于vue打包后字体和图片资源失效问题的解决方法

    2024-05-05 09:12:13
  • Python最长公共子串算法实例

    2022-08-11 01:29:57
  • 使用VSCODE配置GO语言开发环境的完整步骤

    2024-04-27 15:27:51
  • 通过python的matplotlib包将Tensorflow数据进行可视化的方法

    2023-04-21 17:37:43
  • php session_start()出错原因分析及解决方法

    2024-06-07 15:44:29
  • Python django框架 web端视频加密的实例详解

    2022-08-10 06:05:04
  • Python个人博客程序开发实例用户验证功能

    2023-07-31 14:24:36
  • PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)

    2023-10-02 13:10:01
  • Perl中的符号 ->;、=>; 和 :: 分别表示什么意思?

    2022-11-28 14:38:48
  • linux 部署apache服务的步骤

    2022-11-28 02:59:16
  • 新云4.0 模板通用标签说明

    2008-11-20 13:12:00
  • Python实现判断并移除列表指定位置元素的方法

    2023-03-21 03:06:19
  • 对python插入数据库和生成插入sql的示例讲解

    2022-03-10 05:46:40
  • 让Python脚本暂停执行的几种方法(小结)

    2021-08-16 21:34:49
  • asp之家 网络编程 m.aspxhome.com