分类: 前端
一个技术精致的网站：接口设计和图片加载
本文仅适用于互联网web开发者。
我们在看到一个网站的时，首先关注到的多是它的界面设计，美观并炫酷的页面，是让我们对它的开发者产生敬意的最容易的方式。
抛开界面和用户交互之后，从代码实现上，怎么才能看出一个网站的技术优雅而精致呢？
互联网从业者，不管是前端还是后端，肯定对这个问题多多少少都考虑[……]
Vue3的setup中使用ref获取dom元素
背景问题
- 在vue3中input如何获取焦点？
- vue3 setup语法糖如何获取dom元素？
vue2 的方法
在 vue2 中，在组件上设置 ref 属性之后，就可以通过 this.$refs.ref 访问到对应的 DOM 元素。
<input type="text" ref=[......]前端浏览器缓存在html配置
HTML 缓存配置格式
HTML文件通过标签的 http-equiv 属性来配置HTML文件的 http 响应头。
如：
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />[......]一道前端面试题
输入字符串’a(3)b(1)cde(2)f(0)’，得到输出结果：’aaabcdee’。
其中括弧内的数字是括弧前面字母的重复次数；如果字母后面没有括弧，就原样输出（相当于重复1次）；括弧内数字为0则不输出。
这道题其实非常简单，但是有多种解题思路，涉及的基本知识点也很多。下面我会按照我觉得由低[……]
Vue3 setup使用模板引用$refs
在Vue2中，我们通常这么做实现一个模板引用：
<template>
<input ref="input" />
</template>
<script>
export default {
data() {},
methods: {[......]使用 React Hooks 构建一个音频播放器
原文链接：https://letsbuildui.dev/articles/building-an-audio-player-with-react-hooks
今天我们将使用 HTMLAudioElement 接口构建一个基于 React Hooks 的音频播放器组件。这个播放器可以实现音频列表的[……]
H5处理全面屏iPhone底部边距
iPhone 从 X 开始使用全面屏，浏览网页的时候底部会有一条遮住可视区域，为了避免H5页面被iPhone底部条遮住，可以采取以下方案。
iPhone自适应底部
首先，iPhone自带了屏幕安全区域的处理策略，可以使用constant和env两个css特性来获取底部的安全距离，然后通过@sup[……]
苹果手机iPhone各型号分辨率及独立像素CSS适配
型号
尺寸
逻辑分辨率（点）
逻辑像素
Scale Factor
设备分辨率
物理像素
（渲染像素）
ppi
iPhone 3GS
3.5
320×480
@1x
320×480
163
iPhone 4
iPhone 4s
3.5
3[……]
IE6、IE7、IE8、Firefox、Chrome、Safari CSS hack兼容一览表
知道CSS的朋友一定听说过CSS hack，现在的浏览器IE、Firefox、Chrome、Opera、Safari。。。百家争鸣，可苦了Web前端开发人员了。
不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可[……]
什么是PAC文件
什么是PAC文件？
PAC文件是在使用代理服务器的时候，告诉浏览器该如何选择的一个配置文件。所以PAC文件又称为代理自动配置文件。
PAC文件实质上是JavaScript代码。
如何编写PAC文件
下面是一个最简单的PAC文件代码：
function FindProxyForURL(url[......]HTML canvas框架汇总
HTML canvas的框架很多，而且侧重不同，比如 Three.js 是有名的3D框架，d3.js 偏重于数据展示。
名称
领域
框架
移动端
文档
其他
ThreeJS
3D
N
Y
全
强大的绘图引擎
浏览器自动播放策略的应对
如果不清楚浏览器自动播放策略，请先参阅：
Chrome
- Google Web 更新(2017年6月)：DOMException: The play() request was interrupted
- Google Web 更新(2017年9月)：自动播放策略变更
Safari
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[......]JavaSript模块规范：AMD规范与CMD规范介绍
JavaSript模块化
在了解AMD，CMD规范前，还是需要先来简单地了解下什么是模块化，模块化开发？
模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想[……]
JavaScript的api设计原则
前言
本篇博文来自一次公司内部的前端分享，从多个方面讨论了在设计接口时遵循的原则，总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章，相关地址会在后面贴出来。很难做到详尽充实，如果有好的建议或者不对的地方，还望不吝赐教斧正。
一 接口的流畅性
好的接口是流畅易[……]
web客户端缓存机制
Readme
如果你已经熟悉客户端的缓存机制，可以直接跳过，看最后一节的代码规范。
Bug 场景
比如我们在服务器发布了一个页面：http://domain.com/cate/page.html
在这个页面当中我们引入了一个样式文件 style.css
<link rel="[......]移动端抓包及web调试指南
本文包括：
- 抓包（截获网络请求）
- 在Windows上使用Fiddle抓包
- 在Mac上使用Charles抓包
- 页面调试：
- 在Windows上调试iOS
- 在Windows上调试Android
- 在Mac上调试iOS
- 在Mac上调试Android
本文旨在解决的问题包括：
- 在电脑上通[……]
JavaScript需要特别注意的地方
1 转换
parseInt(0.000001) // 0
parseInt(0.0000001) // 1
'5' == 5 // true
2 null
typeof null // "object"
null == undefined // true
10 + null[......]小程序能力汇总
1 入口
- 扫码或识别二维码（可以进入指定小程序指定某页面）
- 分享到群/好友（可以进入指定小程序指定某页面）
- 微信搜索框（搜索指定小程序，进入默认首页）
- 微信首页下拉界面（进入最近使用过的小程序默认首页）
- 关联公众号菜单（进入指定小程序）
- 推送给用户的模板消息（指定小程序）
- 同公众号的其他关联小程[……]
JavaScript截取字符串slice()、substr()、substring()的区别
共同点
第二个参数都可以省略，省略以后都是截取到字符串最后。
区别
第一个参数
- substring() 不能为负数
- substr() 可以是负数，是负数从尾部开始计算
- slice() 可以是负数，是负数从尾部开始计算
第二个参数
- substring() 不能为负数，终点的位置，需要[……]
微信内置浏览器H5如何清除缓存以及cookie和localStorage何时清除
UPDATE: 2021-01-20 20:01
背景
我们在开发微信 H5页面的时候经常会遇到资源文件（图片、css、js 等）不更新的问题，其实解决方案很简单，只要在请求地址之后加一个随机数参数即可：
<img src="./img/image-url-test.jpg?v20180[......]一个典型的闭包方案，取for循环中i的值
有个网友问了个问题，如下的html，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; chars[......]字符编码
字符编码讲解文章：
前端历史课：那些来自洪荒时代的编码知识
JavaScript 有个 Unicode 的天坑
ASCII
编码
缩写
说明
编码
字符
编码
字符
编码
字符
0
NUL(null)
空字符
33[……]
前端图片懒加载
https://mp.weixin.qq.com/s/JYglEGYN9tnGpDg7ARPx7w
http://gitlab.66xue.com/xdf-fe/LoadOnDemand[……]