分类 前端技巧 下的文章

_前端-溢出文本显示省略号


需求

  1. 省略号除了在最后,也可能处于前面、中间,或者两边
  2. 双击文本进行复制的时候,拿到的是全部的文本(不带省略号)(对搜索引擎良好,因为所有文本保留)
  3. 自适应,宽度足够的话不显示省略号
  4. 支持多行文本


Antd Table组件 配置规范


前言

开发的时候遇到了这样的几个问题:

  1. 左侧菜单收缩时出现行不对齐
  2. 某列数据过长挤压其他列,导致显示不美观

官方文档讲的较为模糊,网上也没有相应的配置文章,width的设置也较为随意,故把一些经验和实践进行了记录。


web中的撤销重做技术


前言

撤销重做功能,我们经常在富文本编辑器中用到。正好最近接了一个思维导图组件,里面有用到这个功能,分享一波实现原理。

PM:"不就是按CTRL+Z CTRL+Y的事情吗,还需要开发?"


前端监听资源加载错误


前言

页面上有很多资源元素,比如<img>,<iframe>等,我们需要知道其加载情况,根据加载成功与否进行下一步的处理。

常见的做法是给这些元素上设置onload,onerror方法。

比如:<img onerror="errFn()" onload="loadFn()">

支持onload的标签:<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

支持onerror的标签:<img>, <input type="image">, <object>, <script>, <style> , <audio>, <video>

注意IE9.0及以上才支持<audio>, <video>标签

此外几乎所有浏览器都支持onloadonerror,

这种做法的缺点:

  1. 每个要处理的元素都要绑定事件,html和js耦合太深,处理的脚本不能通用化、插件化,比如给另一个页面也能方便使用
  2. Windows 7 下的 Internet Explorer 11 不支持<audio>, <video>的 onerror 事件(我没试过。


趣味js-只用1和特殊字符生成字符串


180306更新:发现有个http://www.jsfuck.com/ ,上面就做了我想做的东西。也找到了C的生成方法

同时,由于+[]=0,+!+[]=1。我们可以把1也给省略


前言

今天逛justjavac 老哥的博客看到了类似下面的代码

(+([]+(11^(1<<1))+((1+1)<<(1+1))+(11>>>1)+(1^1)+((11>>1)+(1<<1))+(-~1)+(-~1+1)+(1^1)+(1^1)))[(!!1+[])[1^1]+([]+{}+[])[1]+(([]+{})[([]+{})[11-1>>1]+[[],[]+{}+[]][[]+1][1]+(/^/[1]+[])[1|1>>1|1]+[{},11^1,!{}+[]][1+1][1<<1^1]+(11/!{}+{})[~1+(11^1)+~1]+[!!{}+{}][[]&111][1&1]+(/^/[111]+[])[11^11]+[{},[{}]+{},1][1+[]][11-~1+11>>1]+(!!1+{})[1&1>>1]+([]+{1:1}+[])[1|1]+[[]+!!1][111>>>111][1<<1>>1]]+[])[([]+![111])[1|1<<1|1]+[/=/,[]+[][11]][1|[]][1>>1]+([{}]+{})[1+!![1]]+[1,!1+/~/][1%11][1^1<<1]+(!!1+[])[1^1]+[!!/-/+/-/][11%11][+!!1]](11^1<<1,-~11>>1)](~1-~(11^1)<<1<<1)

输出:gahing

实现的原理是什么?

原理

了解 js 隐式类型转换(不懂可以参考这里)的都知道

我们可以通过执行!1+[]得到"false"

具体原理是 false+object 操作会先去调用object的valueOf()方法 发现其值=this

继续调用toString()方法得到"", 结果即false+"" = "false"(又去做了隐式转换)

故我们通过数组下标就可以拿到想要的字符f,a,l,s,e

类似的方法我们还能够拿到

!1+[] = "false"
!!1+[] = "true"
1/[]+[] = "Infinity"
[]/[]+[] = "NaN"
[]+{} = "[object Object]"
[]+/^/[1] = "undefined" /* /^/是正则 */
[]+/\:@$/ = "/\:@$/" /*键盘可见特殊字符放/\ /其中(\用于转义)获取比如拿:就是[1]*/

//可拿到的小写字母有=abcdef ijln orst uy

然后你会发现,26个字母还是有好多不在上面的,并不能通过每次去上面拿字符然后再做拼接