15个前端小知识

　　1. css 一行文本超出...overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2.多行文本超出显示...display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 3.IOS 手机容器滚动条滑动不流畅overflow: auto; -webkit-overflow-scrolling: touch;  4.修改滚动条样式
　　隐藏  p  元素的滚动条 p::-webkit-scrollbar {     display: none; } p::-webkit-scrollbar  滚动条整体部分 p::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条 p::-webkit-scrollbar-track  滚动条的轨道（里面装有 Thumb  p::-webkit-scrollbar-button  滚动条的轨道的两端按钮，允许通过点击微调小方块的位置 p::-webkit-scrollbar-track-piece  内层轨道，滚动条中间部分（除去 p::-webkit-scrollbar-corner  边角，即两个滚动条的交汇处 p::-webkit-resizer  两个滚动条的交汇处上用于通过拖动调整元素大小的小控件注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大，父级元素使用 overflow-hidden  截掉滚动条部分。暴力且直接。 5.使用 css 写出一个三角形角标
　　元素宽高设置为 0，通过  border  属性来设置，让其它三个方向的 border  颜色为透明或者和背景色保持一致，剩余一条 border  的颜色设置为需要的颜色。 p {     width: 0;     height: 0;     border: 5px solid #transparent;     border-top-color: red; }  6.解决 ios audio 无法自动播放、循环播放的问题
　　ios  手机在使用 audio  或者 video  播放的时候，个别机型无法实现自动播放，可使用下面的代码 hack 。 // 解决ios audio无法自动播放、循环播放的问题 var music = document.getElementById( video ); var state = 0;  document.addEventListener( touchstart , function(){     if(state==0){         music.play();         state=1;     } }, false);  document.addEventListener(＂WeixinJSBridgeReady＂, function () {     music.play(); }, false);  //循环播放 music.onended = function () {     music.load();     music.play(); }  7.水平垂直居中
　　我一般只使用两种方式 定位 或者  flex ，我觉得够用了。 p {     width: 100px;     height: 100px;     position: absolute;     top: 0;     right: 0;     bottom: 0;     left: 0;     margin: auto; }
　　父级控制子集居中  .parent {     display: flex;     justify-content: center;     align-items: center; }  8.隐藏页面元素display-none : 元素不存在，从 dom  中删除 opacity-0 : 元素透明度将为 0，但元素仍然存在，绑定的事件仍旧有效仍可触发执行。 visibility-hidden ：元素隐藏，但元素仍旧存在，页面中无法触发该元素的事件。 10.contenteditable
　　html  中大部分标签都是不可以编辑的，但是添加了 contenteditable  属性之后，标签会变成可编辑状态。
　　不过通过这个属性把标签变为可编辑状态后只有  input  事件，没有 change  事件。也不能像表单一样通过 maxlength  控制最大长度。我也忘记我在什么情况下用到过了，后面想起来再补吧。 11.calc
　　这是一个  css  属性，我一般称之为 css  表达式。可以计算 css  的值。最有趣的是他可以计算不同单位的差值。很好用的一个功能，缺点是不容易阅读。接盘侠没办法一眼看出 20px  是啥。 p {     width: calc(25% - 20px); }  12.Proxy 和 Object.defineProperty 区别
　　Proxy  的意思是代理，我一般教他拦截器，可以拦截对象上的一个操作。用法如下，通过 new  的方式创建对象，第一个参数是被拦截的对象，第二个参数是对象操作的描述。实例化后返回一个新的对象，当我们对这个新的对象进行操作时就会调用我们描述中对应的方法。 new Proxy(target, {     get(target, property) {      },     set(target, property) {      },     deleteProperty(target, property) {      } })
　　Proxy  区别于 Object.definedProperty 。
　　Object.defineProperty  只能监听到属性的读写，而 Proxy  除读写外还可以监听属性的删除，方法的调用等。
　　通常情况下我们想要监视数组的变化，基本要依靠重写数组方法的方式实现，这也是 Vue 的实现方式，而  Proxy  可以直接监视数组的变化。 const list = [1, 2, 3]; const listproxy = new Proxy(list, {     set(target, property, value) {         target[property] = value;         return true; // 标识设置成功     } });  list.push(4);
　　Proxy  是以非入侵的方式监管了对象的读写，而 defineProperty  需要按特定的方式定义对象的属性。 13.Reflect
　　他是  ES2015  新增的对象，纯静态对象也就是不能被实例画，只能通过静态方法的方式调用，和 Math  对象类似，只能类似 Math.random  的方式调用。
　　Reflect  内部封装了一系列对对象的底层操作，一共 14 个，其中 1 个被废弃，还剩下 13 个。
　　Reflect  的静态方法和 Proxy  描述中的方法完全一致。也就是说 Reflect  成员方法就是 Proxy  处理对象的默认实现。
　　Proxy  对象默认的方法就是调用了 Reflect  内部的处理逻辑，也就是如果我们调用 get  方法，那么在内部，proxy  就是将 get  原封不动的交给了 Reflect ，如下。 const proxy = new Proxy(obj, {     get(target, property) {         return Reflect.get(target, property);     } })
　　Reflect  和 Proxy  没有绝对的关系，我们一般将他们两个放在一起讲是为了方便对二者的理解。
　　那为什么会有  Reflect  对象呢，其实他最大的用处就是提供了一套统一操作 Object  的 API 。判断对象是否存在某一个属性，可以使用 in  操作符，但是不够优雅，还可以使用Reflect.has(obj, name) ; 删除一个属性可以使用 delete ，也可以使用 Reflect.deleteProperty(obj, name) ; 获取所有属性名可以使用 Object.keys , 也可以使用 Reflect.ownKeys(obj) ; 我们更推荐使用 Reflect  的 API  来操作对象，因为他才是未来。 14.解析 get 参数
　　通过  replace  方法获取 url  中的参数键值对，可以快速解析 get  参数。 const q = {}; location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v); console.log(q); 15.解析连接 url
　　可以通过创建  a  标签，给 a  标签赋值 href  属性的方式，获取到协议，pathname ，origin  等 location  对象上的属性。 // 创建a标签 const aEle = document.createElement( a ); // 给a标签赋值href路径 aEle.href =  /test.html ; // 访问aEle中的属性 aEle.protocol; // 获取协议 aEle.pathname; // 获取path aEle.origin; aEle.host; aEle.search;