Vam的金豆之路-CSDN博客

原创每个前端开发者都可以开发一个属于自己的库或框架「Strve.js生态初步建成」

前言从3个月之前，就想自己开发一个库，从而提高一下自己的能力。庆幸的是在年前就开发出来了，并且生态也初步建成。这里提到的生态包括：Create Strve App、Strve Router以及其他辅助Strve.js开发的工具。说实话，这段时间是挺难熬的，这也算是今年给自己一个礼物吧！我开发Strve.js的初衷是之前接触过JSX语法，一直觉的JSX语法非常酷，可以在JS中写HTML标签，于是就想开发一款类似JSX语法的库。刚开始也开发了一段时间，搭配Babel可以简单实现JSX语法。但是到后来觉得并

2021-12-22 23:49:54 1684 17

原创「create-?」每个前端开发者都可以拥有属于自己的命令行脚手架

前端项目命令行工具

2021-12-19 16:22:14 962

原创文档如何自动化部署到线上环境「每个前端都可以拥有自己的博客」

前言说起文档，我们可能会第一时间会想起很多技术文档，比如Vue.js文档、React.js文档、TypeScript文档，它们都有相似的布局和样式。那么，作为开发者的我们，怎么不也搞一个类似于技术文档的网站作为自己的博客呢？现在有很多开源的项目可以做博客，比如基于Vue.js开发的Vuepress以及同一家的Vitepress，还有基于React.js开发的Docusaurus。这么多方案，我们今天就拿Vuepress为例来搞一下线上可以访问的博客。在开始实战之前呢！透露一下最近在搞得开源库Strve

2021-12-16 23:51:48 1432 2

原创浅析Vue响应系统原理与搭建vue2.x迷你版

Vue2.x响应式原理怎么实现的?Vue 最独特的特性之一，是其非侵入性的响应式系统。那么什么是响应式原理？数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率。简言之，在改变数据的时候，视图会跟着更新。了解概念之后，那么它是怎么实现的呢？其实是利用Object.defineProperty()中的getter 和setter方法和设计模式中的观察者模式。那么，我们先来看下Object.defineProperty()。MDN中它是

2021-06-24 00:30:59 549 2

原创 Virtual DOM到底有什么迷人之处？如何搭建一款迷你版Virtual DOM库？

为什么使用Virtual DOM手动操作DOM比较麻烦。还需要考虑浏览器兼容性问题，虽然有JQuery等库简化DOM操作，但是随着项目的复杂DOM操作复杂提升。为了简化DOM的复杂操作于是出现了各种MVVM框架，MVVM框架解决了视图和状态的同步问题为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题，于是Virtual DOM出现了Virtual DOM的好处是当状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM，Virtual DOM内部将

2021-06-21 21:08:57 284

原创关于Virtual DOM理解和Snabbdom源码浅析

什么是Virtual DOMVirtual DOM(虚拟DOM)，在形态上表现为一个能够描述DOM结构及其属性信息的普通的JS对象，因为不是真实的DOM对象，所以叫虚拟DOM。<div></div>{ sel: 'div', data: {}, chidren:undefined, elm:undefined, key:undefined,}Virtual DOM 本质上JS和DOM之间的一个映射缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我

2021-05-25 21:19:26 428 5

原创从给Vite2官方提了一个issues并已被认可为Bug，我学到了什么？

缘起我打算使用自己搭建的V3项目脚手架parcel-vue-app搞一搞项目，毕竟是刚出来，很多东西都不完善，只能自己不断尝试。于是，使用parcel-vue-cli开始初始化项目（如果有小伙伴对parcel-vue-app感兴趣的，文末有源码地址）。…项目搭建完毕启动地址是http://localhost:3000/，一顿操作之后，页面也能很快地更新数据。不得不觉得Parcel在这方面做得还是很不错的。于是这时，想到了尤大大开发的Vite，决定比较一下。于是进入vite官方网站，下载了vite@2.

2021-05-14 00:55:22 732

原创尤大都说了，别用parcel了。但我还是整出了一款Vue3项目搭建工具parcel-vue-app

先放图弱弱的说一句，我真的错了。不该用parcel~前几天，尤大开直播说了造轮子的好处，主要还是锻炼自己。所以自己还是义无反顾地把这个项目搭建工具慢慢地造起来。这次升级这次版本是v1.0.5。我们来看下这次版本的预装依赖，我们的项目UI框架预先安装上了[email protected]，默认是按需加载。为什么这次是引入它，而不是element-plus，主要是考虑到parcel2针对babel.config.js这样的JS文件对组件样式引入实时检测不是很好，你必须手动刷新才能获取最新状态

2021-05-11 23:59:15 561 7

原创【前端自动化】如何使用Node.js实现热重载页面

前言前不久我结合browser-sync+gulp+gulp-nodemon实现了一款生产环境热更新（我之前理解有点偏差，应该定义为热更新，不是热重载）的项目脚手架，那么，今天我们将使用Node.js实现一个热重载页面。那么，我今天就总结一下吧，以防止大家也跟我一样。热重载所谓热重载就是页面每次改动，不需要手动去刷新，可自动刷新。热更新浏览器的无刷新更新，允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面。目的：加快开发速度，所以只适用于开发环境下使用。思路：保留在完全

2021-05-04 20:18:48 1197 2

原创正式发布一款可cmd命令安装的React.js项目脚手架——FastReactApp

前言今天，篇幅可能比较短，主要介绍最近这段时间开发的一款脚手架——FastReactApp。这是一款基于Parcel2 开发的React.js项目脚手架。虽然比不上正在前端界火爆的Vite以及占据稳定地位的CreateReactApp，但是基本的项目开发还是可以的。下面我将介绍FastReactApp几点特征：对JS、CSS、HTML、文件资产等的现成支持—不需要插件。使用dynamic import()语法，它分割输出包，以便您只在初始加载时加载所需的内容。当您在开发过程中进行更改时，它会自动

2021-04-24 22:38:29 377

原创从开发一款基于Vue技术栈的全栈热重载生产环境脚手架，我学到了什么？

浏览文章前这一期，我分享给大家三点看源码的小技巧，这也是从别的大佬那总结的。被反复使用的代码这样的代码是一个软件的重点函数，一个大神的写法有很多精华值得学习。穿越时间的代码如果一段代码10年甚至15年，都还在使用。说明它的设计思想一定很棒。好调试的代码一个程序的代码很容易就调试成功，说明作者的项目结构能力很强，值得学习。前言今天，我们来搞一个新东西，名字叫基于Vue技术栈的全栈热重载生产环境脚手架。实话说，这个名字我想了很久。最终，还是以这个名字作为文章标题。我先拆分解释下：全栈的意思

2021-04-11 18:54:59 1235

原创【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具

前言一周时间，没见了，大家有没有想我啊！哈哈！我知道肯定会有的。言归正传，我们切入正题。上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目。那么，今天我将会带领大家认识一个新的Vue3项目构建工具——parcel-vue-cli。这是什么？怎么以前没有听说过。有这样的疑问其实并不奇怪，因为这个构建工具是我自己开发的。你可能会这样问：“你自己开发的？这么厉害吗”？是的，豆哥其实就这么厉害。开玩笑啦！其实没有你想得那么厉害。都是搬砖人，主要看思路。好，不扯了！本篇文章我将带大家如何从0到

2021-03-30 01:22:57 2139

原创 SimpleMarkDown编辑器离线版以及桌面应用版上线

之前，我们开发了Web版本SimpleMarkDown编辑器。今天，我们又推出了离线版和桌面应用版。主要功能：页面简约；实时保存；一键清空内容；支持微信公众号、知乎、稀土掘金、CSDN等多个平台；可复制HTMl格式文本；可复制MarkDown格式文本；可下载为MarkDown文件；获取链接请尊重原创～关注公众号，可以进学习交流群哦，这里有大厂大佬精心解答，另外还有分享最新技术动向。公众号：前端历劫之路...

2021-03-21 23:21:07 416

原创我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器（开源）

前言之前，一直想开发一款属于自己的Markdown编辑器，主要是自己平常写文章可以更加灵活操作，另外扩宽自己的视野也是非常不错的选择啊！所以在周末就决定玩耍一番。首先我调研了很多线上热门的md编辑器，都很优秀。不为超过他们，主要自己用着舒服点。这篇文章主要是记录下我是如何从0到1是完成一款还算拿得出手的Markdown编辑器。完成项目一览调研Markdown编辑器国内、国外关于Markdown编辑器有很多。editor.md网址：https://pandao.github.io/editor

2021-03-07 23:28:38 4484 18

原创日常js工具函数整理

防抖方法/** * 防抖 * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */let timeout;export default function Debounce(func, wait = 3000, immediate = true) { // 清除定时器 if (timeout !== null)

2021-01-18 11:03:40 595

原创 Vscode个性化设置：让一个小萌妹陪你敲代码

前言大家平时都用什么代码编辑器啊！我个人比较喜欢用vscode，因为有以下几点：开源，免费；自定义配置集成git智能提示强大支持各种文件格式（html/jade/css/less/sass/xml）调试功能强大各种方便的快捷键强大的插件扩展对前端这么友好，没理由不用。偷偷告诉你下载网址：https://code.visualstudio.com/效果图先上图，注意下图是动态的。是不是很萌萌哒~配置这么萌的效果，怎么实现呢？配置如下，Windows环境和Mac环境

2020-12-03 14:16:57 24956 129

原创手把手教你做一个华为鸿蒙系统Demo级项目（JS角度）

系统定位HarmonyOS是一款“面向未来”、面向全场景（移动办公、运动健康、社交通信、媒体娱乐等）的分布式操作系统。在传统的单设备系统能力的基础上，HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持多种终端设备。对消费者而言，HarmonyOS能够将生活场景中的各类终端进行能力整合，可以实现不同的终端设备之间的快速连接、能力互助、资源共享，匹配合适的设备、提供流畅的全场景体验。对应用开发者而言，HarmonyOS采用了多种分布式技术，使得应用程序的开发实现与不同终端

2020-11-21 23:51:31 5415 3

原创 React与Koa一起打造一个仿稀土掘金全栈个人博客（技术篇）

前言我的个人博客样式是仿的稀土掘金，本篇将分为前台角度与后台角度来分析是怎么开发的。前台角度主要资源react.jsant Designfor-editoraxioscraco-lessimmutablereact-loadablereact-reduxreact-router-domreact-transition-groupreduxredux-immutableredux-thunkstyled-components模块页面首页登录注册文章.

2020-06-16 17:33:11 4167 1

原创你要的几个JS实用工具函数（持续更新）

你要的几个JS实用工具函数（持续更新）1、封装fetch源码：/** * 封装fetch函数，用Promise做回调 * @type {{get: (function(*=)), post: (function(*=, *=))}} */const fetchUtil = { get: (url) => { return new Promise((resolve, reject) => { fetch(url, {

2020-05-15 14:10:23 3574 3

原创【免费开源】2020年独家全球疫情大数据接口（实时获取）

武汉加油，中国加油！！！为了做点贡献，特此免费开源接口，供大家在各平台使用。接口：https://www.maomin.club/fy/get/有了接口，还需要进一步处理。需要将获取到的res通过eval方法处理，接着将V.conf.component[0]就是我们要获取的数据，可以传给一个变量data。success: function (res) { eval(...

2020-02-08 20:41:41 26325 37

原创跑分方面，这款 JavaScript 库在全球框架榜单中的表现比 React 要好得多

在这优化的过程中你不光是做出一个 JavaScript 库或者前端框架，更多的是你可以从中获得你在平时工作中得不到的东西。比如，对设计一款框架需要考虑哪些方面。作者在设计 API 时为什么会这么设计等等一些非工作业务上的事情。

2024-01-21 17:52:52 805

原创自研框架跻身全球 JS 框架榜单，排名紧随 React、Angular 之后！

终于实现了一个重要目标！我独立研发的 JavaScript 框架 Strve，最近发布了重大版本6.0.2。距离上次大版本发布已经接近两个月，期间进行了大量的优化，使得框架性能和稳定性都得到了大幅度的提升。在上次的大版本更新中，成功实现了对 JSX 语法的全面支持，使得 Strve 在代码智能提示和代码格式化方面更加友好，进一步提高了开发效率。相信有些小伙伴没有听说过 Strve 到底是什么，那我这里就大体介绍一下。Strve 是一个可以将字符串转换为视图（用户界面）的 JavaScript 库。

2023-10-26 00:28:31 280

原创 JS框架榜单官方结果令人惊讶！感谢大佬凌晨3点给 Strve.js 提交的PR！

在上面大佬说了一句话让我觉得非常好，“如果你允许的话，我愿意成为你的伙伴。你创建的程序令人兴奋，所以我阅读并探索了你的代码和提交历史，直到接近 3.00。所以我修改了三个关于生命周期钩子的文件，包括lib/diff.js、src/diff.ts和types/diff.d.ts，以允许它们被多次使用。打开之后，我从后面往前数，还是之前的名次，这下心放下了。两位大佬的PR已经合并了，将在新的版本中发布。

2023-07-24 23:36:25 188

原创我终于成功登上了JS 框架榜单，并且仅落后于 React 4 名！

如期而至，我独立开发的 JavaScript 框架 Strve.js 迎来了一个大版本5.6.2。此次版本距离上次大版本发布已经接近半年之多，为什么这么长时间没有发布新的大版本呢？主要是研究 Strve.js 如何支持单文件组件，使代码智能提示、代码格式化方面更加友好。之前也发布了Strve SFC，但是由于其语法规则的繁琐以及是在运行时编译的种种原因，我果断放弃了这个方案的继续研究。而这次的版本5.6.2。

2023-07-17 02:14:33 251

原创哇塞！居然用这个框架开发了一款这么好用的 Markdown 编辑器

是的，就这么简单的。简单来说，就像我们之前使用 Jquery 那样，引入直接使用，然后直接打开html文件看效果，不需要自己搭建本地文件服务器啥的。我们需要创建了一个实时 Markdown 编辑器，用户可以在 textarea 中输入 Markdown 文本，然后实时显示转换后的 HTML。，值得高兴的一件事，ChatGPT 居然给我这个框架定义为一个轻量级的 JavaScript 框架，用于构建用户界面。下面，我们要正经起来了！外部引入的文件，我们已经介绍完了，那么我们再集中讲解下核心业务逻辑代码。

2023-06-19 23:52:19 949

空空如也

空空如也