CSS
1 盒模型
页面渲染时,dom 元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为:
content-box (W3C 标准盒模型)
border-box (IE 盒模型)
padding-box
margin-box (浏览器未实现)
- 居中布局
水平居中
行内元素: text-align: center
块级元素: margin: 0 auto
absolute + transform
flex + justify-content: center
垂直居中
line-height: height
absolute + transform
flex + align-items: center
table
水平垂直居中
absolute + transform
flex + justify-content + align-items - 选择器优先级
!important > 行内样式 > #id > .class > tag > * > 继承 > 默认
选择器 从右往左 解析
6.去除浮动影响,防止父级高度塌陷
通过增加尾元素清除浮动
:after /
: clear: both
创建父级 BFC
父级设置高度
JavaScript
问题一:原始类型有哪几种?null 是对象嘛?
在 JS 中,存在着 6 种原始值,分别是:
boolean
null
undefined
number
string
symbol
问题一:对象类型和基本类型的不同之处?
对象类型和原始类型不同的是,原始类型存储的是值,对象类型存储的是地址(指针)
问题一:下面的输出结果?
typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function
下面的计算结果
1 + '1' // '11'
true + true // 2
4 + [1,2,3] // "41,2,3"
4 * '3' // 12
4 * [] // 0
4 * [1, 2] // NaN
问题一:== 和 === 有什么区别?
对于==来说,如果对比双方的类型不一样的话,就会进行类型转换
问题一:什么是浅拷贝?如何实现浅拷贝?什么是深拷贝?如何实现深拷贝?
浅拷贝
首先可以通过Object.assign来解决这个问题,很多人认为这个函数是用来深拷贝的。其实并不是,Object.assign只会拷贝所有的属性值到新的对象中,如果属性值是对象的话,拷贝的是地址
深拷贝
常用方法 JSON.parse(JSON.stringify(object))
局限性的:
会忽略undefined
会忽略symbol
不能序列化函数
不能解决循环引用的对象
Es6中箭头函数与普通函数的区别?
1.普通function的声明在变量提升中是最高的,箭头函数没有函数提升�2.箭头函数没有this,arguments�3.箭头函数不能作为构造函数,不能被new,没有property,�4.call和apply方法只有参数,没有作用域
什么是闭包?闭包有什么危害?如何解决闭包带来的危害?
简单来说,闭包就是一个定义在函数内部的函数。因为js中存在作用域的问题,所以在函数内部定义的变量在函数外部是没有办法直接获取到。而闭包就是沟通函数内部和外部的桥梁,这样在函数外部接可以得到函数内部的值。并且闭包可以实现函数属性和方法的私有化。
闭包的危害:
因为闭包会将内部变量储存在内存中,如果长时间不清除的话会造成内存泄漏的问题,影响程序的性能。
解决方法:对于不使用的变量及时的清除。
React-dva
app.model()用法
接受一个对象,把state、reducers、effects全部写在这,便于维护。
React 中 keys 的作用是什么?
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
调用 setState 之后发生了什么?
在代码中调用 setState 函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation)。经过调和过程,React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染。在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。
react 生命周期函数
初始化阶段:
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount:组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后
运行中状态:
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新
销毁阶段:
componentWillUnmount:组件即将销毁
为什么虚拟 dom 会提高性能?(必考)
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能。
用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了。
- 为什么浏览器无法读取JSX?
浏览器只能处理 JavaScript 对象,而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX,首先,需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象,然后再将其传给浏览器。 - 怎样解释 React 中 render() 的目的。
每个React组件强制要求必须有一个 render()。它返回一个 React 元素,是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素,则必须将它们组合在一个封闭标记内,例如 <form>、<group>、<div> 等。此函数必须保持纯净,即必须每次调用时都返回相同的结果。
什么是 Props?
Props 是 React 中属性的简写。它们是只读组件,必须保持纯,即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流,通常用于呈现动态生成的数据。
React 中 refs 的作用是什么?
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回
应该在 React 组件的何处发起 Ajax 请求
在 React 组件中,应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行,在组件的生命周期中仅会执行一次。更重要的是,你不能保证在组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试在一个未挂载的组件上调用 setState,这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
介绍redux
redux 是一个应用数据流框架,主要是解决了组件间状态共享的问题,原理是集中式管理,主要有三个核心方法,action,store,reducer,工作流程是 view 调用 store 的 dispatch 接收 action 传入 store,reducer 进行 state 操作,view 通过 store 提供的 getState 获取最新的数据,flux 也是用来进行数据操作的,有四个组成部分 action,dispatch,view,store,工作流程是 view 发出一个 action,派发器接收 action,让 store 进行数据更新,更新完成以后 store 发出 change,view 接受 change 更新视图。Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store,在 Flux 中 dispatcher 被用来传递数据到注册的回调事件,但是在 redux 中只能定义一个可更新状态的 store,redux 把 store 和 Dispatcher 合并,结构更加简单清晰
新增 state,对状态的管理更加明确,通过 redux,流程更加规范了,减少手动编码量,提高了编码效率,同时缺点时当数据更新时有时候组件不需要,但是也要重新绘制,有些影响效率。一般情况下,我们在构建多交互,多数据流的复杂项目应用时才会使用它们
redux 有什么缺点
一个组件所需要的数据,必须由父组件传过来,而不能像 flux 中直接从 store 取。
当一个组件相关数据更新时,即使父组件不需要用到这个组件,父组件还是会重新 render,可能会有效率影响,或者需要写复杂的 shouldComponentUpdate 进行判断。
- 解释 Reducer 的作用。
Reducers 是纯函数,它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作,然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新,然后返回新的值。如果不需要完成任务,它会返回原来的状态。
代码题
数组去重
// 方法一
var norepeat = funtion(arr){
return arr.filter(function(val, index, array){
return array.indexOf(val) === index;
});
}
norepeat()
// 方法二
var set = new Set(arr);
JavaScript中如何对一个对象进行深度clone
方法一:
function deepClone(obj){
var str = JSON.sringify(obj);
var newobj = JSON.parse(str);
return newobj;
}
方法二:
//深克隆
function deepClone(obj){
if (!obj) { return obj; }
var o = obj instanceof Array ? [] : {};
for(var k in obj){
if(obj.hasOwnProperty(k)){
o[k] = typeof obj[k] === "object" ? deepClone(obj[k]) : obj[k];
}
}
return o;
}