总结
移动端是怎么做适配的?
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 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地址之后,开始与服务器建立连接,通信连接过程分为三个过程(三次握手):
- 客户端:我要连接你了,可以吗。
- 服务端:嗯,我准备好了,连接我吧。
- 客户端:那我连接你咯。
- 开始后面步骤
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)]
}
上一篇: 社会生活中的幽默与哲理。