若干个月前的原标题是“持续更新的豆知识”(羞)
1、CSS 输入无效选择器。
在日渐成熟的 HTML5 + CSS3 的环境中,
我们完全可以使用原生的表单,从而省去繁琐的验证环节。
配合输入框的 required
和 pattern
属性,
就可以很方便地进行错误提示了:
input:focus:invalid { box-shadow: 0 0 1px 1px red; border-color: transparent; outline: none; }
与 :invalid
相关的选择器还有 :valid
、:required
2、还原 ES6 的箭头函数
当需求方要求兼容“怎么还不去死”的 IE 时,你需要把箭头函数进行如下还原:
// Replace something like (datas) => { ... } // with function(datas) { ... }
3、按需异步加载 TinyMCE
TinyMCE 作为老牌前端富文本编辑器一直保持着活跃,
但是随着功能的繁复其大小也在向着臃肿化发展。
仅在需要的场合才按需异步加载 TinyMCE 也逐渐成为了自然的选择:
window.tinymce.dom.Event.domLoaded = true; tinymce.init();
4、暂停通过 iframe 嵌入的 YouTube 视频播放
通过在嵌入地址末尾添加 ?enablejsapi=1
,可以增强对 YouTube 视频的控制。
function toggleVideo(state) { // if state == 'hide', hide. Else: show video var div = document.getElementById("popupVid"); var iframe = div.getElementsByTagName("iframe")[0].contentWindow; div.style.display = state == 'hide' ? 'none' : ''; func = state == 'hide' ? 'pauseVideo' : 'playVideo'; iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*'); }
5、修改战网客户端语言选项
国内通过网易提供的“暴雪战网桌面版应用程序/Blizzard Battle.net app”,
是锁死了简体中文无法切换其它语言的,手动解锁方式如下:
打开 C:\Users\[username]\AppData\Roaming\Battle.net\Battle.net.config
,
找到其 Client
部分,参考以下改法:
{ "AllowedRegions": "CN;US", "AllowedLocales": "zhCN;enUS;zhTW" }
6、JS 获取父对象的第一个子辈
在这个数组和对象“集合/collection”混用的年代,
相互“借鉴”功能也不足为奇了:
var obj = {a: 1, b: 2, c: 3}; Object.keys(obj)[0]; // "a"
switch (true) { case liCount == 0: break; case liCount<=5 && liCount>0: break; case liCount<=10 && liCount>5: break; case liCount>10: break; }
8、清除 chrome 的应用缓存
使用开发版的 chrome 在访问 wrike 时,会出现项目/任务描述卡在“Loading”的情况。
可以尝试从 chrome://appcache-internals/
里清除对应应用缓存,并重启浏览器。
9、较为宽泛的 email 正则。
HTML5 默认的 <input type="email" />
正则为:
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61} [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
而相比之下,较为宽泛的场景下,可以写为:
/^\S+@\S+\.\S+$/
function isJson(str) { try { JSON.parse(str); } catch (e) { return false; } return true; }
【相关资料】
1、iframe 播放器接口参考◃youtube