DAY13刷面试题

最新推荐文章于 2024-05-06 14:44:53 发布

温凉要加油

最新推荐文章于 2024-05-06 14:44:53 发布

阅读量132

点赞数

分类专栏：刷面试题文章标签：面试

本文链接：https://blog.csdn.net/luvzen0127/article/details/120458189

版权

刷面试题专栏收录该内容

24 篇文章 0 订阅

订阅专栏

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊今天也是fw的一天，哭了，西湖的水我的泪QAQ
在这里插入图片描述
上午听了宣讲然后笔试，又是JAVA（感觉自己要去重学JAVA了，不然我笔试这辈子别想过）下午电话面试，就很窒息，单方面的我。对面说是了解基本情况，问的都是CSS\HTML基础的东西这样，虽然我有的答上来了，但是很深入的原理我就不知道了，有些东西我都没怎么用过，我就只能说我用过的一些，自我介绍也是要我随意一点不说项目，那我的自我介绍就剩下了…基本信息x.x 救命，说的东西就是降降降降降降维打击。

Vue2响应式原理

这个我也说不清楚，就是不能用我自己的话来说，就找了一篇文章链接慢慢来吧，害。vue2响应式原理

父子、子父、兄弟组件通信

父子组件通信：
在父组件data里定义一个要通信的数据

data（）{
	return {
		parentStr：'这是父组件的数据',
		num:1,
		}
	}
	
<son-component :xxx = 'parentStr' :num = 'num'></son-component>
xxx是一个名称 ''里面是值

然后子组件通过props属性，在子组件中接收父组件传过来的值

子组件里接收数据
props:['xxx','num']，
也可以写成对象格式
props:{
	xxx:String,
	num:Number,
}
{{xxx}}{{num}}

子父组件通信：
在子组件data里定义一个要通信的数据，给子组件定义一个按钮，通过自定义事件.$emit

子组件{{str}}
<button @click='btn'>按钮</button>

data（）{
	return {
		str：'这是子组件内容',
		}
	},
methods:{
		btn(){
	//changeStr是自定义的事件名称
	//this.str 是传递的数据
		this.$emit('changeStr',this.str),
		}
	}

父组件定义@changeStr，两者需要一致，通过方法收到来自子组件的数据

<child @changeStr='fn'></child>
{{change}}//打印收到的数据

data（）{
	return {
		change：'',
		}
	},
methods:{
//val 就是 this.str
	fn(val){
		this.change = val;
	}
}

兄弟组件通信：
AB兄弟组件，bus中转

 const EventBus = new Vue();

A兄弟组件（自定义组件）

AAA
<button @click='btn'>A按钮</button>
data（）{
	return {
		Astr：'这是A组件数据',
		}
	},
methods:{
		btn(){
		//bus指向公共的
		EventBus.$emit('changeStr',this.Astr),
		}
	}

B兄弟组件接收数据

<div>{{Bstr}}</div>

created() {
       EventBus.$on('changeStr', (data) => {
             console.log('来自A的数据:', data);
             this.Bstr= data;
         });
     },

移动端和PC端布局的区别

1、视口
视口是移动设备上用来显示网页的区域，一般比移动设备可视区域大，宽度可能是980px 或者 1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端视口的大小，这样会让页面不容易观看，可以用meta标签，name = “viewport”，来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。

<head>
......
<meta name="viewport" content="width=device-width, user-scalable=no,
 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
......
</head>

2、视网膜屏幕（retina屏幕）清晰度
视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。

图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题。

背景图强制改变大小，可以使用background新属性

background新属性
background-size:

length：用长度值指定背景图像大小。不允许负值。
percentage：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

3、适配布局类型
全适配：响应式布局+流体布局
移动端适配：
a、流体布局+少量响应式（常用）
b、基于rem的布局

4、兼容性
PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

5、事件处理
在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。

6、动效处理
在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单、效率又高。

PX转rem的插件

cssrem

参数配置文件：VSCode -> 文件 -> 设置 -> 搜索cssrem
cssrem.rootFontSize root font-size (unit: px), default: 16
cssrem.fixedDigits px转rem小数点最大长度，默认：6。
cssrem.autoRemovePrefixZero 自动移除0开头的前缀，默认：true
该插件可以在输入时选择转换，也可以使用ctrl+p，ctrl+r快捷键转换，支持html vue css less scss sass等文件格式或自定义文件

px to rem

参数配置文件：VSCode -> 文件 -> 设置 -> 搜索px to rem
px-to-rem.px-per-rem: number of pixels per rem. Default is 16px.
px-to-rem.number-of-decimals-digits: 最多保留的小数位
px-to-rem.only-change-first-ocurrence: 转换全部或只转换当前选择的
px-to-rem.notify-if-no-changes: 启用/关闭通知
选中要转换的值，使用快捷键Alt+z执行px转rem或rem转px

闭包

定义在一个函数内部中的另一个函数，其中一个内部函数在包含他的外部函数之外被调用时，就会形成闭包。

特性：
函数嵌套函数。
函数内部可以引用函数外部的变量和参数。
参数和变量不会被垃圾回收机制回收。
作用：
可以避免命名冲突。
解决循环绑定引发的索引问题。
变量不会被销毁（不会被垃圾回收机制回收）
应用：
设计模式中的单例模式
for循环中的保留i的操作
防抖和节流
函数柯里化
缺点：
会造成内存泄露

原型链

原型链：多个__proto__组成的集合成为原型链

所有实例的__proto__都指向他们构造函数的prototype
所有的prototype都是对象，自然它的__proto__指向的是Object()的prototype
所有的构造函数的隐式原型指向的都是Function()的显示原型
Object的隐式原型是null

vue vuex vue-ruter如何搭配

（暂时没太想明白，想明白了就更新）

git常用命令

这里放一些常用的常用
git branch 查看本地所有分支
git status 查看当前状态
git commit 提交
git branch -a 查看所有的分支
git branch -r 查看远程所有分支
git commit -am “init” 提交并且加注释
git push origin master 将文件给推到服务器上
git push origin master:develop
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 .
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 log 看你commit的日志
git diff 查看尚未暂存的更新
git rm a.a 移除文件(从暂存区和工作区中删除)
git rm --cached a.a 移除文件(只从暂存区中删除)
git commit -m “remove” 移除文件(从Git中删除)
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 将本地项目给提交到服务器中

git pull 本地与服务器端同步

git push (远程仓库名) (分支名) 将本地分支推送到服务器上去。
git push origin serverfix:awesomebranch

git fetch 相当于是从远程获取最新版本到本地，不会自动merge
git commit -a -m “log_message” (-a是提交所有改动，-m是加入log信息) 本地修改同步至服务器端：
git branch branch_0.1 master 从主分支master创建branch_0.1分支
git branch -m branch_0.1 branch_1.0 将branch_0.1重命名为branch_1.0
git checkout branch_1.0/master 切换到branch_1.0/master分支

git branch 删除远程branch
git push origin :branch_remote_name
git branch -r -d branch_remote_name

初始化版本库，并提交到远程服务器端
mkdir WebApp
cd WebApp
git init 本地初始化
touch README
git add README 添加文件
git commit -m ‘first commit’
git remote add origin git@github.com:daixu/WebApp.git

更加具体看这里GIT常用命令大全