- 博客(169)
- 收藏
- 关注
RSS订阅原创 vitePress实现原理(五)路由基本实现
在之前vitepress实现原理（三）构建vite插件createVitePressPlugin函数的configureServer中提到了，当Vite启动开发服务器时调用时，对一切.html请求会返回如下的结构${APP_PATH就是入口文件（类似vue项目内的main.ts），根据之前代码分析得出APP_PATH就是，也就是源码位置当中目录。
2025-02-13 09:39:37
471
原创 vitePress实现原理(四)
本质其实就是搭建一个vite静态服务器，针对所有html文件做拦截，进行二次封装。通过读取.vitepress/config.ts配置转化基本vitepress配置等等，创建markdown插件扩展markdown文档能力。创建vitepress插件对md文件和vue文件做处理。大家这时肯定好奇，怎么没有路由呢？
2025-02-13 09:38:09
303
原创 vitePress实现原理(三)
源码位置：配置解析和合并：解析用户自定义的VitePress配置。合并基础配置和用户自定义配置，生成最终的Vite配置。主题文件处理：监听主题文件的变化，并在发生变化时重启服务器以应用新的主题。Markdown文件处理：将Markdown文件转换为Vue组件以便使用Vue插件进行进一步处理。处理Markdown文件中的死链，并在检测到死链时输出警告信息。静态资源处理：在构建过程中对静态资源进行优化，包括注入标记以标识静态字符串的开始和结束。生成精简版本的JavaS
2025-02-13 09:36:55
617
原创 vitePress实现原理(一)
vitePress对于前端同学肯定都不陌生。官方介绍：VitePress 是一个(SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。接下来，和大家一起学习vitepree原理。后续会根据这套原理，教大家构建一个底层原理类似vitepress的组件站点，适用于公司构建一套统一的组件库首先先看看 vitePress构建前后对比图，不难看出，其它构建后的中和。
2025-02-13 09:32:42
1083
原创 vue+contenteditble+手动移动光标 实现 输入框 动态模板输入
【代码】vue+contenteditble+手动移动光标 实现 输入框 动态模板输入。
2024-12-30 19:35:47
227
原创 webSokect安卓和web适配的Bug 适用实时语音场景
所以，对于一些不符合严格规范但在实际使用中可能不会产生严重安全问题的情况（如某些对常规链接的模糊处理），浏览器可能会进行内部的兼容处理，而不要求开发者显式地去处理。而且，手机操作系统为了确保安全性和稳定性，对应用的网络连接要求更加严格，不太可能自动对不符合规范的链接进行兼容处理。为了用户的隐私，一般许多API（包括录音权限访问），只能在https才能够访问。参考文章：https://modstart.com/p/r13f9t7tpnsuqbss。媒体流中的每个音频轨道对应麦克风的输入通道。
2024-12-17 21:21:05
1169
原创 表格行拖拽，动态变化行高（基于ag-grid或antdv）
首先：动态变化行高，就不能设置高度自适应。如果有行合并还需要保留变化高度。其次：如果行高和cell高度不是一致，还需要从行高计算到cell高。
2024-11-11 20:05:54
322
原创 package.json字段详解，后续更新
是一种声明依赖关系的方式，适用于需要与宿主应用程序共享依赖项的场景。它可以帮助避免版本冲突，并且让依赖关系更加明确。使用时，需要注意版本管理和用户体验，确保用户能够顺利安装和使用你的包。license字段用于指定包的许可证类型。许可证类型决定了其他人如何使用、修改和分发你的代码。ISC是一种开源许可证，允许几乎无限制地使用、复制、修改和分发代码。常见的许可证类型还包括MITApache-2.0GPL-3.0等。files字段用于指定在发布到 npm 时应包含的文件或目录。
2024-10-29 19:34:56
1497
原创 二次封装slot插槽，并转成render函数
是一种特殊的虚拟节点类型，用于表示一组兄弟节点，而不需要在 DOM 中创建额外的包装元素。二次封装slot插槽，并转成render函数。
2024-10-29 19:22:01
188
原创 JavaScript（七十六）Jquery的案例练习
放大镜：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{
2021-06-26 10:29:58
384
原创 Javascript（七十五）jquery的ajax和cookie
JQ的cookie使用下载jquery.cookie.js文件 下载地址：https://plugins.jquery.com/cookie/$.cookie（） （与我们之前封装的cookie函数类似，可以看我之前的博客，有讲cookie使用）$.cookie(name) 取值$.cookie(name,value) 设置cookie 键名和键值$.cookie(name,value,option) 设置cookie 键名和键值以及cookie可选项，option必须是对象$
2021-06-26 10:25:30
665
原创 JavaScript(七十四)JQuery插件方法
$.extend 拓展工具方法 调用方式：$.xxx()参数：对象，属性名为函数名，属性值为函数体$.fn.extend 拓展jquery的函数库，调用 $().xxx()注：为了满足jquery链式操作的思想，在设置新增方法和工具方法的时候，返回this。...
2021-06-24 10:28:21
225
原创 Javascript(七十三)jquery工具方法
JQ的工具方法和我们自己封装的js方法没有区别。jq方法调用$().xxx() 必须是JQ对象调用jq工具方法调用 $.xxx() 与普通封装的js方法没区别.type()输出当前数据的数据类型功能类似于typeof但是.type() 输出当前数据的数据类型 功能类似于typeof 但是.type()输出当前数据的数据类型功能类似于typeof但是.type（）更加的完善。$.trim() 删除字符串首尾空格 功能类似于 ECM5删除首尾空格 .trim（）参数：
2021-06-24 10:25:01
267
原创 Javascript（七十二）jquery中的animate方法
.animate 实现动画效果 ，这与我们之前封装的完美运动框架差不多的。但是他这个默认的运动形式不是缓冲运动，是属于慢快慢。第一个参数：对象，样式名：样式最终效果第二参数：动画持续时间第三参数：运动形式：仅有两种 ‘linear’:匀速 ‘swing’：慢快慢（默认）可省略。第四个参数：回调函数，动画结束时执行。如果想拓展更多的运动形式，可以引入jquery-ui框架（类似于boostrap，通过class名，添加样式），但是基本被淘汰了。https://www.jqueryui.or
2021-06-23 06:25:37
1441
2
原创 Javascript(七十一)jQuery特效函数
移入移出**.hover（functionOver,functionOut）:移入移出效果，functionOver表示移入函数，functionOut表示移出效果。隐藏显示：.hide() 元素隐藏，功能：style.display=‘none’。隐藏过程，从左上角收起第一个参数：（动画持续的毫秒数）第二个参数：（回调函数，动画结束时执行）.show() 元素显示,功能：style.display=‘block’。显示过程，从左上角展开第一个参数：（动画持续的毫秒数）第二个参数：（
2021-06-23 06:06:01
141
原创 JavaScript(七十) jquery(二)
jquery常用的方法筛选结点.filter() 过滤：对我们已经获取到的网页元素进行过滤，选择符合（）内条件的元素。.not() 反过滤：选择与filter相反的元素，选择不符合（）内条件的元素。.has（）拥有，直接判定该节点是否是否有符合条件的子节点元素，如果有，该节点被选中（注：不是子节点，而是父节点）.next() 选择同级节点的下一个元素节点（类似于nextElementSibling）.prev() 选择同级节点的下一个元素节点（类似于previousElementSib
2021-06-22 08:03:33
216
2
原创 JavaScript(六十九) jquery（一）
JQuery简介1.一个快速、简洁的JavaScript框架；2.设计的宗旨是‘write Less，Do More’（写的更少，做得更多）；3.JQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari2.0+、Opera 9.0+JQuery好处1.简化JS的复杂操作；2.不再需要关心兼容性；3.提供大量实用方法Jquery版本区别1.x 可以兼容到IE8以下2.x 只兼容IE8以上如何学习JQ？1.https://jquery.com/ JQ的官方网
2021-06-21 08:37:50
355
7
原创 JavaScript(六十八)版本控制工具 git
安装git1.安装git客户端（去网上搜索下载就好了，很简单）window系统安装之后，在菜单的应用程序下就会有一个git文件夹。git文件夹下面有三个主要的控制台git Bash:支持linux命名的git控制台 （最常用）git CMD：支持window命令的控制台git GUI: git可视化界面苹果自带git2.VSCode 安装git插件 快捷键 ctrl+~ 迅速打开终端，并且当前路径是我当前页面所在路径下载安装完毕git之后，就可以github官网地址（
2021-06-21 08:18:50
368
1
原创 Javascript(六十七)模块化
模块就是实现特定功能的一组方法原始写法只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。缺点：全局变量污染对象写法缺点：虽然没有造成全局变量污染，但是对外暴露，外部可以随意更改对象内的元素。闭包（立即执行函数）达到不暴露私有成员的目的，外部无法随意更改函数内的变量以及函数，因为根本访问不到，函数内部变量对外都是不可见的。缺点：无法二次拓展，就是在原有基础上拓展放大模式缺点：拓展的基础，必须是先有一个原型，如果原型是在后面运行的，就无法拓展了宽放大模式解决
2021-06-20 08:46:00
199
原创 Javascript(六十六) 项目开发工具Gulp
https://www.gulpjs.com.cngulp是基于node.js的一个前端自动化工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用glup你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。下载glup1.进入node.js中文文档下载nodejs（http://nodejs.cn/download/）2.点击安装包一路点击下载即可3.启动nodejswindows： 点击windows键（开始键）=>nodejs文件=>n
2021-06-19 06:56:07
445
原创 Javascript（六十五）闭包
凡是满足以下三个特点，都属于闭包1.函数嵌套函数2.内部函数使用外部函数的形参和变量3.被引用的形参和变量就不会被垃圾回收机制所回收垃圾回收机制:调用函数时，系统会分配一定的内存空间给这个函数使用（空间大小由这个函数里声明的变量和形参决定）。调用完毕之后，这个内存空间要释放，还给系统。var a=0 function show(){ console.log(a); a++; } show() show() //a的空间没被释放 alert(a)
2021-06-17 09:06:54
424
8
原创 JavaScript(六十四)本地存储技术cookie （会话跟踪技术）
什么会叫会话跟踪技术？在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（例如：是否登录，购物车信息、是否已下载、是否已点赞、视频播放进度等等）你把cookie就当成第一次跟服务器连接后，服务器发给你的身份牌，上面旧纪录跟你相关的信息 以后只要在跟服务器通信，必须带着这个身份牌，这样一来，关于你是谁？是否登录过购物车里有什么信息？服务器当然就很容易知道了。cookie与localStorage以及sessionStorage区别localStorage（客户端微型数据库）：1.永久存储；2
2021-06-16 13:47:15
235
原创 Javascript(六十三)网络协议
网络分层的概念OSI 7层的网络分层通用 5层网络分层网络传输协议：网络数据在互联网进行传输，遵从的传输规则传输层：TCP/UDP port端口号（确定来自哪个软件）网络层：IP协议 确定传输给哪台电脑（IP）数据链路层：数据信号（1.0）物理层：数据信号->光信号。http协议（超文本传送协议）：功能：使万维网客户程序与万维网服务器程序之间的交互遵守严格的协议。连接方式：HTTP是一个的面向事务的应用层协议，使用TCP连接进行可靠传输。注：事务：一系列的信息交换，而
2021-06-16 13:25:24
454
原创 JavaScript(六十二)认识JSONP跨域
请求数据同服务器下请求：我们试试不同服务器下请求，能够看到我们的请求被拦截了，原因是少了“Access- control - allow - origin”头信息，这就涉及到了跨域请求的问题同源策略解决跨域请求，首先要知道同源策略是什么。同源策略：1.同协议 2.同IP/同域名 3.同端口号如果我们下载的数据url和网页的url满足以上三个条件，那么我们就能确定他们就是同源的，我们就能够下载数据了。ajax只能下载同源数据，跨源的数据禁止下载之所以会这样，就是为了保证服务器的安全
2021-06-15 09:00:33
565
7
原创 JavaScript（六十一）mysql和php 前后端项目
1.登陆格式限制2.数据传输3.请求判断4.加密5.发送请求6.返回提示完整代码:github :
2021-06-15 08:10:44
514
3
原创 Javascript（六十)mysql
假设我们的各个网站的数据保存在文档当中,那么就会存在以下弊端。1.文件的安全性2.文件不利查询和对数据的管理3.文件不利于存放海量数据4.文件在程序中控制不方便为了解决以上问题：因此有了数据库的出现。数据库本质也是文件。功能主要是保存数据并且配套一套数据管理系统，更有利于对数据的管理，比如增删改查。数据库水平衡量一个程序员水平的重要指标。我自己使用的Phpnow软件是mysql、php、apache集成环境，大家要是想单独使用mysql，可以单独去下载使用。（phpnow安装完之后会自带mys
2021-06-14 08:08:19
228
1
原创 Javascript(五十九)JSON对象
json数据传输格式：字符串的一种格式xml数据传输格式：使用标签和属性形式存储，传的数据种类和数据量多前端 传输 后端数据结构 字符串（运输成本低，传输数据，无法传输结构） 数据结构JSON对象：前端方法：JSON.par
2021-06-14 07:18:03
296
原创 JavaScript(五十八)AJAX
节省用户操作，事件，提高用户体验。减少数据请求，传输获取数据ajax：异步的javascript和数据传输（传输格式：xml、json）使用Ajax 使用ajax获取某一文件的内容Ajax过程详解 创建对象XMLHttpRequest（） ActiveXObject（‘Microsoft.XMLHTTP）xml:数据传输格式（大型门户网站：新浪、网易、凤凰网）优点：标签名和行间属性由用户自定义，种类丰富；传输量非常大缺点：解析麻烦；不太适合轻量级数据json数据传输格式（字符串）：（95%移
2021-06-13 09:34:58
218
原创 JavaScript（五十七）PHP语法
PHP简介PHP语言的特点1.PHP（超文本语文处理器）是一种通用开源语言2.PHP脚本在服务器上运行3.PHP可在不同平台上运行（window、Linux、Mac、OSX）4.PHP与目前拒户所有的正在被使用的服务器兼容（Apache、IIS等），全球95%以上的网站都是由PHP开发5.PHP是免费的，可以同官网上下载它“www.php.net6.PHP提供广泛的数据库支持7.PHP易于学习，并可高效的运行在服务器端。php代码兼容html和css所有代码php=》数据库php=》编
2021-06-12 12:05:22
281
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人