Coding前端整理
LiemeHTML
1.为什么HTML5 不需要写那么长得声明?
1
| 因为 Html5 不是基于SGML的,所以不需要写dtd声明,但是需要写doctype来规范浏览器的行为
|
2.HTML5新增了哪些标签?
1
| header,footer,nav,article,section等
|
3.cookie,localStorage,sessionStorage的区别?
1 2 3 4 5 6
| 区别,cookie 是用于和服务端通信,其他两个则不会
cookie 有大小限制相对于其他两个
localStorage 数据永远存储,除非你主动删除 sessionStorage 数据在浏览器关闭之前一直存在
|
4.行内元素,快元素,空元素有哪些?
1 2 3
| 行内元素:span,b,em,a,img 块元素: p,div,h1,ul,ol,dt 空元素: img,input
|
5.Canvas,Svg有什么区别?
1 2
| canvas 绘制后是一个dom 放大 会失真, svg 是由多个dom节点组成,可以由js操作
|
6.页面导入样式得时候,link 和 import 有什么区别?
1 2 3
| link 是 xthml 标签,除了可以加载css 还可以加载其他事务,import 只能用于加载css
link 方式得样式 优先级高于import
|
7.对浏览器内核得理解?
1 2 3 4
| 分为 渲染引擎 和 js 引擎
渲染引擎负责取的网页内容,整理讯息,以及计算网页得显示方式。 js引擎负责 执行JavaScript 实现网页动态效果
|
8.HTML语义化理解?
1
| 用正确得标签做正确得事,就是在网络加载错误,css么有加载得情况下,也能让网页所表达得意思被用户知道
|
9.Html离线存储?
1
| 在浏览器得html头部加上manifest 属性,如果是第一次访问浏览器会根据manifest 得内容进行下载存储离线内容,如果已经访问过则从离线存储中进行加载,然后在比对服务器 如果有新内容在更新离线存储
|
10.浏览器输入地址,到页面显示得过程?
1
| 首先 从DNS解析域名 获取ip地址,根据ip地址 找到服务器,服务器根据地址请求 返回页面相关数据,浏览器获取到数据进行页面加载渲染页面
|
- html 状态码
1 2 3 4 5
| 100:信息状态码 200:成功状态码 300:重定向 400:客户端错误 500:服务器错误
|
CSS
- 盒子模型
1 2
| 标准:content + padding border margin IE:content padding border + margin
|
- CSS 多行文本垂直居中
1 2 3 4 5 6 7 8
| 子元素: display: table-cell; vertical-align: middle; 子元素必须为行内元素
还可以用定位得方法 display:flex transfrom 等
|
3.display:none 和 visibility:hidden 得区别
1 2
| 前者dom 会从dom 树中消失 后者不会 前者会造成页面回流,后者会触发重绘
|
4.如何避免margin 重叠
1 2 3 4 5 6 7
| 外层元素padding代替 内层元素透明边框 border:1px solid transparent; 内层元素绝对定位 postion:absolute: 外层元素 overflow:hidden; 内层元素 加float:left;或display:inline-block; 内层元素padding:1px;
|
5.css设置垂直居中方法
1 2 3 4 5 6 7 8 9
| 1.定位: position:absolute; left:50%; top:50%: margin-left:-元素宽度; margin-top:-元素高度
2、transform:translate(-50%,-50%) 3、display:flex
|
6.CSS3有哪些新特性
1 2 3 4 5 6 7
| text-shadow border-radius text-decoration box-shadow transform animation 等
|
7.css 绘制三角形
1 2 3 4 5 6 7
| 利用border 将border得三边设置透明 例如: width:0; height:0; border-width:20px; border-style:solid; border-color:transparent transparent transparent red
|
8.box-sizing
1 2 3
| content-box 默认盒子模型 border-box 怪异盒子模型,设置 border padding 会计算在总宽度之内 例如 200 * 200 设置 padding: 10; border:1px; 则实际盒子可使用大小未179*179 box-sizing 继承父元素
|
9.css有哪些可以继承和不可继承得属性
1 2
| 继承:font系列 color cursor 不继承:width,height,padding,margin,border,background
|
10.隐藏元素得方法
1 2 3 4 5 6
| 1. display:none; 2. opacity:0; 3. visibility:hidden; 4. position:absolute;left:-999999; 5. transfrom:scale(0) 6. height:0
|
11.rgba 和 opacity
1 2
| rgba 作用于元素自身,子元素不会继承 opacity 作用于自身和子元素,包括文字
|
- em px rem 区别
1 2 3
| em 相对于 其父元素字体大小变化 rem 相对于html字体大小 px 固定大小
|
13.BFC
1 2 3 4 5 6
| 决定了元素如何对其内容进行定位,以及与其他元素得关系和相互作用
float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible
|
JavaScript
1.js的基本数据类型
1
| boolean,string,number,undefined,null
|
2.JS有哪些内置对象
1 2
| 数据封装类对象:object,null,boolean,number,string 其他对象: function,arguments,math,date,regexp,error
|
3.js 强制转换类型和隐式转换类型
1 2 3 4 5 6 7 8 9
| 强制转换类型 String(),Number(),Boolean()
隐式转换通常发生在运算符加减乘除,等于,还有小于,大于等。。
例如: console.log(10-'20')//-10 number console.log(10-'one') //NaN not a number console.log(10-'101a') //NaN console.log(10*'20') //200 number
|
4.js 原型 和 原型链
1 2 3 4
| 原型:每个对象都会在其内部初始化一个属性,这个属性就是prototype 就是该对象得原型 原型链:当我们访问一个对象得属性时,如果这个对象内部不存在这个属性,那我们就去prototype 中找这个属性,这个prototype又会有自己得prototype,这样一直找下去 就是我们所说得原型链关系
特点: JavaScript 对象是通过引用来传递得,当修改原型时,与之相关得对象也会继承这一改变。
|
5.如何判断一个变量的类型
6.如何获取一个对象内包含的属性
7.如何阻止冒泡和默认事件?
1 2 3 4 5
| 1.event.stopPropagation()方法
2.event.preventDefault()方法
3.return false ;
|
8.如何进行事件委托
1
| 利用 on 进行绑定,绑定到不会变化得body 或者 需要操作得 不会变动得那一层父元素上
|
9.模拟下拉菜单,如何点击其他空白地方 收起菜单
1 2 3 4 5 6 7 8 9 10
| 可以在body 上绑定事件,进行点击得时候判单 如果不是点击得下拉菜单则将菜单关闭
$('body').on("click",function(e){ var target = $(e.target); if(target.closest("#phone,#first").length == 0){ $("#phone").hide(); $("#phone").attr("value","divm"); }; e.stopPropagation(); })
|
10.js如何进行浮点计算
11.数组得相关操作
1 2 3 4 5 6 7 8 9 10 11
| 1. pop 删除数组最后一个元素 2. push 往数组最后一个插入数据 3. shift 删除数组第一个元素 4. unshift 往数组第一个插入元素 5. concat 连接两个数组 6. join 把所有元素放入一个字符串 7. sort 对数组进行排序 8. reverse 将数组倒序返回 9. slice 从数组返回选定数组 10. splice 删除元素并往数组添加新元素
|
12.浅拷贝和深拷贝
1 2 3 4 5 6 7 8 9 10
| 1. 浅拷贝 相当于复制了一个路径地址,共用得还是一个内存地址,改变复制得元素,源元素也会改变 2.深拷贝 彻底复制,两个内存地址 ,两个相互独立
如何深拷贝
splice jq extend 递归 JSON.stringify(obj), JSON.parse(_obj);
|
13.js如何跨域
1 2 3 4 5 6
| 因为浏览器得同源规则,使得 不同域名,端口,协议,ip 得页面受这个限制
解决方法: 1. JSONP 2. CORS 3. 通过porxy 代码 由服务器来进行转发
|
14.document.load 和 document.ready 得区别
1 2
| 前者在页面所有元素都加载之后才会执行, 后者在页面dom 加载后就执行
|
15.this 的指向问题
1 2 3
| 指向调用它的那个对象 如果有new关键字,this指向new出来得实例对象 在事件中,this 指向触发这个事件得对象
|
16.aplly/call
1 2 3
| 1. 都是调用一个对象的一个方法,用另一个对象替换当前对象 2. apply 最多只能接受两个参数 后一个参数为数组,call 则可以接受多个 3. 实现继承或者转换对象指针
|
17.异步加载js的方法
1 2 3 4
| 1. html5 async:脚本可用就执行 defer: 页面加载完成后才执行 2. iframe 3. ajax eval 4. 动态生成script 插入
|
18.js中有一个函数,执行对象查找时,永远不会去查找原型
19.如何获取字符串中指定部分?
1 2 3 4
| 可以用 1. substring(start,end)// 若有参数为负数则变未0,两个参数选择小得为起始位置,截取得长度为较大和较小之间得差 2. substr(start,length) 3. slice(start,end) // 截取得长度第二个参数减去第一个得差 第一个参数大于第二个 返回空
|
20.js 函数防抖 和 事件节流
1 2
| 函数防抖: 比如说校验手机号码,输入一个校验一次 就比较频繁,可以设置 200毫秒后在校验 事件节流: 比如说有一个操作很频繁得事件,例如滚动监听,我们可以给他一个 阈值,一次 只能执行一次。
|
JQUERY
1.Jq 中如何将数组转换为字符串,然后在转换回来
1 2 3 4 5 6 7 8 9 10
| 可以通过 JSON.stringify 来实现
$.fn.stringifyArray = function(array){ return JSON.stringify(array) } $.fn.parseArray = function(array){ retrun JSON.parse(array) }
$("").stringifyArray(array) 调用
|
2.jquery.extend 和 jquery.fn.extend 得区别
1 2
| 前者 是用于 为jq添加类方法 需要jq类来调用 后者 可以用来编写 jq 扩展方法,以便于其他地方jq实例可以调用
|
3.jq实现原理简单描述
1
| 为了避免声明了一些全局变量而污染,把代码放在一个“沙箱执行”,jQuery具体的实现,都被包含在了一个立即执行函数构造的闭包里面,然后在暴露出命名空间(可以为API,函数,对象)
|
4.针对Jq的优化
1 2 3
| class 得选择性能相对于 id 开销会更大,因为需要遍历所有元素 频繁操作dom 可以先缓存起来 比如: var $li = $("#ul li")
|
5.针对 slideUp 动画,如果目标元素是被外部驱动,当鼠标快速连续触发外部元素,会使得动画执行滞后,怎么处理
6.jq如何处理缓存得
1 2
| post 本身就禁用缓存 get 可以在url 加上随机数 或者 时间戳
|
7.jq 如何加密解密url
1 2
| 加密: encodeURIComponent 解密: decodeURIComponent
|
8.如何禁止浏览器后退
1
| window.history.forward(1)
|
VUE
1.多组件 单页面复用
1
| 可以用 :is 来调用 避免使用 v-if 来判断使用
|
2.vue 双向绑定的原理
1
| vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
|
3.vue-router 有几种导航钩子
1 2 3
| 1. 全局 ruter.beforeEach(to,from,next) 跳转前进行拦截判断 2. 组件内钩子 3. 单独路由独享组件
|
4.vuex状态如何更新以及原理
1 2 3
| 只能通过mutation来进行state的更新, getter 缓存state的值,用于多路径复用 action提交的是一个mutation
|
5.vue-router 实现原理
1 2
| 在地址中加入#已欺骗浏览器,地址的改变由于正在进行页内导航 使用h5 的 window.history 功能,使用 URL 的 hash 来模拟一个完整的 URL
|
6.vue 如何组件通信
1 2 3
| 1. 全局使用 vuex 2. 父子组件之间 props emit 3. 非父子组件之间 on emit
|
7.vue 得getter 和 setter
1 2
| getter 用来获取值 setter 用来赋值触发 upadte 更新
|
8.vue响应式原理
1 2 3
| 1、vue响应式原理就是对你数据的变化,vue会有一个响应,去完成某件事。 2、vue的响应式原理就是基于vue知道了数据发生了变化,那么vue是如何知道数据发生了变化呢? 3、数据劫持 vue.js 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调
|
9.vue中keep-live 的作用
1
| 将组件保留在缓存中,可以保留组件状态,避免重新渲染
|
10.vue 指令 v-el
1
| 将页面已存在得dom元素作为vue实例得挂载目标
|
11.vue 服务的渲染的优缺点
ES6
1.判断是否是一个数组,
1 2
| Array.isArray(); instanceof
|