- 博客(37)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JS实现大文件切片上传以及断点续传
切片上传完成之后将上传完的索引放到localStrage上，再次上传时判断是否上传，如果已经上传了则跳过这一片。3.分别上传各个切片，等待切片上传完通知服务端合并（或者传每一片时把切片总数量也传递过去，让服务端自行合并）2.将从input中获取的file对象使用slice进行分割，每5M一片。1.因为file对象的基类是blob，所以可以使用slice分割。
2025-02-14 19:37:30
289
原创 手写MVVM框架-实现复杂的v-bind（表达式）
我们在实现v-bind时会有一种稍微复杂一点儿的情况，就是里面是一个表达式这个时候我们就需要运行这个表达式获取表达式的运行结果，正常情况下这一步需要代码编译才能获取结果，因为编译原理太复杂，所以我们这里把_data 和 vnode.env创建一个代码执行环境 并加上表达式放在 eval或者Function构造函数，来执行表达式内的代码获取结果。
2025-02-07 11:12:44
318
原创 手写MVVM框架-实现简单v-bind
我们在页面上绑定一个class看效果(可以看到class已经效果，文字变成了红色)解析属性时遇到冒号开头或者v-bind:开头的就获取绑定的具体值并绑定到属性上。1.绑定的是一个简单的属性。2.绑定的元素上面有表达式。
2025-02-06 22:53:04
229
原创 手写MVVM框架-渲染v-for列表（修改List）
上一章我们实现了初始渲染时渲染了v-for列表，这一章我们来实现修改list后重新渲染list。
2025-02-06 22:42:49
219
原创 手写MVVM框架-实现v-for渲染列表
ul下有一个真实节点li并且添加了v-for的指令，我们需要的做的就是把当前这个li变成虚拟节点，然后在虚拟节点下挂载真是节点，但是在html层，真实节点的li还是挂载到ul上面。4.构建虚拟节点时，使用分析属性返回的真实节点，如果没有返回真实节点，则自行创建虚拟节点，创建虚拟节点时，如果当前节点有env属性的话，则把这个值设置到虚拟节点的env中。1.vfor.js 中创建一个虚拟节点，并传入相关的属性，然后删除带有v-for指令的标签，然后添加上一个空的元素节点。从页面上我们可以看到页面已经渲染li。
2025-02-06 21:42:49
162
原创 手写MVVM框架-实现beforeCreate、created、beforeMount、mounted钩子
我们在$mount 和 $render 方法里面返回一个Promise 在then方法里面执行beforeMount和mounted。我们现在MiniVue中实现前4个生命周期。
2025-02-06 00:31:56
248
原创 手写MVVM框架-实现v-on以及methods
首先我们来实现methods，methods较为简单，只需要在初始化的时候，将事件挂载到实例上即可，唯一需要注意的是挂载的时候需要使用bind去注册事件，因为method里面可能会使用到this去访问里面的数据。v-on原理很简单，构建虚拟dom的时候查询元素节点是否以@或者v-on:开头，如果以这个开头则给元素添加事件监听,我们先创建von.js。现在我们来页面上给button绑定一个事件，并在入口文件上添加上这个事件查看效果。Vue中v-on可以用来绑定自定义的事件，我们今天就来实现这个功能。
2025-02-06 00:31:33
215
原创 手写MVVM框架-实现v-model(双向绑定)
上一章我们实现了，修改input的值后文本节点的内容发生了变化，还有一个v-model属于双向绑定，我们我们的值发生了变化的话，input的值也需要发生变化，这一章，我们来实现这个功能。第一步：收集属性自定义指令依赖, 所以我们需要在收集依赖时添加收集属性依赖的代码渲染修改后的控件值我们已经收集好元素自定义指令的依赖了，下面在渲染节点的时候，把属性值放到控件上即可我们修改一下html模板的内容以更好的查看内容现在在浏览器上查看。
2025-02-05 21:35:34
602
原创 手写MVVM框架-实现v-model(单向绑定)
开始之前我们先修复一下之前的一个BUG、由于我们使用了html-webpack-plugin并且配置了html模板，所以在html模板里面就不需要再引用打包后的bundle.js了，webpack打包时会自动添加上去，我们在构建虚拟节点的时候，检测节点是否有v-model属性，检测到了之后就添加调用v-model，当前代码只支持input的双向绑定，如果需要其他标签，请自行添加。3.构建虚拟dom时，如果是元素节点并且有v-model属性，给调用vmodel方法。现在开始实现v-model。
2025-02-05 20:35:57
453
原创 手写MVVM框架-模板渲染2
renderData 方法传递的第二个参数就是用户在模板中写的字符串, 这是我们就需要写一个方法getNameSpace来获取这个字符串。上一章我们处理了在页面初始化的时候渲染模板，但是如果是在页面上修改了data里面的数据的话是不会修改的，这一章我们来实现这个功能。为了验证一些嵌套类型的数据修改，我们在入口文件index.js 中新增一个object类型的数据，并在index.html 中使用。我们在proxyObject处可以监控到用户改变数据，这个时候触发renderData方法。
2025-02-05 00:15:40
213
原创 手写MVVM框架-模板渲染1
虚拟dom创建好了，依赖也收集好了，这个时候就该去渲染dom了，把页面上的。1.传入根节点VNode, 如果当前节点是元素节点则重新调用该方法。现在再查看页面上的效果发现，模板已经被替换成了具体的值。2.如果是文本节点，则获取出来该节点依赖的模板。渲染之前我们给原型上添加一个render方法。3.获取该模板对应的值 然后将值替换为模板。然后把render 方法挂载到原型上并调用。接下来实现renderNode方法。
2025-02-04 18:33:32
270
原创 手写MVVM框架-收集依赖
响应式数据完成之后我们需要根据数据进行动态更新dom，但是更新之前我们需要MVVM进行动态更新的时候，需要知道data里面的某一个属性，都哪些dom用到了，这样才能根据真实节点进行准确更新。{}}）的名称，创建两个Map 一个通过VNode关联模板、一个通过模板关联VNode，这样如果某一个模板值发生改变就可以轻易的获取关联的节点从而修改dom。收集的过程中，我们主要是对于文本节点（nodeType=3）的节点进行收集，如果是元素节点，则重新调用方法，如果是文本节点的话则获取模板（去掉{
2025-02-04 17:27:57
414
原创 手写MVVM框架-构建虚拟dom树
构建虚拟dom树的操作我们放在mount事件里面，现在需要创建mount.js。MVVM的核心之一就是虚拟dom树，我们这一章节就先构建一个虚拟dom树。3.构建dom时，使用深度优先搜索算法（反复调用本身方法），获取子节点。2.给原型添加mount方法，通过根节点el构建虚拟dom。我们在浏览器里面可以看到当前构建的虚拟dom树。首先我们需要创建一个VNode的类。init方法里面执行当前mount。第二步：构建虚拟dom。1.创建虚拟DOM的类。
2025-02-04 16:36:52
625
原创 手写MVVM框架-实现数组代理
实现数组类型的代理的方式就是初始化代理的时候，为数组的每一个元素都进行简单代理（Object类型的代理），而后代理数组的常用方法：push、pop、shift、unshift、toString。这里有一个需要注意的点，正常情况在代理入口方法中，会先进入Object中的代理，我们需要在代理中，让他再次进入constructProxy，所以我们需要添加一段代码。然后就是代理方法，原理就是代理对象的push、pop、shift、unshift 方法，在代理方法里面执行array的同名方法，然后返回结果。
2025-02-04 13:32:32
449
原创 手写MVVM框架-实现简单的数据代理
当前的代理我们使用Object.defineProperty来实现，这个类方法有一个很大的缺点，就是在定义数组时，通过下标修改数据和新增删除数据时不会触发，vue2中的解决方法就是重写这些方法，这里我们也按照vue2的方式来实现。创建完类之后我们需要创建一个js（src/core/init.js）给这个类的原型添加初始化事件，用来初始化data、computed等内容。我们在src中添加proxy.js，并添加代理方法(src/core/proxy.js)方法 (src/core/proxy.js)
2025-02-04 11:58:34
541
原创 手写MVVM框架-环境搭建
项目使用 webpack 进行进行构建，初始化步骤如下:1.创建npm项目执行npm init 一直下一步就行2.安装webpack、webpack-cli、webpack-dev-server，html-webpack-plugin3.配置webpack、 创建webpack.config.js 、配置启动命令创建调试的html页面根目录创建public文件夹，并在文件夹内部创建index.html，里面的代码如下（bundle.js 是webpack打包的mvvm代码)
2025-01-30 18:51:00
752
原创 手写Promsie
Promise2的状态和值由onfullfilled或onRejected的返回值决定。[[Resolve]](promise, x) 是一个抽象操作，用于处理 then。then方法必须返回一个新的Promise(成为Promsie2)必须提供一个then方法，用于访问当前的status和reason。如果onfullfilled或onRejected返回一个值X;表示操作完成，必须有一个不可变的value。操作失败，必须有一个不可变的reason。如果promise 和。不是对象或函数，则以。
2025-01-06 11:24:06
353
原创 JS中的原型与原型链
在 JavaScript 中，是实现和的核心机制。JavaScript 是一种基于原型的语言，每个对象都有一个原型（__proto__），通过原型链实现属性和方法的继承。
2024-12-22 20:55:18
536
原创 关于JS中的this指向问题
全局代码中调用this，this都指向window对象，如果是nodejs 中this指向global。在方法内部调用this并不能马上获取this的指向，具体要看当前方法是如何调用的。全局代码中调用this。方法内部调用this。
2024-12-22 19:58:38
299
原创 JS 中的作用域与变量提升
上面的代码中，在代码中 a 定义之前就能够访问到 a ，但是输出的是undefind, 这是因为它只会将变量的定义进行提升，而赋值不会；fun1 是一个方法，会直接提升到最上面，所以能在最最上面输出，而fun2是一个变量，它和a一样只会将定义提升；虽然这两个也存在变量提升，但是提升之后并不能直接访问 ，会存在暂时性死区。函数作用域中声明的属性只能在函数中访问（如果在外部访问就会爆错）JS中有两种作用域 一个是全局作用域 一种是函数作用域。全局作用域声明的属性 哪里的可以访问。变量提升的概念值的是将变量的。
2024-12-22 19:34:20
326
原创 CSS的样式计算过程
案例中的a标签由于有浏览器的默认样式，所以到第一个就计算出来样式了！第一步：如果元素有已经声明的值的话，就直接使用已声明的值，下面的步骤直接省略！为什么我已经定义了父元素为红色, a标签不是应该继承父元素的样式为红色吗?我们以标签为例，逐步来看这几步骤是如何进行的！第二步：用户样式表 > 浏览器样式表。先看一段代码， a标签是什么颜色？第三步: 继承样式。第四步：使用默认样式。
2024-12-19 23:18:23
312
原创 Electron实现打开子窗口加载vue路由指定的组件页面白屏
因为项目已经打包了，他加载的是一个html文件，没有http的支持，所以就不能再使用loadUrl 去加载你的本地页面，这时候就要。Vue项目使用的history路由的话就会显示空白，加载不出来路由，也不能跳转路由。Electron中已经能正常加载页面跳转路由，但是创建子窗口加载子页面显示空白。这种情况下显示空白是因为加载不到你传递的Hash路由！这样就能加载到你的Hash地址了👇。这种情况看我上一篇文章。换成loadFile。
2024-12-01 20:46:15
847
原创 Electron+Vue实现两种方式的截屏功能
如果不想用人家封装好的话就需要自己调用dll文件去做一遍，不过在electron中调用dll, 那就得安装ffi ,那是非常难安依赖。electron环境下之前的方法可以使用，但是弊端也有，不过可以从electron中获取当前应用的视频流信息，可以规避这个问题。本次介绍的截屏功能一共有两种分别是在electron环境中与非electron环境中。但是会有第二种的限制，如果画面有iframe 的话就不行了，就像这样。稍后遗憾的是，人家封装好的有别人的业务功能（转发功能）就这样吧 资源在这了自己去拉吧。
2024-10-16 22:43:56
1119
原创 Vue向上滚动加载数据时防止内容闪动
dom加载完了之后滚动还是在最上方，页面就会出现内容的变化(显示新加载出来的数据)，这时候再滚动到之前元素的位置还会再次出现内容的变化，（这里我尝试过禁用滚轮事件，但是内容撑开后滚轮还是会变）API, 这个API是跟着浏览器的刷新频率来计算的，大概就是一秒60次，它会在下一次渲染之前进行回调。加载数据之前记录整体滚动条的高度，数据加载完之后把滚动条滚动到之前数据所在的位置；：当前组件向上滚动加载数据，dom加载完后，页面的元素位置不能发生变化。：加载完数据后，又把滚轮滚到之前记录的位置时，内容发生闪动。
2024-10-15 00:50:26
546
原创 Vue封装拖曳上传，解决重复触发dragenter和dragleave问题
用户拖动文件到聊天框时出现黑色半透明背景，在黑色背景中拖动时黑色背景不消失，拖出黑色背景时消失。：enter和leave会循环触发，导致出现闪烁的情况（黑色背景出现 然后消失 一直循环）进入时触发，并且只触发一次,实际上是只要拖动元素在目标元素里面就会一直触发,拖动元素在目标元素移动时触发。拖动元素进入目标元素时触发。拖动元素离开目标元素时触发。触发dragenter时，触发dragleave时，然后你就会把代码写成这样。触发dragover时，只在拖动元素离开时触发。
2024-10-11 21:24:54
521
原创 react 中使用react-dom/client渲染虚拟dom没法使用redux
在使用ReactDom时直接渲染dom不能使用redux。如果使用react-dom 就正常。相同的redux代码在下面。
2024-08-15 22:49:55
294
转载 gradle无法获取‘.pom’文件（Android Studio3.0）
错误内容：Could not GET ‘https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.1.3/gradle-3.1.3.pom ‘. Received status code 400 from server: Bad Request解决方案：1. 修改文件 build.gradle将b...
2019-05-09 15:31:51
4016
原创 JAVA IO通信
我们使用的APP类似于QQ,MSN，WECHAT,都有即时通讯的功能，那么有人会想这个功能到底是如何实现的呢？我们就一起来看一下JAVA中的JAVAIO通信。JAVA中网络IO有几种实现方式，分别是BIO,NIO传统的BIO编程BIO通信模型会为客户端的每一个Socket建立一个连接，每一个连接都会再服务端创建一个线程，每一个线程进行读写的时候都是处于阻塞状态，可想而知当当有大量的连接...
2018-10-23 10:25:41
343
1
原创 SpringBoot整合Springsecurity实现数据库登录以及权限控制
我们今天使用SpringBoot来整合SpringSecurity，来吧，不多BB首先呢，是一个SpringBoot 项目，连接数据库，这里我使用的是mybaties.mysql， 下面是数据库的表DROP TABLE IF EXISTS `xy_role`;CREATE TABLE `xy_role` ( `xyr_id` int(11) NOT NULL AUTO_INCRE...
2018-10-16 18:32:12
46715
21
原创 使用nginx配置二级域名访问web项目
有的时候网站可能会需要一个二级的域名，来访问网站的后台，或着是作为一个图片的二级域名（二级域名指向图片所在的路径） 好把， 我们这就开始配置 首先， 我是用的是阿里云的CentOS7.4版本的linux服务器。安装的过程很简单yum install nginx然后启动nginxsystemctl start nginx 启动后， 我们可以查看运行状态...
2018-10-11 23:24:22
7333
原创 SpringCloud微服务学习2-1-实现eureka的高可用
通常在一个分布式系统中如果服务中心只有一个的话， ji这个服务中心瘫痪的话， 整个后果不言而喻，整个系统就会全部瘫痪这个时候，就会想到， 如果我让服务中心的实例有多个呢， 那样一个不能用， 其他的还能用， 那就不会出现那种情况了。 那么该如何做呢？ 首先， 服务中心必须有多个实例。 多个服务中心互相注册交换信息。spring.application.name=eur...
2018-10-10 21:08:25
532
2
原创 SpringCloud微服务学习3-服务消费者ribbon
我们上一节， 已经学习了如何使用LoadBanncerClient来获取服务的具体信息， 然后根据获取具体的信息调用服务的提供的接口，这样需要我们去手动拼接， 这样比较繁琐，对于开发人员来说非常的不友好， 所以今天我们来看一下springCloud对于对于客户端的负载均衡的工具包ribbon。 Spring Cloud RibbonSpring Cloud Ribbon是...
2018-10-06 21:57:11
394
2
原创 SpringCloud微服务学习2-基础服务消费者
结合上节的内容， 我们创建了一个服务中心和一个服务提供者， 但是要想到，有服务提供者就会有服务的消费者，消费者的意思就是，调用其他服务（项目）提供的接口的项目。这一节， 我们就先讲基础的服务消费者形式， 除了这种方式还有，ribbon 和fegin 的方式， 这一节， 我们着重讲基础的消费形式。 使用LoadBancerClient 在spring-cloud ...
2018-10-03 14:03:28
251
1
原创 SpringCloud微服务学习1-服务的注册与发现
springcloud中最基础的就是服务， 提供了两种服务的注册方式，一种是eureka, 一种是consul我们使用eureka来完成服务的注册功能 首先使用springInitial来构建一个springboot项目，要勾选eureka discovery依赖， 其中我们勾选server端，也就是服务中心，但是这里会有一个，虽然说这里是服务端， 但是当项目运行的时候， ...
2018-10-02 19:41:36
295
2
中这样配置 使用react-dom/client去渲染虚拟dom就会直接报错
2024-08-15
TA创建的收藏夹 TA关注的收藏夹
TA关注的人