JavaScript
文章平均质量分 70
JavaScript 的魅力
cookcyq
Thinking | Freedom | Opinions are my own.
展开
-
JS & Lottie web 动画的使用
Lottie 是一款兼容跨平台 Android/IOS/Web 的动画操作库,只需引入一份 JSON 文件便可播放动画。JSON 文件是由一款叫做俗称AE的设计软件通过BodyMovin插件导出的。作为前端人员来说,我们不用关心如何制造这份 JSON 动画文件,是由设计师来提供的。原创 2023-09-22 07:15:55 · 1095 阅读 · 0 评论 -
Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别
Rollup工具可以将代码转成不同模块,实现一套代码多端(浏览器/Node)引入。浏览器(代码通过 Script 标签引入)AMD(兼容 requirejs.js 框架)CommonJS(Node.js 代码通过 CJS 方式引入)UMD (浏览器、AMD、CJS 均支持,是目前最常见的模块选择方式)后面会提到每个命令的作用,这里了解即可。原创 2023-07-16 22:04:56 · 1094 阅读 · 1 评论 -
JS & Node 模块化解释:AMD、UMD、CommonJS、 ESM
AMD就是为了解决命名污染而研发的,同时还支持按需加载,是第一个引入模块化开发的规范插件,要想使用AMD语法得借助一款插件RequireJS。注意,AMD 只适用于浏览器,虽然也支持 Node,但不如 Node 自家的 CJS,后面会讲。CommonJS也常被称为CJS,与ADMI一样属于模块化语法,不过它是用来兼容后端Nodejs语言,庆幸的是,CJS在 Node.js 中已内置,开箱即用,无需引入插件。UMD是AMDCommonJS。原创 2023-07-08 22:22:59 · 2456 阅读 · 7 评论 -
Vue3 & JSX 插槽、v-model 的用法以及 React JSX 的区别
Vue3 JSX 插槽、v-model 的用法以及与 React JSX 的区别。原创 2023-07-01 14:42:49 · 4780 阅读 · 2 评论 -
JS & setTimeout/setInterval、requestAnimationFrame 的关系以及回调函数、Promise、async/await 异步操作
掌握 setTimeout、回调函数、Promise/async 异步操作含义原创 2023-06-21 08:34:02 · 596 阅读 · 0 评论 -
JS & 介绍 Babel 的使用及 presets & plugins 的概念
Babel 给 ES6/7/8/9 Typescript、React / Vue3 JSX 等"语法糖"带来无限的可能。原创 2023-06-17 17:43:08 · 2965 阅读 · 0 评论 -
JS & 原型、原型链,继承,类之间的关系
原型 so easy原创 2023-06-10 10:32:58 · 481 阅读 · 0 评论 -
JS & 事件循环机制、调用栈、堆、主线程、宏任务队列、微任务队列、缓存管理之间的关系
JS 事件循环、异步任务的概念。原创 2023-06-06 11:51:36 · 841 阅读 · 0 评论 -
JS & 闭包、作用域的关系
闭包这词看起来虽高大上,但理解起来却跟纸老虎一样,非常容易理解,闭包指的是一组函数带有引用关系的,换句话说,函数内部访问外部的函数变量或属性就会构成闭包。所以,闭包在 JS 中无处不在。原创 2023-06-05 22:26:11 · 67 阅读 · 0 评论 -
JS & 改变 this 的三大利器:call / apply / bind
改变 this 如此简单原创 2023-06-03 20:28:38 · 348 阅读 · 0 评论 -
JS & CSS 关于 Shadow dom 的用法
你是否好奇过,浏览器自带的元素的样式是如何实现的,例如videoinput,又或者在某些网站中看到一些非浏览器自带且没见过的元素?如果你打开 F12 查看定位该元素的信息,你会发现啥都没看到!其实它只是默认情况下被设置隐藏了,这里可以打开控制面板,按住 F1,将勾选即可:这便是 Shadow DOM 技术,如果你看到了一些非原生标签,它也是用到了 Shadown DOM ,下面我将简单介绍它的用法。原创 2023-05-26 09:34:31 · 1426 阅读 · 0 评论 -
JS & Nginx 用一个简单案例解释 nginx ssi,seajs 的作用、使用
JS & Nginx 用一个简单案例解释 nginx ssi,seajs 的作用、使用原创 2023-04-01 22:53:09 · 862 阅读 · 1 评论 -
React & 用一个简单案例体验一遍 React-dom & React-router & React-redux 全家桶
用一个简单案例帮你过一遍 React 全家桶——React-dom & React-router & Redux-redux原创 2023-03-18 15:30:58 · 897 阅读 · 0 评论 -
React & JSX 日常用法与基本原则(不定时更新)
React JSX 日常用法与基本原则(不定时更新)原创 2023-03-12 12:04:16 · 281 阅读 · 0 评论 -
代码规范 & 详细解释 husky、prettier、eslint、lint-staged 的作用和使用
详细解释 husky、prettier、eslint、lint-staged 的作用原创 2022-06-25 23:12:28 · 11219 阅读 · 10 评论 -
TypeScript & 高级语法 & 详细解释 in、keyof、extends、索引签名、Record、typeof 的含义(不定时更新)
很早就听过 TypeScript,当时自己试了下觉得挺简单的,就是给数据声明一个类型提高可读和维护性,不过当时 TS 还不盛行,项目也没机会用到就一直落着,随着 TS 不断普及,许多项目都开始引入了 TS,这不最近在 github 看到一些 TS 代码后,心里开始吐槽:这好好的非要给 JS 装饰的这么花里胡哨的?我都认不出来这是什么语言了,你确定这是提升 JS 语言可读性而不是添乱?有同学跟我一样的请举个手!后来静下心来想了想,既来之则安之,与其吐槽,不如静下心来好好重温下 TS ,在这期间也提取了一些有原创 2022-06-19 15:35:06 · 4594 阅读 · 5 评论 -
解决报错 & JS & async/await & Uncaught (in promise) SyntaxError: Unexpected reserved word (at
1. 原因:在函数内使用 await 时,该函数本身必须携带 async,否则就不能使用 async/awaitconst foo = async () => { return new Promise((resolve) => { setTimeout(() => { console.log('Hello,world') resolve() }, 1000) })}const bar = () => { await foo() // 错误,ba原创 2022-04-05 20:31:39 · 6493 阅读 · 0 评论 -
CSS & JS 关于设置 overflow: auto; 元素无法监听滚动问题
是否是 height:100% 搞的鬼<!DOCTYPE html><html><head> <title>Test</title> <style type="text/css"> #box{ height: 100%; overflow: auto; } h1{ height: 100px; } </style></head><body><d原创 2022-03-02 21:37:09 · 1262 阅读 · 0 评论 -
JS 什么是浅拷贝和深拷贝、有什么区别、作用
前言本文的浅拷贝、深拷贝只有引用类型,基本类型没有这概念,如果你还不知道什么是基本类型 / 引用类型 可以参考前面写过的 JS 什么是基本类型和引用类型,然后再回头看本文,或许对你有帮助,下面开始进入正文。1. 什么是浅拷贝拷贝的只有一层,多层会受影响(这个影响指的是修改数据时双方都会同步更新,无法真正的断开)。浅拷贝方式以下有几种1、使用扩展符 [...]代码如下let colors = ['red', 'orange', 'blue', 'yellow', [{name: 'Jack'}]原创 2022-01-07 21:05:34 · 1184 阅读 · 0 评论 -
HTML & JS 锚点定位的几种方式及优缺陷
一、HTML 锚点定位优点:1、页面刷新依然锚点到对应位置缺陷:1、地址栏上会出现 #2、没有丝滑滚动效果第一种:绑定 id<!DOCTYPE html><html><head> <title>Test</title></head><body><a href="#sixteen">点击</a><h1>1</h1><h1>2</原创 2022-01-04 22:51:36 · 2525 阅读 · 0 评论 -
JS 什么是基本类型和引用类型、有什么区别?
一、基本类型1、基本类型有:undefined / null / number / string / boolean / bigint / symbol2、基本类型数据放在栈内存中3、基本类型数据是不可变的let str = 'hello,world'str[0] = 'x'console.log(str) // 输出:hello,world 证明第 3 点,数据是不可变的// 误区:重新给 str 赋值不代表数据是可变的,其本质是重新开辟一份新的数据放在栈内存中str = 'Tony'原创 2022-01-03 21:48:05 · 2947 阅读 · 1 评论 -
JS 关于 this 指向的几种情况
一、this 指向 window1、全局函数里面的 this 指向 window2、箭头函数里面的 this 指向 window// 定义全局变量 title 与函数 foovar title = 'hello,world' // 注意:若使用 let 定义则不属于全局变量function foo() { console.log(this.title)}function arrow() { let title = 'hello,arrow' return () => { re原创 2022-01-02 14:57:33 · 3809 阅读 · 0 评论 -
JS 什么是函数节流、函数防抖、有什么区别、作用是什么?
1、前文函数节流 和 函数防抖 虽然这俩名词听起来很抽象,但理解起来却跟纸老虎似的,不过它们在实际工作中用的频率确实非常高,因此这两个名词概念是必须要掌握的,下面我们开始进入正文。2、什么是函数节流假设我们有个搜索输入框,正常情况下用户每输入一次我们就会拿它的值去请求相应数据,如图:我们可以看到每按一次 m 就会请求一次,图中按了 9 次 就会请求 9次,假设有 10w 个人按照这种频率同时输入,对于小企业来说服务器应该是扛不住的,解决这个问题也很简单,既然频率那么快,那我们就把频率降低设置每隔原创 2021-12-26 22:23:03 · 497 阅读 · 0 评论 -
JS File 和 Blob 是什么
File / Blob 是什么Blob 是最原始的文件对象,File 是基于 Blob 改造的,因此 Blob 的属性/方法在 File 中同样可以使用,你可以理解为 File === Blob,像 input 选择文件后会返回的文件信息就是属于 File怎么操作 File / BlobJS 提供的 FileReader 、URL.createObjectURL() 都可以处理 File / BlobFileReaderFileReader 可以用来读取 File / Blob , input 选原创 2021-12-14 21:37:07 · 2353 阅读 · 0 评论 -
Js & Vue 实现瀑布布局的几种思路
实现瀑布布局思路方案1: 每个元素设置绝对定位实现思路为每个元素设置 left / top取列数高度最小的那列作为本次插入目标优点:实现过度效果更灵活,比如删除一个元素时,所有元素重新排位,可以使布局错乱感较美观。缺陷:元素都是定位的,内容动态变化时每个元素的位置得重新计算。效果图方案2: 先布列,再分配元素实现思路提前创建好列数取列数高度最小的那列作为本次插入目标优点:计算量较少,每列的元素高度随内容进行自适应。缺陷:动画效果较少,比如删除一个元素原创 2021-12-09 22:03:03 · 428 阅读 · 0 评论 -
Vue3 理解 ref 和 reactive 的用法、区别
Vue3 理解 ref 和 reactive 的用法、区别Vue3 新出的这俩属性 ref / reative 跟 Vue2 中的 data 一样是用来定义数据的,使用了这两个后, data 基本就用不到了,下面是笔者对这两个属性的一个总结:ref 常用于基本类型:Boolean / Number / String / ...reactive常用于引用类型:Object / Array ....用法如下:<template> <div v-if="show">原创 2021-11-29 21:16:46 · 2796 阅读 · 0 评论 -
Vue 理解 v-for 中 key 的真正作用
3333原创 2021-11-28 10:00:36 · 363 阅读 · 0 评论 -
TypeScript 日常基本语法
是一款用来检查 Javascript 数据类型的工具语言。帮助开发者在代码编译成 JavaScript 前检测数据类型是否正确,如果不正确则给出相应的 提示,有助于开发效率和代码的稳定性。每个项目在使用 时,根目录都会生成一个 文件,这个文件可以用来告诉 在编译器期间时使用什么样的规则去进行检测,下面是默认配置:TS 的配置选项有很多,这里就不一一演示了,有兴趣的自行查阅相关资料,接下来我们开始进入正文。2. 定义元组元组也属于数组,不同的是它可以定义,不过有一些地方需要注意,看代码:3.原创 2021-11-27 08:18:03 · 774 阅读 · 2 评论 -
Js & Vue 使用 appendChild 后源元素(节点)消失了
据官方文档 [https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild]里面的开头说明:明确指出源节点消失是引用问题,要想保留源(元素)节点可以使用 Node.cloneNode(true) 属性,其中 true 表示深拷贝。...原创 2021-11-24 21:41:22 · 1513 阅读 · 0 评论 -
Js & Vue 几行代码实现一个简单的滚动加载触发(思路)
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-11-24 21:33:11 · 582 阅读 · 0 评论