面试经历学习记录(二)
一、vuex中action和mutation
相同点:mutations和action都是用来改变Vuex store的状态的;
不同点:mutations提供的回调函数是同步的;
而actions提供的方法是异步的,此外,actions的方法最终还是通过调用mutations的方法来实现修改vuex的状态的。
this.$store.commit(回调函数名 , 回调函数除第一个外的参数)
this.store.dispatch(回调函数名 , 回调函数除第一个外的参数)
二、localStorage、sessionStorage、cookie的区别
三、Git的命令(个人真正常用的就那么几个,合作开发除外,记住就行了)
git branch 查看本地所有分支
git status 查看当前状态 1
git commit 提交 1
git branch -a 查看所有的分支
git branch -r 查看远程所有分支
git commit -am "init" 提交并且加注释 1
git remote add origin git@192.168.1.119:ndshow
git push origin master 将文件给推到服务器上
git remote show origin 显示远程库origin里的资源
git push origin master:develop
git push origin master:hb-dev 将本地库与服务器上的库进行关联
git checkout --track origin/dev 切换到远程dev分支
git branch -D master develop 删除本地库develop
git checkout -b dev 建立一个新的本地分支dev
git merge origin/dev 将分支dev与当前分支进行合并
git checkout dev 切换到本地dev分支
git remote show 查看远程库
git add . 1
git rm 文件名(包括路径) 从git中删除指定文件
git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来
git config --list 看所有用户
git ls-files 看已经被提交的
git rm [file name] 删除一个文件
git commit -a 提交当前repos的所有的改变
git add [file name] 添加一个文件到git index
git commit -v 当你用-v参数的时候可以看commit的差异
git commit -m "This is the message describing the commit" 添加commit信息
git commit -a -a是代表add,把所有的change加到git index里然后再commit
git commit -a -v 一般提交命令
git log 看你commit的日志
git diff 查看尚未暂存的更新
git rm a.a 移除文件(从暂存区和工作区中删除)
git rm --cached a.a 移除文件(只从暂存区中删除)
git commit -m "remove" 移除文件(从Git中删除)
git rm -f a.a 强行移除修改后文件(从暂存区和工作区中删除)
git diff --cached 或 $ git diff --staged 查看尚未提交的更新
git stash push 将文件给push到一个临时空间中
git stash pop 将文件从临时空间pop下来
---------------------------------------------------------
git remote add origin git@github.com:username/Hello-World.git
git push origin master 将本地项目给提交到服务器中 1
四、块级元素水平垂直居中
已知高度:
1.设置父元素为相对定位,给子元素设置绝对定位,top: 0; right: 0; bottom: 0; left: 0; margin: auto;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <style> 2 #father { 3 width: 500px; 4 height: 300px; 5 background-color: skyblue; 6 position: relative; 7 } 8 9 #son { 10 width: 100px; 11 height: 100px; 12 background-color: green; 13 position: absolute; 14 top: 0; 15 right: 0; 16 bottom: 0; 17 left: 0; 18 margin: auto; 19 } 20 </style> 21 22 <div id="father"> 23 <div id="son">我是块级元素</div> 24 </div>
2. 设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <style> 2 #father { 3 width: 500px; 4 height: 300px; 5 background-color: skyblue; 6 position: relative; 7 } 8 9 #son { 10 width: 100px; 11 height: 100px; 12 background-color: green; 13 position: absolute; 14 left: 50%; 15 top: 50%; 16 margin-left: -50px; 17 margin-top: -50px; 18 } 19 </style> 20 21 <div id="father"> 22 <div id="son">我是块级元素</div> 23 </div>
未知高度:
1.设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <style> 2 #father { 3 width: 500px; 4 height: 300px; 5 background-color: skyblue; 6 position: relative; 7 } 8 9 #son { 10 background-color: green; 11 position: absolute; 12 left: 50%; 13 top: 50%; 14 transform: translateX(-50%) translateY(-50%); 15 } 16 </style> 17 18 <div id="father"> 19 <div id="son">我是块级元素</div> 20 </div>
2.设置父元素为flex定位,justify-content: center; align-items: center;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <style> 2 #father { 3 width: 500px; 4 height: 300px; 5 background-color: skyblue; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 } 10 11 #son { 12 background-color: green; 13 } 14 </style> 15 16 <div id="father"> 17 <div id="son">我是块级元素</div> 18 </div>
五、防抖(debounce)和节流(throttling)
debounce:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时
1 function debounce(fn, wait) { 2 var timeout = null; //定义一个定时器 3 return function() { 4 if(timeout !== null) 5 clearTimeout(timeout); //清除这个定时器 6 timeout = setTimeout(fn, wait); 7 } 8 }
throttling:当持续触发事件时,保证一定时间段内只调用一次事件处理函数
1 var throttle = function(func, delay) { 2 var timer = null; 3 return function() { 4 var context = this; 5 var args = arguments; 6 if (!timer) { 7 timer = setTimeout(function() { 8 func.apply(context, args); 9 timer = null; 10 }, delay); 11 } 12 } 13 }