网店系统H5版(六) 无刷新路由
2020-4-9 0:14:10 星期四
浏览器页面跳转时会有白屏, 影响用户体验, 一个网店系统需要有无刷新更改页面内容的功能, 这里简要介绍一下这个路由组件:
1 //创建对象 2 let r = new zbRouter(); 3 4 //创建路由配置 5 let router = [ 6 {pattern: 'vadmin_store', params:'tpl:tplStoreInfo,target:mainBody', callback:store}, 7 {pattern: 'vadmin_cate', params:"tpl:tplCate,target:mainBody", callback:cate}, 8 {pattern: 'vadmin_goods_([a-f0-9]+)', params:"tpl:tplGoods,target:mainBody,cate:@1", callback:goods}, 9 {pattern: 'vadmin_propertylist_([a-f0-9]+)', params:"tpl:tplGoodsProperty,target:mainBody,goodsid:@1", callback:propertyList} 10 ]; 11 12 13 //初始化路由 14 r.init(router); 15 16 //钩子hook 17 r.hookBefore = isLogin; //每次调用回调方法前先检测是否登录了, isLogin 需要是一个方法 18 19 //开始路由 20 r.route(str, replace); //路由过程: 1. 触发浏览器地址栏URL链接变化但不刷新浏览器, 2. 解析传入的str进行内容替换并触发回调 21 22 //用数组循环渲染模板 23 r.repeatString(tpl, arr, func); //将tpl中的占位符替换为arr中的对应值, 用于渲染列表; func: 预先处理arr中每个obj,添加/修改/删除值 24 r.repeatInnerHtml(selector, arr, func); //将selector元素的innerHTML用 repeatString 替换 25 r.repeatOuterHtml(selector, arr, func); //将selector元素的outerHTML用 repeatString 替换 26 27 //其他方法 28 r.htmlToNode(str); //将html字符串转为node节点 29 r.changeContentById(srcId, targetId); //将模板内容覆盖指定id的innerHTML 30 r.getInputs(id, tagNames); //获取id元素内的指定标签的value, r.getInputs(id, 'input,textarea'); 31 r.getRandom(len); //生成一定长度的随机字符串 32 r.buildUrl(path, obj); //构建url
路由配置说明
- pattern: 当前的URL;
- tpl:模板div的id: <template id="xxx"></template>
- target:把模板内的HTML复制到目标div内;
- @1:匹配并获取pattern中的第一个值;
- callback:匹配了路由后的回调方法
