准备接收大前端形法的考验吧!?每日5题,直击你的心里 ~~javascript
今天的前端知识点有以下:css
- 处理跨域的几种方式?
浏览器配置html
jsonp
跨域,优势:浏览器支持普遍,方便快捷 缺点:只支持get
请求,不支持https
iframe
请求,访问iframe
加载出的内容,缺点:只适用于顶级域名相同的状况window.name
跨域 好用,推荐;缺点:只适用于两个iframe
之间的跨域; 参考文档:https://www.cnblogs.com/zhuzhenwei918/p/7403796.htmlh5
新特性postMessage
通讯, 好用,推荐;缺点:不能和服务器交换数据,只能在两个窗口(iframe
)之间交换数据;** 第三方配置 **前端
node.js
nginx
,node.js
等webSocket
协议跨域,参考文档:http://www.javashuo.com/article/p-rfllblpd-bm.html参考文档java
- 如何压缩CSS,JS代码?
gulpnode
gulp-uglify
压缩javascript
gulp-clean-css
压缩css
webpackwebpack
uglifyjs-webpack-plugin
压缩jsmini-css-extract-plugin
抽离压缩css
- get和post的区别?
功能上:nginx
get
-> 拉取数据,post
-> 推送数据使用上git
get
参数特色:地址栏明文可见,长度限制,可缓存,安全性低;post
参数特色:采用send
发送数据,无长度限制,不可缓存,安全性高;详细文档
http://www.javashuo.com/article/p-xikguwmj-kg.htmlgithub
- 什么是事件模型?对事件模型的理解?
事件模型种类
DOM0
级)、DOM2
事件模型、IE
事件模型原始事件模型
DOM2事件模型
W3C
标准模型,现代浏览器所支持;一次事件发生包含三个过程:(1)事件捕获(2)事件目标(3)事件冒泡stopPropagation()
(2)IE
下使用cancelBubble=true
addEventListener("eventType","handler","true|false");
注意eventType
不须要on
IE事件模型
IE
把事件做为全局对象window
的一个属性document
attachEvent( "eventType","handler")
(2)解除detachEvent("eventType","handler" )
(3)注意eventType
须要加上on
详细文档
https://www.cnblogs.com/leftJS/p/11068426.html
- 如何编写一个元素拖拽的插件?
实现的核心要素*
获取当前元素相对于窗口文档的偏移量
鼠标按下元素的时候获取相对元素的偏移量offsetX
和offsetY
鼠标移动时,监听document
下的clientX
与clientY
,减去点击时的偏移量,便是当前元素的left
和top
的值
module.exports = (dom) => { let startX = dom.getBoundingClientRect().left let startY = dom.getBoundingClientRect().top dom.onmousedown = function(ev){ let offsetX = ev.offsetX let offsetY = ev.offsetY document.onmousemove = function(ev){ dom.style.left = (ev.clientX - offsetX) + 'px' dom.style.top = (ev.clientY - offsetY) + 'px' } document.onmouseup = function(ev){ document.onmouseup = dom.onmouseup = null document.onmousemove = null } } }