构建全屏 Web 应用程序

全屏 UI 设计有助于通过消除干扰来保持用户与内容的专注互动。因此,可以看到在现代 Web 应用程序中越来越多地使用全屏 UI,这都得益于浏览器的发展。在过去Web 应用要支持丝滑全屏还是有一定的复杂度,如借助 Flash 等等。在本文中,通过一个简单的全屏功能来展示 JavaScript 全屏 API 功能的使用。

WEB全屏API简介及示例

FullScreen API允许页面上的一个元素有一个全屏视图,通常情况下,会在不同的图形或媒体资源(例如视频或图像)中看到这一点,但实际上可以让页面上的任何元素都具有全屏视图。 FullScreen API 目前在 Chrome、Firefox、Opera 和 Edge 中得到很好的支持。

细说包管理器yarn和npm

包管理器是一种以各种方式自动处理项目依赖关系的工具。例如,在包管理器的帮助下,可以安装、卸载、更新和升级包,配置项目设置、运行脚本等等。所有复杂和乏味的工作都由包管理器完成,让开发人员专注于编码。

CSS交互动画指南之keyframes

过去 WEB 需要实现交互动画效果是使用 flash 、javascript、Gif,近年来随着 flash 的淘汰,javascript 和 CSS 功能的增强,使得现代 WEB 应用的交互越来越丰富。借此总结一下 CSS 交互动画实现的基础,关键的知识点是 keyframes ,文章涉及的代码示例效果可以点击查看动画效果。

ServiceWorker工作原理、生命周期和使用场景

service worker,是现代web开发的关键部分,在最近几年获得了关注,这都要归功于 PWA(渐进式 Web 应用程序) 的流行。`service worker` 通过向典型的 Web 应用程序添加后台同步、离线渲染和推送通知等功能,缩小了本机应用程序和 Web 应用程序之间的差距,主要任务之一是充当代理。

Chai 和 Mocha 为API编写测试

在文章《JavaScript单元测试的“抹茶”组合:Mocha和Chai》介绍了JavaScript单元测试常用组合,本文展示使用 Chai 和 Mocha 为API编写简单的测试用例。 本文将除用到主要框架 Chai 和 Mocha 外,还需要用到 Chai HTTP。

JavaScript 开发人员应该理解的 this

JavaScript 是一种基于原型的编程语言,没有类的概念。意味着 this 将指向调用函数的对象,通常称为上下文。当然 this 不止于此,在函数内部的引用可以绑定到不同的对象,这得取决于函数是从哪里被调用。

细说节流(Throttle)和防抖(Debounce)

节流(Throttle)和防抖(Debounce)对于前端开发人员来说应该是十分熟悉的,节流(Throttle)和防抖(Debounce)是两种可以节省性能的编程技术,两者的目的都是为了优化性能,提高用户体验,都是基于 DOM 事件限制正在执行的 JavaScript 数量的方法

图解URL、URI和URN 区别

作为一名开发人员,特别的前端开发人员,已经无数次的听到过 URL 和 URI,对于 URN 可能听过的要少点,那么它们之间有什么区别呢?本文带大家巩固一下基本概念。