- 博客(96)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue.js设计于实现 - 响应式（三）
在上面的内容中，当我们修改obj中的其他属性，并且该属性不在副作用函数中时，副作用函数依然会执行，因此要重新设计“桶”结构，添加映射关系。如果在一个副作用函数中读取或修改了某个对象的属性值，那么我们希望当值变化后，副作用函数自动重新执行，实现该目标，这个对象就是响应式对象。那么当ok为false时，为了避免不必要的更新，我们需要清除obj.text的依赖收集，变为true时再重新依赖。拦截一个对象的读取和设置操作，当读取字段时，将副作用函数存入一个“桶”中，当这个字段改变时，再执行副作用函数。
2025-08-10 19:30:23
476
原创 Vue.js设计于实现 - 概览（二）
即一个拥有返回vnode对象的函数 的对象（这里给组件包一层-通过render获取vnode而不是直接返回vnode对象是因为MyComponent里还要进行其他操作）同时编译器能够识别哪些静态属性，哪些是动态，并在生成的render中进行标识，这样就避免了渲染器花费力气去寻找，例如。虚拟DOM -> diff + vnode（js） + 部分dom更新。命令式的innerHTML -> 字符串（js） + 销毁、新建dom。虚拟DOM -> vnode（js） + dom。此时的render要支持组件。
2025-08-10 19:28:45
688
原创 el-table折叠懒加载支持排序
因为el-table懒加载的子节点是通过缓存实现的，如果想在展开的情况下直接刷新对应子节点数据，要操作el-table组件自身数据，否则不会更新。
2025-03-21 09:46:58
442
原创 前端对接生成式AI接口（流式传输）问题汇总
后台Response Headers问题，application/stream+json、text/event-stream。大量数据分段接收问题。多个流时间戳（Time）相同导致被合并的问题。中止对话问题。复制问题。
2025-03-21 09:29:47
1758
原创 keep-alive多级页面缓存实现
现实中遇到的场景是，有三个页面（总览页、列表页、详情页），三个页面逐级跳转（总览页 -> 列表页 -> 详情页）。乍一看没什么问题，到详情页的时候将keepAlive设为true进行缓存，返回到总览页的时候设置为false取消缓存，但仔细想一下，这样写是晚一步的，是否缓存在刚进入页面时就定下来了，在。销毁组件后会导致缓存异常（回退时不使用缓存的列表页，而是创建了个新的，并且会一直缓存）。，只在返回时销毁keep-alive的缓存，此时又出现了一个新的问题，在使用。网上很多教程的写法是，在列表页使用。
2024-11-15 11:34:50
862
1
原创 Vue.js设计于实现 - 框架设计（一）
在上面的内容中我们说了声明式框架在内部进行了差异寻找，Vue为了实现寻找差异时对性能的最小化消耗，使用了虚拟DOM。而声明式为了实现最优更新，需要在内部找到前后代码的差异，再进行修改。实际上，Vue.js帮我们封装了过程，内部还是命令式，暴露给用户的则更加声明式。如上图，上边的代码是纯JS层面的计算，循环了10000次；的DOM操作相比于虚拟DOM多的多，这时虚拟DOM的优势就体现出来了。的代码与原生js相似，代码描述的是“做事的过程”；，都是一次JS层面的运算+一次DOM层面的运算。
2023-03-30 23:30:48
542
原创 MyBatis基本使用
上面的多条件查询有bug，当用于输入的条件不全时，查不到信息，这显然是不符合常理的，因此我们要进行动态查询。在数据添加成功后，有时需要获取插入数据库数据的主键，此时的id是没有绑定到对象上的，我们可以使用。Brand类中使用的是驼峰命名，而数据库中是下划线命名，此时会导致找不到数据，我们可以使用。动态查询的原理是：SQL语句会随着用户的输入或外部调价的变化而变化，即动态SQL。的硬编码，这样对于后期的维护还是不方便的，因此我们使用代理。例如修改密码的功能，我们通常只会修改一条数据的部分字段。
2023-02-20 17:23:16
832
原创 webpack优化（含vue-cli配置）
提升开发体验使用Source Map让开发或上线时代码报错能有更加准确的错误提示。提升 webpack 提升打包构建速度使用让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。使用OneOf让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。使用排除或只检测某些文件，处理的文件更少，速度更快。使用Cache对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。使用Thead。
2023-02-06 21:09:20
2078
原创 微信小程序API的Promise化及全局状态管理MobX
即解决组件之间数据共享的问题，常用的全局共享解决方案有：Vuex、Redux、MobX等。为了避免回调地狱的问题，我们将小程序的API Promise化。每次装完新包要记得重新构建npm，同时建议重新构建前先删除。在根目录创建store文件夹，内部含store.js。默认情况下小程序官方提供的API都是基于。小程序中的Promise主要依赖于。在小程序中，我们使用。
2023-02-06 20:47:35
1266
原创 JavaScript实现观察者模式和发布订阅模式
观察者创建一个函数来等待被触发，主题创建一个函数用来改变状态，状态一改变就遍历每个观察者执行里面的响应函数。主题创建一个数组来存放观察者。订阅用on，发布用emit。
2023-02-03 11:30:36
320
原创 CSS定位详解
居中算法：加了==绝对定位的盒子不能通过margin:0 auto;定位：将盒子定在一个位置，所有定位也是在摆放盒子，按照定位的方式移动盒子。定位的盒子移动的最终位置、有top、bottom、left、right属性。默认：静态定位 |相对定位 | 绝对定位 | 固定定位 | 粘性定位。因此，相对定位没有脱标，它最典型的应用就是给绝对定位当爹。例如：将页面滚动到一定的位置后元素变为固定定位效果（**固定定位小技巧：**固定到版心右侧。用于指定一个元素在文档中的定位方式，定位=定位模式+边偏移。
2023-02-03 11:14:11
1155
原创 Java基础
引用数据类型 数组 声明 自动类型转换 类型范围小的变量可以直接赋值给类型范围大的变量 方法 参数为值传递：不会修改原值 参数为引用传递：传递的是地址，会改变原值（类、接口、数组、字符串、包装类） 方法重载 同一个类中，出现多个方法名称相同，但是形参列表不同的，就是方法重载（为同一个方法指定多种参数模式）优化： 面向对象的三大特征：封装、继承、多态 注意事项 类名要首字母大写+驼峰 一个Java文件可以定义多个class类，但是只有一个类是public修饰，且public修饰的类名必须成为文件
2022-12-05 19:10:33
771
1
原创 微信小程序（分包）
在进入小程序的某个页面时，框架自动预下载可以需要的分包，从而提升后序分包页面的启动速度。独立分包本质也是分包，它特殊在可以独立于主包和其他分包而单独运行（它的好处在于，不依赖主包，可以提高页面启动速度。分包预下载的行为会在用于进入某一页面的时候进行。分包指的是把一个完整的小程序项目，按照需求。，在构建时打包成不同的分包，用户在使用时。分包后的小程序由1个主包+多个分包组成。在配置层面，它和普通分包的区别仅仅是。对小程序进行较好的优化。同一个分包中的页面享有。
2022-11-12 20:50:02
13699
原创 微信小程序（自定义组件）
右键新建Component，自动生成四个文件默认情况下自定义组件的样式只对当前组件生效，不会影响到组件之外的结构app.wxss中的全局样式对组件无效只有类选择器无效，id选择器、属性选择器、标签选择器仍会受到影响。因此，在组件和引用组件的页面中建议只使用class选择器只存在于业务逻辑中，不需要渲染到页面的数据小程序中定义生命周期函数有两种方式新版方式（推荐）}旧版方式}
2022-11-12 13:49:32
2184
原创 微信小程序（基础语法）
注意，小程序在事件传参的方式也和vue不同，无法直接在绑定事件的函数上直接传参。类似栅格布局，将所有设备屏幕宽度分为750份，即当前屏幕总宽度为750rpx。以为iphone6为例，屏幕宽度为375px，有750个物理像素。注意，小程序中的属性绑定也使用插值表达式，而不是类似。如果想要实现一次性控制多个标签的显示与隐藏，可以使用。循环渲染指定数组，索引为index，循环项为item。，不过为true时为隐藏，为false时为显示，和。属性节点，把 HTML字符串渲染为对应的UI结构。
2022-11-08 11:27:58
4768
原创 微信小程序（基本结构）
建议每个页面都以单独的文件夹存放在pages中小程序中共有4种JSON配置文件项目根目录中的app.json：包含小程序的所有页面路径、窗口外观、界面表现、底部tab等。：项目配置文件，记录小程序开发工具所做的个性化设置：小程序内搜索设置，类似于网页的SEO.json：每个页面文件夹中的.json文件用于对本页面窗口的外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项。
2022-11-07 17:24:47
1518
原创 webpack的loader与plugin原理
webpack 会先从左到右执行 loader 链中的每个 loader 上的 pitch 方法（如果有），然后再从右到左执行 loader 链中的每个 loader 上的普通 loader 方法。钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。通过插件我们可以扩展 webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力。
2022-10-07 21:18:47
1985
1
原创 webpack基础配置（开发模式&&生产模式）
上面的配置会使css文件打包在js文件中，会出现先加载js再加载css的情况，用户体验不好，因此我们使用插件来单独打包css，参考官网教程即可。实际上字体图标也不需要进行处理，引入css即可，但是我们想将字体资源打包到一个单独的文件夹下，这样就需要进行配置。output可以设置入口文件即index.js打包输出的文件名，因此我们配置此处就可以设置js文件的输出。前面的内容中，我们所有打包好的js都需要在html中引入，非常不方便，webpack为我们提供了插件。事实上，开发模式本身就不需要输出；
2022-10-05 21:48:43
1947
原创 Vue源码分析（状态管理&&路由）
以前前端是通过MVC模式管理代码，但后来我们使用例如Vue、React、Angular这类通过声明式开发的框架，发现状态很难管理，容易出现状态被任意修改。在vue中我们经常会使用到路由，路由有hash和history两种模式，二者的实现思路基本相同，为了简便，我们以hash模式为例。监听路由变化的事件，修改data中的url，再通过动态组件变化，这样就实现了一个最基本的路由。，监听路由变化并修改vue实例中的url，使用计算属性得出当前的组件名，再动态显示。Vue2的状态管理使用的是。
2022-10-04 20:27:22
967
原创 前端同源策略和跨域详解
webcoket作为一种常用于实时聊天的协议，本身就不存在跨域问题，利用websocket的api创建一个socket实例，利用open方法向后台发送数据，利用message方法接收后台的数据。因为浏览器同源策略只针对于ajax，并不限制服务器之间的通信传输，我们在客户端和服务器中间使用一个代理服务器，代理服务器和客户端同源，代理服务器和服务器进行数据交互，这样就实现了跨域。等标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本。上面的配置是最基础的，实际项目中我们还有更加细化的配置。
2022-09-24 00:48:15
1784
原创 Vue源码分析（高阶函数）
高阶函数在函数式编程中经常出现，就是你原本有一个函数，你可以通过另外一个函数进行包裹，这个新的函数既具有原来函数的功能，又可以添加自己的功能，这种方式称为高阶函数。上面是它的使用方式，可以看到我们使用的时候需要传递完整的图片地址，这很不方便。用于获取组件所有属性，这是2.4之后才支持的功能，下面代码我们把高阶组件设置的属性传递给原始组件。，我们在外部函数中完成根据用户名查询头像地址，在内部函数组件。，这个函数接收内部组件，本例中内部组件就是。这里我们使用高阶组件，创建一个函数组件。我们现在有一个函数组件。
2022-09-14 23:12:25
686
1
原创 Vue源码分析（Render渲染函数）
使用JavaScript操作真实DOM会非常消耗资源，因为要修改真实DOM操作的内容很多，但是如果使用虚拟DOM，你无论是如何增删修改节点，都只是在操作JS，这样会很节省资源。（当然：如果你能将DOM操作到炉火纯青，保证每次对DOM的操作都是较为节约快捷的方式，那还是要比虚拟DOM快的，毕竟我们多了一步将它转换成了JS，又变回真实DOM的过程）函数会生成新的虚拟DOM，即触发我们的发布，新的虚拟DOM和旧的虚拟DOM进行比较，得出最少需要更新的节点并生成真实DOM完成一次更新。
2022-09-10 02:26:59
1790
原创 猿创征文｜Vue源码分析（插件编写）
插件的本质其实是一个普通函数，因此插件往往会结合mixin使用，即将重复的代码混入到Vue实例中，供组件复用。但是mixin是全局api，他会被应用到所有实例中。比较危险(doge)因此较为优秀的方法是使用插件包裹，因为插件会自动删除且更加便于理解。所以我们推荐使用Vue.use这里我们先抛出一个定义插件方法的结论，避免对之后的内容产生误解。// install第一个参数为Vue，第二个参数为数据 插件对象 . install = function(Vue , options) {
2022-09-09 01:06:40
506
原创 前端安全（XSS和CSRF）
相对来说token的用户体验会更好，将token存在我们自己的网页中，只有通过自己的网页发起的请求才能携带token，而只有携带token的请求后端才会响应。更为严重的后果可能是，攻击者用你的账户再次发布了链接，其他用户一旦点开，就会继续中招，形成CSRF蠕虫，不断传播。脚本中创建一个图片，图片中创建一个img，在img的src中将请求地址改为自己的脚本，并附带当前网站的cookie，就可以拿到cookie了。点击搜索，我们会发现，网站"执行了"我们的脚本，这样我们就实现了最简单的xss攻击。
2022-09-08 22:54:20
1893
原创 Vue源码分析（响应式）
函数用于对象的getter和setter监听，也通过发布订阅模式实现了依赖的跟踪，接下来将二者结合实现vue的数据更新系统。函数是接收一个函数，这个函数帮助我们创建一个响应区，当代码放在这个响应区内，就可以通过dep.depend方法注册依赖项。写在前面的话：当我们在使用vue的时候，可能会非常好奇，为什么vue能实现这种响应式的数据更新，为什么可以动态渲染。这篇文章并不是直接对vue的源码进行阅读，而是通过一些小demo理解vue的作用原理。发布事件，即可实现vue的数据更新。时，会再次执行依赖项。
2022-09-07 23:03:33
734
原创 vue3+ts封装table组件并注册发布
操作项大部分table都具有button用于编辑删除等操作，我们在传入options的中定义操作项的action为true，因为操作的特殊性，我们选择单独编写，所以要先处理传入的数据，将操作项与数据部分分离// 传入options的数据 let options : TableOptions [ ] = [ {............
2022-08-28 21:37:02
3216
1
原创 vue3+ts封装chooseCity城市选择器
先上效果图样式采用elementplus，各个组件详情查看elementplus官网整体采用popover作弹出框，需要注意的是elementplus，使用插槽的方式，标题一个在popover里的reference具名插槽，插槽内部我们添加标题和下拉图标下拉图标采用arrowdown（该图标为elementplus图标库封装后的，自己的项目请按照elementplus官网的用法）,class通过visible控制样式，如果弹出框可见，代表此时已经下拉，将下拉箭头改为上拉。......
2022-08-26 15:49:18
2041
1
原创 利用app.use全局注册自定义组件
在自己封装好的组件文件夹下创建index.tsimport {App } from 'vue' // 导入自己的组件 import chooseArea from './chooseArea.vue' // 让这个组件可以以use的形式使用 export default {在组件总项目下创建index.ts导入上面的ts文件并使用import {
2022-08-24 17:39:19
1229
原创 vue2计算属性
对于任何复杂逻辑，都应当使用计算属性经过一系列计算后得到的属性值，这个值可以被模板结构或methods方法使用本例中主要使用``对字符串拼接，内部引用数据格式为${}computed节点下，
2022-08-11 11:20:18
1657
原创 在vue2项目中使用腾讯云IM及常见问题
这时第一个问题来了，想要实现聊天功能，必须要有用户ID和对应的密码，即userID和userSig，官方文档也对我们进行了提示，测试环境可以使用客户端根据userID计算UserSig，项目上线要采用服务端计算UserSig。由于目前官方文档已经将含UI的快速集成方案变为了vue2+TS，而且在很多地方的解释阅读起来可能有一定的难度，所以有了这篇文章。该文件还引入了lib-generate-test-usersig.min.js文件，因此我们要返回文档的上级。创建tim.js文件用于创建相关实例。.....
2022-07-24 00:34:49
5831
39
原创 el-cascader回显只选中不显示的问题
先看代码 因为el-cascader的v-model绑定的必须是数组所以在我点击对应页面发起请求的时候，将需要的值push到cityCascader中 此时就会出现标题的问题，我的cityCascader的数据是符合要求的，但是级联选择框没有默认数据，只有默认选中解决方法是，不使用数组的push方法，而是直接重新赋值 此时就可以默认显示啦...
2022-06-30 23:05:35
4502
4
原创 DataV轮播表组件dv-scroll-board宽度问题
需求：使用dv-scroll-board显示多列数据时，由于其默认是平均分配宽度，会导致内容显示不全，我们要修改某一列的宽度，让它显示完全。 解决方法： 方法1：dv-scroll-board自带columnWidth:[]属性，该数组的每个参数即为对应列的宽 方法2：f12查看该列对应的类名，通过样式穿透进行修改。注意，因为组件中原来的样式优先级较高，所以我们加上 /deep/和::v-deep效果一样，只是有些情况下不能使用/deep/时，我们采用::v-deep代替...
2022-06-26 17:56:10
7722
2
原创 TypeScript类型声明文件（三）
项目中的TS最终都会编译成JS，那我们在使用外部的三方库时，如何使用TS语法呢。类型声明文件：用来为已存在的JS库提供类型信息如果要为JS库提供类型信息，就要用到.d.ts文件windows系统按ctrl键点击内置API即可打开文件在TypeScript官网搜索下载即可如果多个ts文件都用到同一类型，可以创建.d.ts文件提供该类型，实现类型共享在导入一个js文件时，TS会自动加载于js文件同名的.d.ts文件使用declare关键字：用于类型声明，为js文件中已存在的变量声明类型，而不是创建一个新的变量
2022-06-09 16:42:58
497
原创 TypeScript高级类型（二）
构造函数 实例方法 实现接口 修饰符 public(公有)：默认，可以被任何地方访问 protected(受保护)：仅在对其声明所在类和子类中(非实例对象)可见 private(私有的)：只在当前类中可见(实例对象和子类都不可见)readonly(只读修饰符)：防止在构造函数之外对属性进行赋值；只能修饰属性，不能修饰方法 注意：readonly和const的意思一样，都是不能修改，所以它和const一样，如果直接赋初值(不指定类型)，数据类型就会变成字面量 同样，readonly也可以
2022-06-08 19:15:07
1222
原创 TypeScript常用类型（一）
代码中的就是类型注解，约定遍历age的类型必须为number，否则就会报错JS已有类型TS新增类型用即可 联合类型 类型别名 函数类型 函数要指明参数和返回值的类型 同时指定参数、返回值类型 可选参数 对象类型 同样，对象中的属性也可以使用?可选相当于在对象中使用类型别名 接口继承多个接口有相同属性或方法，可以抽离出来，通过继承实现复用 元组 元组是特殊类型的数组，它规定了数组元素对应的数据类型(个数也受到了限制) 类型推论 声明变量并初始化 决定函数返回值时 满足任意一个都会触发类型
2022-06-06 21:05:01
1002
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人