面试题【1】

css选择器优先级关系

！important > 内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承属性 > 浏览器默认样式
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

清楚浮动的方法

1.父级元素定义高
2.给父级加display:inline-block
3.在浮动元素下加
.clear{ 
    height:0px;
    font-size:0;
    clear:both;
    }
<div class=clear></div>
4.父级添加overflow属性（父元素添加overflow:hidden）
5.使用after伪元素清除浮动{
    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
            }
        }
    .clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

获取动态路由id值的方法

//这里传参到地址栏,传给后台这里直接传参到地址栏自动拼接，后台会返回相应的数据
//第一种获取
id: this.$route.params.id //传给后台
//获取list页面传的id并赋值给id(这个id为router的定义id，名字必须一样),通过params/这里传参到地址栏
//第2种获取
id:this.$route.query.id  //获取list页面传的id并赋值给id，通过params/这里直接传参到地址栏自动拼接，后台会返回相应的数据

this.$router与this.$route的区别

this.$router是Vue-Router的实例，需要导航到不同路由则用this.$router.push方法
this.$route为当前路由的跳转对象，包含当前路由的name、path、query、params等属性。

路由跳转的方法

1.  router-link

不带参数

 <router-link :to="{name:'home'}">
    <router-link :to="{path:'/home'}"> //name,path都行, 建议用name
    // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
带参数
    <router-link :to="{name:'home', params: {id:1}}">
    // params传参数 (类似post)
    // 路由配置 path: "/home/:id" 或者 path: "/home:id"
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
    // html 取参 $route.params.id
    // script 取参 this.$route.params.id
    <router-link :to="{name:'home', query: {id:1}}">
    // query传参数 (类似get,url后面会显示参数)
    // 路由可不配置
    // html 取参 $route.query.id
    // script 取参 this.$route.query.id

2.  this.$router.push() (函数里面调用)

不带参数

 this.$router.push('/home')
    this.$router.push({name:'home'})
    this.$router.push({path:'/home'})
query传参
    this.$router.push({name:'home',query: {id:'1'}})
    this.$router.push({path:'/home',query: {id:'1'}})
    // html 取参 $route.query.id
    // script 取参 this.$route.query.id
params传参
    this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
    // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
    // html 取参 $route.params.id
    // script 取参 this.$route.params.id
query和params区别
    query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
    params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

3.  this.$router.replace() (用法同上,push)

4.  this.$router.go(n) ()
this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
ps : 区别

this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

清楚定时器的方法

window.clearTimeout(t1);   

如何让css只在当前组件中使用

<style lang="scss" scoped>

</style>

判断数据类型的方法

typeof

可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括number,boolean,string,function,object,undefined）；
可以使用typeof判断变量是否存在（如if(typeof a!="undefined"){...}）；
Typeof 运算符的问题是无论引用的对象是什么类型 它都返回object
typeof {} // object
typeof  [1,2] // object
typeof /\s/ //object

instanceof

原理 因为A instanceof B 可以判断A是不是B的实例，返回一个布尔值，由构造类型判断出数据类型

console.log(arr instanceof Array ); // true
console.log(date instanceof Date ); // true
console.log(fn instanceof Function ); // true
//注意： instanceof 后面一定要是对象类型，大小写不能写错，该方法试用一些条件选择或分支

通过Object下的toString.call()方法来判断

Object.prototype.toString.call();
console.log(toString.call(123)); //[object Number]
console.log(toString.call('123')); //[object String]
console.log(toString.call(undefined)); //[object Undefined]
console.log(toString.call(true)); //[object Boolean]
console.log(toString.call({})); //[object Object]
console.log(toString.call([])); //[object Array]
console.log(toString.call(function(){})); //[object Function]

根据对象的contructor判断

console.log('数据类型判断' -  constructor);
console.log(arr.constructor === Array); //true
console.log(date.constructor === Date); //true
console.log(fn.constructor === Function); //true

jq中判断数据类型的方法

jQuery提供了一系列工具方法，用来判断数据类型，以弥补JavaScript原生的typeof运算符的不足。以下方法对参数进行判断，返回一个布尔值。
jQuery.isArray();是否为数组
jQuery.isEmptyObject();是否为空对象 （不含可枚举属性）。
jQuery.isFunction():是否为函数
jQuery.isNumberic():是否为数字
jQuery.isPlainObject():是否为使用“{}”或“new Object”生成对象，而不是浏览器原生提供的对象。
jQuery.isWindow(): 是否为window对象；
jQuery.isXMLDoc(): 判断一个DOM节点是否处于XML文档中。

cookie默认过期时间

默认cookies失效时间是直到关闭浏览器
Response.Cookies("user_name").Expires=Date+1 '指定cookie保存时间
保留COOKIES一个小时
Response.Cookies("MyCookie").Expires= (now()+1/24) Response.Cookies("MyCookie").Expires = DateAdd("h", 1, Now())
设置60个月以后过期

从浏览器地址栏输入url到显示页面的步骤

• url交给DNS解析域名 找到真实IP 向服务器发请求
• 服务器交给后台处理完成后返回数据 浏览器接受 HTML CSS JS 等文件
• 浏览器对接受的文件进行解析 建立相应的结构
• 载入解析到的资源文件 渲染完成

网站优化

• content（内容）方面
  -减少http请求 合并文件、css样式 减少在线地址
  -减少DNS查询： DNS缓存
  -减少DOM元素数量
• server（服务）方面
  -使用CDN
  -配置ETag
• cookie（缓存）方面
  -减少cookie大小
• css方面
  -将样式放到页面顶部
  -使用不适用@import
  -不使用css表达式
• js方面
  -脚本放到文件底部
  -删除不需要的脚本
  -减少dom访问
  -删除控制台打印
  -压缩js
• 图片方面

web标准以及w3c标准是什么

标签闭合 标签小写 不乱嵌套 使用外链 css 和 js 结构行为分离

canvas和svg有什么区别

svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
svg输出的是矢量图形 后期可以修改参数来自由放大或缩小，不会失真和锯齿
而canvas输出标量画布 就像一张图片一样 放大会失真或锯齿

渐进增强和优雅降级

• 渐进增强 针对低版本浏览器进行构建页面，保证最基本的功能 再针对高版本浏览器进行效果、交互等改进的追加功能 提高用户体验

• 优雅降级 一开始就构建完整功能 再针对低版本浏览器进行兼容

  渐进增强是从低到高 优雅降级是从高到低

src和href区别

• src用户替换当前元素 href用户在当前文档和引用资源之间确立联系，在请求src资源时会将其指向的资源下载并应用到文档内 例如js脚本
• href指向网络资源所在的位置 建立和当前元素或当前文档之间的链接

网页制作用到的图片格式

png8、png24、jpeg、gif、svg、webp

移动端点击事件 click tap touch

• click 和 tap 比较
  两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。
  singleTap和doubleTap 分别代表单次点击和双次点击。
• tap的点透处理
  – https://github.com/ftlabs/fastclick

      <script src="引入"></script>
      $(function(){
          //newFastClick(document.body);
      FastClick.attach(document.body);
      })
          //如果你使用原生js开发则进行如下声明即可。
      if ('addEventListener' in document) {
          document.addEventListener('DOMContentLoaded', function() {
              FastClick.attach(document.body);
          }, false);
      }
  

  参考地址：https://blog.csdn.net/weixin_39654784/article/details/81433416

img 图像底部留白的原因以及解决方法

• 有时候，我们在添加图片img标签后并没有给该标签设置magrin属性的margin-bottom值，在有些浏览器中打开就会出现图像底部留白，为什么为造成这个原因？下面就来进行分析：由于img元素默认为inline元素，而inline元素的vertical-align属性的默认值为baseline文字基线对齐，正好图片底部的留白就是baseline和bottom之间的距离。最后就给大家分享一下针对该问题的解决方法。

• 1.把图片设置为块级元素
  我们都知道图片img标签默认为内联（inline）元素，把img标签设置为块元素就可以解决底部留白问题。
  如：img{display:block;}

• 2.设置图片的垂直对齐方式
  相信很多小伙伴对vertical-align这个属性有种很模糊的概念，和text-align属性作用的对象易混淆：首先text-align是设置或检索对象中文本的对齐方式（左、中、右）；vertical-align则是用于指定元素（inline元素）的上下垂直对齐方式（顶部、中间、底部、基线）。再回到刚刚这个问题，我们通过给图片添加垂直对齐方式来解决底部留白。
  如： img{vertical-align:top} (vertical-align值根据具体情况来规定：top、middle、botom)

• 3.设置父元素的文字大小为0
  如：img的父元素为div，那么只需要给div添加一个font-size属性并设置值为0即可。但是此方法会让父元素div中的其他子元素继承font-size属性，导致文字无法显示，这样就会出现一些隐性错误，那么再针对性的给需要的子元素单独添加font-size属性。

• 4.给父元素添加overflow属性
  如果父元素规定了固定的宽高，图片大小就会跟随父元素而定，则可以给父元素添加overflow属性：overflow:hidden ;

• 5.设置图片的浮动或者定位属性
  给图片设置浮动（float）或者定位（position）属性也能够解决地不留白问题，原理和方法一类似，就是通过添加 float 或 position 属性来改变display属性，被隐式变为块级元素了。
  注：使用浮动的话最后要清除浮动

• 6.取消图片标签和其父元素之间的空格
  由于浏览器会解析空格，故可以通过消除空格来解决问题，但是这个方法我们一般推荐，因为这样会使页面代码更加混乱，排版不清晰

箭头和普通函数this指向区别

• 普通函数中的this:
  1 this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj
  2.在默认情况(非严格模式下,未使用 ‘use strict’),没找到直接调用者,则this指的是 window （常见的window的属性和方法有: alert, location,document,parseInt,setTimeout,setInterval等）(约定俗成)
  3.在严格模式下,没有直接调用者的函数中的this是 undefined
  4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象
• 箭头函数中的this
  箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this
  要整明白这些, 我们需要首先了解一下作用域链:
  当在函数中使用一个变量的时候,首先在本函数内部查找该变量,如果找不到则找其父级函数,
  最后直到window,全局变量默认挂载在window对象下

箭头和普通函数this指向区别

例 1
var name='小王'，age='17'
var obj = {
			name:'小张',
			objAge:this.age，
			myFun：function（）{
				console.log（this.name+“年龄”+this.age）
			}
obj.objAge;  // 17
obj.myFun()  // 小张年龄 undefined
例 2
var fav = '盲僧'
function shows（）{
	console.log（this.fav）
}
shows()  // 盲僧　
比较一下这两者 this 的差别，第一个打印里面的 this 指向 obj，第二个全局声明的 shows() 函数 this 是 window ；

1，call()、apply()、bind() 都是用来重定义 this 这个对象的！
如：
var name='小王',age=17
var obj={
	name:'小张',
	objAge:this.age,
	myFun:function(){
		console.log(this.name+"年龄"+this.age)
	}
var db={
		name:'德玛',
		age:99
	}
obj.myFun.call(db)；　　　　// 德玛年龄 99
obj.myFun.apply(db);　　　 // 德玛年龄 99
obj.myFun.bind(db)();　　　// 德玛年龄 99
以上出了 bind 方法后面多了个 () 外 ，结果返回都一致！

由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行。

2，对比call 、bind 、 apply 传参情况下
var name='小王',小王=17
var obj={
	name:'小张',
	objAge:this.age,
	myFun:function(fm,t){
		console.log(this.name+"年龄"+this.age,'来自'+fm+'去往'+t)
	}
var db={
		name:'德玛',
		age:99
	}
obj.myFun.call(db,'成都','上海')；　　　　 // 德玛 年龄 99  来自 成都去往上海
obj.myFun.apply(db,['成都','上海']);      // 德玛 年龄 99  来自 成都去往上海  
obj.myFun.bind(db,'成都','上海')();       // 德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();　　 // 德玛 年龄 99  来自 成都, 上海去往 undefined　　
微妙的差距！

从上面四个结果不难看出:

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。

bind 除了返回是函数以外，它 的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！

同源策略

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。

非同源有可能造成跨域无法请求数据

标准和模型与怪异盒模型

标准盒模型下 width height 就是内容的宽 /高 盒子的大小 = content + border + padding + margin
怪异盒模型下 width height 就是 content + border + padding 总的宽/高 盒子的大小=width+ margin

布局方式

点击查看更多布局方式

• 圣杯布局
• 比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是 dom 结构必须是先写中间列部分，这样实现中间列可以优先加载。

<article class="container"> 
 <p class="center"> 
 <h2>圣杯布局</h2> 
 </p> 
 <p class="left"></p> 
 <p class="right"></p> 
</article>`

.container { 
 padding-left: 220px;//为左右栏腾出空间 
 padding-right: 220px; 
} 
.left { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: red; 
 margin-left: -100%; 
 position: relative; 
 left: -220px; 
} 
.center { 
 float: left; 
 width: 100%; 
 height: 500px; 
 background: yellow; 
} 
.right { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: blue; 
 margin-left: -200px; 
 position: relative; 
 right: -220px; 
} 

• 双飞翼布局
• 同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。

.container { 
 min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽 
} 
.left { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: red; 
 margin-left: -100%; 
} 
.center { 
 float: left; 
 width: 100%; 
 height: 500px; 
 background: yellow; 
} 
.center .inner { 
 margin: 0 200px; //新增部分 
} 
.right { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: blue; 
 margin-left: -200px; 
} 
<article class="container"> 
 <p class="center"> 
 <p class="inner">双飞翼布局</p> 
 </p> 
 <p class="left"></p> 
 <p class="right"></p> 
</article>

• 圣杯布局和双飞翼布局实现方式对比:

两种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局方式的不同之处在于如何处理中间主列的位置： 圣杯布局是利用父容器的左、右内边距+两个从列相对定位; 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

• 品字形

<style>
*{margin:0; padding:0;}
div{ width:100%; height:100px; background:red; font-size:40px; line-height:100px; color:#fff; text-align:center;}
.div1{ margin:0 auto 0;}
.div2{ background:green; float:left; width:50%;}
.div3{ background:blue; float:left; width:50%;}
</style>
</head>
 
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>

常用js类定义的方法有哪些，请写出实例代码？

点击查看

js类继承的方法有哪些？

点击查看
使用构造函数实现继承
改变函数的原型实现继承
使用构造函数和改变函数的原型结合实现继承

什么是错误优先的回调函数？

错误优先的回调函数用于传递错误和数据，第一个参数应该始终是错误的对象
用于检查程序是否出现错误，其余参数用于传递数据

事件监听

dom.addEventListener('事件名‘，function（）{}，{boolean}）
事件名：要监听的事件
function 当监听的事件触发时 执行的语句 
Boolean 为true时 在事件捕获阶段触发 为false时 在事件冒泡时触发

e.stopPropagation();//冒泡
　e.preventDefault(); //默认事件

v-modle原理

通过绑定input事件实时获取更新data值。
另一方面 通过defineProperty监听 一旦监听到变化通过相关的页面元素更新