js
文章平均质量分 70
小小小菜鱼
这个作者很懒,什么都没留下…
展开
-
JS原生DOM操作 - 获得元素/网页大小/元素宽高
它返回一个对象,其中包含了left、right、top、bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离。scrollHeight和scrollWidth属性提供了元素内容的整体宽度和高度,指包括滚动条在内的视觉面积(包括因溢出而未显示在屏幕上的部分)。每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离。网页元素的绝对位置,指该元素的左上角相对于整张网页左上角的坐标。原创 2024-04-11 16:16:12 · 2403 阅读 · 0 评论 -
JS模块化——AMD、CommonJS和ESModules
在模块化概念出现之前,JS 的脚本通常是通过 script 标签直接嵌入 HTML 中的,但是不同 js 文件里申明的变量都会存在于全局作用域中。不同的开发者维护不同的 js 文件,很难保证不和其它 js 文件冲突。全局变量污染开始成为开发者的噩梦。AMD是"Asynchronous Module Definition",意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。原创 2024-04-07 18:34:08 · 1606 阅读 · 0 评论 -
localForage封装代码
对于浏览器的兼容问题,它有一个优雅降级策略,若浏览器不支持 indexedDB 则使用 WebSQL ,如果不支持 WebSQL 则使用 localStorage。当前端本地存储量比较大的时候会想到 indexedDB,indexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象)。localForage 是基于 indexedDB 封装的库,通过它我们可以简化 indexedDB 的使用。原创 2024-04-06 22:39:22 · 262 阅读 · 0 评论 -
localStorage封装代码
JSON.parse(): 将 JSON 字符串转化为 JS 对象,键值都必须使用双引号包裹。JSON.stringfy(): 将 JS 对象转化为 JSON 字符串。原创 2024-04-06 17:09:12 · 331 阅读 · 0 评论 -
JS实现继承的方式ES6版
这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B的实例,因此super()在这里相当于A.prototype.constructor.call(this)。子类实例的__proto__的__proto__指向父类的__proto__。作为函数时,super()只能用在子类的构造函数之中,用在其他地方就会报错。原创 2024-04-03 11:41:22 · 604 阅读 · 0 评论 -
JS实现继承的方式原生版
只能考虑Child.prototype = new Father 这一步,最终需要达到目的:Child.Prototype.__ proto __ = Father.prototype(子类的原型指向父类的原型, 解决父类调用两次的缺陷)----->(也就是一个对象继承另一个对象,上面的寄生式和原型式继承方式),另外最后还是需要将子类实例的constructor指回子类。组合继承既具有原型链继承能够复用函数的特性,又有借用构造函数方式能够保证每个子类实例能够拥有自己的属性以及向超类传参的特性。原创 2024-04-02 20:49:12 · 1096 阅读 · 0 评论 -
JS 的异步加载方法: async、defer、动态加载
相同点:都不会阻塞后续元素渲染,都会立刻加载。都只适用于外部脚本。不同点:async 脚本加载完后会立刻执行,defer 的会在文档元素加载完后,DOMContentLoaded事件前执行。所以需要对DOM元素进行操作的脚本就不应该用async,因为元素可能没加载出来。原创 2024-03-21 21:27:13 · 516 阅读 · 0 评论 -
【实例】Ajax、Axios、Fetch区别
总结:ajax 是一种技术思想,不是具体的 API 和库,最早的实现有 XHR。fetch 是 ES6 新的异步请求 API。axios 是第三方库。原创 2024-03-18 10:19:26 · 1127 阅读 · 0 评论 -
【实例】JS装饰器(STAGE3)与TS装饰器使用及对比
之前项目里用TS的装饰器比较多,但是感觉现在大多数前端开发用装饰器都是用的TS装饰器,很少见用JS装饰器,特别是stage3的。也很少见什么文章会写到它们的区别,我就简单介绍对比一下,欢迎谈论!原创 2024-03-14 13:45:57 · 1117 阅读 · 0 评论 -
前端复制内容到剪贴板,新老js方法示例
document.execCommand()传统方法,兼容性好,但已弃用。问题是该方法只能复制选中的文本,就是说在复制前需要用到select将内容先选中。例const inputElement = document.querySelector('#input');inputElement.select();document.execCommand('copy');如果不是复制DOM元素里的内容,而是在JS中的任意文本.要先创建一个元素,将要复制的值放进去,再选中、复制,最后记得要移除这个元素原创 2021-11-05 10:30:11 · 1048 阅读 · 0 评论 -
分页查询 前后端代码
需求分析:用表格展示数据,当数据过大时,从时间和缓存上考虑,一次返回全部数据是不可取的。于是使用分页查询。前端每次点击切换页面的时候,带着当前页面参数向后端发请求,后端查询时用limit,只返回当前页面的数据,同时后端需返回一个count值计算所有要展示的数据量,供前端可展示页数(否则就只有一页)。前端react、antd,后端koa、sqlite。前端代码:首先在组件pagination内设置翻页回调函数,写在属性onChange里,该函数可以拿到当前页面和页面条数,带上这些参数向后端发请求。原创 2021-01-20 16:05:53 · 894 阅读 · 0 评论 -
js从未知嵌套情况对象中获取某属性(key)对应的值(value)
写需求的时候遇到一个问题,当传过来的参数(一个对象)内部情况位置时,可能多层嵌套对象,也可能就一层,要找到其中某个属性的值。应该可以用递归和转换为json字符串再正则匹配两种方式。目前先实现了第一种递归方法。以下是函数,data是传入的对象,field是需要找的属性名。 async function findKey(data, field) { let finding = ''; for (const key in data) { if (key === f原创 2020-11-01 17:27:01 · 3368 阅读 · 0 评论