Web 前端面试
博客园整理了一下，有好的面试题欢迎大家发在评论区哟 1. 闭包 2. 数组去重 3. 原型和原型链 4. call,apply,bind三者的区别？ 5. 请介绍常见的 HTTP 状态码(至少五个) 6. 深浅拷贝 7. 实现(5).add(3).minus(2)输出6 8. null和undefined区别 9. MVC和MVVC? 10. Vue生命周期 11. Vue数据双向绑定原理 12. Vue组件传参 13. 说说各浏览器存在的兼容问题 14. router和route 15. active-class属于Vue哪一个modules,有什么作用 16. v-if和v-show 17. computed和watch有什么区别 18.Vue 组件中 data 为什么必须是函数 19. vue中子组件调用父组件的方法 20. vue中 keep-alive 组件的作用 21. vue中如何编写可复用的组件？ 22. Vue 如何去除url中的 # 23. Vue 中 key 的作用 24. Vue 中怎么自定义指令 25. Vue 中怎么自定义过滤器 26. NextTick 是做什么的 27. Vue 组件 data 为什么必须是函数 28. 计算属性computed 和事件 methods 有什么区别 29. scoped（死够扑的） 30. vue如何获取dom? 31. promise 32. vue常用指令有哪些 33.vue-loader是什么?使用和用途？ 34.css样式局部化，如何让css只在当前组件起作用?scss和stytus样式穿透 闭包指有权访问另一个函数中变量的函数， MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures B站视频： https://www.bilibili.com/video/BV1YJ411R7ap?from=search&seid=18157596230752413126 https://www.jianshu.com/p/9c3547450a52 https://search.bilibili.com/all?keyword=%E5%8E%9F%E5%9E%8B%E9%93%BE%20%E9%BB%91%E9%A9%AC 都是用来改变this指向的 call和apply都是function原型上的方法，每一个函数作为function的实例都可以调用这两个方法，而这两个方法都是用来改变this指向的 一般情况下this指向其调用者（） fun.call(thisArg,arg1,ary2,...) 主要作用可以实现继承 调用函数，改变this指向 继承 fun.apply(thisArg,[argsArray]) 作用：调用函数，改变函数内部this指向 参数必须是数组 apply主要应用于借助数学对象等 bind()方法不会调用函数，但可以改变函数内部this指向 fun.bind(thisArg,arg1,arg2,...) thisArg:在fun函数运行时指定的this值 arg1，arg2:传递的其他参数 返回由指定的this值和初始化参数改造的原函数拷贝 call的性能要比apply好一些，尤其当传递参数超过3个，后期开发可多用call 时间测试 状态码是由 3 位数组成，第一个数字定义了响应的类别，且有五种可能取值: 1xx：指示信息–表示请求已接收，继续处理。 2xx：成功–表示请求已被成功接收、理解、接受。 3xx：重定向–要完成请求必须进行更进一步的操作。 4xx：客户端错误–请求有语法错误或请求无法实现。 5xx：服务器端错误–服务器未能实现合法的请求。 阮一峰： http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html MVC 是后端中的概念 MVVC中 是前端概念 最终实现V和M数据的同步，因此开发者只需关注业务逻辑，不需要手动操作Dom，mvvm是vue的核心 这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。 active-class 属于vue-router的样式方法 当routerlink标签被点击时将会应用这个样式 使用有两种方法 routerLink标签内使用 在使用时会有一个Bug 首页的active会一直被应用 解决办法 为了解决上面的问题，还需加入一个属性exact,类似也有两种方式： 在router-link中写入exact 在路由js文件,配置active-class 还可以不用exact这种方法去解决，例如 首页 路由中加入重定向 computed computed是计算属性，也就是计算值，它更多用于计算值的场景 computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算 computed适用于计算比较消耗性能的计算场景 watch watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作 无缓存性，页面重新渲染时值不变化也会执行 小结 当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed 如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。 去这里看一下blog.csdn.net vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #， 可以使用 vue-router 的另一种模式 history new Router({ mode: 'history', routes: [ ] }) 需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面 具体参考 官方API 参考 官方文档-自定义指令 过滤器也同样接受全局注册和局部注册 具体可参考官方文档 深入响应式原理 我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的 不同点： 让css只在当前组件中起作用
PHP面试有什么技巧么？
PHP程序员在面试的时候一般应该抓住以下几个点。
一、应该介绍自己掌握的开发一种，主要介绍PHP语言的独特语法以及如何使用，比如PHP语言会比CGI更快的执行动态页面。
二、必须熟悉Oracle、Mysql等数据库，并能简单的介绍自己掌握的程度。由于php做出的动态页面比用其他语言做出来的页面在执行效率以及CGI方面高得多，所以你还需要在面试中说出自己的文档撰写能力很强。
三、PHP程序员应该具备独立分析和解决问题的能力，可以在自我介绍中讲讲自己曾经遇到过的问题是如何解决的。让面试官看到你的能力，这将会直接影响到你自我介绍的成功与否。
四、一个PHP程序员必须有良好的职业道德和工作态度，所以在面试中应该尽量讲自己在做项目时的认真态度以及今后的工作规划，表现出自己的进取心。
五、还有关于沟通能力和理解能力的体现，这个在与HR的交谈中就可以表现出来，所以需要做的工作就是从容的有条理的把自我介绍说完，回答每一个问题时都应该简洁明了，关于自我介绍可以提前做个草稿，背一下。
六、团队合作能力也是企业非常看重的，在培训中老师一般都会带领大家做项目，大的项目一般会分小组，每个人都有相对应的任务，这就模拟了公司中的团队合作，在自我介绍过程中要把做项目的具体流程以及相互协作的过程说出来，让HR看到自己具备团队合作的能力。
七、最后就是执行力，每当任务分配下来的时候该如何执行，还有自己讲过职业规划后该如何执行，还有在学习的过程中是如何人字形的，遇到困难又是如何执行的，这些都可以体现出php程序员的执行力，回答的时候抓住发现及时寻找原因，快速展开行动的这个主线即可。
八、最重要的是你的能力、技术以及自己的项目
Web前端面试的常见面试题汇总
今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。1.渐进增强与优雅降级渐进增强并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。这两种思想的区别在于：1.渐进增强是向上兼容，优雅降级是向下兼容;2.渐进增强是从简单到复杂，优雅降级是从复杂到简单;3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)2.DOCTYPE作用DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。HTML5的文档类型声明：HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明："http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">标准模式与怪异模式怪异模式(QuirksMode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的DOCTYPE都会触发怪异模式。浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。怪异模式与标准模式的主要区别：1.怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:border-box将标准盒模型转化成怪异模式下的盒模型。2.怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。3.怪异模式下，在表格中的字体样式(如font-size)不会继承。4.怪异模式下颜色值必须使用十六进制标记法。3.语义化HTML5中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS样式控制内容的呈现，像元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。优点·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。·方便其他设备解析，如盲人阅读器根据语义渲染网页。·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。语义化标签·定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器;·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息;·article文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目;·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表;·section表示文档中的一个区域(或节)，比如，内容中的一个专题组;·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框(搜索框作为文档的主要内容);·aside表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。4.超链接伪类:link、:visited、:active和:hover的声明顺序是怎样的?:link表示未访问的链接状态;:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。推荐顺序是LVHA，即:link:visited:hover:active。理由如下：·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link之前声明，那么(:hover)就会被覆盖;·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited之前声明，那么(:hover)就会被覆盖;·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active样式，因此:active在:hover之后声明;·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和:visited两者的顺序无所谓，互不影响。5.CSS常见的长度单位CSS中除了px长度单位之外，还有下面几个长度单位：·pc六分之一英寸，1pc=12pt=1/6*1in=16px;·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;·in一英寸，1in=2.54cm=96px;·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈0.5em;·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍;·rem当用在根元素()的font-size上面时，它代表了它的初始值;·ch代表元素所用字体font中“0”这一字形的宽度;·vh1vh相当于视口高度的1%，100vh就是视口的高度;·vw1vw相当于视口宽度的1%，100vw就是视口的宽度;·vmax视口高度vw和宽度vh两者中的最小值·vmin视口高度vw和宽度vh两种中的最大值;·%相对于父级元素的大小来确定;参考：CSS[1]CSSpercentage[2]6.事件对象冒泡与捕获事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它;·然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素;而冒泡与捕获恰恰相反：·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它;·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素;而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。addEventListener函数的第三个参数是个布尔值。含义：·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件;·当布尔值是true时，表示向下捕获触发事件;不能冒泡的事件有些事件是不会冒泡的。比如：·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡;·focus元素获取焦点时触发;·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡;·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡;事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用e.target属性可以获取到当前触发事件的子元素。事件对象中的方法·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发;·preventDefault()阻止默认事件的发生;·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡;比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。paragraphdocument.querySelector("div").addEventListener("click",(event)=>{alert("我是div元素,我是p元素的上层元素");//p元素的click事件没有向上冒泡，该函数不会被执行},false);constp=document.querySelector('p')p.addEventListener("click",(event)=>{alert("我是p元素上被绑定的第一个监听函数");},false);p.addEventListener("click",(event)=>{alert("我是p元素上被绑定的第二个监听函数");event.stopImmediatePropagation();//执行stopImmediatePropagation方法，阻止click事件冒泡，并且阻止p元素上绑定的其他click事件的事件监听函数的执行.},false);p.addEventListener("click",(event)=>{alert("我是p元素上被绑定的第三个监听函数");//该监听函数排在上个函数后面，该函数不会被执行},false);“在IE浏览器中，使用e.cancelBubble=true也可以取消事件冒泡;使用e.returnValue=false也能阻止默认事件的发生。target与currentTargettarget属性指向的是事件目标，而currentTarget属性指向的是正在处理当前事件的对象，它总是指向事件绑定的元素。而target指向的可能不是定义时的事件目标。例如：div.addEventListener('click',(e)=>{console.log(e.target,e.currentTarget);},false);e.target可能指向div元素，也可能指向它的子元素。而e.currentTarget总是指向div元素。以上就是小编今天为大家分享的关于参加Web前端面试的常见面试题汇总的文章，希望本篇文章能够对正准备参加前端面试的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web前端培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。参考资料[1]CSSlength:#/zh-CN/docs/Web/CSS/length[2]CSSpercentage:#/zh-CN/docs/Web/CSS/percentage
