分享一些超级有逼格的前端代码
1.浮点数取整。一般我们第一反应是Math.floor。而其他3中写法很牛掰啊有木有,你这样写别人看到第一反应是what the fuck,然而看到运行结果之后就会变成握草这太牛逼了。
const x = 123.4545; x >> 0; // 123 ~~x; // 123 x | 0; // 123 Math.floor(x); // 123x ^ 0 //123
2.报错处理的正确方式。
try {XXXXX } catch(e) {window.open("https://stackoverflow.com/search?q=[js]+" e.message); }
看完这段代码不得不说666,虽然很可能你这么写了之后报错了然后领导疯狂骂人。原写法是直接在当前页面打开,更加惊人,是肯定会被骂的。燃鹅,这种写法对于开始是比较友好的,因为报错了之后就自动打开搜索报错原因的页面了。而且对于其中[js]+的用法,笔者确实也是第一次遇到,不得不说涨姿势了。
3.字符转码。打开你们的浏览器(PC),按F12,切换到console,然后粘贴这段代码,然后回车。
当时我就吓尿了,what the fuck。后来了解到,原来是字符转码。附地址http://utf-8.jp/public/aaencode.html
4.一行代码实现评级组件。
1 "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
不得不说非常的6,看到代码之后有种恍然大悟的感觉。rate是几分,就是几星。对于扩展,比如支持小数但是只取整数,四舍五入或者向下取整,支持小数,颜色定制,跟随鼠标等等可以有很丰富的扩展。
扩展原理:支持小数其实很简单,先用☆☆☆☆☆当背景,然后把★★★★★放在上层,通过控制width+overflow就可以轻松支持小数字,不仅仅是2.5, 3.8也支持 毕竟我们宽度用em单位
1 html 2 <div>☆☆☆☆☆</div> 3 4 css 5 div { 6 position:relative; 7 } 8 div::after{ 9 content:'★★★★★'; 10 position:absolute; 11 top:0; 12 left:0; 13 width:2.5em; 14 overflow: hidden; 15 } 16 17 增加动画和颜色 18 div { 19 position:relative; 20 color:#f5222d; 21 } 22 div:after{ 23 content:'★★★★★'; 24 position:absolute; 25 top:0; 26 left:0; 27 width:0; 28 overflow: hidden; 29 transition: width 2s; 30 -moz-transition: width 2s; 31 -webkit-transition: width 2s; 32 -o-transition: width 2s; 33 34 } 35 div:hover:after{ 36 width:3.5em; 37 }
附一份网上的封装的组件地址
https://github.com/shengxinjing/tiny-rate
https://github.com/shengxinjing/vue-tiny-rate
https://github.com/shengxinjing/react-tiny-rate
后期本人会封装一份angular的组件。
5.js1k。顾名思义就是在1k以内的代码量范围实现的一些效果。
官网:https://js1k.com/
6.+"B"妙用。
"B" + "a" + + "B" + "a" // > BaNaNa
+"B"是将字符转换为数字。
7.写简历。
暂时没有跳槽打算。酝酿写法中。
8.写游戏。
笔者也写过一个接豆豆的游戏,可以设置时间、分数、速度、方向、色彩等等,奈何前公司对于信息保密过于严谨,根本带不出去代码。后期有时间的时候会补上一份。
9.全css实现logo。
笔者也试着使用css画了一只鸡,没错,是一只鸡,奈何代码同上。
笔者的收藏:
http://www.shejidaren.com/pure-css-icons.html
还有这里
https://blog.csdn.net/linghao00/article/details/8020477
其中BP那个笔者很是喜欢。
领导快要催我改bug了,这里7,8,9就先不细说了。
10.从数组中找出符合条件的子数组。
static findChild(query) {return this.all().filter(item => Object.keys(query).every(key => item[key] === query[key])); }// this.all() 会取出数组中的所有数据
11.[] == ![]
结果为true。很神奇有木有。
原因解释:
我们都知道 JavaScript 中唯一一个非自反(non-reflexive)的值是 NaN,而在这里乍看之下,普通的字面量空数组居然也是“非自反”,岂不矛盾?
其实现实是这样的:
1. 等号右边有 ! ,优先级比 == 更高,优先计算右边的结果。 [] 为非假值,所以右边的运算结果为 false,即:[] ==> false
2. == 的任意一边有 boolean 类型的值时先把这个值转换成 number 类型,右边转换成了 0 ,即:
Number(false) ==> 0
3. == 的两边分别是 number 和 object 类型的值时,把 object 转换成 number 类型,需要对 object 进行 ToNumber 操作,即:
Number([].valueOf()) ==> 0
至此,两边都变成了0,所有0 == 0是true
附,一些常见的假值
if (false) if (null) if (undefined) if (0) if (NaN) if ('') if ("") if (document.all)
一些常见的真值
if (true) if ({}) if ([]) if (42) if ("foo") if (new Date()) if (-42) if (3.14) if (-3.14) if (Infinity) if (-Infinity)
12.js小数bug。
10/3 //3.3333333333333335 8/3 //2.6666666666666665
笔者是很早前有一次偶然发现的,然后去网上查了一下,有很多很多这种类似的bug。其原因就是,我们现实中使用的是10进制,而计算机本身是二进制,所有对于计算时内存就会有这种问题。
解决方案之一:取两位小数Math.round(num*100)/100;
类似的还有
0.1 + 0.2 != 0.3
https://www.zhihu.com/question/49812700
13.将n维数组破开成一维(string-array)。
var foo0 = [1, [2, 3], [4, 5, [6,7,[8]]], [9], 10];var foo1 = foo0.join(',').split(',');
14.void 0和undefined。
https://link.zhihu.com/?target=http%3A//stackoverflow.com/questions/5716976/javascript-undefined-vs-void-0
15.++[[]][+[]]+[+[]] == '10'
与11同理。
http://justjavac.com/javascript/2012/04/05/you-dont-know-javascript.html
16.一些收集。
http://www.css88.com/archives/8488
http://www.css88.com/archives/8748
17.委婉地表达对方SB和自己NB。
(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]//sb ([[]]+)[+!![]]+(+{})[!+[]+!!]//nb
NB这个,报错了,回头有时间了再研究学习。原理与11,15类似,都是js的运算优先级与类型转换的知识。
http://www.jfh.com/jfperiodical/article/3224
从今以后,如果再有人看不起前端,我就可以把这两行代码发给他看了。
18.检测页面css结构。
[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
太风骚了有木有。
原理:https://sdk.cn/news/3025
19.论如何优雅的取随机字符串。
Math.random().toString(16).substring(2) // 13位 Math.random().toString(36).substring(2) // 11位
20.(10)["toString"]() === "10"
(10)["toString"]() === "10"
https://link.zhihu.com/?target=http%3A//qylanikin.lofter.com/post/1cbb3f55_cc787c9
21.匿名函数自执行。
这么多写法你选择哪一种?我选择死亡。 ( function() {}() );( function() {} )();[ function() {}() ];~ function() {}();! function() {}();+ function() {}();- function() {}();delete function() {}();typeof function() {}();void function() {}();new function() {}();new function() {};var f = function() {}();1, function() {}();1 ^ function() {}();1 > function() {}();// ...
22.金钱格式化。
用正则魔法实现:var test1 = '1234567890' test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
非正则的优雅实现: function formatCash(str) { return str.split('').reverse().reduce((prev, next, index) => { return ((index % 3) ? next : (next + ',')) + prev }) }
23.将对方的精神搞崩溃。
while (1) { alert('牛逼你把我关了啊') }
哈哈,至于效果,自己运行一下就知道了。笔者曾经也用bat写了一个无限弹窗的脚本,然后发到同事群里了,然后某个美女新同事就打开了,然后他的机器就黑掉了,并且那天没能启动起来。。。在此再次说声抱歉,因为我只是构思这么写甚至自己都没敢试,结果还真的成功了。
24.机智的障眼法。
<a href="javascript:alert('清除成功');">清除缓存</a>
25.逗号运算符。
var a = 0; var b = ( a++, 99 ); console.log(a); // 1 console.log(b); // 99
原理很简单,不解释。
26.论如何最佳的让两个整数交换数值。
常规办法:
var a=1,b=2;
a += b;
b = a - b;
a -= b;
缺点也很明显,整型数据溢出,对于32位字符最大表示数字是2147483647,如果是2147483645和2147483646交换就失败了。
黑科技办法:
a ^= b; b ^= a; a ^= b;
27.圣诞树。
(n => {[...Array(n - 2)].map((_, i) => 3 + i).forEach(j => {[...Array(j)].map((_, k) => 1 + k).forEach(x => {let sc = 2 * x - 1, spc = (2 * n - 1 - sc) / 2;console.log(" ".repeat(spc) + "*".repeat(sc));});});console.log(" ".repeat(n - 1) + "*");console.log("~".repeat(n - 1) + "*~#~~###~~~~##~"); })(5);
记得大一的时候偶然有人转发的一封邮件,里边就有一个圣诞树挂件,还有音乐,很是漂亮精致,至今还在我的电脑里保存。后来查了很多类似的,但是没有一个比这个精美的,自己也试着做了一些,都是很简单很简单的命令行。
28.手动触发元素的click方法。
;(_ => {try { document.querySelector('.ContentItem[name="135794447"] .VoteButton--up').click() } catch (e) { alert('e...网络错误')}})();
上上周测试妹子来找我帮忙搞一个组件的自动化,我就是用的这种方法。
类似的东西还有很多很多,有些比较实用,大家可以拿出小本本记下来,当然如果你使用其中的恶作剧恶搞了同事或者领导,千万不要说跟我学的奥。
统计字符串中相同字符出现的次数。
以下留存:
https://www.zhihu.com/question/46943112
https://github.com/jawil/blog/issues/24
https://mp.weixin.qq.com/s/Z-Vcfl1D5oKMLliGTVhE1g
转载于:https://www.cnblogs.com/ljwsyt/p/9516416.html
分享一些超级有逼格的前端代码相关推荐
- html懒人编辑器,前端老司机分享——五个前端代码编辑器
工欲善其事,必先利其器.但我最开始接触网页的时候,人们普遍认为能用记事本写HTML和CSS的才是大神. 那时也没有前端这一说法,随着网页越来越复杂用记事本的开发效率就太低了,也就有了前端代码编辑器的出 ...
- [Client]前端代码规范 及 最佳实践
前端代码规范 及 最佳实践 2014/10/29 | 分类: WEB前端, 工具与资源, 开发 | 0 条评论 | 标签: 代码规范, 前端开发, 最佳实践 分享到: 62 本文作者: 伯乐在线 - ...
- 前端代码标准最佳实践:CSS篇
上一篇<前端代码标准最佳实践:javascript>发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量 ...
- 网易智慧企业 Node.js 实践(2)| 平滑发布和前端代码
健康检查 前文提到我们通过网关把流量转发到 Node 应用,那网关是如何确定 Node 应用的可用性呢? 如果 Node 应用在发布的过程中也把流量转发过来,就会导致请求失败,所以我们的网关会对 No ...
- 前端代码是怎样智能生成的?
简介: 作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成.在 ...
- 用500行纯前端代码在浏览器中构建一个Tableau
2019独角兽企业重金招聘Python工程师标准>>> 在Gartner最新的对商务智能软件的专业分析报告中,Tableau持续领跑.Microsoft因为PowerBI表现出色也处 ...
- 前端实现照片选取范围上传_前端代码是怎样智能生成的?看看大佬怎么说
作者|莱斯 出品|阿里巴巴新零售淘系技术部 导读: 作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.3 ...
- opencv自然背景下交通标志形状分类c++代码_前端革命时刻:前端代码是怎样智能生成的-图像分离篇
作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成.在此期间研 ...
- 专家系统代码实现_前端代码是怎样智能生成的 - 语义化篇
作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成.在此期间研 ...
最新文章
- 大规模服务设计部署经验谈
- SpringBoot--Druid多数据源配置
- 【NOIP2012模拟10.25】旅行
- create react app 在start后不清空terminal
- php=与-,谈谈PHP中的 -、= 和 :: 符号
- Swift之深入解析构造过程和析构过程
- P5039 [SHOI2010]最小生成树(网络流)
- mysql 导致iis 假死_php使用MySql函数导致Apache(iis)崩溃的问题解决方案
- html 请求体 响应体,Http协议抓包详解
- 前端大牛们都学过哪些东西
- xrd连续扫描和步进扫描_XRD样品制备与分析
- c#获取电脑硬件信息参数说明(声卡篇 Win32_SoundDevice )
- Spring 事务传播行为
- 博客文章分类与标签的区别与联系
- echarts 旭日图sunburst
- Error 1718. File was rejected by digital signature policy错误,文件的数字签名被你的本地软件策略给拒绝了,来看看解决方法
- 如何去除搜索引擎上的广告
- Redis高可用架构
- Fabric.js 图形标注
- Awesome font icon viewer
热门文章
- 重要的, 需要记下来的
- 0.2 - 机械加工工艺-----机加工设备及表面处理
- 游戏项目和开源项目调研
- 解决python利用pip安装第三方库失败的问题
- 画春天的景色计算机教案,幼儿园中班教案《画春天》含反思
- 删除.sys、.dll流氓文件
- 印象中的tcp?你可能一直都理解错了|开发者的必备技能
- Java使用freemarker生成word文件
- html img和背景图处理图片不拉伸_img固定宽度和高度,不规则图片变形问题的解决方法...
- MD5是什么?如何使用MD5?