15个前端小知识

　　1。css一行文本超出。。。overflow：hidden；textoverflow：ellipsis；whitespace：nowrap；2。多行文本超出显示。。。display：webkitbox；webkitboxorient：vertical；webkitlineclamp：3；overflow：hidden；3。IOS手机容器滚动条滑动不流畅overflow：auto；webkitoverflowscrolling：touch；4。修改滚动条样式
　　隐藏p元素的滚动条p：：webkitscrollbar｛display：none；｝p：：webkitscrollbar滚动条整体部分p：：webkitscrollbarthumb滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条p：：webkitscrollbartrack滚动条的轨道（里面装有Thumbp：：webkitscrollbarbutton滚动条的轨道的两端按钮，允许通过点击微调小方块的位置p：：webkitscrollbartrackpiece内层轨道，滚动条中间部分（除去p：：webkitscrollbarcorner边角，即两个滚动条的交汇处p：：webkitresizer两个滚动条的交汇处上用于通过拖动调整元素大小的小控件注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大，父级元素使用overflowhidden截掉滚动条部分。暴力且直接。5。使用css写出一个三角形角标
　　元素宽高设置为0，通过border属性来设置，让其它三个方向的border颜色为透明或者和背景色保持一致，剩余一条border的颜色设置为需要的颜色。p｛width：0；height：0；border：5pxsolidtransparent；bordertopcolor：red；｝6。解决iosaudio无法自动播放、循环播放的问题
　　ios手机在使用audio或者video播放的时候，个别机型无法实现自动播放，可使用下面的代码hack。解决iosaudio无法自动播放、循环播放的问题varmusicdocument。getElementById（video）；varstate0；document。addEventListener（touchstart，function（）｛if（state0）｛music。play（）；state1；｝｝，false）；document。addEventListener（WeixinJSBridgeReady，function（）｛music。play（）；｝，false）；循环播放music。onendedfunction（）｛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；justifycontent：center；alignitems：center；｝8。隐藏页面元素displaynone：元素不存在，从dom中删除opacity0：元素透明度将为0，但元素仍然存在，绑定的事件仍旧有效仍可触发执行。visibilityhidden：元素隐藏，但元素仍旧存在，页面中无法触发该元素的事件。10。contenteditable
　　html中大部分标签都是不可以编辑的，但是添加了contenteditable属性之后，标签会变成可编辑状态。
　　不过通过这个属性把标签变为可编辑状态后只有input事件，没有change事件。也不能像表单一样通过maxlength控制最大长度。我也忘记我在什么情况下用到过了，后面想起来再补吧。11。calc
　　这是一个css属性，我一般称之为css表达式。可以计算css的值。最有趣的是他可以计算不同单位的差值。很好用的一个功能，缺点是不容易阅读。接盘侠没办法一眼看出20px是啥。p｛width：calc（2520px）；｝12。Proxy和Object。defineProperty区别
　　Proxy的意思是代理，我一般教他拦截器，可以拦截对象上的一个操作。用法如下，通过new的方式创建对象，第一个参数是被拦截的对象，第二个参数是对象操作的描述。实例化后返回一个新的对象，当我们对这个新的对象进行操作时就会调用我们描述中对应的方法。newProxy（target，｛get（target，property）｛｝，set（target，property）｛｝，deleteProperty（target，property）｛｝｝）
　　Proxy区别于Object。definedProperty。
　　Object。defineProperty只能监听到属性的读写，而Proxy除读写外还可以监听属性的删除，方法的调用等。
　　通常情况下我们想要监视数组的变化，基本要依靠重写数组方法的方式实现，这也是Vue的实现方式，而Proxy可以直接监视数组的变化。constlist〔1，2，3〕；constlistproxynewProxy（list，｛set（target，property，value）｛target〔property〕value；returntrue；标识设置成功｝｝）；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，如下。constproxynewProxy（obj，｛get（target，property）｛returnReflect。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参数。constq｛｝；location。search。replace（（〔？〕）（〔〕）g，（，k，v）q〔k〕v）；console。log（q）；15。解析连接url
　　可以通过创建a标签，给a标签赋值href属性的方式，获取到协议，pathname，origin等location对象上的属性。创建a标签constaEledocument。createElement（a）；给a标签赋值href路径aEle。hreftest。html；访问aEle中的属性aEle。protocol；获取协议aEle。pathname；获取pathaEle。origin；aEle。host；aEle。search；