如何使用原生js做单页应用-创新互联

这篇文章将为大家详细讲解有关如何使用原生js做单页应用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:申请域名、虚拟空间、营销软件、网站建设、永和网站维护、网站推广。

主要思路

通过改变url的hash值,跳到相应模块。先把默认模块显示出来,其他模块隐藏,分别给三个模块定义三个hash值,点击默认模块的选项的时候,改变hash值,同时在window上监听hashchange事件,并作相应模块跳转逻辑处理。这样即可模拟浏览器的前进后退,而且用户体验也比较好。

下面详细来看看,现在有一个场景,选择顺序是:车牌子->车型->车系。

首先HTML部分。默认显示车牌子选择列表,其他两个模块隐藏。


 
  
品牌
        
  •      

    大众

        
  •       
          
       
    比亚迪汽车
       
      
     
             
  •      2013年款     
  •     
  • 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();
    }

    关于“如何使用原生js做单页应用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

    另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    分享名称:如何使用原生js做单页应用-创新互联
    浏览地址:http://scyanting.com/article/ddgoed.html

    其他资讯