“JS API”目录存档

万岁,浏览器原生支持ES6 export和import模块啦!

2018年08月2日,星期四

万岁,浏览器原生支持ES6 export和import模块啦!不仅支持静态import,还支持动态import。原以为和Node.js中的模块import一样,比较简单容易理解,结果一研究发现,在web浏览器中,原生的export和import需要知道的细节还真多,也很有必要了解。

本文内容较多,篇幅较长,丰富的demo和源代码展示,有一定深度,希望本文内容能够对您的学习有所帮助。

阅读全文…

隐私相关-了解HTML5 Do Not Track API

2018年07月26日,星期四

文章头图

中国的互联网对隐私那真是一点都不上心,前有“李彦宏称中国用户愿用隐私换便利”,后有“美团点评会显示你的好友在哪儿里点过餐,住过什么酒店”。其实浏览器本身提供了API可以让用户保护自己隐私不被跟踪,但是鲜有人知道,就算有知道的,也不会在实际项目中用,因为大环境对隐私都不重视,价值有限。

不过,从近些年诸多事件网民的言论来看,隐私这件事情已经越来越关注,一定会在哪天摆在台面上成为很重要的议题进行发酵的!因此,如果网站能在隐私这件事情上做得能让用户明显感觉到尊重,则这个网站的影响力,公司的口碑说不定会爆炸式增长。那作为前端的我们,可以在这件事情做些什么呢?

阅读全文…

JS字符串补全方法padStart()和padEnd()简介

2018年07月24日,星期二

字符串补全文章缩略图 在JS中,字符串补全是常用操作,以前我们的做法是先检测字符串长度够不够,不够,自己再拼接字符串以到达我们需要的字符串长度。到了ES6,浏览器天然支持字符串长度补全方法,这个方法就是padStart()padEnd()。乍一看好像很简单,但是,仔细一深入,发现意想不到的细节还挺多的,要不,你进来瞅一瞅?

阅读全文…

借助Web Animations API实现JS keyframes动画

2018年03月23日,星期五

用一句话解释Web Animations API就是把CSS3实现的animation动画变成有JS代码实现。

各有优势。CSS3 Animations动画简单,灵活,复用性强,非常适合静态动画效果;Web Animations参数由JS控制,与单个元素绑定,因此非常适合不固定的动态动画效果,例如随机动画……

阅读全文…

鼠标无限移动 JS API Pointer Lock简介

2017年10月18日,星期三

用一句话说明Pointer Lock API的作用就是:Pointer Lock API可以让你的鼠标无限移动,脱离浏览器窗体的限制!

这对于一些需要鼠标控制的应用非常有用。举个例子:某3D VR女友的游戏,你鼠标向上移动,则你的视角就会往下……

阅读全文…

before(),after(),prepend(),append()等新DOM方法简介

2017年09月28日,星期四

接下来要介绍这些新增的DOM API方法,都比较新,其设计目的是可以像jQuery那样,使用非常简单的api,便利的操作dom元素。

这些api包括:before()after()replaceWith()append()prepend()……

阅读全文…

利用HTML5 Web Audio API给网页JS交互增加声音

2017年06月10日,星期六

HTML5 Web Audio API可以让我们无中生有创造声音,而且是各种音调的声音,换句话说,我们通过JavaScript就会创建一个完整的音乐出来,这可能和我们以前的认知有些不一样,例如点击按钮出现一个点击的音效,传统思维可能是需要JS触发一个<audio>音频文件的播放,实际上,并不需要任何额外的资源,十几行JS代码就可以搞定,而这就是本文要介绍的内容。

阅读全文…

ES6 JavaScript Promise的感性认知

2014年02月19日,星期三

对于先知的我们,故事的安排在脑中是即时出现的,而非实际上的异步发生。因此,作为创世的编程者而言,这种与瞬间思考所同步的代码更符合现实世界下的思考方式。因此,更易读更易于理解。Promise让我们以先知的视角呈现代码,更符合……

一篇偏理论的文章,不同的角度,不同的探讨,或许会有不同的收获。欢迎阅读,欢迎交流~~

阅读全文…

ECMAScript 5(ES5)中bind方法、自定义及小拓展

2012年10月12日,星期五

ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。其中,新增了一个名叫bind函数扩展方法(),以前有提过,点击这里查看详细。
不过,之前的介绍纯粹的翻译,含糊其辞,水土不服,这里,换身接地气的装束,让大家好好了解了解……

阅读全文…

HTML5全屏API在FireFox/Chrome中的显示差异

2012年10月8日,星期一

FireFox浏览器下的黑色背景就是全屏元素,其中图片的居中对齐是通过CSS控制的(:after伪类生成元素+vertical-align:middle实现),例如去掉text-align:center图片就不水平居中了;而Chrome的黑色背景属于系统的东西,其全屏元素似乎被浏览器劫持,默认状况下永远屏幕居中显示(去掉text-align:center图片依然水平居中)——脱离了常规CSS理解——如默认的display:block状态似乎变成了display:inline-block等……

阅读全文…