前端-笔试-面试-题目
- html + css
- 布局
- JS
- Vue
- 简述 MVC 和 MVVC 区别
- axios拦截器和导航守卫的区别
- 过滤器和计算属性的区别
- Vue的路由实现:hash模式 和 history模式 --- TODO
- vue路由的钩子函数 --- TODO
- Vuex有哪几种属性? 及作用
- 写出你以往工作上, 自己封装过的组件及用途(不少于3个)
- Vue中 keep-alive组件的作用
- Vue中 keep-alive 怎么实现缓存组件?
- Vue中 $nextTick 作用是什么?
- Vue生命周期钩子函数有哪些?
- computed与watch的区别
- vue生命周期的作用是什么?
- Vue实现数据双向绑定的原理 -- TODO
- Vue组件间的参数传递 -- 待补充
- v-if 和 v-for 为什么不能连用? 如何解决?
- Vue子组件的data为什么是一个函数?
- Vue中 父组件 怎么调用 子组件 的方法?
- v-if 和 v-show 区别
- \$route 和 \$router的区别
- vue几种常用的指令
- vue常用的修饰符?
- vue中 key 值的作用?
- vue等单页面应用及其优缺点
- 安全性能优化
- http + 浏览器
html + css
CSS3有哪些新特性?
- CSS3实现圆角( border-radius ),阴影( box-shadow )
- 对文字加特效( text-shadow ),线性渐变( gradient ),旋转( transform )
- transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//
旋转,缩放,定位,倾斜 - 增加了更多的CSS选择器 多背景 rgba
- 在CSS3中唯一引入的伪元素是 ::selection
- border-image
HTML5新特性
- 拖拽释放(Drag and drop) API
- 语义化更好的内容标签(header,nav,footer,aside,article,section)
- 音频、视频API (audio,video)
- 画布(Canvas)API
- 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除
- 表单控件,calendar,date,time,email,url,search, 还有个 placeholder
- 新的技术 webworker,websocket,Geolocation(地理API)
你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
- IE : trident 内核
- Firefox : gecko 内核
- Safari : webkit 内核
- Opera : 以前是 presto 内核,Opera 现已改用 Google Chrome 的 Blink 内核
- Chrome : Blink ( 基于 webkit,Google 与 Opera Software 共同开发)
每个 HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?
- 告知浏览器文档使用哪种 HTML 或 XHTML 规范。
- (重点:告诉浏览器按照何种规范解析页面)
CSS伪类和伪元素的区别?
-
伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性
- :link
- :hover
- :active
- :visited
- :focus
-
伪元素:伪元素是对元素中的特定内容进行操作
- :first-letter 伪元素的样式将应用于元素文本的第一个字(母)。
- :first-line 伪元素的样式将应用于元素文本的第一行。
- :before 在元素内容的最前面添加新内容。
- :after 在元素内容的最后面添加新内容。
盒模型有几种, 区别是什么, 怎么切换?
- 两种, 标准盒模型和IE盒模型
- 主要区别:对于宽高的定义不同
标准盒模型: content + padding + border + margin
IE盒模型: content + margin - box-sizing:border-box, 设置为IE盒模型
设置元素浮动后, 该元素的display值是多少?
- 变成display:block
flex-basic 和 width 区别
- 如果没有设置flex-basis属性,那么flex-basis的大小就是项目的width属性的大小
- 如果没有设置width属性,那么flex-basis的大小就是项目内容(content)的大小
布局
1rem、1em、1vh、1px各自代表的含义?
移动端适配的方案有哪些?
- px和视口
- 媒体查询
- 百分比
- 自适应场景下的rem解决方案
- 通过vw/vh来实现自适应
vw和vh有了解吗?
vw: 屏幕宽度(视口)分成100份
vh: 屏幕高度(视口)分成100份
JS
获取时间戳的方式有哪些? 项目中用来干什么?
方式:
- Date.now()
- new Date().getTime()
应用:
- 解决时区造成的时差问题;
- 在不使用分页时, 获取大量数据, 用事件戳定位, 传参给后端
- 聊天市案例, 也要给后端传时间戳参数
判断数据类型的方式有哪些?分别有什么缺点?
-
typeof: 主要用于获取简单数据的类型,并返回类型名,但要注意的是复杂数据类型不准确。所以我们常用typeof获取简单数据类型。
- null返回的是object
console.log(typeof null); // -> ‘object’ - 检查复杂数据类型返回的是 object
- 检查函数返回的是function
- null返回的是object
-
instanceof: 主要用于检测对象是由哪种构造函数实例化所得, 返回boolean
注意,(数组、函数、对象) instanceof Object 都会返回true
-
Array.isArray: 主要用于检测是否是数组。
call , apply , bind 三者的区别?
同:
- 三者都是改变函数执行时的上下文,说人话就是改变this的指向。
异:
-
bind()返回的其实是一个函数,并不会立即执行,而call 和 apply 会立即执行
-
call()、apply()第二个参数有区别,call()的是一个值作为第二个参数,apply()的第二个参数则是一个数组
js的数据类型有哪些?
分两种
- 基本: string、number、boolean、null、undefined|
- 引用: object、array、function
- 在ES6中增加了几种数据类型: Symbol、BigInt(基本); Set、Map(引用),
for in和for of和Object.keys()区别
- for in, 除了遍历自身的可枚举属性, 还会遍历原型链上所有可枚举的属性, 性能差一些; 开发不推荐使用;
- 支持遍历数组,类数组对象(DOM NodeList),字符串,Map 对象,Set 对象;不支持遍历普通对象;
- Object.keys() 遍历对象自身可枚举属性, Symbol 属性不会遍历到, 以数组形式返回
箭头函数和普通函数区别
- 语法上, 箭头函数更加简洁, 箭头函数省去了function关键字,采用箭头=>来定义函数。在一定的条件下, 也可以对箭头函数进行简化。
- 箭头函数没有this
- 箭头函数没有arguments
- 箭头函数不能作为构造函数(没this)
- 箭头函数没有原型prototype
- 箭头函数不能用作Generator函数,不能使用yeild关键字
什么是闭包?
- 闭包就是能够读取其他函数内部变量的函数
- 可以把闭包简单理解成"定义在一个函数内部的函数"。
闭包解决了什么?
阮一峰在他的博客中写到:在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
务实一点的说法应该是下面这样:
由于闭包可以缓存上级作用域,那么就使得函数外部打破了“函数作用域”的束缚,可以访问函数内部的变量。以平时使用的 AJAX 成功回调为例,这里其实就是个闭包,由于上述的特性,回调就拥有了整个上级作用域的访问和操作能力,提高了极大的便利。开发者不用去学钩子函数来操作上级函数作用域内部的变量了
闭包最大的两个用处:
- 可以读取函数内部的变量;
- 让这些变量的值时始终保存在内存中
什么是promise
- 简单说就是一个容器,里面保存着某个未来才会结束的事件的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的API ,各种异步操作都可以用同样的方法进行处理,让开发者不用关注于时序和底层的结果。Promise 的状态具有不受外界影响和不可逆两个特点。
promise的三种状态:
- pending 未决
- resolve 成功
- reject 拒绝
ES6的常用数组方法
- find()
- filter()
- forEach()
- concat()
- map()
- every()
- some()
- reduce()
反转字符串怎么实现?
const res = "我爱前端".split("").reverse().join("")
conlose.log(res)
// -> 端前爱我
JS数组的map和forEach的区别
- map有返回值, forEach没有返回值。
- forEach()会改变原始数组。而map()方法会得到一个新的数组并返回。
Vue
简述 MVC 和 MVVC 区别
点击查看: 面试-MVC和MVVM区别-Vue为什么没有完全遵守MVVM?
axios拦截器和导航守卫的区别
- axios拦截器是拦截ajax请求; 导航守卫是拦截路由跳转
- axios拦截器一般来说是全局的, 导航守卫是局部的, 根据路由的元信息针对个别路由跳转
过滤器和计算属性的区别
- 过滤器是对单个数据进行处理, 例如时间格式转换;
- 计算属性: 解决单个vue实例数据渲染冗余问题;
- 一般来说, 过滤器是通过一个原始数据处理而来, 而计算属性是多个原始数据处理而来
Vue的路由实现:hash模式 和 history模式 — TODO
hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;
特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。
Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”
vue路由的钩子函数 — TODO
- beforeEach, 有3个参数to,from,next:
to: route即将进入的目标路由对象,
from:route当前导航正要离开的路由,
next:
Vuex有哪几种属性? 及作用
- state: 存放的数据状态,不可以直接修改里面的数据。
- mutations: 定义的方法动态修改Vuex 的 store 中的状态或数据。
- getters: 类似vue的计算属性,主要用来提供对state中数据的快捷访问。
- action: 异步操作数据, 通过 store.dispath 来分发 action。
- modules
(1) 项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
(2) 与之配合使用的还有一个属性namespaced: true
, 设置该属性后, 表示开启 命名空间, 之后再想访问子模块中的任何属性, 都必须加 模块名。
写出你以往工作上, 自己封装过的组件及用途(不少于3个)
Vue中 keep-alive组件的作用
Vue中 keep-alive 怎么实现缓存组件?
Vue中 $nextTick 作用是什么?
Vue生命周期钩子函数有哪些?
- beforeCreate(创建前)
- created(创建后)
- beforeMount(挂载前)
- mounted(挂载后)
- beforeUpdate(数据更新前)
- updated(数据更新后)
computed与watch的区别
计算属性computed和监听器watch都可以观察属性的变化从而做出响应,不同的是:
- computed是根据一个或者多个data的属性变化, 生成一个新的值, 并且会把这个值进行缓存. 不支持异步
- watch是根据一个属性的变化, 生成一个新的值, 没有缓存, 支持异步
vue生命周期的作用是什么?
- 它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
Vue实现数据双向绑定的原理 – TODO
- Object.defineProperty()
- vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。
用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。
js实现简单的双向绑定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
Vue组件间的参数传递 – 待补充
- 父组件与子组件传值
父组件传给子组件:子组件通过props方法接受数据;
子组件传给父组件:$emit方法传递参数
2、非父子组件间的数据传递,兄弟组件传值
eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道。)
v-if 和 v-for 为什么不能连用? 如何解决?
为什么?
- 因为v-for 会 v-if 优先级更高, 会先执行 v-for, 在判断 v-if 是否满足条件再渲染, 会造成性能浪费;
解决
- 在使用 v-for 的标签外面或者里面加一个 templete 标签, templete 标签中写v-if(不能让这两个指令写在同一个标签)
- 在js中, 对需要渲染的数组进行处理, 过滤出满足条件的数组
Vue子组件的data为什么是一个函数?
为什么?
- 当定义的子组件, 复用的时候, 默认情况下, 数据是共享的, 为了保证每一个组件的数据是独有的, 才把data定义为函数
同理:
- 父子传值, 子组件中的props中的值, 如果是引用数据类型且需要默认值, 组要写成
()=> {}
Vue中 父组件 怎么调用 子组件 的方法?
v-if 和 v-show 区别
- v-if按照条件是否渲染
- v-show是display的block或none;
$route 和 $router的区别
- $route是 “路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。
- $router是 “路由实例对象” 包括了路由的跳转方法,钩子函数等。
vue几种常用的指令
- v-for 、 v-if 、v-bind、v-on、v-show、v-else
vue常用的修饰符?
- .prevent: 提交事件不再重载页面;
- .stop: 阻止单击事件冒泡;
- .self: 当事件发生在该元素本身而不是子元素的时候会触发;
- .capture: 事件侦听,事件发生的时候会调用
vue中 key 值的作用?
- key的作用主要是为了高效的更新虚拟DOM。
- 在diff算法中,key是为了在differ算法执行时更快的找到对应的节点(key具有唯一性),从而提高diff速度。
vue等单页面应用及其优缺点
- 优点: Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
- 缺点: 不支持低版本的浏览器,最低只支持到IE9;不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退。
安全性能优化
懒加载的原理是什么?
- 不使用懒加载, webpack打包会把js代码放在一个文件, 文件体积相对大些, 第一次加载时间会多一些;
- 不使用懒加载, webpack打包会把懒加载的组件js, 单独放在一个文件, 文件体积相对小些, 加载时间会少一些
http + 浏览器
描述浏览器存储的几种方式, 以及特点
页面渲染html的过程
你所知道的http的响应码及含义?例如200、400、500
- 200 - 请求成功
- 301 - 资源(网页等) 被永久转移到了其它URL
- 304 - 客户端已经执行了GET,但文件未变化(刷新)
- 404 - 请求的资源(网页等) 不存在
- 500 - 内部服务器错误