美团点评:
1、简单介绍css盒模型 链接:https://www.cnblogs.com/chengzp/p/cssbox.html
盒模型的组成:content、padding、border、margin
标准以及设置方法:
1⃣️标准模型:盒模型的宽高=内容(content)的宽高
/*标准模型*/
box-sizing:content-box;
2⃣️IE模型:盒模型的宽高=内容(content)+内边距(padding)+边框(border)的总宽高
/*IE模型*/
box-sizing:border-box;
2、什么情况会引起边距重叠,应该怎么解决?
1⃣️父元素没有设置 margin,子元素设置了
2⃣️两个块级元素垂直方向的margin会发生重叠
解决:BFC----Block Formatting Context 块级格式化上下文
BFC是一个页面上的独立的容器,外面的元素不会影响BFC里的元素,反过来,里面也不会影响外面的。
如何创建BFC:
(1)float属性不为none(脱离文档流)
(2)position=absolute/fixed
(3)display = inline-block/inline-flex/table-cell
(4)overflow不为visible
(5)根元素
用途:
(1)自适应两栏布局
(2)清除内部浮动
(3)防止垂直margin重叠----->添加父元素 设置overflow:hidden即可
3、CommonJS,AMD,CMD异同 链接:https://www.cnblogs.com/chenguangliang/p/5856701.html
前端模块规范有三种:CommonJs,AMD和CMD。
CommonJs用在服务器端,AMD和CMD用在浏览器环境
AMD(异步模块定义) 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD:提前执行(异步加载:依赖先执行)+延迟执行
CMD:延迟执行(运行到需加载,根据顺序执行)
在CommonJS中,有一个全局性方法require(),用于加载模块。
CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。
AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:
require([module], callback);
第一个参数[module],是一个数组,里面的成员就是要加载的模块;第二个参数callback,则是加载成功之后的回调函数。
CMDvsAMD:https://github.com/seajs/seajs/issues/277
4、内存空间:链接:https://www.jianshu.com/p/996671d4dcc4
5、执行上下文:https://www.jianshu.com/p/a6d37c77e8db
6、作用域链和闭包:
作用域包括:全局和函数作用域
7、Flex了解吗?
弹性布局:使用弹性布局可以有效的分配一个容器的空间
即使我们的容器元素尺寸改变
它内部的元素也可以调整它的尺寸来适应空间
弹性盒布局“容器”有如下属性
- flex-flow:flex-direction,flex-wrap
- justify-content
- align-items
- align-content
flex-direction
使用flex-direction指定主轴的方向,从而改变项目的排列方向
属性值:
- row(默认)
- row-reverse
- column
- column-reverse
flex-wrap
弹性盒的项目默认都是排列在一个轴上的
这样如果项目多的话,会“弹性”压缩在一行
flex-wrap: wrap可以让我们指定当容器“装不下”项目时,是否换行
属性值如下:
- no-wrap
- wrap
- wrap-reverse
flex-flow
flex-flow是flex-direction和flex-wrap的复合属性
两个属性都是必写的
justify-content
justify-content属性定义了项目在主轴上的对齐方式
属性值如下:
- flex-start:左对齐(默认)
- flex-end:右对齐
- center:居中
- space-between:两端对齐(项目间间隔相同)
- space-around:两端间隔对齐(项目间间隔是项目与边框间隔的2倍)
align-items
align-items属性定义项目在交叉轴上如何对齐
属性值如下:
- stretch:未设置高度(或height: auto)的项目占满整个容器高度(默认)
- flex-start :交叉轴起点对齐
- flex-end:交叉轴终点对齐
- center:交叉轴中点对齐
- baseline:项目第一行文字的基线对齐
align-content
align-content属性定义多根轴线的对齐方式
这个属性只有在容器有多条主轴是才有效,一条主轴无效
类似于justify-content属性
属性值如下:
- stretch:轴线占满整个交叉轴(默认值)
- flex-start:与交叉轴的起点对齐
- flex-end:与交叉轴的终点对齐
- center:与交叉轴的中点对齐
- space-between:与交叉轴两端对齐,轴线间间隔相等
- space-around:每根轴线两侧的间隔都相等
8、ES6知道些什么?
1、let和const
我们通常用 let
和 const
来声明,let
表示变量、const
表示常量。let
和 const
都是块级作用域。怎么理解这个块级作用域?
- 在一个函数内部
- 在一个代码块内部
说白了只要在{}花括号内的代码块即可以认为
let
和const
的作用域。
let
的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。
再来说说 const
const
声明的变量必须提供一个值,而且会被认为是常量,意思就是它的值被设置完成后就不能再修改了。
2、字符串 https://www.jianshu.com/p/287e0bb867ae
第一个用途,基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//ES5
var name = 'lux'
console.log('hello' + name)
//es6
const name = 'lux'
console.log(`hello ${name}`) //hello lux
第二个用途,在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
// ES5
var msg = "Hi \
man!
"
// ES6
const template = `<div>
<span>hello world</span>
</div>`
3、函数
(1)函数默认参数
(2)箭头函数
箭头函数最直观的三个特点。
- 不需要
function
关键字来创建函数 - 省略
return
关键字 - 继承当前上下文的
this
关键字//例如: [1,2,3].map(x => x + 1) //等同于: [1,2,3].map((function(x){ return x + 1 }).bind(this))
当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return;例如:
var people = name => 'hello' + name
//参数name就没有括号
4、Spread Operator 展开运算符 记作:‘...’
(1)组装对象或是数组
//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
(2)想获取数组或者对象除了前几项或者除了某几项的其他项
//数组
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//对象
const user = {
username: 'lux',
gender: 'female',
age: 19,
address: 'peking'
}
const { username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"
(3)对于 Object 而言,还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名,右边覆盖左边
const first = {
a: 1,
b: 2,
c: 6,
}
const second = {
c: 3,
d: 4
}
const total = { ...first, ...second }
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }
5、import 和 export
import导入模块、export导出模块
6、promise
Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示。简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作。
它有两个参数resolve
和reject
。它内部通常有一些异步操作,如果异步操作成功,则可以调用resolve()来将该实例的状态置为fulfilled
,即已完成的,如果一旦失败,可以调用reject()来将该实例的状态置为rejected
,即失败的。
我们可以把Promise对象看成是一条工厂的流水线,对于流水线来说,从它的工作职能上看,它只有三种状态,一个是初始状态(刚开机的时候),一个是加工产品成功,一个是加工产品失败(出现了某些故障)。同样对于Promise对象来说,它也有三种状态:
pending
初始状态,也称为未定状态,就是初始化Promise时,调用executor执行器函数后的状态。fulfilled
完成状态,意味着异步操作成功。rejected
失败状态,意味着异步操作失败。
它只有两种状态可以转化,即
- 操作成功
pending -> fulfilled - 操作失败
pending -> rejected
并且这个状态转化是单向的,不可逆转,已经确定的状态(fulfilled/rejected)无法转回初始状态(pending)。
方法
Promise.prototype.then()
Promise对象含有then方法,then()调用后返回一个Promise对象,意味着实例化后的Promise对象可以进行链式调用,而且这个then()方法可以接收两个函数,一个是处理成功后的函数,一个是处理错误结果的函数。
Promise.prototype.catch()
catch()方法和then()方法一样,都会返回一个新的Promise对象,它主要用于捕获异步操作时出现的异常。因此,我们通常省略then()方法的第二个参数,把错误处理控制权转交给其后面的catch()函数。
Promise.all()
Promise.all()接收一个参数,它必须是可以迭代的,比如数组。
它通常用来处理一些并发的异步操作,即它们的结果互不干扰,但是又需要异步执行。它最终只有两种状态:成功或者失败。
它的状态受参数内各个值的状态影响,即里面状态全部为fulfilled
时,它才会变成fulfilled
,否则变成rejected
。
成功调用后返回一个数组,数组的值是有序的,即按照传入参数的数组的值操作后返回的结果。
Promise.race()
Promise.race()和Promise.all()类似,都接收一个可以迭代的参数,但是不同之处是Promise.race()的状态变化不是全部受参数内的状态影响,一旦参数内有一个值的状态发生的改变,那么该Promise的状态就是改变的状态。就跟race
单词的字面意思一样,谁跑的快谁赢
Promise.resolve()
Promise.resolve()接受一个参数值,可以是普通的值
,具有then()方法的对象
和Promise实例
。正常情况下,它返回一个Promise对象,状态为fulfilled
。但是,当解析时发生错误时,返回的Promise对象将会置为rejected
态。
Promise.reject()
Promise.reject()和Promise.resolve()正好相反,它接收一个参数值reason
,即发生异常的原因。此时返回的Promise对象将会置为rejected
态。
9、vuex和route?
10、v-if和v-show区别?
11、垂直居中有几种方式?
(1)父元素设置position=relative; 子元素设置position=absolute;left = 50%,top=50%
(2)父元素:position:relative; 子元素:position:absolute;top: 50%; transform: translate(0, -50%);
(3)第一种弹性布局:父元素:display:flex;flex-direction:column; justify-content: center;
(4)第二种弹性布局:父元素:display:flex;align-items:center;