路由中的hash和history
遇到vue项目部署到服务器后刷新出现404的问题,因为是第一次遇到,所以去了解了一下vue中的两种路由模式: hash模式、html5中的history模式
hash模式vue-router默认的是hash模式.hash模式,是指url尾巴后的#号以及后面的字符.hash也被称为锚点,本身是用来做页面定位的.hash虽然出现在url中,但不会被包括在http请求中,对后端完全没有影响,因此改变hash值不会重新加载页面.hash值的变化不会导致浏览器向服务器发出请求,而hash改变会触发hashchange事件(只改变#后面的url片段);hash发生变化url都会被浏览器记录下来,从而可以使用浏览器的前进和后退.
history模式history模式主要是通过history Api的pushState()和replaceState()两个方法来实现的.pushState()可以改变url地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改 以上两个方法可以修改历史状态,下面三个方法可以切换(定位)历史状态
1234history.go(-2) ...
浅拷贝与深拷贝
JS中的数据类型包括基本数据类型和引用数据类型
基本数据类型:undefined、null、boolean、number、string、symbol
引用数据类型:object、array、function
基本数据类型基本数据类型是指存放在栈中的简单数据段,数据大小确定,内存空间大小可以分配,它们是直接按值存放的,所以可以直接按值访问
123456var x = 1 var y = x y = 2 console.log(x) //1 console.log(y) //2
引用数据类型引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。
12345678910var a = [1,2,3,4,5];var b = a;//传址 ,对象中传给变量的数据是引用类型的,会存储在堆中;var c = a[0];//传值,把对象中的属性/数组中的数组项赋值给变量,这时变量C是基本数据类型,存储在栈内存中;改变栈中的数据不会影响堆中的数据console.log(b);//1,2,3,4,5console.log(c);/ ...
浏览器的缓存机制
浏览器的缓存机制分为:强缓存和协商缓存
强制缓存优先于协商缓存进行,若强制缓存(Expires和Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match),协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,返回200,重新返回资源和缓存标识,再存入浏览器缓存中;生效则返回304,继续使用缓存
一、强缓存的实现:HTTP Header 中设置:Expires 和 Cache-Control,通过这两个字段,浏览器会来判断目标资源是否命中强缓存,
命中强缓存
没有命中强缓存:
Expires缓存过期时间,需要和Last-modified(服务器端最后更新的时间)结合使用。Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求
因为基于本地时间的Expires的字段太过依赖于“本地时间”,如果服务端和客户端的时间设置可能不同,或者用户直接手动去把客户端的时间 ...
手撕防抖节流
面试工作常备防抖节流
一、防抖没有使用防抖
使用了防抖
立即执行:
一步一步实现防抖函数debounce():调用防抖:
1234567let count = 0 let container = document.querySelector('.container') const doSomeThing = (e) => { container.innerHTML = count++ } container.onmousemove = debounce(doSomeThing, 300, true)
第一步,实现最最简单的防抖1234567const debounce = (func, waitTime) => { let timeout; return function () { if(timeout) clearTimeout(timeout) timeout = setTimeout(func, waitTime) } ...
命令行走代理
有时候的工作可能会用到命令行翻墙来快速的下一些包,如果用翻墙工具全局翻墙,命令行可能也没有用
ipconfig查看自己的ip地址
在自己的翻墙工具中找到端口号
HTTP 代理设置123set http_proxy=192.168.2.3:4780set https_proxy=192.168.2.3:4780
测试1curl https://www.google.com.hk/
成功!
JS中的Array对象
Array一、创建数组new操作符:12const arr = new Array(5)const arr1 = new Array('w','e','s','l','e','y')
省略new操作符:12const arr = Array(5)const arr1 = Array('w','e','s','l','e','y')
数组字面量12const arr = []const arr1 = ['w','e','s','l','e','y']
[es6]Array.of()
和Array构造函数之间的区别在于处理参数中的整数
12const arr = Array(5) //[ , , , , ]cosn ...
JS中的String对象
String1.字符方法:str.charAt()
从一个字符串中返回指定index的字符
123const mystr = "hallo, wesley"console.log(mystr.charAt(8))//e
ste.charCodeAt()
功能用法与 charAt 相同,唯一不同的是,charCodeAt 返回的是字符编码而不是字符
123const mystr = "hallo, wesley"console.log(mystr.charCodeAt(8))//101
2.字符串操作方法:str.concat()
连接多个字符串为一个新的字符串
返回新得字符串,不改变原字符串
1234const mystr1 = "Wesley"const mystr2 = " love"const mystr3 = " Deborah"console.log(mystr1.concat(mystr2,mystr3)) //Wesley love Deborah
...
git的分支命令
实习期间对公司的git操作(命令行)正式实战
1.从已有的项目克隆下来:git clone +地址
如果使用的公司的需要更改一下地址(指定分支dev:-b dev)
1git clone -b dev git@github.com:example.git
1git clone -b dev git@company.github.com:example.git
2.在dev的分支下拉出自己将要开发的新分支1git switch -c wesley/index
3.可以查看一下分支:1git branch
一般公司的项目下可能会有master(创建仓库时默认生成),dev(开发分支),staging(测试分支)
我们从dev拉取最新的代码,然后再本地创建自己的分支,在自己的分支上进行开发,然后push到dev分支,在github上提交PR,让同事进行code review,然后再在线上手动进行合并到dev
4.更改完项目后,提交到本地仓库12git add .git commit -m "feat: add README file"
fea ...
ES6学习笔记
ES6学习笔记1.let和constes6中新增重要的两个js关键字:let和const
let :变量只在 let 命令所在的代码块内有效,块级。
const :常量,一旦声明,常量的值就不能改变,块级。
12345678910var arr=[]for(var i =0;i<2;i++) { console.log(i) arr[i]=function(){ console.log(i) }}arr[0]();arr[1]();console.log('last i='+i)
这段函数for循环执行完后才会执行下面的arr[0]();arr[1]();但是此时的i已经变成了2,所以再去执行的时候,i的值都是2
12345678910var arr=[]for(let i =0;i<2;i++) { console.log(i) arr[i]=function(){ console.log(i) }}arr[0]();arr[1]();
2.Promise ...
Vue中的asios以及asyn,await操作
1.Vue.js Ajax(axios)
npm下载使用:
npm install –save axios vue-axios
在入口文件导入axios:
12import axios from 'axios' axios.defaults.baseURL = 'http://timemeetyou.com:8889/api/private/v1/' // 配置请求的根路径
设置 Vue.prototype.$http 为 axios 的别名:
1Vue.prototype.$http = axios
然后就可以在项目中的Vue 实例中使用类似 this.$http.get 的方法:
1const{ data : res}= await this.$http.get('users')
这里的{data : res}将请求返回的数据data解构赋值为对象res中2.async/awaitasync 是 ES7 才有的与异步操作有关的关键字,和 Promise , ...