php单页应用,用原生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.οnlοad=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

本文原创发布php中文网，转载请注明出处，感谢您的尊重！