02手写router路由了解实现的原理

react-router：实现了路由的核心功能

react-router-dom：基于react-router，加入了在浏览器运行环境下的一些功能。例如Link组件，会渲染一个a标签。

路由模式分为：BrowserRouter(history)(不带#号)，和HashRouter(带#号)。前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

           //构造函数的重载,可以看做是一个对象模板
            function Router(params){
                console.log(this);//this指这个构造函数，
                                  //现在的this对象，里面没有属性和方法。开始往this对象添加东西。
                console.log(params);//参数params，是下面已经实例化的对象
                
                this.routes= params.routes||[];//给this对象里，添加routes属性。用来记录配置信息。
                this.mode= params.mode||'hash';//给this对象里，添加mode属性。用来记录路由模式。
                console.log("this.mode："+ this.mode);

                this.init=function(){   //给this对象里，添加init方法。作用：初始化。
                    var that =this; //这里的this指上面那个this对象
                   
                    });
                }
                this.init();
                
            }
            //实例化一个对象的时候，必然调用构造方法
            new Router({
                mode: 'hash',
                routes:[
                    { path:'/home',component:'<h1>主页</h1><h4>新一代前端工程师：我们啥都会</h4>'},
                    { path: '/news', component: '<h1>新闻</h1><h4>今天2020-07-01</h4>' },
                    { path: '/team', component: '<h1>团队</h1><h4>WEB前端工程师</h4>' },
                    { path: '/about', component: '<h1>关于</h1><h4>我们都要加油</h4>' },
                    { path: '*', redirect: '/home' }
                ]
            });

 

HTML DOM  querySelectorAll()方法

//querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
//NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。
//节点列表不是一个数组！可以看做是一个对象的list。

document.querySelectorAll(".router")
document.querySelectorAll(".router").forEach(console.log);//es6的循环

HTML DOM  addEventListener()方法

//addEventListener() 方法用于向指定元素添加事件句柄。
//element.addEventListener(event, function, useCapture)
//event: 必须。字符串，指定事件名。
//function: 必须。指定要事件触发时执行的函数。
//useCapture: 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
                     //true - 事件句柄在捕获阶段执行
                     //false- false- 默认。事件句柄在冒泡阶段执行

item.addEventListener("click",function(e){
                            console.log(e);
                        });

 

HTML DOM  event对象

/*Event 对象代表    事件的状态，*/
//比如事件在其中发生的  元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

/*标准 Event 属性*/
//bubbles    返回布尔值，指示事件是否是起泡事件类型。
//cancelable    返回布尔值，指示事件是否可拥可取消的默认动作。
//currentTarget    返回其事件监听器触发该事件的元素。
//eventPhase    返回事件传播的当前阶段。
//target    返回触发此事件的元素（事件的目标节点）。
//timeStamp    返回事件生成的日期和时间。
//type    返回当前 Event 对象表示的事件的名称。

/*标准 Event 方法：（IE 的事件模型不支持这些方法：）*/
//initEvent()    初始化新创建的 Event 对象的属性。
//preventDefault()    取消事件的默认动作，通知浏览器不要执行与事件关联的默认动作。
event.preventDefault()
//stopPropagation()    不再派发事件。

//returnValue    如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
window.event.returnValue = false;  

JavaScript String对象

/*String 对象属性*/
//constructor    对创建该对象的函数的引用
//length    字符串的长度
//prototype    允许您向对象添加属性和方法


/*String 对象方法*/
//indexOf()    检索字符串。
stringObject.indexOf(searchvalue【,fromindex】)//可返回某个指定的字符串值在字符串中首次出现的位置。

//slice()    提取字符串的片断，并在新的字符串中返回被提取的部分。
stringObject.slice(start,end)//当start=end时，看做stringObject.slice(start)

Browser对象  location对象

/*Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。*/

/*Location 对象方法*/
//assign()    加载新的文档。
//reload()    重新加载当前文档。

//replace()    用新的文档替换当前文档。
window.location.replace("http://www.w3school.com.cn")//replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。
复制代码


/*Location 对象属性*/
//hash    设置或返回从井号 (#) 开始的 URL（锚）。
//host    设置或返回主机名和当前 URL 的端口号。
//hostname    设置或返回当前 URL 的主机名。
//href    设置或返回完整的 URL。
//pathname    设置或返回当前 URL 的路径部分。
//port    设置或返回当前 URL 的端口号。
//protocol    设置或返回当前 URL 的协议。
//search    设置或返回从问号 (?) 开始的 URL（查询部分）。