前端wxml取后台js变量值_这些鲜为人知的前端冷知识,你都GET了吗?
背景
最近公司项目不多,比较清闲,划水摸鱼混迹于各大技术博客平台,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来,不由的发出一声感叹!
前端可真是博大精深
于是突发奇想,现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容,俗话说,独乐乐不如众乐乐,大家一起来接受前端的洗礼吧!!!
论被玩坏了的前端
HTML篇
浏览器地址栏运行JavaScript代码
这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开头后跟要执行的语句。比如:
javascript:alert('hello from address bar :)');
将以上代码贴到浏览器地址栏回车后alert正常执行,一个弹窗神现。
需要注意的是如果是通过copy paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行JS代码,sigh~
浏览器地址栏运行HTML代码
如果说上面那条小秘密知道的人还算多的话,这条秘笈知道的人就要少一些了,在非IE内核的浏览器地址栏可以直接运行HTML代码!
比如在地址栏输入以下代码然后回车运行,会出现指定的页面内容。
data:text/html,<h1>Hello, everybody!</h1>
浏览器秒变编辑器
这个还是在浏览器地址栏上面做文章,将以下代码复制粘贴到浏览器地址栏,运行后浏览器就变成了一个原始简单的编辑器,和window自带的notepad差不多,长见识了吧,话不多说,我们来试试。
data:text/html, <html contenteditable>
归根结底多亏了HTML5中新加的
contenteditable
属性,当元素指定了该属性后,元素的内容成为可编辑状态。
同理,在控制台执行以下代码,同样可以将整个页面变得可以编辑。
document.body.contentEditable='true';
实时编写样式的输入框
同理,也是利用了HTML5中的contenteditable
属性,巧妙的在body增加一个可编辑的style标签。
<body><style style="display:block; position: fixed;" contentEditable>body { background: red; }</style>
</body>
利用a标签解析url
很多时候我们有从一个URL中提取域名,查询关键字,变量参数值等的需要,然而处理 url 字符串是比较麻烦的,可以使用 a 标签自动解析 url。
主要方法就是在JS中创建一个a标签,然后将需要处理的URL赋值给我们新创建的a标签的href属性,然后就可以得到我们想要的东西了。
var a = document.createElement('a');
a.href = 'https://juejin.cn/user/2796746682939054/posts';
console.log(a.host);
利用这一方法,稍微进行封装一下,就可以得到一个非常实用的工具函数了,下面提供一个网上常见的封装示例。
function urlParse(url, key) {var a = document.createElement('a')a.href = urlvar result = {href: url,protocol: a.protocol.replace(':', ''),port: a.port,query: a.search,params: (function(){var ret = {}, centArr,seg = a.search.replace(/^?/, '').replace(/^?/,'').split('&')for (i = 0, len = seg.length; i < len; i ++) {if (!seg[i]) { continue }centArr = seg[i].split('=')ret[centArr[0]] = centArr[1]}return ret}()),hash: a.hash,file: (a.pathname.match(//([^/?#]+)$/i) || [, ''])[1],path: a.pathname.replace(/^([^/])/, '/$1'),relative: (a.href.match(/tps?://[^/]+(.+)/) || [, ''])[1],segments: a.pathname.replace(/^//, '').split('/')}a = nullreturn key ? result[key] : result
}
H5 有新的 API URL 也可以快速的处理一个链接
var url = new URL('https://www.baidu.com/')
url.hash
...
带有 Id 属性的元素,会创建全局变量
在一张HTML页面中,所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量,这意味着document.getElementById
像人的智齿一样显得多余了。但实际项目中最好还是老老实实该怎么写就怎么写,毕竟常规代码出乱子的机会要小得多。
<div id="test"></div>
<script>console.log(test)
</script>
script标签保存任意信息
我们可以通过将script标签的type属性设置为'text',然后就可以在里面保存任意信息,后面在js中获取信息也十分的方便。
<script type="text" id="template"><h1>欢迎光临</h1>
</script>
var text = document.getElementById('template').innerHTML
CSS篇
文字模糊效果
只需要添加以下两行代码,即可达到将文字模糊处理的目的。
color: transparent;
text-shadow: #111 0 0 5px;
我们这群人,苦没有真正苦过,爱没有用力爱过。 每天受着信息大潮的冲击,三观未定又备受曲折。 贫穷不再是正义,又妄图不让金钱成为唯一的追求。 过早看到了更大的世界,勤奋却又不过三天。 热血透不过屏幕,回忆止于游戏和工作。 像一群没有根的孩子,在别人的经历和精神里吵闹。
正常文字VS模糊文字,是不是很酷,哈哈哈。
毛玻璃效果
其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性。但是要做一个好的毛玻璃效果,需要注意很多细节。下面提供一个简单示例:
.blur {display: block;width: 300px;height: 300px;margin: 100px auto;filter: blur(10px);
}<img src="./img/test.png" class="blur" alt="">
图片是我养的可爱的蓝胖子(●'◡'●)
多重边框
在css中,我们可以利用重复指定box-shadow来达到多个边框的效果。
/*CSS Border with Box-Shadow Example*/
div {box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);height: 200px;margin: 50px auto;width: 400px
}
CSS中也可以做简单运算
在日常开发中,我们时常会遇到这样的需求:
左侧或者右侧宽度固定,然后剩余部分自动充满。
可能很多小伙伴会想到用flex布局,通过设置flex:1;使其自动充满,当然这个做法也是对的,但是我们还有更为简便的方法,那就是利用css的calc函数,示例代码如下:
.container{width: calc(100% - 50px);
}
calc() 函数用于动态计算长度值。
- 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
- 任何长度值都可以使用calc()函数进行计算;
- calc()函数支持 "+", "-", "*", "/" 运算;
- calc()函数使用标准的数学运算优先级规则;
JS篇
两个变量值的交换
一般两个变量值交换,大家首先想到的可能是通过一个中间变量进行转换,但是其实还有更快的写法,代码如下:
var a=1, b=2
a=[b, b=a][0]
浮点数快速向下取整
JavaScript中是没有整型概念的,但利用好位操作符可以轻松处理,同时获得效率上的提升。
|0和~~是很好的一个例子,使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。
(12.4 / 4.13) | 0
// => 3
~~(12.4 / 4.13)
// => 3
生成随机字符串
生成随机字符串,我们第一想到的,可能是先定义一个字符串数组,然后通过随机取数组中的字符进而拼接成一个随机长度的字符串。
但是下面还有一个更简单的方法,代码如下:
function generateRandomAlphaNum(len) {var rdmString = "";for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));return rdmString.substr(0, len);
}
主要是利用了toString() 方法的特性
什么情况下a === a - 1
咋一看,这个全等式怎么看都是false,但是万物存在既有理,接下来,让我们看看哪些情况下该等式是成立的呢。
第一种情况就是Infinity,或者可以说是正负Infinity。
知识点: 在 JavaScript 里,Infinity是一个 Number 类型的字面量,表示无穷大。当一个 Number 类型的值,在运算过程中超过了所能表示的最大值,就会得到无穷大。
let a = Infinity;console.log(a === a - 1); // truelet b = -Infinity;console.log(b === b - 1); // true
那么还有没有其他情况下也成立呢?或者说换成
a == a-1
又有哪些情况成立呢?欢迎各位大佬在下面评论区参与讨论。
恶搞篇
CSS恶搞
大家猜测一下,如果在代码中加上一下样式,会是一个什么效果?
{cursor: none !important;
}
(图片来源于网络,如有侵权请联系我删除)
console.log
恶搞
Chrome的console.log
是支持对文字添加样式的,甚至log图片都可以。于是可以重写掉默认的log方法,把将要log的文字应用到CSS的模糊效果,这样当有人试图调用console.log()的时候,出来的是模糊不清的文字。好冷,我表示没有笑。
var _log = console.log;
console.log = function() {_log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
};
console.log('你是逗逼吗')
如果本篇文章有任何错误和建议,欢迎大家指出!
作者:monkeysoft
链接:https://juejin.cn/post/6901528736567394318
来源:掘金
前端wxml取后台js变量值_这些鲜为人知的前端冷知识,你都GET了吗?相关推荐
- 前端wxml取后台js变量值_微信小程序云开发教程WXML入门数据绑定
同学们大家好,我是小伊同学,今天带领大家学习WXML部分一个重要的知识点,数据绑定. 简单来讲,数据绑定就是通过双重花括号将一个变量绑定到界面上. 首先,我们为什么要将变量绑定到页面上呢?因为在制作一 ...
- ejs获取js变量值_EJS变量(注入值)
ejs获取js变量值 Hi! Welcome to NODE AND EJS TEMPLATE ENGINE SERIES. Today, we will talk about EJS variabl ...
- 中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...
- uniapp 获取到js文件var一个变量怎么获取到这个变量值_浅析Js中const,let,var的区别及作用域...
理解:let变量的作用域只能在当前函数中 js中const,let,var的区别及作用域_lianzhang861的博客-CSDN博客blog.csdn.net 全局作用域中,用 const 和 l ...
- wxml代码支持js代码吗_如何取胜:代码支持者的建议
wxml代码支持js代码吗 I had the honor of asking three of the world's most famous software engineers six ques ...
- keil debug如何在watch直接修改变量值_零基础学VBA:什么是VBA?如何编写和运行VBA代码?...
HI,大家好,我是星光,今天咱们来继续学习VBA.在上一章咱们讲了为什么要学习VBA~VBA还值不值得学~学了还有没有用~零基础学VBA编程01:VBA还能不能学?学了还有没有用? 这一章咱们再来简单 ...
- pythontk界面显示函数中的变量值_简单易学,西门子触摸屏3种修改变量值的方法!博图Wincc V14组态...
应条友要求,今天分享3种修改触摸屏变量值的最常用方法! 全文约700字,通读4分钟! 看完本章,你将收获以下内容: 一:必会知识点:3种修改变量的方法及适用点 二:实例:3种方法修改触摸屏变量值 三: ...
- 环境变量 变量名 变量值_如何使用环境变量
环境变量 变量名 变量值 Environment variables are a set of dynamic named values that can affect the way running ...
- 七夕祝福网页制作_七夕的七个冷知识:是情人节还是女儿节?
今天,七夕节无疑是个热门话题,年轻人乐得多了个约会的节日,很多商家也瞄准商机,希望趁机大赚一笔.如今,七夕往往被视作"中国情人节".说起来,从古至今,它也确实是个无比浪漫的节日,包 ...
最新文章
- python项目归纳总结-python excel常用方法归纳总结
- python中label组件参数_python中连接的组件标签
- g++ linux 编译开栈_方舟编译器编译hello world踩坑全记录
- Linux上Libevent的安装
- 【OS学习笔记】三十八 保护模式十:中断和异常的处理与抢占式多任务对应的汇编代码----微型内核汇代码
- iptables 开放远程_远程FX正式上市 指导价11.99万-12.99万元_搜狐汽车
- 简明Python教程学习笔记_4_数据结构
- 分布式事务中间件你知道哪些?
- c4d计算机丢失api-ms,SVsSccManager Interface
- 为什么 Oracle 应该主推 NetBeans
- 广州自由自在进口食品进入寻常百姓家
- CentOS install btsync
- 空间直角坐标系(xyz)与大地坐标系(经纬高)的转换
- 单片机c语言计算器,基于STC89C52单片机的计算器的设计.doc
- centeros 卸载mysql_如何卸载数据库centeros
- 糯米粉可以做什么好吃的 糯米粉做法大全
- Unity UI Text组件添加contentsizefitter后获取RectTransform宽度
- Java程序的编辑、编译、运行
- 【最新排名(按点赞)】投票倒计时三天:继续为你喜欢的征文作品投票吧!...
- 编辑/调试汇编语言所需要工具
热门文章
- CF981E Addition on Segments 线段树分治 + bitset优化
- UVA - 11361 Investigating Div-Sum Property(数位dp/记忆化搜索板子)
- [WC2011][BZOJ2115] Xor
- [学习笔记] 单位根反演
- YBTOJ:比赛得分(期望)
- NOI.AC#2266-Bacteria【根号分治,倍增】
- YbtOJ#943-平方约数【莫比乌斯反演,平衡规划】
- P3462-[POI2007]ODW-Weights【贪心】
- jzoj6375-华灵「蝶妄想」【结论题】
- nssl1192-加密【字符串hash】