- 博客(62)
- 收藏
- 关注
RSS订阅原创 vue点击pdf文件直接在浏览器中预览文件
其实我们ajaxDownLoadFile这个方法的功能主要是通过传入id和name然后去实现预览pdf文件，如果不是pdf文件的话，点击后我们应该是有一个下载的功能。好久没有更新文章了，说说为什么会有这篇文章呢，其实是应某个热线评论的要求出的，不过由于最近很长一段时间没打开csdn现在才看到，所以才会导致到现在才出。我们通过封装的方式，让这个方法可以在我们整个项目中使用，甚至其他项目需要到pdf预览其他文件下载的功能，我们也可以直接拿过去用。，我们需要怎么去封装这么个预览pdf的工具呢。
2023-09-22 15:03:10
741
原创 广州正盟科技 -- 前端面试-- 2023.4.21
我主要是基于dataease进行一些功能的追加，比如公司通过项目的积累里面已经拥有了自己的3套echart主题样式，我通过新增一个主题样式模块，然后点击不同主题样式让生成的图表都是符合改主题样式的图表。公司中的主题样式也是抽离出一个主题的js文件，里面就是改主题样式的基本配置，然后通过和dataease生成图表的配置项进行合并，生成对应我们需要的图表。这个我也确实不知道，搜了一下说是通过webview的事件机制去实现的，但是其实当时我了解的时候其实也是抱着解决问题的心理的，也没去看他是什么原理。
2023-05-24 21:10:12
308
原创 vue2迁移vue3时遇到的bug
在深层级模式时，如果回调函数由于深层级的变更而被触发，那么新值和旧值将是同一个对象。发现在谷歌浏览器中是不执行的，原因是在谷歌浏览器里navigator.geolocation的使用，只能使用 htps协议，普通的htp协议是无法执行的。这句话的意思是，将Css和is不分开打包，CSs将作为内联样式注入到js中，这样install组件后就有样式了。[P in K]的意思是对象的key可以取 string，number，symbol.2.监听多个数据组成的数组，参数的顺序需要和数组中的顺序一致。
2023-03-15 19:56:36
544
原创 vue响应式原理妙在哪里
思考：由于你在重新set后，需要让视图的数据也跟着变，自然就会想到将依赖到该变量的函数循环执行一遍 --> 需要在set中拿到变量依赖到的函数，自然你就需要在get的时候去对使用到这个变量的函数进行依赖收集 --> 自然在就会为这个变量创建一个依赖函数的数组，一个函数使用到这个变量的时候，就把这个函数放入到这个数组里面 --> 但是，如果这个函数多次使用到这个变量，自然就造成了这个依赖数组里面多次收集了同一个函数了。2 通过es6的set数据结构创建依赖收集的数组，避免了重复收集。
2023-03-06 19:54:03
70
原创 js实现懒加载 最简单
1 img中的src先都用同一张loading的图片占住，然后把真正要显示的图片放data-src里。2 先获取图片dom的列表以及有多少张图片。3 然后写一个lazyLoad函数。4 函数中先获取视口以及滚动的宽度。：dom元素.offsetTop。5 循环图片dom元素列表，如果。6 在视口内就需要给他将。
2023-03-04 10:54:53
1558
原创 js深拷贝 最简单版
5 是对象就循环调用deppClone函数，普通值就直接赋值就好了。1 判断对象是数组还是对象，给rightObject初始值。3 用hasOwnProperty来排除原型链上的属性。2 for in 循环rawObject。6 最后就直接返回操作完的对象就可以了。4 判断取的值是对象还是普通数据类型。
2023-03-04 10:11:17
50
原创 第十二章 实现shallowReadonly功能
2 shallowReadonly中传入createReactiveObject中的shallowReadonlyHandler从我们之前baseHandlers文件中导入。4 然后就是导出shallowReadonlyHandlers，通过封装的extend方法对readonlyHandlers进行扩展修改。1 在reactive.ts中导出shallowReadonly这个方法。shallowReadonly： 让一个响应式数据变为只读的(浅只读)下面我将按顺序给出步骤图片，并且注上解释。
2023-03-03 09:43:56
304
原创 第十二章 实现shallowReadonly功能
2 shallowReadonly中传入createReactiveObject中的shallowReadonlyHandler从我们之前baseHandlers文件中导入。4 然后就是导出shallowReadonlyHandlers，通过封装的extend方法对readonlyHandlers进行扩展修改。1 在reactive.ts中导出shallowReadonly这个方法。shallowReadonly： 让一个响应式数据变为只读的(浅只读)下面我将按顺序给出步骤图片，并且注上解释。
2023-03-03 09:43:11
324
原创 第十一章 实现reactive和readonly嵌套对象转换的功能
其实分析一下问题，要让reactive中的对象也是reactive那主要就是在触发get的时候对获取到的res是不是对象进行不同操作，如果为对象就要让他传入reactive中响应式化。主要实现是readonly包装过的对象里面的其他对象也是readonly的，有了reactive的基础，其实实现起来就很简单了。直接在get中的对象判断中判断，isReadonly的话就调用readonly函数否则调用reactive函数，如图。就修改了一句代码就可以了，这就是封装优化的好处，增加功能就很简单。
2023-03-02 20:09:59
153
原创 第九章 实现isReactive和isReadonly
2 利用isReactive传入的对象，调用对象中特定设置的一个属性__v_isReactive，如果这个对象是响应式对象，就会走get函数。3 我们可以在get函数中判断key值，如果为__v_isReactive的话,就返回他不是readonly。对于这种__v_isReactive属性，我们可以使用枚举，让我们在别的地方降低书写错误。有了isReactive的实现，那isReadonly也就水到渠成了，测试案例。1 reactive.ts中导出isReactive方法。reactive.ts代码。
2023-03-02 20:08:58
388
原创 第十章 优化stop功能
3 run方法中我们可以通过this.active判断当前是否调用过active，因此当active为true时候，我们才给shouldTrack赋上true，让他可以走入收集依赖的流程，重要的是我们走完fn执行的流程之后，就要把shouldTrack职位false。既然是依赖收集的问题，那么我们是在track中收集的依赖，所以我们应该从track收集依赖入手。stop后已经把依赖清除了，obj.prop又走了get，触发了依赖收集，又收集进去了，就相当于stop函数中的依赖清楚白清除了。
2023-03-02 20:07:57
163
原创 第七章 实现effect的stop功能
其实最主要可以重构的点就是effect的第二个配置项参数，因为每次多传入一个配置项时就需要我们手动的去接收一下，其实是很麻烦的。最后，因为我们一直测试的是effect的测试文件(yarn test effect)，这个文件的测试用例是通过的了，这时候我们这个模块的功能写完了之后，一般需要yarn test测试一下你所有功能，会不会有问题。根据tdd的开发流程来说，第一步是写测试，第二步是让测试通过，第三步是对代码的一个重构，下面我们就对我们的代码进行重构，让它更有可读性。
2023-03-02 20:07:50
229
原创 第六章 effect.scheduler功能实现
3 当 响应式对象 set update 不执行fn 而是执行 scheduler。1 通过 effect 的第二个参数给定一个 scheduler 的 fn。当 响应式对象 set update 执行 scheduler。4 如果说当执行 runner 的时候 会再次执行 fn。2 effect 第一次执行的时候 还会执行 fn。
2023-03-02 20:07:01
296
原创 第八章 实现readonly功能
但是其实这样看来我们reactive中的代码还是挺多的，这时候我们还是可以再抽离的，我们可以把proxy中的handler函数抽离到baseHandlers文件中去，抽离完之后就很简洁了，就只剩下几行代码了，get set的逻辑都抽到baseHandlers中去了。既然get都抽离完了，那就到set了，基本上想法和get一样的，甚至比get简单，因为readonly中没有set功能，所以函数中甚至都不需要判断。是不是觉得这些get和set的代码非常的相似，做的非常像，没错，这就是我们今天要重构的地方。
2023-03-02 20:06:53
166
原创 第四章 reactive对象的简单实现以及reactive的依赖收集和触发依赖
依赖收集主要在Proxy中的get函数中通过track实现，而我们选择在effect.ts中导出track函数，我个人觉得effect中也比较好处理，对于effect实例这些变量的获取上都是比较方便的。依赖收集做好了，起触发依赖就很简单了，就跟着上面的存储关系图，用targetMap找到dep容器，然后循环调用里面effect中run方法就可以了。这段代码就可以看出activeEffect是effect.ts中声明的一个全局变量，然后当运行run函数的时候给他赋值为当前的激活的effect。
2023-03-02 20:05:58
259
原创 第五章 effect返回的实现
1 调用effect返回一个runner函数，其实主要就讲_effect.run返回出去就行了，但是由于run函数中使用到了this，所以我们需要为返回的run函数bind他的this指向。2 runner函数调用后返回fn中的return的值，fn是在effect对象中的run方法中执行的，所以只需要将effect中的run方法中调用的fn函数返回的值返回就ok了。主要增加了 return _effect.run.bind(_effect)2 runner函数调用后返回fn中的return的值。
2023-03-02 20:04:58
113
原创 第三章 集成jest做单元测试环境
2 创建src，reactivity，tests文件夹，还有index.ts，index.spec.ts文件，如图结构所示(src下reactivity下tests)1 通过yarn init -y生成package.json文件夹，并且在script中添加运行程序的命令代码，如图。最后可以先安装一下jest这个插件，如下图所示的红框，方便后期debug，安装成功会有Run|Debug的按钮。5 最后index.spec.ts的测试代码 index.ts代码。首先附上项目目录的截图。
2023-03-02 20:03:55
354
原创 npm install开发依赖(devDependencies)一个也没下载下来，npm本地下载的包全都跑到全局的npm下面去了
并且给npm配置文件中配置了production = true，如图。2 我其实是第二种情况，我本地下载的包全都跑到全局的npm下面去了。主要也是配置文件的问题：将global重置为false就可以了。1 下载node的时候给环境变量配置了生成环境，如图。
2023-03-02 20:00:24
587
原创 第二章 runtime-core初始化核心流程和runtime-core更新核心流程
runtime-core初始化核心流程和runtime-core更新核心流程
2023-02-22 14:46:32
256
原创 vue3初体验
修改响应式对象的值-触发set操作-执行trigger-重新运行effect函数-执行fn-触发get操作-执行track-把effect收集起来作为依赖 (重新运行effect函数有基本上走了初始化收集依赖的流程)runtime-dom如图是依赖于后面的runtime-core和reactivity的，很多vue中的api都是由runtime-core中export出来的。创建effect对象-执行fn函数-触发get操作-执行track-把effect收集起来作为依赖。3 最后就是 更新update。
2023-02-22 14:45:43
210
原创 submodule的简单指令使用
submodule简单使用git submodule add -b master git@192.168.1.130:easyCode/zkzc-charts.git(git代码地址) src/components/zkzc-charts(拉取到的本地路径)开发过程中，经常会有一些通用的部分希望抽取出来做成一个公共库来提供给别的工程来使用，而公共代码库的版本管理是个麻烦的事情。今天无意中发现了git的git submodule命令，之前的问题迎刃而解了。记录几个常见的submodule指令的使用。
2023-02-22 14:37:00
351
原创 《vue生成pdf封装 精进版》
首先上一篇文章我们是直接把getPdf给挂载到Vue实例上，这种写法一般都是这就在main.js中去写，这样当我们挂载得越来越多的方法的时候，我们的main.js就会变得特别乱。这时候vue.use()的妙用就出来了，我们以前经常使用的element，antd这些组件，全局引入的时候都是用的vue.use去注册，这里我们也可以把getPdf这个方法抽离出去，然后使用vue.use来注册，也就是全局挂载，这样我们那一堆代码就可以抽离出去了。包装好剩下就是使用了，使用就更简单了.接下来让我们看看怎么抽离吧。
2022-12-29 10:37:03
167
4
原创 vue实现生成pdf文件
2 接着就是第一个方法exportReport，也就是按钮触发的方法，这个方法里面很简单，就获取了pdfDom这个盒子的dom对象，然后调用生成pdf的方法outPutPdfFn。至此一个简单的生成pdf功能就实现了，上述的方法基本都封装好了，使用上述的3个方法，只需要自己对需要生成pdf内容的盒子进行id的添加，将方法带入就可以了。1 首先template部分就是，给你要到处pdf内容的部分加上一个id标识，用于获取这个盒子的dom对象，如图我这里的id是pdfDom。
2022-12-29 10:06:45
6980
11
原创 vue3中setup语法糖子组件怎么接收props和emit更新父组件变量
vue3中setup语法糖子组件怎么接收props和emit更新父组件变量
2022-09-23 10:26:59
900
原创 父组件给子组件传值动态传入的值一直显示的都是第一次传入的值，vue子组件监听父组件的传值
由于已撤销是由外部传入的变量11来获取的 当传入的props变化后 没有对已撤销这个变量进行更新，所以，传入的props变化了，但是子组件中自己定义的变量还是原来的值已撤销。父组件给子组件传值动态传入的值一直显示的都是第一次传入的值，为什么会出现这种问题？其实不是父组件只在第一次进行了传值，其实每次传值他都给子组件传了，而是你在。所以需要对传入的props进行监听，然后在监听中更新状态。这是父组件中引用的子组件 往子组件中传入了value。看父组件的值已经变成7了但是状态还是已撤销。
2022-09-17 11:07:43
1533
原创 v8是什么，做了什么？
v8引擎通过scanner的词法分析形成token流，再由parser解析器的语法分析将token流转化成AST树，同时也会有语法校验；（预解析[对不调用的函数进行预解析]和全量解析）ignition解释器将AST树变成字节码，turbofan编译器将字节码转成机器码执行
2022-09-05 22:30:34
117
原创 父组件将请求到的接口数据传递给子组件时，数据还没到子组件就出现了，子组件接收到的props为‘‘
父组件将请求到的接口数据传递给子组件时，数据还没到子组件就出现了，子组件接收到的props为''
2022-07-10 17:39:48
789
原创 解决uniapp中使用不了window对象问题(使用renderjs)
解决uniapp中使用不了window对象问题(使用renderjs)
2022-07-07 11:44:43
12943
4
转载 cnpm -v npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead
cnpm 安装后不可使用npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.cnpm@8.2.0 (F:\nvm\v16.13.0\node_global\node_modules\cnpm\lib\parse_argv.js)
2022-07-07 11:08:08
361
原创 uniapp使用腾讯地图选点 没有window监听回传用户的位置信息，怎么处理
但是通过uniapp开发app好像没有window，导致监听不到数据。
2022-06-25 15:17:01
258
2
原创 vuejs中用require引入图片，出现ReferenceError: require is not defined
data() {return {img:require(‘…/…/static/logo.png’)};},script中使用require(）报错，出现ReferenceError: require is not defined将require改为new URL(XXX,import.meta.url).href如下:data() {return {img:new URL(‘…/…/static/logo.png’,import.meta.url).href,};},在vite
2022-05-20 14:22:11
3769
1
原创 vue3中的ref为什么要用.value取值？为什么返回一个对象？
这篇文章将从vue3源码进行分析当我们写下let msg = ref(‘ljp’)这个代码时，vue3将如何执行首先找到vue3中三大模块中的reactivity模块，在这个文件夹下的src文件夹下的ref.ts文件下，如图然后调用如图下的ref函数（这个ref是个重载函数）其他解释如图createRef解释如下RefImpl解释如下：toReactive(这个函数和ref文件在同个目录下)的解释如下到这里就结束了源码中最后是以get set函数对value进行获取以及修改的，如图
2022-04-30 00:04:12
6271
原创 uniapp中前端 “Unexpected end of JSON input”报错问题
我之前有一个vue和uniapp搭建的项目遇到这个问题，发现是JSON.parse(data)使用的问题.JSON.parse()入参不能是空字符串。会出现如图：因此传入JSON.parse()的数据要对其进行检测，使其不为空。
2022-04-25 10:20:16
1617
原创 git commit 报错 error: pathspec ‘second‘‘ did not match any file(s) known to git
git commit -m 后面的提交内容用双引号，不用单引号。
2022-03-03 15:51:04
215
原创 简单的vue项目打包上线,配置vue.config.js解决打包以后页面空白问题
只适合简单的打包上线文件中写入一下代码module.exports = { publicPath: "./"};npm run build重新打包
2022-01-23 20:57:08
576
原创 npm run eject报错 Remove untracked files, stash or commit any changes, and try again.
删除文件夹中被隐藏的.git文件再次运行npm run eject 就可以了隐藏的.git在哪里将红色标注出勾选就可以看到了
2022-01-02 15:16:17
472
原创 从输入URL到浏览器显示页面过程中都发生了什么
1.输入网址2.浏览器查找域名ip地址3.建立tcp协议4.浏览器向web服务器发起http请求5.服务器端处理6.关闭tcp链接7.浏览器解析资源8.浏览器布局渲染
2021-12-08 20:53:48
1989
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人