前端知识每日小拷问 003 跨域和事件模型相关

前端知识每日小拷问 003

---

准备接收大前端形法的考验吧！？每日5题，直击你的内心 ~~

今天的前端知识点有如下：

• 处理跨域的几种方式？
• 如何压缩CSS，JS代码？
• get和post的区别？
• 什么是事件模型？对事件模型的理解？
• 如何编写一个元素拖拽的插件?
• 仓库地址：https://github.com/RiversCoder/fontend-question-ten-everyday

1. 处理跨域的几种方式？

浏览器配置

• jsonp跨域，优点：浏览器支持广泛，方便快捷 缺点：只支持get请求，不支持https
• iframe请求，访问iframe加载出的内容，缺点：只适用于顶级域名相同的情况
• window.name 跨域 好用，推荐；缺点：只适用于两个iframe之间的跨域； 参考文档：https://www.cnblogs.com/zhuzhenwei918/p/7403796.html
• h5新特性postMessage 通信， 好用，推荐；缺点：不能和服务器交换数据，只能在两个窗口（iframe）之间交换数据；

** 第三方配置 **

• 后台服务配置允许跨域，例如node.js
• 客户端配置代理，例如：nginx，node.js 等
• webSocket协议跨域，参考文档：https://www.cnblogs.com/goeasycloud/p/9389360.html

参考文档

• 跨域的详解请参考文档：https://blog.csdn.net/weixin_30363263/article/details/81587025

2. 如何压缩CSS，JS代码？

gulp

• 使用gulp-uglify压缩javascript
• 使用gulp-clean-css压缩css

webpack

• 使用uglifyjs-webpack-plugin压缩js
• 使用mini-css-extract-plugin抽离压缩css

3. get和post的区别？

功能上：

• get -> 拉取数据，post -> 推送数据

使用上

• get参数特点：地址栏明文可见，长度限制，可缓存，安全性低；
• post参数特点：采用send发送数据，无长度限制，不可缓存，安全性高；

详细文档
https://blog.csdn.net/m_nanle_xiaobudiu/article/details/81063997

4. 什么是事件模型？对事件模型的理解？

事件模型种类

• 原始事件模型(DOM0级)、DOM2事件模型、IE事件模型

原始事件模型

• 描述：标签绑定事件
• 优点：兼容所有浏览器
• 缺点： 逻辑结构未分离；单独绑定，后面覆盖前面的绑定；不支持事件委托、冒泡等

DOM2事件模型

• 描述：W3C标准模型，现代浏览器所支持；一次事件发生包含三个过程：（1）事件捕获（2）事件目标（3）事件冒泡
  
• 阻止事件传播：（1）stopPropagation() （2）IE下使用cancelBubble=true
• 绑定事件：addEventListener("eventType","handler","true|false"); 注意eventType不需要on

IE事件模型

• 描述：IE把事件作为全局对象window的一个属性
• 事件传播：（1）先执行元素的监听函数（2）然后事件沿着父节点一直冒泡到document
• 事件监听：（1）绑定attachEvent( "eventType","handler")（2）解除detachEvent("eventType","handler" )（3）注意eventType需要加上on

详细文档
https://www.cnblogs.com/leftJS/p/11068426.html

5. 如何编写一个元素拖拽的插件?

• 实现的核心要素*

• 获取当前元素相对于窗口文档的偏移量

• 鼠标按下元素的时候获取相对元素的偏移量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
        }
    }
}