HTML DOM的各种宽高、偏移位置的属性总结

兼容性:All; 指的是元素的可视部分宽度和高度,即padding+content,如果没有滚动条,即为元素设定的高度和宽度,如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高,包含内边距,但不包括水平滚动条、边框和外边距。 测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽
HTML DOM的各种宽高、偏移位置的属性总结

Ant Design Vue使用记录,持续记录

好些问题,每次解决了,下次遇到了又要重新翻文档,干脆就自己记录一下。 Form.create(options) | this.$form.createForm(this, options) ,通过JFX方式去定义一个Form组件的各种属性。经 Form.create() 包装过的组件会自带 this.form 属性,如果使用 template 语法,可以使用 this.$form.createFo
Ant Design Vue使用记录,持续记录

JS定时器清除之后,已经开始但是没有运行完的函数还会继续运行吗?

最近使用定时器的时候遇到这样一种情况,定时器清除了,功能仍然在跑(遍历数组,同步定时网络请求)。 排查了一下代码,发现逻辑确实没问题。后来一想,是不是函数没运行完,仍然在跑,于是上代码测试了一下: let timer = setInterval(async () => { console.log("开始") await new Promise((resolve) => { setTim
JS定时器清除之后,已经开始但是没有运行完的函数还会继续运行吗?

前端Mockjs学习笔记,持续记录

相比于自己写一个模拟数据返回的后端接口,好像还是这个来的更加方便。 让前端攻城师独立于后端进行开发。不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 基于对window的xhr对象的二次封装,增加了用于拦截的逻辑。 npm install mockjs Mock.setup({ timeout: 400 }) M
前端Mockjs学习笔记,持续记录

前端自适应方案总结,前端最佳自适应方案

我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒(物理像素)组成的。 是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。一个CSS像素对应多少个设备像素是根据当前的缩放比例 12px对应36px,缩放0.5,12px对应18px。扩大2.0,12px对应72px。 它的数值体现了物理像素和逻辑像素之间的关系,用公式可以计算出该设备的DPR的大小: DPR
前端自适应方案总结,前端最佳自适应方案

WebRTC开发经验总结,持续记录

volume 音量约束 sampleRate: 采样率 sampleSize: 采样大小,采样的位数 echoCancellation: 回音消除 autoGaincontrol: 增加音量 noiseSuppression: 降噪 latency : 延迟大小 channelCount: 切换声道 deviceID: 多个音频输入输出设备的进行切换 groupId: 同一个物理设备,是一个分组,
WebRTC开发经验总结,持续记录

Vuex3.x、Vuex4.x状态管理器学习笔记

Vuex:https://v3.vuex.vuejs.org/zh 什么是状态管理器?方便调试,方便维护数据。https://vuex.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E2%80%9C%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%A8%A1%E5%BC%8F%E2%80%9D%EF%BC%9F import Vu
Vuex3.x、Vuex4.x状态管理器学习笔记

前端节流(throttle)和防抖动(debounce)

节流指的都是某个函数在一定时间间隔内只执行第一次回调。举个常见的节流案例:我们把某个表单的提交按钮——button 设成每三秒内最多执行一次 click 响应;当你首次点击后,函数会无视之后三秒的所有响应;三秒结束后,button 又恢复正常 click 响应功能,以此类推。 有什么用呢?通常,这类提交 button 的@click响应会给后端发送 api 请求,频繁的点击意味着频繁的请求(流量)
前端节流(throttle)和防抖动(debounce)

JS的异步编程过程中的问题集锦、echarts使用记录。

为了方便维护,在JS里的把html模板和业务逻辑做了分离,在业务逻辑里向模板对象传递指定的data对象返回生成好的html,以往的数据对象是用户交互产生的,今天需要改成从接口拉取。 按照以往的逻辑,获取用户的交互数据,传递给模板。基本上是同步的,今天修改的时候为了不触碰原有的代码,把网络请求单独放在了其他对象里,业务流程变成了,调用网络请求函数产生的返回值作为数据对象传递给模板对象。 一切看似没问
JS的异步编程过程中的问题集锦、echarts使用记录。

Es6学习笔记,持续记录

解构:https://www.runoob.com/w3cnote/deconstruction-assignment.html ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。 const s = new Set(); .forEach(x => s.ad
Es6学习笔记,持续记录

记录一下Jquery日常使用过程中的一些经验

find()可以在所有后代元素里查找,而children()只会查找子代元素(不包括第二层级)。 not() 从匹配元素集合中删除元素。从包含所有段落的集合中删除 id 为 "selected" 的段落: $("p").not("#selected") is() 方法用于查看选择的元素是否匹配选择器。 $(selector).is(selectorElement,function(index,el
记录一下Jquery日常使用过程中的一些经验

css学习笔记,持续记录。

1. 通配符选择器:  *{...};  选择所有元素; 2. HTML标签选择器:p{...} 、#p{...}、.p{...}; 选择指定的所有标签,指定id,指定类的所有标签; 3. 类选择器选择有特定 class 属性的 HTML 元素,如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。选择所有具有 class="center" 的 <p> 元素:p.c
css学习笔记,持续记录。

JS学习笔记,持续记录

回调函数内的this指向了dom对象本身,注意JQ的内存问题,删除dom时自定义的事件会继续存在。 $(".select li").click(function (event){ $(".select li").removeClass("current"); $(event.target).addClass("current"); }) $(".btn").click(function(e){ /
JS学习笔记,持续记录

JS模块化编程以及AMD、CMD规范、Webpack

先想一想,为什么模块很重要? 随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的
JS模块化编程以及AMD、CMD规范、Webpack

记录一些以前没见过的JS语法

《ES6标准入门 第3版 .pdf》看了一遍,时间长了没怎么用,也没记住多少,嗯,那只好在实践中学习。 1. js中函数的两种命名方式,即表达式和声明式。 :函数的声明式写法为:function foo(){/*...*/},这种写法会导致函数提升,所有function关键字都会被解释器优先编译,不管是声明在什么位置,都可以调用它,但是它本身不会被执行,定义只是让解释器知道其存在,只有在被调用的时
记录一些以前没见过的JS语法

JS浏览器环境下各种实用API记录

常见的不做记录,在这记录自己以前没见过的。 Clipboard API 是下一代的剪贴板操作方法,比传统的document.execCommand()方法更强大、更合理。 它的所有操作都是异步的,返回 Promise 对象,不会造成页面卡顿。而且,它可以将任意内容(比如图片)放入剪贴板。 const clipboardObj = navigator.clipboard; /*返回 Clipboar
JS浏览器环境下各种实用API记录

Chrome浏览器禁用JS、Devtools工具使用的方法记录

1.  为什么要禁用? 有些网站实在是不友好,禁止F12,禁止右键。。。等等很多情况,我们只能禁用JS了,任它JS再厉害,也只能乖乖趴下。 设置-> 高级->隐私设置和安全性->网站设置->Javascript,添加禁用网址即可。 本来想自己写的,发现了一篇很好的文章,那就这样吧 大门:https://github.com/CompileYouth/front-end-st
Chrome浏览器禁用JS、Devtools工具使用的方法记录

当鼠标按下时拖动元素,简单的JS实现

监听需要移动元素的键盘按下、松开事件和文档对象的鼠标移动事件, 通过一个布尔值作为是否移动的标志,按下时为TRUE,代表跟随移动,鼠标松开为FALSE,代表不跟随移动,鼠标移动时改变元素偏移量。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="
当鼠标按下时拖动元素,简单的JS实现

【PDF分享】阮一峰 JavaScript 中文教程 .pdf

《JavaScript 中文教程》主要介绍 JavaScript 核心语法和浏览器网页开发的基本知识,不涉及 Node。全书可以分成以 下四大部分。 1、基本语法 2、标准库 3、浏览器API 4、DOM 本教程全面介绍 JavaScript 核心语法,覆盖了 ES5 和 DOM 规范的所有内容。 内容上从最简单的讲起,循序渐进、由浅入深,力求清晰易懂。所有章节都带有大量的代码实例,便于理解和模仿
【PDF分享】阮一峰 JavaScript 中文教程 .pdf