网店系统H5版(六) 无刷新路由

2020-4-9 0:14:10 星期四

浏览器页面跳转时会有白屏, 影响用户体验, 一个网店系统需要有无刷新更改页面内容的功能, 这里简要介绍一下这个路由组件:

//创建对象
let r = new zbRouter();

//创建路由配置
let router = [
        {pattern: 'vadmin_store', params:'tpl:tplStoreInfo,target:mainBody', callback:store},
        {pattern: 'vadmin_cate', params:"tpl:tplCate,target:mainBody", callback:cate},
        {pattern: 'vadmin_goods_([a-f0-9]+)', params:"tpl:tplGoods,target:mainBody,cate:@1", callback:goods},
        {pattern: 'vadmin_propertylist_([a-f0-9]+)', params:"tpl:tplGoodsProperty,target:mainBody,goodsid:@1", callback:propertyList}
    ];
 

//初始化路由
r.init(router);

//钩子hook
r.hookBefore = isLogin; //每次调用回调方法前先检测是否登录了, isLogin 需要是一个方法

//开始路由
r.route(str, replace); //路由过程: 1. 触发浏览器地址栏URL链接变化但不刷新浏览器, 2. 解析传入的str进行内容替换并触发回调

//用数组循环渲染模板
r.repeatString(tpl, arr, func); //将tpl中的占位符替换为arr中的对应值, 用于渲染列表; func: 预先处理arr中每个obj,添加/修改/删除值
r.repeatInnerHtml(selector, arr, func); //将selector元素的innerHTML用 repeatString 替换
r.repeatOuterHtml(selector, arr, func); //将selector元素的outerHTML用 repeatString 替换

//其他方法
r.htmlToNode(str); //将html字符串转为node节点
r.changeContentById(srcId, targetId); //将模板内容覆盖指定id的innerHTML
r.getInputs(id, tagNames); //获取id元素内的指定标签的value, r.getInputs(id, 'input,textarea');
r.getRandom(len); //生成一定长度的随机字符串
r.buildUrl(path, obj); //构建url

路由配置说明

• pattern: 当前的URL;
• tpl:模板div的id: <template id="xxx"></template>
• target:把模板内的HTML复制到目标div内;
• @1:匹配并获取pattern中的第一个值;
• callback:匹配了路由后的回调方法