- 博客(93)
- 收藏
- 关注
RSS订阅原创 js模块化 --- commonjs规范 原理详解
是一种模块化规范（nodejs的默认模块化规范，新版的nodejs已经支持es6的模块化，但它默认任然使用的是commonjs），通俗的说它将代码分割成了一个一个的模块，让不同的模块拥有自己独立的作用域（类似命名空间的隔断），在不同的模块中实现了重复命名的效果，同时支持模块的导入导出，让模块与模块之间可以相互调用，实现代码的复用。tips：模块化可以让代码分离开和减少命名冲突问题，便于维护和开发，
2024-09-05 17:58:53
1247
原创 js函数方法apply，bind，call，手写new操作符
函数方法可以用来改变函数的this指向，对于内置的标准函数来说，改变this就相当于改变了函数的作用目标；比如说，对于一个对象的方法toString()，可以将它的使用目标修改成指定的参数，这里原本是对obj起作用的tostring方法使用call改成了对‘123’起作用，这就是函数方法的作用，改变函数的作用目标（this指向），理解了这个之后下面介绍一下apply，bind，call的用法以及它们的区别。
2024-08-30 11:22:19
1131
原创 js字符串方法速览---字符串的静态方法，实例方法和属性合集，各包含一个示例
js字符串方法速览---字符串的静态方法，实例方法和属性合集，各包含一个示例，可以通过目录快速锁定需要查找的方法和查看它的使用。
2024-08-01 21:57:16
628
原创 js进阶语法---变量提升，函数提升，以及参数的命名冲突问题
变量提升：当声明一个变量时，这个声明过程会被预处理机制塞入到预处理块中优先执行，这就是变量提升,使用var定义的变量拥有变量提升函数提升：当声明一个函数时，这个声明过程会被预处理机制塞入到预处理块中优先执行，这就是函数提升，使用function定义的函数拥有函数提升当一个变量和函数在正常的顺序中没有声明但被调用时就可能产生“提升”变量提升---参数传递---函数提升 （声明函数名---变量提升---参数传递---函数体赋值）所以最终这个名称会被函数夺取，这就是函数提升优先级最高的原因。
2024-07-28 14:43:22
1054
原创 js语法 proxy对象拦截方法详解，proxy代理一个对象（数组，函数）的操作方法
proxy可以代理原目标对象执行一些操作，并且这些操作都是可以拦截的；例如赋值，可以在赋值的过程执行其他操作，甚至改变或者阻止赋值；使用proxy代理可以实现对对象（包括数组，函数，map等引用数据类型）更加精细的控制，掌控对象操作的每一个流程，vue框架的响应式原理就依赖于proxy的代理，当虚拟dom对象执行操作改变时，拦截操作并修改（重新渲染）ui视图；
2024-07-24 22:15:33
1054
原创 scss基本语法---嵌套、循环、条件（@for,@if），混入@mixin，继承@extend，导入@import，
scss是css预编译器，可以简化css代码的书写，并可以编译成css文件使用；
2024-07-22 09:25:47
728
原创 使用js实现常见的数据结构---链表，队列，栈，树
通过js的class的功能，可以很清晰的实现这些数据结构，本质上看数据结构表示的是按照一定的关系顺序存放数据，每个数据的单位都是节点，节点包含了一个单位数据（任意大小）和下一个节点的地址（引用），这里是使用js对象属性的方式来实现的；一维的数据结构中，链表是最基本的数据结构，它按顺序连接了多个节点，通过头节点就可以获取到整个链表数据，其他的数据结构（队列，栈）都类似链表结构的变式。
2024-07-19 23:36:17
582
原创 sqlite数据库，轻量级数据库的使用
sqlite是具有零配置、无服务的特点，遵循ACID规则，是一款备受欢迎的轻量级数据库。tips：ACID 规则即，A（原子性）、C（一致性）、I（独立性）、D（持久性）sqlite常被用于pc端，移动端的操作系统中，同时一些单机的游戏，也会使用sqlite存放数据在本地。
2024-07-17 17:05:33
1358
原创 git pull 命令，本地代码被覆盖（删除）
git reflog 找到要回退的操作idgit reset --hard 回退代码到此处最后不得不感叹,虽然代码是用git命令时丢失的，但这个回退的git操作可以将代码随意回退到指定的状态，git的代码管理功能确实很强大，不过千万千万不要乱动git的文件夹，损坏了可能就回退不了代码了。
2024-07-16 22:26:42
841
原创 react-router实现路由拦截，useLocation，useNavigate钩子
react-router中没有直接给出拦截路由的方法，需要手动的去监听路由的变化来拦截路由根据上面的要求，可以使用useLocation钩子函数快速实现，useLocation会返回当前路由路径的对象，它包含以下参数当前 URL 的哈希值。此位置的唯一键。当前 URL 的路径。当前 URL 的查询字符串。由或创建的位置的状态值。在跳转前后使用useLocation就可以记录跳转前后的URL路径，再通过钩子监听URL，就能实现路由变化时执行一些操作，这样就达成了路由拦截的两个条件。
2024-07-12 15:35:49
867
原创 react hook---钩子函数的使用，useState，useReducer，useEffect，useRef,useContext，自定义hook
什么是hook钩子函数hook（钩住），表示拦截操作，可以在某些操作执行时拦截住（钩住），执行hook函数的逻辑，在react中，hook函数一般是use开头，然后提供一些方法api，也就是说你可以理解成react中的hook就是一套便于操作的api
2024-07-12 15:35:27
1660
原创 ts语法---泛型和泛型约束
泛型的存在让ts的类型变得非常灵活，使类型变得可以修改，可以变化不在固定死板；学习了泛型之后，对于ts类型的理解应该更加深入，ts类型其实就相当于一个特殊的值，这个值使专门用来约束变量的值，值可以被类型约束，类型也是一个值，类型也可以被类型约束，类型是一个隐式的值，它不会影响代码的结果，它会约束代码的执行，再执行前将代码不合理的类型错误排除出来；同时在编辑代码时，提示这种类型变量的具有的属性，让整个代码更加具有逻辑性。
2024-07-10 21:21:05
1571
原创 react基础语法，模板语法，ui渲染，jsx，useState状态管理
这里使用create-react-app的脚手架构建项目（结构简洁，基于webpack-cli），成功构建后只需要关注两个部分，package.json中的script脚本，start：启动项目src中的核心文件，index.js: 引入react的依赖, App.js：根组件可以先去除多余的文件index.jsapp.js以上是精简后的文件目录和文件内容，可以看出核心的引入库为react和react-dom，整个框架也是完全基于js生成的。
2024-07-10 16:14:43
1341
原创 js对象的方法速览---对象的静态方法，实例方法和属性合集，各包含一个示例
js对象的方法速览---数组的静态方法，实例方法和属性合集，可以通过目录快速锁定需要查找的方法和查看它的使用。
2024-07-09 21:56:10
898
原创 js原型和类---prototype，__proto__，new，class
在js中，一个变量被创建出来，它就会被绑定一个原型；比如说，任何一个变量都可以使用console.log打印，这里是调用了它的toString方法，而变量被创建后可能并没有设置toString方法，但是它任然可以打印，这就从原型中获取的toString方法所以可以得到第一点：原型可以提供方法给实例的变量，原型也是一个对象，或者说对象可以作为原型并赋值给其他变量，这样对象成为了变量的原型，而对象本身也有原型，此时就形成了 ‘链’
2024-07-09 16:29:43
1293
1
原创 js使用proxy代理监听控制事件
我们需要提供一个方法获取一个proxy代理对象，它会拦截事件属性，并返回一个promise，这个事件触发时，promise完成，然后由于事件是可以多次触发的（点击一次触发一次），我们就需要循环监听，每次拦截事件，都有返回一个新的promise，并等待，通过getElement方法拿到元素的代理对象，然后设置一个无限循环，每次循环都要等待代理对象的waitClick属性，这个属性会返回一个promise等待点击事件的完成，当我们点击了按钮之后，执行一个操作，然后进入下一次循环，继续等待点击。
2024-07-08 17:26:14
859
原创 js函数扩展内容---多参数，函数属性，字符串生成函数
除了默认的属性，还可以自定义函数的属性，4种方法将字符串改成函数异步： setTimeout()同步：eval() ，new Function()，script标签。
2024-07-05 17:53:01
884
原创 react框架，使用vite和nextjs构建react项目
React 是一个用于构建用户界面(UI)的 JavaScript 库,它的本质作用是使用js动态的构建html页面，react的设计初衷就是为了更方便快捷的构建页面，官方并没有规定如何进行路由和数据获取，要构建一个完整的react项目，我们需要借助一些其他的工具或者整合了react的框架，
2024-07-04 16:47:08
2123
4
原创 js生成器，迭代器和可迭代对象详解
是可以返回一个可迭代对象的特殊函数，是一个特殊的迭代器，在js中可以使用function*来定义一个非连续执行的函数作为迭代算法，最初调用生成器函数时，生成器函数不执行任何代码，而是返回一种称为的特殊迭代器。通过调用next()方法消耗该生成器时，生成器函数将执行，直至遇到yield关键字。
2024-07-03 20:39:28
1058
原创 webSocket网页通信---使用js模拟多页面实时通信
WebSocket是一种先进的网络技术，它提供了一种在单个TCP连接上进行全双工通信的能力。传统的基于HTTP的通信是单向的，即客户端发起请求，服务器响应请求，然后连接关闭。但是，WebSocket允许服务器和客户端之间建立长时间的连接，双方可以通过该连接进行双向数据传输，而不需要客户端重新发起HTTP请求。
2024-07-03 15:34:20
1107
原创 ts语法---数据类型，interface和type的用法
ts的数据类型自上而下的分级有第一层 any-任意类型和unknow类型，第二层 原型链的Object类型，第三层 js类的类型第四层 标准的typescript类型第五层 对应的实例数据类型第六层 never类型这里的分层表示，上面的类型包括了下面的类型，例如，any类型在最顶层可以赋值任何数据类型，字符串，数字，对象等等。
2024-07-01 17:33:15
1596
原创 TS---typescript的安装和tsc命令使用
（TypeScript是Microsoft公司注册商标）Typescript是基于JavaScript实现的，它实现了对js的类型规范，让一些语义化的错误暴露出来，例如,js是弱类型语言，对于变量赋值，引用方面都比较宽松，比如可以将数字变量赋值成字符，使用为声明的属性（返回null或者undefined），都不会产生错误，但是在严格的开发环境下，这种不严谨的规则会留下很大的隐患，将这中类型的错误在编译时暴露出来可以减少很多隐性的错误产生，
2024-07-01 15:56:18
597
原创 js自定义内容生成二维码，qrcodejs的使用
qrcodejs是基于原生js的文本转换成二维码的库，轻量且使用方法简单，它的实现原理是通过canvas将重新编码的内容绘制在页面元素上，使用qrcodejs时可以选择引入它的cdn或者使用npm下载qrcodejs官网： qrcode.js (davidshimjs.github.io)实例化QRCode类时，会自动生成二维码尝试将图片的base64转二维码失败错误： 这个二维码的内容为 hello world 字符串
2024-06-30 21:26:58
1103
原创 web全屏api，实现元素放大全屏，requestFullscreen，exitFullscreen
使dom进入全屏状态，异步，dom.onfullscreenchange（）;全屏状态变化时触发事件。:fullscreen CSS 伪类当元素处于全屏时生效。使用全屏api时要注意，哪些是静态方法，哪些是实例方法，document是全局文档对象。，可以在方法前加上对应的前缀。dom是一个dom元素。
2024-06-30 21:26:41
436
原创 js修改scss变量
代码很简单，主要是在body修改。都会变化，（这个效果常用来修改全局的主题）是全局生效的，也就是说不管是在哪里修改了。因为页面中body的所有子元素会自动继承。这里点击一次按钮，div的颜色就变化一次。给他赋值，这里需要一个默认值，此时。还没有定义，接下来只有通过js修改。css变量（--color）css变量（--color），这样即使有多个元素都会引起变化。css变量（--color）scss变量（$color）就会改变，但是要注意，
2024-06-28 10:40:32
539
原创 js使用异步方法（promise）返回回调参数内的值，
要拿到一个异步的结果，就需要使用异步的调用，同步的方法是不能获取异步结果的，因为异步方法总是在同步操作之后执行，完整代码展示// 一个异步回调的方法// });// }// })// }// 输出 null})
2024-06-28 10:17:56
440
原创 indexedDB---浏览器本地数据库实现增删改查
indexedDB是浏览器本地数据库，既然是数据库就能够实现增删改查，了解了indexedDB的基本使用后，我们来实现它的增删改查功能, 这里使用音频文件上传的的示例，来演示本地数据库的增删改查功能，
2024-06-26 17:12:42
1144
原创 从0搭建一个vue项目，不使用脚手架从html到vue
但在真实的项目中，仅仅只有这些配置还远远不够，开发时使用脚手架搭建可以快速的让我们编辑项目核心的代码，这里只是展示一个vue项目是如何产生的，深化对vue框架的了解。
2024-06-25 21:35:34
1575
原创 js实现数据加密，jwt加密方式
通过crypto包的加密方法，以及设置密钥和对应的算法，可以将简单的数据进行加密得到一个字符串：这个字符串是不可逆的，要验证数据，只能将数据和原来的密钥还有算法，重新加密对比，但是加密数据通常在后端进行，这种直接加密的方式，需要拿到原本的数据进行加密比对，而原本真实的数据频繁进入网络传输会增加被拦截的风险，容易泄露个人隐私信息，
2024-06-25 20:15:49
858
原创 vue3，pinia状态管理，手写插件实现持久化
全局插件的执行流程：在main.js中注册--->页面打开时执行（在页面维渲染时就已经执行了），一个插件其实就是实现某个功能的函数方法，并不是只有十分复杂的结构才能称为插件，当我们使用插件时，在理解了功能之后就可以尝试自己来实现。
2024-06-25 14:58:06
665
原创 vite项目自定义端口号
注意：如果端口已经被使用，Vite 会自动尝试下一个可用的端口（5174），所以这可能不是开发服务器最终监听的实际端口。在vite.config.js（或vite.config.ts）中插入以下代码即可。指定开发服务器端口。
2024-06-25 14:57:39
742
原创 canvas画布，绘制贝塞尔曲线
贝塞尔曲线用于计算机图形绘制形状，CSS 动画和许多其他地方。它们其实非常简单，值得学习一次并且在矢量图形和高级动画的世界里非常受用。
2024-06-24 16:44:45
1054
原创 indexedDB---掌握浏览器内建数据库的基本用法
IndexedDB 是一个浏览器内建的数据库，它可以存放对象格式的数据，类似本地存储localstore，但是相比localStore 10MB的存储量，indexedDB可存储的数据量远超过这个数值，具体是多少呢？默认情况下，浏览器会将自身所在的硬盘位置剩余容量全部作为indexedDB的存储容量，这里差不多就对应这c盘的剩余容量，所以indexDB有第一个特点，；存储的格式，以对象的键值形式存储数据，注意这里的是一个唯一的索引属性，
2024-06-22 15:48:58
1935
原创 vue3自动导入---组件库elements-ui,vuetify以及scss样式的自动导入
我们在使用第三方组件库和css样式文件时，都需要进行引入，可以在单个组件内单独引用，也可以在全局引入或一次引入所有组件；但是，一般情况下我们都不会全部引入，这会是打包的结果变大，而且往往是不可能用上所有的组件，这个时候就需要。可以看到可以在组件中直接使用scss变量，要注意使用scss应该在style标签上添加lang="scss"属性。vuetify也是一套ui组件，它的风格和组件的动画效果更加生动，但是vuetify的配置会相对麻烦，然后就可以在vue组件中直接使用需要的ui组件。
2024-06-21 10:17:25
1945
原创 js语法---weakMap和weakSet：弱映射和弱集合
WeakMap是类似于Map的集合，它仅允许对象作为键，并且一旦通过其他方式无法访问这些对象，垃圾回收便会将这些对象与其关联值一同删除。WeakSet是类似于Set的集合，它仅存储对象，并且一旦通过其他方式无法访问这些对象，垃圾回收便会将这些对象删除。它们的主要优点是它们对对象是弱引用，所以被它们引用的对象很容易地被垃圾收集器移除。
2024-06-20 15:32:16
791
原创 js语法---理解反射Reflect对象和代理Proxy对象
反射：reflect是一个内置的全局对象，它的作用就是提供了一些对象实例的拦截方法，它的用法和Math对象相似，都只有静态方法和属性，同时reflect也没有构造器，无法通过new运算符构建实例对象（无实例的全局对象）；也就是说reflect相当于一个工具类，只对外提供方法进行使用。tips：拦截方法是指，通过自身方法去覆盖掉原有的默认方法，这样就只会生效拦截方法的操作，而不执行默认操作（例如，setter的作用，覆盖了原有的赋值操作），
2024-06-19 20:02:16
843
原创 js语法---理解防抖原理和实现方法
在实际的网页交互中，如果一个事件高频率的触发，这会占用很多内存资源，但是实际上又并不需要监听触发如此多次这个事件（比如说，在抢有限数量的优惠券时，用户往往会提前在短时间内高频率的点击按钮，但是我只需要接受多次点击中的一次点击，判断有没有抢到即可），这个时候就需要防抖来减少监听的次数，防抖就是在多次触发事件时，减少对冗余事件的监听（主要包括，和），：在原有需求能实现的前提下减少多余操作。
2024-06-18 17:21:18
931
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人