hash监听者，类似前端路由的东西

Darth_EF

如题。
HashCaller当触发超链接或者url的hash变动时查找是否有对应的监听者，然后将触发监听者的执行函数。
将重渲染界面的代码放到监听者的执行函数即可实现类似前端路由的东西。(话说以前我和朋友都叫这种操作叫无刷新跳转而不是叫路由)
非常简单的东西，楼下放代码，有爱自取。
或者查看我的js库，里面还有其他有用的东西: https://gitee.com/darth_ef/def-web/blob/master/js/Basics.js
使用例: https://gitee.com/darth_ef/def-web/blob/master/page/index.js

Darth_EF

caller类 和 重载超链接标签触发事件

1. 
   
2. /**
   
3. * 点击站内链接调用的函数, 另链接不跳转而是成为锚点链接
   
4. */
   
5. function linkClick(e,tgt){
   
6.     var _event=e||event;
   
7.     var tgt=tgt||this;
   
8.     var linkTarget=tgt.getAttribute("target");
   
9.     var tempStr;
   
10.     if(tgt.host==window.location.host){
    
11.         // var hostchar=this.pathname.slice(this.pathname.indexOf('/')+1,this.pathname.slice(this.pathname.indexOf('/')+1).indexOf('/')+1);
    
12.         switch (_event.button){
    
13.             case 0:
    
14.                 if((!linkTarget||linkTarget=='_self')&&(!e.ctrlKey)){
    
15.                     window.location.href='#/'+tgt.href.substr(tgt.href.indexOf(tgt.host)+(tgt.host.length)+1);
    
16.                     stopPE(e);
    
17.                     // if(tempStr=tgt.getAttribute("title")){
    
18.                         //     window.document.title=tempStr;
    
19.                         // }
    
20.                         hashcaller.touchHashListener();
    
21.                     return false;
    
22.                 }
    
23.             break;
    
24.             case 1:
    
25.                 // window.open(this.getAttribute('href'));
    
26.             break;
    
27.             default:
    
28.                 break;
    
29.             }
    
30.         }
    
31. }
    
32. /**
    
33. * 让站内链接失效 链接不跳转而是成为锚点链接
    
34. */
    
35. function setupLinkClick(){
    
36.     document.addEventListener("click",function(e){
    
37.         var tgt=e.target;
    
38.         while(tgt.tagName!="HTML"){
    
39.             if(tgt.tagName=="A"){
    
40.                 linkClick(e,tgt);
    
41.                 break;
    
42.             }
    
43.             tgt=tgt.parentElement;
    
44.         }
    
45.     });
    
46. }
    
47. /**
    
48. * Hashcaller
    
49. */
    
50. class Hashcaller{
    
51.     constructor(onlyTouchOne=true){
    
52.         this.listeners=[];
    
53.         /**如果冲突(有多个能够匹配到的表达式)仅取下标大的监听者触发 */
    
54.         this.onlyTouchOne=onlyTouchOne;
    
55.         this.lastListenerIndex=-1;
    
56.         var that=this;
    
57.         window.addEventListener("hashchange",function(){that.touchHashListener()});
    
58.     }
    
59.     /**
    
60.      * 添加一个监听者对象 后添加的会比前面的更优先
    
61.      * @param {HashListener} listener
    
62.      */
    
63.     add(listener){
    
64.         this.listeners.push(listener);
    
65.     }
    
66.     /**
    
67.      * 添加一个监听者对象数组
    
68.      * @param {Array<HashListener>} listeners
    
69.      */
    
70.     addList(listeners){
    
71.         for(var i=listeners.length-1;i>=0;--i){
    
72.             this.add(listeners[i]);
    
73.         }
    
74.     }
    
75.     /**
    
76.      * 触发 location.hash
    
77.      */
    
78.     touchHashListener(){
    
79.         if((typeof window.lowhash!='undefined')&&(window.lowhash!=location.hash)){
    
80.             var regex;
    
81.             for(var i=this.listeners.length-1;i>=0;--i)
    
82.             if(regex=this.listeners[i].exec(location.hash)){
    
83.                 this.listeners[i].listener(regex);
    
84.                 this.lastListenerIndex=i;
    
85.                 if(this.onlyTouchOne)break;
    
86.             }
    
87.         }
    
88.         window.lowhash=location.hash;
    
89.     }
    
90. }
    
91. /**
    
92. * HashListener obj
    
93. */
    
94. class HashListener{
    
95.     /**
    
96.      * @param {RegExp} regExp       hash的正则表达式
    
97.      * @param {Function} listener   监听者 调用时会引用 regExp 的 regex
    
98.      * @param {Boolean} filterFlag  选择是否过滤 hash 中的 /^#\// 默认为过滤
    
99.      */
    
100.     constructor(regExp,listener,filterFlag=true){
     
101.         this.hashSelector=regExp;
     
102.         this.listener=listener;
     
103.         this.filterFlag=filterFlag;
     
104.     }
     
105.     /**
     
106.      * 测试表达式能否匹配字符串
     
107.      * @param {String} _string  文本
     
108.      */
     
109.     exec(_string){
     
110.         var string;
     
111.         if((this.filterFlag)&&(_string.indexOf("#/")==0)){
     
112.             string=_string.slice(2);
     
113.         }
     
114.         else{
     
115.             string=_string;
     
116.         }
     
117.         return this.hashSelector.exec(string);
     
118.     }
     
119. }
     
120. var hashcaller=new Hashcaller();

复制代码

食用方法

1. hashcaller.add(new HashListener(
   
2.         /.*/i, //这里放正则表达式匹配url的hash
   
3.         show404Page //这里放渲染页面的函数
   
4.     ))

复制代码

wp231957

Darth_EF 发表于 2021-4-28 18:22
caller类 和 重载超链接标签触发事件

还是不会用，我后台在跳转路由时，都是带参数渲染，这些参数都咋弄，能给个实例吗

Darth_EF

wp231957 发表于 2021-4-29 07:01
还是不会用，我后台在跳转路由时，都是带参数渲染，这些参数都咋弄，能给个实例吗

示例的话可以看看我一楼放的第二个链接。

闭包写一个渲染某页面的函数作为HashListener的构造函数的参数就好了。