持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情
前言
身为一个前端小菜鸟，总是有一个飞高飞远的梦想，因此，每点小成长，我都想要让它变得更有意义，为了自己，也为了更多值得的人
开开心心学技术大法~~
来了来了，他真的来了~
正文
js相关
1、利用 a 标签解析 URL
有的时候我们需要从一个 URL 中提取域名，查询关键字，变量参数值等，一般我们会自己去解析 URL 来获取这些内容。可是你或许不知道还有更简单的方法。
即创建一个 a 标签将需要解析的 URL 赋值给 a 的 href 属性，然后我们就能很方便的拿到这些内容。代码如下：
function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
host: a.hostname,
port: a.port,
query: a.search,
params: (function(){
var ret = {},
seg = a.search.replace(/^\?/,'').split('&'),
len = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
hash: a.hash.replace('#','')
};
}
2、复制代码标记语句（label）
有的时候我们会写双重 for 循环做一些数据处理，我们有的时候希望满足条件的时候就直接跳出循环。以免浪费不必要资源。
这个时候我们就可以用 label 和 continue/break 配合使用:
firstLoop:
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (i === j) {
continue firstLoop; // 继续 firstLoop 循环
// break firstLoop; // 中止 firstLoop 循环
}
console.log(`i = ${i}, j = ${j}`);
}
}
// 输出
i = 1, j = 0
i = 2, j = 0
i = 2, j = 1
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (i === j) {
continue
}
console.log(`i = ${i}, j = ${j}`);
}
}
// 输出
i = 0, j = 1
i = 0, j = 2
i = 1, j = 0
i = 1, j = 2
i = 2, j = 0
i = 2, j = 1
复制代码相信你从上面两段代码的输出可以对标记语句有一个了解。
3、DOM的自定义事件
dom除了自身的click,mouseover等事件之外还可以自定义事件
css相关
1、样式调试小技巧：启用designMode，可以快速添加文字
document.designMode = 'on'
document.body.contentEditable='true';
2、两行简单的CSS3代码可达到将文字模糊化处理的目的
p {
color: transparent;
text-shadow: #111 0 0 5px;
}
3、查看页面布局小技巧
将以下代码粘贴到控制台即可看到效果
[].forEach.call(?("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
4、CSS自定义属性的简单实用###
杂篇
1、谷歌浏览器的在线编译代码###
在线编译可以使用filesystem和overrides面板
这里的 "在线编译" 类似于babel包编译,可以解析es6等需要babel的语法，具体可以解析到什么程度还没有经过测试
2、可以将谷歌浏览器变做编辑器
data:text/html, <html contenteditable>
为css打call
1、水波效果原理
2、人脸识别扫描图制作
3、🌈看见彩虹，吃定彩虹
4、🐍蛇形边框特效原理###
5、使用渐变，一个div画Chrome浏览器logo
6、容易被忽视的target选择器
4、在线查看图片滤镜效果
结语
阅览多处文章总结所得，css模块着重借鉴老姚、小会等优秀作者
往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」
