- 博客(100)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue.js设计于实现笔记（一）
在上面的内容中我们说了声明式框架在内部进行了差异寻找，Vue为了实现寻找差异时对性能的最小化消耗，使用了虚拟DOM。而声明式为了实现最优更新，需要在内部找到前后代码的差异，再进行修改。实际上，Vue.js帮我们封装了过程，内部还是命令式，暴露给用户的则更加声明式。如上图，上边的代码是纯JS层面的计算，循环了10000次；的DOM操作相比于虚拟DOM多的多，这时虚拟DOM的优势就体现出来了。的代码与原生js相似，代码描述的是“做事的过程”；，都是一次JS层面的运算+一次DOM层面的运算。
2023-03-30 23:30:48
329
1
原创 MyBatis基本使用
上面的多条件查询有bug，当用于输入的条件不全时，查不到信息，这显然是不符合常理的，因此我们要进行动态查询。在数据添加成功后，有时需要获取插入数据库数据的主键，此时的id是没有绑定到对象上的，我们可以使用。Brand类中使用的是驼峰命名，而数据库中是下划线命名，此时会导致找不到数据，我们可以使用。动态查询的原理是：SQL语句会随着用户的输入或外部调价的变化而变化，即动态SQL。的硬编码，这样对于后期的维护还是不方便的，因此我们使用代理。例如修改密码的功能，我们通常只会修改一条数据的部分字段。
2023-02-20 17:23:16
366
原创 webpack优化（含vue-cli配置）
提升开发体验使用Source Map让开发或上线时代码报错能有更加准确的错误提示。提升 webpack 提升打包构建速度使用让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。使用OneOf让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。使用排除或只检测某些文件，处理的文件更少，速度更快。使用Cache对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。使用Thead。
2023-02-06 21:09:20
1227
原创 微信小程序API的Promise化及全局状态管理MobX
即解决组件之间数据共享的问题，常用的全局共享解决方案有：Vuex、Redux、MobX等。为了避免回调地狱的问题，我们将小程序的API Promise化。每次装完新包要记得重新构建npm，同时建议重新构建前先删除。在根目录创建store文件夹，内部含store.js。默认情况下小程序官方提供的API都是基于。小程序中的Promise主要依赖于。在小程序中，我们使用。
2023-02-06 20:47:35
922
原创 JavaScript实现观察者模式和发布订阅模式
观察者创建一个函数来等待被触发，主题创建一个函数用来改变状态，状态一改变就遍历每个观察者执行里面的响应函数。主题创建一个数组来存放观察者。订阅用on，发布用emit。
2023-02-03 11:30:36
209
原创 CSS定位详解
居中算法：加了==绝对定位的盒子不能通过margin:0 auto;定位：将盒子定在一个位置，所有定位也是在摆放盒子，按照定位的方式移动盒子。定位的盒子移动的最终位置、有top、bottom、left、right属性。默认：静态定位 |相对定位 | 绝对定位 | 固定定位 | 粘性定位。因此，相对定位没有脱标，它最典型的应用就是给绝对定位当爹。例如：将页面滚动到一定的位置后元素变为固定定位效果（**固定定位小技巧：**固定到版心右侧。用于指定一个元素在文档中的定位方式，定位=定位模式+边偏移。
2023-02-03 11:14:11
745
原创 JavaScript两数之和
Set是一种叫做集合的数据结构，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。，或者直接初始化一个空Map。是一组键值对的结构，具有极快的查找速度。，或者直接创建一个空Set。
2023-02-03 10:08:36
506
1
原创 Java基础
引用数据类型数组声明自动类型转换类型范围小的变量可以直接赋值给类型范围大的变量方法参数为值传递：不会修改原值参数为引用传递：传递的是地址，会改变原值（类、接口、数组、字符串、包装类）方法重载同一个类中，出现多个方法名称相同，但是形参列表不同的，就是方法重载（为同一个方法指定多种参数模式）优化：面向对象的三大特征：封装、继承、多态注意事项类名要首字母大写+驼峰一个Java文件可以定义多个class类，但是只有一个类是public修饰，且public修饰的类名必须成为文件
2022-12-05 19:10:33
445
1
原创 微信小程序（分包）
在进入小程序的某个页面时，框架自动预下载可以需要的分包，从而提升后序分包页面的启动速度。独立分包本质也是分包，它特殊在可以独立于主包和其他分包而单独运行（它的好处在于，不依赖主包，可以提高页面启动速度。分包预下载的行为会在用于进入某一页面的时候进行。分包指的是把一个完整的小程序项目，按照需求。，在构建时打包成不同的分包，用户在使用时。分包后的小程序由1个主包+多个分包组成。在配置层面，它和普通分包的区别仅仅是。对小程序进行较好的优化。同一个分包中的页面享有。
2022-11-12 20:50:02
12809
原创 微信小程序（自定义组件）
右键新建Component，自动生成四个文件默认情况下自定义组件的样式只对当前组件生效，不会影响到组件之外的结构app.wxss中的全局样式对组件无效只有类选择器无效，id选择器、属性选择器、标签选择器仍会受到影响。因此，在组件和引用组件的页面中建议只使用class选择器只存在于业务逻辑中，不需要渲染到页面的数据小程序中定义生命周期函数有两种方式新版方式（推荐）}旧版方式}
2022-11-12 13:49:32
1814
原创 微信小程序（基础语法）
注意，小程序在事件传参的方式也和vue不同，无法直接在绑定事件的函数上直接传参。类似栅格布局，将所有设备屏幕宽度分为750份，即当前屏幕总宽度为750rpx。以为iphone6为例，屏幕宽度为375px，有750个物理像素。注意，小程序中的属性绑定也使用插值表达式，而不是类似。如果想要实现一次性控制多个标签的显示与隐藏，可以使用。循环渲染指定数组，索引为index，循环项为item。，不过为true时为隐藏，为false时为显示，和。属性节点，把 HTML字符串渲染为对应的UI结构。
2022-11-08 11:27:58
3789
原创 微信小程序（基本结构）
建议每个页面都以单独的文件夹存放在pages中小程序中共有4种JSON配置文件项目根目录中的app.json：包含小程序的所有页面路径、窗口外观、界面表现、底部tab等。：项目配置文件，记录小程序开发工具所做的个性化设置：小程序内搜索设置，类似于网页的SEO.json：每个页面文件夹中的.json文件用于对本页面窗口的外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项。
2022-11-07 17:24:47
1212
原创 webpack的loader与plugin原理
webpack 会先从左到右执行 loader 链中的每个 loader 上的 pitch 方法（如果有），然后再从右到左执行 loader 链中的每个 loader 上的普通 loader 方法。钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。通过插件我们可以扩展 webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力。
2022-10-07 21:18:47
1457
1
原创 webpack基础配置（开发模式&&生产模式）
上面的配置会使css文件打包在js文件中，会出现先加载js再加载css的情况，用户体验不好，因此我们使用插件来单独打包css，参考官网教程即可。实际上字体图标也不需要进行处理，引入css即可，但是我们想将字体资源打包到一个单独的文件夹下，这样就需要进行配置。output可以设置入口文件即index.js打包输出的文件名，因此我们配置此处就可以设置js文件的输出。前面的内容中，我们所有打包好的js都需要在html中引入，非常不方便，webpack为我们提供了插件。事实上，开发模式本身就不需要输出；
2022-10-05 21:48:43
1229
原创 Vue源码分析（状态管理&&路由）
以前前端是通过MVC模式管理代码，但后来我们使用例如Vue、React、Angular这类通过声明式开发的框架，发现状态很难管理，容易出现状态被任意修改。在vue中我们经常会使用到路由，路由有hash和history两种模式，二者的实现思路基本相同，为了简便，我们以hash模式为例。监听路由变化的事件，修改data中的url，再通过动态组件变化，这样就实现了一个最基本的路由。，监听路由变化并修改vue实例中的url，使用计算属性得出当前的组件名，再动态显示。Vue2的状态管理使用的是。
2022-10-04 20:27:22
537
原创 前端同源策略和跨域详解
webcoket作为一种常用于实时聊天的协议，本身就不存在跨域问题，利用websocket的api创建一个socket实例，利用open方法向后台发送数据，利用message方法接收后台的数据。因为浏览器同源策略只针对于ajax，并不限制服务器之间的通信传输，我们在客户端和服务器中间使用一个代理服务器，代理服务器和客户端同源，代理服务器和服务器进行数据交互，这样就实现了跨域。等标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本。上面的配置是最基础的，实际项目中我们还有更加细化的配置。
2022-09-24 00:48:15
1363
原创 Vue源码分析（高阶函数）
高阶函数在函数式编程中经常出现，就是你原本有一个函数，你可以通过另外一个函数进行包裹，这个新的函数既具有原来函数的功能，又可以添加自己的功能，这种方式称为高阶函数。上面是它的使用方式，可以看到我们使用的时候需要传递完整的图片地址，这很不方便。用于获取组件所有属性，这是2.4之后才支持的功能，下面代码我们把高阶组件设置的属性传递给原始组件。，我们在外部函数中完成根据用户名查询头像地址，在内部函数组件。，这个函数接收内部组件，本例中内部组件就是。这里我们使用高阶组件，创建一个函数组件。我们现在有一个函数组件。
2022-09-14 23:12:25
358
1
原创 Vue源码分析（Render渲染函数）
使用JavaScript操作真实DOM会非常消耗资源，因为要修改真实DOM操作的内容很多，但是如果使用虚拟DOM，你无论是如何增删修改节点，都只是在操作JS，这样会很节省资源。（当然：如果你能将DOM操作到炉火纯青，保证每次对DOM的操作都是较为节约快捷的方式，那还是要比虚拟DOM快的，毕竟我们多了一步将它转换成了JS，又变回真实DOM的过程）函数会生成新的虚拟DOM，即触发我们的发布，新的虚拟DOM和旧的虚拟DOM进行比较，得出最少需要更新的节点并生成真实DOM完成一次更新。
2022-09-10 02:26:59
1132
原创 猿创征文｜Vue源码分析（插件编写）
插件的本质其实是一个普通函数，因此插件往往会结合mixin使用，即将重复的代码混入到Vue实例中，供组件复用。但是mixin是全局api，他会被应用到所有实例中。比较危险(doge)因此较为优秀的方法是使用插件包裹，因为插件会自动删除且更加便于理解。所以我们推荐使用Vue.use这里我们先抛出一个定义插件方法的结论，避免对之后的内容产生误解。// install第一个参数为Vue，第二个参数为数据 插件对象 . install = function(Vue , options) {
2022-09-09 01:06:40
386
原创 前端安全（XSS和CSRF）
相对来说token的用户体验会更好，将token存在我们自己的网页中，只有通过自己的网页发起的请求才能携带token，而只有携带token的请求后端才会响应。更为严重的后果可能是，攻击者用你的账户再次发布了链接，其他用户一旦点开，就会继续中招，形成CSRF蠕虫，不断传播。脚本中创建一个图片，图片中创建一个img，在img的src中将请求地址改为自己的脚本，并附带当前网站的cookie，就可以拿到cookie了。点击搜索，我们会发现，网站"执行了"我们的脚本，这样我们就实现了最简单的xss攻击。
2022-09-08 22:54:20
1111
原创 Vue源码分析（响应式）
函数用于对象的getter和setter监听，也通过发布订阅模式实现了依赖的跟踪，接下来将二者结合实现vue的数据更新系统。函数是接收一个函数，这个函数帮助我们创建一个响应区，当代码放在这个响应区内，就可以通过dep.depend方法注册依赖项。写在前面的话：当我们在使用vue的时候，可能会非常好奇，为什么vue能实现这种响应式的数据更新，为什么可以动态渲染。这篇文章并不是直接对vue的源码进行阅读，而是通过一些小demo理解vue的作用原理。发布事件，即可实现vue的数据更新。时，会再次执行依赖项。
2022-09-07 23:03:33
530
原创 vue3+ts封装table组件并注册发布
操作项大部分table都具有button用于编辑删除等操作，我们在传入options的中定义操作项的action为true，因为操作的特殊性，我们选择单独编写，所以要先处理传入的数据，将操作项与数据部分分离// 传入options的数据 let options : TableOptions [ ] = [ {............
2022-08-28 21:37:02
2510
原创 vue3+ts封装chooseCity城市选择器
先上效果图样式采用elementplus，各个组件详情查看elementplus官网整体采用popover作弹出框，需要注意的是elementplus，使用插槽的方式，标题一个在popover里的reference具名插槽，插槽内部我们添加标题和下拉图标下拉图标采用arrowdown（该图标为elementplus图标库封装后的，自己的项目请按照elementplus官网的用法）,class通过visible控制样式，如果弹出框可见，代表此时已经下拉，将下拉箭头改为上拉。......
2022-08-26 15:49:18
1581
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
922
原创 vue2深入响应式
由于vue在更新dom时是异步执行的，所以可能会产生数据变化但dom还没有变化的情况，如果你想在dom变化后来做一些事情，可以使用nextTick，这样回调函数会在dom更新完成后被调用。vue无法检测对象属性的添加和移除，所以我们直接追加数据不会触发响应式。当想要一次添加多个新属性时，应该用原对象和要混入的对象组成一个新对象。的一些功能的舍弃，vue不能检测数组和对象的一些变化。如果按照上面的写法，input还没有渲染出来，通过。以上两种情况都可以使用数组的splice解决。vue对这种情况提供了。...
2022-08-11 18:24:32
375
原创 vue2计算属性
对于任何复杂逻辑，都应当使用计算属性经过一系列计算后得到的属性值，这个值可以被模板结构或methods方法使用本例中主要使用``对字符串拼接，内部引用数据格式为${}computed节点下，
2022-08-11 11:20:18
1481
原创 在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
4314
37
原创 el-cascader回显只选中不显示的问题
先看代码因为el-cascader的v-model绑定的必须是数组所以在我点击对应页面发起请求的时候，将需要的值push到cityCascader中此时就会出现标题的问题，我的cityCascader的数据是符合要求的，但是级联选择框没有默认数据，只有默认选中解决方法是，不使用数组的push方法，而是直接重新赋值此时就可以默认显示啦...
2022-06-30 23:05:35
3679
4
原创 vue2添加(修改)数据后需要刷新才能显示的问题
vue2无法对于对象进行深度监听，因此直接点击后数据无法立刻进行响应式变化，需要手动刷新。此时我们可以采用，watch深度监听这个数据，监听到这个数据变化后，再发起一次请求拿回数据
2022-06-30 23:04:16
2553
原创 关于el-date-picker点击清空参数变为null的问题
关于el-date-picker清空问题使用DatePicker的clearable属性时，点击清除，会将当前参数变为null然而该项目对数据的要求为空时应该是空字符串，因此可以采用监听的形式将参数的null改为空字符串
2022-06-26 18:00:40
2402
1
原创 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
5660
1
原创 JS中的树(含leetcode例题)＜持续更新~＞
数组链表哈希表树：树结构综合了上面的部分优点，每种树结构都有自己独特的应用场景。只记录左儿子和右兄弟将左儿子和右兄弟作为父节点的二叉，所以二叉树能够模拟所有的树除了最下一层叶子节点外，每层节点都有两个子节点除了最下一层叶子节点外，每层节点都有两个子节点最下一层叶子节点从左向右连续存在，只缺右侧若干节点满二叉树是特殊的完全二叉树用数组表示非完全二叉树时，空着的节点也要占位，会造成空间浪费，所以一般我们采用链表的方式满足条件：当我们进行搜索的时候，如果节点大于搜索值，就向左边继续查找；节点小于搜索值，就向右边继
2022-06-16 12:09:34
310
原创 JS中的字符串(含leetcode例题)＜持续更新~＞
H5使用str[index]即可和出现次数有关的，不要犹豫，hash383. 赎金信和上道题目基本相同
2022-06-12 11:09:33
114
原创 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
316
原创 TypeScript高级类型（二）
构造函数实例方法实现接口修饰符public(公有)：默认，可以被任何地方访问protected(受保护)：仅在对其声明所在类和子类中(非实例对象)可见private(私有的)：只在当前类中可见(实例对象和子类都不可见)readonly(只读修饰符)：防止在构造函数之外对属性进行赋值；只能修饰属性，不能修饰方法注意：readonly和const的意思一样，都是不能修改，所以它和const一样，如果直接赋初值(不指定类型)，数据类型就会变成字面量同样，readonly也可以
2022-06-08 19:15:07
765
基于vue+element-ui的后台管理系统
2022-05-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人