前端开发中79条不可忽视的知识点汇总 _前端开发

过往一些不足的地方，通过博客，好好总结一下。
1.css禁用鼠标事件
.disabled { pointer-events: none; cursor: default; opacity: 0.6;}复制代码2.get/post的理解和他们之间的区别
http

超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。HTTP 的工作方式是客户机与服务器之间的请求-应答协议。web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

http方法：

HEAD: 与 GET 相同，但只返回 HTTP 报头，不返回文档主体 PUT: 上传指定的 URI 表示 DELETE: 删除指定资源 OPTIONS: 返回服务器支持的 HTTP 方法 CONNECT: 把请求连接转换到透明的 TCP/IP 通道 POST: 向指定的资源提交要被处理的数据

// 查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的POST /test/demo_form.asp HTTP/1.1Host: w3schools.comname1=value1&name2=value2复制代码

GET: 从指定的资源请求数据

GET和POST的区别

GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制(2048字符),IE和Safari浏览器限制2k;Opera限制4k;Firefox，Chrome限制8k GET 请求只应当用于取回数据
POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST 请求对数据长度没有要求

3.实现条纹网格的方式

nth-child(even/odd)

// odd表示基数，此时选中基数行的样式，even表示偶数行.row:nth-child(odd){ background: #eee;}复制代码

nth-of-type(odd)

.row:nth-of-type(odd){ background: #eee;}复制代码

渐变实现linear-gradient

.stripe-bg{ padding: .5em; line-height: 1.5em; background: beige; background-size: auto 3em; background-origin: content-box; background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);}复制代码4.js求平面两点之间的距离
// 数据可以以数组方式存储，也可以是对象方式let a = {x:'6', y:10}, b = {x: 8, y: 20}; function distant(a,b){ let dx = Number(a.x) - Number(b.x) let dy = Number(a.y) - Number(b.y) return Math.pow(dx*dx + dy*dy, .5) }复制代码5.css禁止用户选择
body{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}复制代码6.数组去重
// indexOf实现var array = [1, 1, '1'];function unique(array) { var res = []; for (var i = 0, len = array.length; i < len; i++) { var current = array[i]; if (res.indexOf(current) === -1) { res.push(current) } } return res;}console.log(unique(array));// 排序后去重var array = [1, 1, '1'];function unique(array) { var res = []; var sortedArray = array.concat().sort(); var seen; for (var i = 0, len = sortedArray.length; i < len; i++) { // 如果是第一个元素或者相邻的元素不相同 if (!i || seen !== sortedArray[i]) { res.push(sortedArray[i]) } seen = sortedArray[i]; } return res;}console.log(unique(array));// filter实现var array = [1, 2, 1, 1, '1'];function unique(array) { var res = array.filter(function(item, index, array){ return array.indexOf(item) === index; }) return res;}console.log(unique(array));// 排序去重var array = [1, 2, 1, 1, '1'];function unique(array) { return array.concat().sort().filter(function(item, index, array){ return !index || item !== array[index - 1] })}console.log(unique(array));// Object键值对var array = [{value: 1}, {value: 1}, {value: 2}];function unique(array) { var obj = {}; return array.filter(function(item, index, array){ console.log(typeof item + JSON.stringify(item)) return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true) })}console.log(unique(array)); // [{value: 1}, {value: 2}]// ES6 Set实现var unique = (a) => [...new Set(a)]复制代码7.什么是CDN和CDN的好处

CDN:CDN是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。好处： 1、多域名加载资源一般情况下，浏览器都会对单个域名下的并发请求数（文件加载）进行限制，通常最多有4个，那么第5个加载项将会被阻塞，直到前面的某一个文件加载完毕。因为CDN文件是存放在不同区域（不同IP）的，所以对浏览器来说是可以同时加载页面所需的所有文件（远不止4个），从而提高页面加载速度。

2、文件可能已经被加载过并保存有缓存一些通用的js库或者是css样式库，如jQuery，在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候，很有可能他已经通过你网站使用的CDN访问过了其他的某一个网站，恰巧这个网站同样也使用了jQuery，那么此时用户浏览器已经缓存有该jQuery文件（同IP的同名文件如果有缓存，浏览器会直接使用缓存文件，不会再进行加载），所以就不会再加载一次了，从而间接的提高了网站的访问速度