2022-2-18学习内容：路由插件模拟(路由模式),算法-CFANZ编程社区

1.路由器插件模拟

1定义了一个kvuerouter的对象

2引入kvuerouter,并实例化

//引入 kvueRouter
import kvueRouter from '@/Kvue-router/index.js'
//实例化kvueRouter
const router = new kvueRouter({
	mode: "history",
	routes: [
		{
			path: '/',
			component: Home
		}
	]
})
//安装插件
Vue.use(kvueRouter)

new Vue({
	render: h => h(App),
	router
}).$mount('#app')

3导出kvuerouter类

export default class kvueRouter {
    //接受router对象传递过来的数据
    constructor(options) {
        console.log(options)
        this.$options = options
        //用于存储router
        this.routerMap = {}
        this.initRouterMap()
        Vues.util.defineReactive(this, "current", "")
        //current 定义为响应式的属性，当你current值发生改变的时候，组件也会发生改变(组件会重新调用render这个函数)
        window.addEventListener("hashchange", this.onHashChange.bind(this))
        window.addEventListener("load", this.onHashChange.bind(this))
    }
    initRouterMap() {
        //遍历所有的router，获取对应的组件
        this.$options.routes.forEach((route) => {
            console.log(route)
            this.routerMap[route.path] = route.component
        })
        console.log(this.routerMap)
    }
    onHashChange() {
        //当地址栏的地址hash值发生变化时触发
        console.log("hash变化了")
        console.log(window.location.hash.slice(1))
        //获取更改的hash值，也就是跳转地址
        this.current = window.location.hash.slice(1) || '/'
    }

}

4在vue.use()触发时，会默认去寻找该插件中的原型上面的install方法并加以触发

let Vue;
kvueRouter.install = function (_Vue) {
    //在这个人方法中自带一个参数，该参数是vue的实例对象
    Vue = _Vue
    console.log(Vue)
    Vue.mixin({
        beforeCreate() {
            //这里的this是vue的构造函数的实例对象
            if (this.$options.router) {
                Vue.prototype.$router = this.$options.router//将router挂在道Vue的原型上
            }
        },
    })
    //全局注册router-link
    //注意：这里的router-link是模拟的a标签跟实际router-link亦有差距
    Vue.component("router-link", {
        props: {
            to: {
                type: String,
                required: true
            }
        },
        render(h) {
            return h("a", { attrs: { href: this.to } }, [this.$slots.default])
            //[this.$slots.default]利用插槽的default属性来获取router-link中的文本
        },

    },
    )
    //全局注册router-view
    Vue.component("router-view", {
        render(h) {
            let component = null
            console.log(this)
            const { routerMap, current } = this.$router
            if (routerMap[current]) {
                component = routerMap[current]
            }
            console.log(component)
            return h(component)
        }
    })
}

2算法

1学习方式

刷题网站:LeetCode
刷题顺序：按照类型刷题，集中训练
重点：时间/空间复杂度

2什么是数据结构，算法

数据结构：计算机存储，组织数据的方式

算法：一系列解决问题的清晰指令

二者之间的关系：

程序=数据结构+算法
数据结构为算法提供服务，算法围绕数据结构操作

3时间复杂度，空间复杂度

时间复杂度

一个函数用大O表示，例如O(1),O(n),O(logN)
定性的描述一个算法的运行时间

示例

O(1)
let i=0
i+=1

O(n)
for(let i=0;i<n;i++){
    console.log(i)
}

O(1)+O(n)=O(n)
let i=0
i+=1
for(let j=0;i<n;j++){
    console.log(j)
}

O(n)*O(n)=O(n^2)
for(let i=0;i<n;i++){
    for(let j=0;i<n;j++){
    console.log(j)
	}
}

O(logN)
let i=1
while(i<n){
    console.log(i)
    i*=2
}

空间复杂度

一个函数用大O表示，例如O(1),O(n)，O(n^2)
算法在运行过程中临时占用的储存空间大小的亮度

示例

O(1)
let i=0
i+=1

O(n)
const list =[]
for(let i=0;i<n;i++){
    list.push(i)
}

O(n^2)
const matrix=[]
for(let i=0;i<n;i++){
    matrix.push([])
    for(let j=0;j<n;j++){
        matrix[i].push(j)
    }
}