分类: JavaScript
Vue3的setup中使用ref获取dom元素
背景问题
- 在vue3中input如何获取焦点？
- vue3 setup语法糖如何获取dom元素？
vue2 的方法
在 vue2 中，在组件上设置 ref 属性之后，就可以通过 this.$refs.ref 访问到对应的 DOM 元素。
<input type="text" ref=[......]一道前端面试题
输入字符串’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[……]
什么是PAC文件
什么是PAC文件？
PAC文件是在使用代理服务器的时候，告诉浏览器该如何选择的一个配置文件。所以PAC文件又称为代理自动配置文件。
PAC文件实质上是JavaScript代码。
如何编写PAC文件
下面是一个最简单的PAC文件代码：
function FindProxyForURL(url[......]JavaSript模块规范：AMD规范与CMD规范介绍
JavaSript模块化
在了解AMD，CMD规范前，还是需要先来简单地了解下什么是模块化，模块化开发？
模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想[……]
JavaScript的api设计原则
前言
本篇博文来自一次公司内部的前端分享，从多个方面讨论了在设计接口时遵循的原则，总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章，相关地址会在后面贴出来。很难做到详尽充实，如果有好的建议或者不对的地方，还望不吝赐教斧正。
一 接口的流畅性
好的接口是流畅易[……]
移动端抓包及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[......]JavaScript截取字符串slice()、substr()、substring()的区别
共同点
第二个参数都可以省略，省略以后都是截取到字符串最后。
区别
第一个参数
- substring() 不能为负数
- substr() 可以是负数，是负数从尾部开始计算
- slice() 可以是负数，是负数从尾部开始计算
第二个参数
- substring() 不能为负数，终点的位置，需要[……]
一个典型的闭包方案，取for循环中i的值
有个网友问了个问题，如下的html，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; chars[......]前端图片懒加载
https://mp.weixin.qq.com/s/JYglEGYN9tnGpDg7ARPx7w
http://gitlab.66xue.com/xdf-fe/LoadOnDemand[……]
前端扩展插件
模拟数据
Easy Mock
野狗
JavaScript 交互
waypoints 滚动到某元素触发某事件
JavaScript UI工具
autosize 自动调整textarea输入框大小
clipboardjs 剪切板
jQuery custom content scroller 滚[……]
IE下载保存base64文件
如果一个超链接的链接地址是一个base64的代码，如下：
<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYW[......]前端跨域方法总结
什么是 AJAX 跨域
端口不同，域名（包括子域，层级）不同，协议不同。
前端跨域
- 超链接、重定向、表单提交
- 资源引入<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font[……]
JavaScript匿名函数的写法
// 最常用的两种写法
(function(){ /* code */ }()); // 老道推荐写法
(function(){ /* code */ })(); // 当然这种也可以
// 括号和JS的一些操作符（如 = && || , 等）可以在函数表达式和函数声明上消除歧义[......]stopPropagation()，preventDefault()和return false
阅读本文之前你最好了解JavaScript在浏览器中 事件冒泡 和 事件捕获 两个概念。
因为HTML结构中存在着父、子节点的事件冒泡，以及浏览器默认动作，所以我们使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagat[……]
JavaScript 几个需要注意的知识点
1 for in
for in 循环可以取得对象所有可枚举的属性，包括继承的属性。
Object.keys() 不能取得继承的属性，而 Object.getOwnPropertyNames() 可以替代 for in。
2 使用 new 操作符创建对象，如果构造函数内部有 return 语[……]
JavaScript操作Checkbox，以及获取选中状态
基于jQuery
1 选中状态
1.1 选中的元素
[js]
$(‘input[type=checkbox]:checked’)
$(‘input:checkbox:checked’)
[/js]
2.2 是否选中
[js]
$(‘input:checkbox’).is[……]
如何开发Chrome扩展程序
Chrome扩展程序为谷歌浏览器提供了丰富的扩展功能。
那如果开发一个谷歌Chrome浏览器的扩展程序呢？
首先，我正在翻译谷歌浏览器开发者平台的中文版（Chrome开发文档中文版），现在已经翻译完成了扩展程序开发最基本的几篇内容：
Object.defineProperty()默认值是false的误解
在JavaScript中，通过Object.defineProperty()方法来定义对象的属性，详情可以参照《JavaScript高级程序设计》第3版第6章6.1.1属性类型（第139页）。
书中指出：
“注意在调用Object.defineProperty()方法时，如果不指定， c[……]
React验证器propTypes
Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
[javascript]
React.[……]