总结

2018-05-09 本文已影响0人 zzzZink

移动端是怎么做适配的？

1.meta viewport

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

2.媒体查询（media query）
在link标签内使用media

 <link rel="stylesheet" media="(max-width: 500px)" href="mobile.css">

在CSS内使用media

@media (max-width: 450px){  /*屏幕宽度0—450px*/
    body{
        background: red;
    }
}
@media (min-width:451) and (max-width: 645px){ /*屏幕宽度451—645*/
    body{
        background: black;
    }
}
@media (min-width: 646px){ /*当屏幕宽度大于等于646时*/
    body{
        background: gray;
    }
}

3.动态rem方案
rem：1rem的大小等于根元素（html）的font-size。
使用JS动态调整rem

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <script>
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')
 </script>

使用sacc编译css
node-sass -wr scss -o css

 @function px( $px ){
      @return $px/$designWidth*10 + rem;
    }

    $designWidth : 640;

    .child{
      width: px(320);
      height: px(160);
      margin: px(40) px(40);
      border: 1px solid red;
      float: left;
      font-size: 1.2em;
    }

什么是闭包，闭包的用途是什么？

什么是闭包：
函数内部的子函数能够读取到函数的变量就是闭包

function f1(){
    var x = 1
    function f2(){
        x++
        return x
    }
    return f2
}
var foo = f1()
foo() //2

上面的代码就是闭包，因为创建了全局变量foo，函数f2赋值给foo，所以函数f2存在内存中，而f2依赖于f1，所以f1也一直存在与内存中，函数f1中的变量就不会被销毁。
闭包的作用：
1.读取函数内部的变量。
2.当函数执行完毕时，函数内的变量会被立即销毁，闭包能够将变量一直保存在内存中。

call、apply、bind 的用法分别是什么？

call方法可以指定函数内部this指向的作用域，并在指定作用域中运行该函数。
apply方法的作用与call相似，区别在于apply接收的参数是数组，示例如下：

function add(a,b){
    return a+b
}
add.call(add,1,2) //3
add.apply(add,[1,2]) //3

bind方法将返回一个新的函数，当新函数被调用时 this 值绑定到 bind() 的第一个参数

x = 9
var f = {
  x: 81,
  getX: function() { 
    return this.x
    }
}
f.getX() //81
var obj = f.getX
obj() //9  将obj()改下为下面的代码
obj.call(undefined) //9 因为创建了全局变量x，此时this指向的是window，所以返回值是9
obj = f.getX.bind(f)
obj() //81 使用bing绑定了this的作用域，再调用obj()返回81

HTTP状态码

参考HTTP状态码详解

请写出一个 HTTP post 请求的内容，包括四部分。
其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path

 POST /path HTTP/1.1
 Host: www.baidu.com
 User-Agent: curl/7.55.0
 Accept: */*
 Content-Length: 24
 Content-Type: application/x-www-form-urlencoded

username=ff&password=123

常见排序算法思路

参考此处

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

输入URL之后：
1.域名解析：

浏览器缓存：先查找浏览器缓存，查询是否有该域名对应的IP。
系统缓存：如果浏览器缓存没有对应ip，则从HostS文件查找是否有该域名和对应的IP.
路由器缓存：如果系统缓存也没有，则到路由器缓存查找
ISP DNS缓存：
如果以上都没有找到，则到根域名服务器查找域名对应的IP。

2.TCP连接：拿到I服务器IP地址之后，开始与服务器建立连接，通信连接过程分为三个过程（三次握手）：

1. 客户端：我要连接你了，可以吗。
1. 服务端：嗯，我准备好了，连接我吧。
1. 客户端：那我连接你咯。
1. 开始后面步骤

3.浏览器发出请求，服务器响应请求
4.浏览器处理请求

浏览器根据HTML和CSS计算得到的渲染树，绘制在屏幕上，JS会被执行。

5连接结束

如何实现数组去重？

要求：
1.不要做多重循环，只能遍历一次
2.请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行（提示 ES 6 环境多了一个 Set 对象）
ES5:

function unique(arr){
    var temp_arr = []
    var hash = {}
    for(let i = 0; i < arr.length; i++){
        if(hash[arr[i]] === undefined){
            temp_arr.push(arr[i])
            hash[arr[i]] = true
        }
    }
    return temp_arr
}

ES6:

function unique(arr){
    return [...new Set(arr)]
}

总结