css:
1:display:none 和 visibility:hidden 的区别:
都是隐藏,一个占位,一个不占位
2:伪类一个:和两个::的区别 :
一个冒号是伪类,两个是伪元素
3:css选择器有哪些:
1. id选择器( # myid)
2. 类选择器(.myclassname)
3. 标签(元素)选择器(div, h1, p)
4. 相邻选择器(h1 + p)
5. 子选择器(ul > li)
6. 后代选择器(li a)
7. 通配符选择器( * )
8. 属性选择器(a[rel = "external"])
9. 伪类选择器(a:hover, li:nth-child)
4:div span p 都是属于什么选择器:
标签选择器
5:如何用css实现一个三角形?
6:如何用css实现垂直居中?
7:如何做到响应式布局?什么是响应式布局?
- 什么是响应式布局?
- 1、同一页面在不同大小和比例上看起来都应该是舒适的
- 2、同一页面在不同分辨率上看起来都应该是合理的
- 3、同一页面在不同操作方式(如鼠标和触屏)下,体验应该是统一的
- 4、同一页面在不同类型的设备(手机、平板、电脑)上,交互方式应该是符合习惯的。
- 如何做到响应式布局?
- 1、可伸缩的内容区块:内容区块的在一定程度上能够自动调整,以确保填满整个页面
- 2、可自由排布的内容区块:当页面尺寸变动较大时,能够减少/增加排布的列数
- 3、适应页面尺寸的边距:到页面尺寸发生更大变化时,区块的边距也应该变化
- 4、能够适应比例变化的图片:对于常见的宽度调整,图片在隐去两侧部分时,依旧保持美观可用
- 5、能够自动隐藏/部分显示的内容:如在电脑上显示的的大段描述文本,在手机上就只能少量显示或全部隐藏
- 6、能自动折叠的导航和菜单:展开还是收起,应该根据页面尺寸来判断
- 7、放弃使用像素作为尺寸单位:用dp尺寸等方法来确保页面在分辨率相差很大的设备上,看起来也能保持一致。同时也要求提供的图片应该比预想的更大,才能适应高分辨率的屏幕
js
8:什么是BFC规范:
块级格式化上下文,
- overflow:hidden 清除浮动。(方方总是用 .clearfix 清除浮动,坚决不用 overflow:hidden 清除浮动)
- overflow:hidden 取消父子 margin 合并。http://jsbin.com/conulod/1/edit?html,css,js,output38(方方用 padding-top: 1px;)
9:节流和防抖:
我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频繁触发事件,咋办呢?这时候就应该用到函数防抖和函数节流了!
- 函数防抖(debounce)
短时间内多次触发同一事件,只执行最后一次,或者只执行最开始的一次,中间的不执行。
- 节流(throttle)
指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次... 。节流如字面意思,会稀释函数的执行频率
10:同源策略:
协议相同,端口相同,域名相同
11:new一个对象的过程发生了什么?
1、创建一个新对象,如:var person = {};
2、新对象的_proto_属性指向构造函数的原型对象。
3、将构造函数的作用域赋值给新对象。(也所以this对象指向新对象)
4、执行构造函数内部的代码,将属性添加给person中的this对象。
5、返回新对象person。
12:js的事件委托和事件代理?
- 假设父元素有4个儿子,我不监听4个儿子,而是监听父元素,看触发事件的元素是哪个儿子,这就是事件委托。
- 可以监听还没有出生的儿子(动态生成的元素)。省监听器。
13:js事件捕获和事件冒泡?
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。
14:闭包是什么,哪里用到了?
闭包就是函数外部能访问到函数内部的变量
- 1:通过闭包可以在setTimeout中实现传参效果.
- 2:作为回调绑定到事件中
15:JS中substr与substring的区别?
js中substr和substring都是截取字符串中子串,非常相近,可以有一个或两个参数。
语法:substr(start [,length]) 第一个字符的索引是0,start必选 length可选
substring(start [, end]) 第一个字符的索引是0,start必选 end可选
相同点:当有一个参数时,两者的功能是一样的,返回从start指定的位置直到字符串结束的子串
16:原型和原型链?
每个对象都有__proto__内置属性.而这个内置属性等于构造函数的原型对象prototype.
原型和原型链是JS实现继承的一种模型.
__proto__ (内置属性)一层一层的指向就可以被称为原型链。
原型链的形成是靠内置属性而不是原型对象.原型链存在于实例与构造函数的原型对象直接,而不是存在于实例与构造函数之间.
17:js splice,slice,split区别
splice()方法向/从数组中添加/删除项目,然后返回被删除的项目。slice()
方法可从已有的数组中返回选定的元素。 slice()
方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
可以作用在数组和字符串上split()
方法用于把一个字符串分割成字符串数组。
提示: 如果把空字符串 (“”) 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
18:js 基础类型和复杂类型?
string number bool undefined null object symbol
object 包括了数组、函数、正则、日期等对象
一旦出现(数组、函数、正则、日期、NaN)直接0分
react
19:react 在即将销毁的时候可以做什么?
取消监听事件等
20:react16 生命周期?
- 初始化阶段
constructor
构造函数getDefaultProps
props
默认值getInitialState
state
默认值- 挂载阶段
staticgetDerivedStateFromProps(props,state)
render
componentDidMount
- 更新阶段
staticgetDerivedStateFromProps(props,state)
shouldComponentUpdate
render
getSnapshotBeforeUpdate(prevProps,prevState)
componentDidUpdate
- 卸载阶段
componentWillUnmount
- 错误处理
componentDidCatch
21:react 虚拟dom节点?方法?
VirtualDOM,虚拟DOM对象,是 React中的DOM对象。React使用JSX编写虚拟DOM对象,经过Babel编译之后会生成真正的DOM. 然后会将真正的DOM插入(Render)到页面。
- 由于更新 dom 成本昂贵,所以我们通过读取 virtual dom 这个低成本的对象,
- 然后将vitural dom 通过 js 渲染到界面
如果操作 dom 或更新了 dom ,我们可以通过 diff 方法,来对比新旧 virtual dom 后,找出不同地方,然后只更新发生变化的部分。这样来更新 dom 就大大地节省了成本,并且提供良好的用户体验。
22:react setState是同步还是异步?为什么?
既可能是同步的,也可能是异步的。 准确地说,在React内部机制能检测到的地方, setState就是异步的;在React检测不到的地方,例如setInterval,setTimeout里,setState就是同步更新的。
23:react父子 兄弟 传值?
父子通信 props , 子父通信 回调.
兄弟通信 子组件1---》父组件---》子组件2【其中子组件1和2是兄弟组件】
这样兄弟组件就达到了通信的目的。
24:react 如何对列表进行渲染及key的作用?
react会将你数组里面的元素一个个罗列并且渲染出来.
用表达式套数组罗列到页面上的元素,都要为每个元素加上 key 属性,这个 key 必须是每个元素唯一的标识。key可以在DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。所以需要给数组每一个元素增加一个唯一的标识。
25:w3c标准?
W3C标准不是一个标准,而是一系列标准的集合,包含三部分的标准:
1.结构标准,代表语言是xHTML
2.表现标准,代表语言是CSS
3.动作标准,代表语言是JavaScrip
具体规范
26:从输入 URL 到页面展现中间发生了什么?
- DNS 查询 DNS 缓存
- 建立 TCP 连接(三次握手)连接复用
- 发送 HTTP 请求(请求的四部分)
后台处理请求
- 监听 80 端口
- 路由
- 渲染 HTML 模板
- 生成响应
- 发送 HTTP 响应
- 关闭 TCP 连接(四次挥手)
- 解析 HTML
- 下载 CSS(缓存
- 解析 CSS
- 下载 JS(缓存
- 解析 JS
- 下载图片
- 解析图片
- 渲染 DOM 树
- 渲染样式树
- 执行 JS
27:es6 的特性?
28:CSS3新特性?
- CSS3实现圆角(border-radius),阴影(box-shadow),
- 对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
- transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
- 增加了更多的CSS选择器 多背景 rgba
- 在CSS3中唯一引入的伪元素是 ::selection.
- 媒体查询,多栏布局
- border-image
28:promise async await ?
29:常用的设计模式?
单例模式,代理模式, 策略模式,装饰模式, 观察者模式,命令模式,组合模式,简单工厂, 模板方法模式.
30:你怎么理解高内聚,低耦合?
- 耦合:是对模块间关联程度的度量。耦合的强弱取决与模块间接口的复杂性、调用模块的方式以及通过界面传送数据的多少。 模块间的耦合度是指模块之间的依赖关系,包括控制关系、调用关系、数据传递关系。模块间联系越多,其耦合性越强,同时表明其独立性越差。降低模块间的耦合度能减少模块间的影响,防止对某一模块修改所引起的“牵一发动全身”的水波效应,保证系统设计顺利进行。 耦合度就是某模块(类)与其它模块(类)之间的关联、感知和依赖的程度,是衡量代码独立性的一个指标。
- 内聚:故名思议,表示内部间聚集、关联的长度,那么高内聚就是指要高度的聚集和关联。 高内聚是指类与类之间的关系而定,高,意思是他们之间的关系要简单,明了,不要有很强的关系,不然,运行起来就会出问题。一个类的运行影响到其他的类。由于高内聚具备可靠性,可重用性,可读性等优点,模块设计推荐采用高内聚。
高内聚,低耦合的系统具有更好的重用性,维护性,扩展性,可以更高效的完成系统的维护开发,持续的支持业务的发展,而不会成为业务发展的障碍。
31:你知道六大设计原则吗?
- 单一职责原则:一个类值负责一个功能的职责
- 开闭原则:扩展开放,修改关闭。
- 里氏代换原则:使用父类的地方都能使用子类对象
- 依赖倒转原则:针对接口编程,
- 接口隔离原则:针对不同部分用专门接口,不用总接口,需要哪些接口就用哪些接口
- 迪米特法则: 软件实体类,尽量不与其他实体类发生关系相互作用,对外都统一的暴露接口就行了
32:同步队列,宏观队列,微观队列?
- 执行顺序: 先走同步队列,再走异步队列(包含微观任务队列和宏观任务队列)。同步任务结束后,先处理微观任务后处理宏观任务
33: margin:auto与margin: 0 auto;有什么区别
- 1、意思不同。margin:auto=margin:auto auto auto auto,表示上下左右都为auto;margin:0 auto=margin:0 auto 0 auto,表示上下为0,左右为auto;
- 2、居中方式不同。margin:auto表示横竖都居中,margin: 0 auto表示横居中,竖不居中;
margin后面一般会跟4个参数,如margin:1px、1px、1px、1px,分别表示上外边距为1px、右外边距为1px、下外边距为1px、左外边距为1px。
如果后面只写2个参数的话,如margin:1px、2px,则表示上下外边距为都为1px,左右外边距都为2px。
34:react高阶组件怎么理解?如何使用和使用场景.
简单的理解是:高阶组件是参数为组件,返回值为新组件的函数。
高阶组件的两种形式:
- 属性代理(Props Proxy)
可以说是对组件的包裹,在包裹的过程中对被包裹的组件做了点什么(props的处理,把基础组件和其他元素组合),然后返回,这就成了一个高阶组件; 反向继承 (Inheritance Inversion)
可以理解成是组装,和属性代理不同的是,反向继承是继承自基础组件,所有很自然,它可以直接获取基础组件的props,操作基础组件的state。可以通过 反向继承的形式,配合compose(通过一系列的骚操作,实现任意的、多种的、不同的功能模块的组合,用来加强组件。)将携带不同功能模块的高阶组件组装到基础组件上,加强基础组件。
35:如何改变js的this指向.
先简单理解下this的指向:函数中的this是在运行时候决定的,而不是函数定义时,有下列几种情况
- 普通函数调用,此时 this 指向 window
- 构造函数调用, 此时 this 指向 实例对象
- 对象方法调用, 此时 this 指向 该方法所属的对象
- 通过事件绑定的方法, 此时 this 指向 绑定事件的对象
- 定时器函数, 此时 this 指向 window
改变this指向的方法:
call() 方法
- 第一个参数表示要把this指向的新目标,第二个之后的参数其实相当于传参,参数以,隔开 (性能较apply略好)
- 用法:a.call(b,1,2); 表示要把a函数的this指向修改为b的this指向,并且运行a函数,传进去的参数是(1,2)
apply() 方法
- 第一个参数同上,第二个参数接受一个数组,里面也是传参,只是以数组的方式,相当于arguments
- 用法:a.apply(b,[1,2]); 表示要把a函数的this指向修改为b的this指向,并且运行a函数,传进去的参数是(1,2)注意 :即使只有一个参数的话,也要是数组的形式
bind()方法
- bind()创建的是一个新的函数(称为绑定函数),与被调用函数有相同的函数体,当目标函数被调用时this的值绑定到 bind()的第一个参数上
36:react的状态管理.怎么处理多个状态.
最基础的就是使用 redux 来处理.dva
37:redux的使用.
redux就是创建一个store来管理所有状态,触发action来改变store。关于redux的使用场景是非常灵活的,可以结合各种库去用,我用惯了react,用的时候还要配合react-redux。
38:版本兼容.
1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案: css 里增加通配符 * { margin: 0; padding: 0; }
2、IE6双边距问题;在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案:设置display:inline;
3、当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度
解决方案:超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
4、图片默认有间距
解决方案:使用float 为img 布局
5、IE9一下浏览器不能使用opacity
解决方案:
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
6、边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;
解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;
7、cursor:hand 显示手型在safari 上不支持
解决方案:统一使用 cursor:pointer
8、两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ;且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;
解决方案:父级元素设置position:relative
39:如何用promise同时发送多个请求. 异步变同步
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。
Promse.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示,在此之前只显示loading图标。
Promse.race就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。
Promise.prototype.then()方法返回的是一个新的Promise对象,因此可以采用链式写法,即一个then后面再调用另一个then。如果前一个回调函数返回的是一个Promise对象,此时后一个回调函数会等待第一个Promise对象有了结果,才会进一步调用。
40:如何用js创建一个类.
方式1 : var obj = new Object();
方式2 : var obj = {};
41:实现onclick事件有几种方法?
- 通过点击事件
- 通过方法响应点击事件
- 监听点击事件
42:说出下列代码的执行顺序?
console.log(1);
setTimeout(function(){
console.log(2);
},0)
new Promise(resolve => {
console.log(3);
}).then(function(){
console.log(4);
});
console.log(5)
考的点:
- Promise.resolve方法返回一个promise的实例,是直接执行的
- 队列执行顺序,先同步,再微观,再宏观
- setTimeout属于宏观队列
- pomise的then是微任务
运行结果为:13542
43:说出下列代码的运行结果?
function O (age) {
this.age = age;
}
var o = new O(1);
var age = 3;
O.prototype.age = 2;
setTimeout(function () {
age = 4;
O(5);
console.log(o.age, age)
}, 1000)
运行结果为1,5
44:js的深拷贝和浅拷贝的区别
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。
深拷贝的实现:
- 采用递归去拷贝所有层级属性
- 通过JSON对象来实现深拷贝
- 如果对象的value是基本类型的话,也可以用Object.assign来实现深拷贝,但是要把它赋值给一个空对象
浅拷贝的实现:
- Object.assign方法
- 直接用=赋值
45:有状态组件和无状态组件
有状态组件:
- 它属于一个class类
- 有继承
- 可以通过this来接收状态和属性
- 如果你想用react的生命周期,想对一些数据进行增删改查的话就要用到有状态组件
无状态组件:
- 是一个函数
- 没有继承功能
- 也没有生命周期
- 他的动态数据都是通过父组件传值子组件通过props接收渲染
- 针对一些简单的逻辑判断等等,选 用无状态组件
46.JS的typeof返回哪些数据类型?
string、number、object、boolean、function、undefined
47:并发和并行的区别
- 解释一:并行是指两个或者多个事件在同一时刻发生;而并发是指两个或多个事件在同一时间间隔发生。
- 解释二:并行是在不同实体上的多个事件,并发是在同一实体上的多个事件。
- 解释三:并发是在多台处理器上同时处理多个任务。如 hadoop 分布式集群,并行是在一台处理器上"同时"处理多个任务。
48:let var const定义变量的区别?
let
- 所声明的变量只在let命令所在的代码块内有效。(块级作用域)
- 不存在变量提升
- 存在暂时性死区
const
- 声明一个只读的常量
- 一旦声明,常量的值就不能改变
const
一旦声明变量,就必须立即初始化,不能留到以后赋值。const
的作用域与let
命令相同:只在声明所在的块级作用域内有效。
var
- 在函数作用域或全局作用域中通过var声明的变量,都会被当成在当前作用域顶部声明的变量,这就是变量提升机制
48:JS原生3种绑定事件?
// 1. 在标签中直接绑定
// 2. 在js事件中获取dom事件绑定
document.getElementById('btn').onclick=handleClick();
// 3. 事件监听addEventListener
elementDOM.addEventListener(eventName,handle,useCapture);