Skip to content

{ Category Archives } 前端

使用 React Hooks 构建一个音频播放器

原文链接：https://letsbuildui.dev/articles/building-an-audio-player-with-react-hooks

今天我们将使用 HTMLAudioElement 接口构建一个基于 React Hooks 的音频播放器组件。这个播放器可以实现音频列表的[……]

继续阅读

2021 09 01 React
JavaScript 评论 (0)

H5处理全面屏iPhone底部边距

iPhone 从 X 开始使用全面屏，浏览网页的时候底部会有一条遮住可视区域，为了避免H5页面被iPhone底部条遮住，可以采取以下方案。

iPhone自适应底部

首先，iPhone自带了屏幕安全区域的处理策略，可以使用constant和env两个css特性来获取底部的安全距离，然后通过@sup[……]

继续阅读

2021 04 01 移动web
JavaScript
浏览器兼容 评论 (0)

苹果手机iPhone各型号分辨率及独立像素CSS适配

型号
尺寸
逻辑分辨率（点）
逻辑像素
Scale Factor
设备分辨率
物理像素
（渲染像素）
ppi

iPhone 3GS
3.5
320×480
@1x
320×480
163

iPhone 4
iPhone 4s
3.5
3[……]

继续阅读

2020 02 08 CSS 评论 (0)

IE6、IE7、IE8、Firefox、Chrome、Safari CSS hack兼容一览表

知道CSS的朋友一定听说过CSS hack，现在的浏览器IE、Firefox、Chrome、Opera、Safari。。。百家争鸣，可苦了Web前端开发人员了。

不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可[……]

继续阅读

2019 11 12 CSS
浏览器兼容 评论 (0)

什么是PAC文件

什么是PAC文件？

PAC文件是在使用代理服务器的时候，告诉浏览器该如何选择的一个配置文件。所以PAC文件又称为代理自动配置文件。

PAC文件实质上是JavaScript代码。

如何编写PAC文件

下面是一个最简单的PAC文件代码：

function FindProxyForURL(url[......]
继续阅读
2019 03 06 JavaScript
百科 评论 (0)

HTML canvas框架汇总

HTML canvas的框架很多，而且侧重不同，比如 Three.js 是有名的3D框架，d3.js 偏重于数据展示。

名称
领域
框架
移动端
文档
其他

ThreeJS
3D
N
Y
全
强大的绘图引擎

playCanvas[……]

继续阅读

2019 01 07 HTML5
素材资源 评论 (2)

Google Web 更新(2017年6月)：DOMException The play() request was interrupted

英文原文：DOMException: The play() request was interrupted

你是不是刚刚在Chrome浏览器的控制台Console里遇到了这个未预料的媒体错误？

Uncaught (in promise) DOMException: The play() re[......]
继续阅读
2019 01 03 浏览器兼容 评论 (0)

JavaSript模块规范：AMD规范与CMD规范介绍

JavaSript模块化

在了解AMD，CMD规范前，还是需要先来简单地了解下什么是模块化，模块化开发？

模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想[……]

继续阅读

2018 08 23 JavaScript 评论 (0)

JavaScript的api设计原则

前言

本篇博文来自一次公司内部的前端分享，从多个方面讨论了在设计接口时遵循的原则，总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章，相关地址会在后面贴出来。很难做到详尽充实，如果有好的建议或者不对的地方，还望不吝赐教斧正。

一 接口的流畅性

好的接口是流畅易[……]

继续阅读

2018 08 23 JavaScript 评论 (1)

web客户端缓存机制

Readme

如果你已经熟悉客户端的缓存机制，可以直接跳过，看最后一节的代码规范。

Bug 场景

比如我们在服务器发布了一个页面：http://domain.com/cate/page.html

在这个页面当中我们引入了一个样式文件 style.css

    <link rel="[......]
继续阅读
2018 05 28 网络 评论 (0)

移动端web调试指南

本文包括：

  1. 抓包（截获网络请求）
    • 在Windows上使用Fiddle抓包
    • 在Mac上使用Charles抓包
  2. 页面调试：
    • 在Windows上调试iOS
    • 在Windows上调试Android
    • 在Mac上调试iOS
    • 在Mac上调试Android

本文旨在解决的问题包括：

  1. 在电脑上通[……]

    继续阅读

2018 05 09 移动web
JavaScript
软件 Software 评论 (0)

JavaScript需要特别注意的地方

1 转换

parseInt(0.000001)  // 0
parseInt(0.0000001)  // 1

'5' == 5  // true

2 null

typeof null  // "object"

null == undefined  // true

10 + null[......]
继续阅读
2018 04 23 JavaScript 评论 (0)
▲
TOP