石沉大海的豆知识

若干个月前的原标题是“持续更新的豆知识”(羞)

1、CSS 输入无效选择器
在日渐成熟的 HTML5 + 3 的环境中,
我们完全可以使用原生的表单,从而省去繁琐的验证环节。
配合输入框的 requiredpattern 属性,
就可以很方便地进行错误提示了:

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
作为老牌前端富文本编辑器一直保持着活跃,
但是随着功能的繁复其大小也在向着臃肿化发展。
仅在需要的场合才按需异步加载 也逐渐成为了自然的选择:

window.tinymce.dom.Event.domLoaded = true;
tinymce.init();

4、暂停通过 iframe 嵌入的 YouTube 视频播放
通过在嵌入地址末尾添加 ?enablejsapi=1,可以增强对 视频的控制。

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"

7、在 switch 中使用条件

switch (true) {
    case liCount == 0:
        break;
    case liCount<=5 && liCount>0:
        break;
    case liCount<=10 && liCount>5:
        break;
    case liCount>10:
        break;                  
}

8、清除 的应用缓存
使用开发版的 在访问 wrike 时,会出现项目/任务描述卡在“Loading”的情况。
可以尝试从 ://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+$/

10、检测一段字符串是否符合 json 标准

function isJson(str) {
    try {
        JSON.parse(str);
    } catch (e) {
        return false;
    }
    return true;
}

【相关资料】
1、iframe 播放器接口参考

发表评论

邮箱地址不会被公开。 必填项已用*标注