- 博客(24)
- 收藏
- 关注
RSS订阅原创 【夜海星辰梦】
而我，是夜行于寂静之海的旅人，我快要忘记自己在此徘徊的岁月。而我，是徘徊在无垠荒漠的行者，在寂寞的边缘，遥远的地平线，我即将遗忘自己为何驻足于此。在孤独的尽头，荒芜的沙丘，我紧握着一张泛黄的地图，我怀揣着一封未寄的信笺，能遇见你最温柔的轮廓。我的影子在月光下拉长，能捕捉你最灿烂的瞬间。我的灵魂在星光下黯淡，你是遥不可及的月光，热情的心已逐渐冷却，你是天际划过的流星，跳动的心已变得迟钝，
2025-01-01 03:09:14
357
原创 函数式编程的早期历史：一段趣味旅程
函数式编程的历史，就像是一部精彩的科幻小说，充满了智慧的火花和对未来的想象。从数学家的抽象理论，到程序员手中的实用工具，函数式编程走过了一条既曲折又辉煌的道路。如今，当我们在现代编程语言中享受函数式编程带来的便利时，不妨回望一下这段历史，向那些勇敢探索未知领域的先驱们致敬。
2024-11-29 11:22:20
285
原创 Git多仓库同时推送操作指南
在现代软件开发中，我们经常需要将代码同时推送到多个远程仓库，比如GitHub和GitLab。本文详细介绍了四种方法来实现这一需求，包括添加多个远程仓库、为指定仓库设置多个远程地址、使用`git config`添加多个推送URL以及一个仓库只拉取另一个仓库只推送的策略。这些方法可以帮助开发者更高效地管理代码，确保多个仓库之间的同步更新。
2024-11-29 10:30:00
778
原创 Vue项目中的性能优化：解决大量表单输入框导致的卡顿问题
在Vue.js项目中，面对包含大量输入框的表单页面性能问题，本文提出了一种优化策略。当页面因数据双向绑定频繁更新导致CPU占用率飙升和内存使用剧增时，我们通过将表单子项封装为子组件，减少了页面的重新渲染次数，有效提升了性能。文章详细介绍了优化方案的实施步骤，包括子组件Input.vue的实现和在父组件XXX.vue中的使用，以及优化后的性能效果。通过这一实践，我们不仅解决了性能瓶颈，还提高了用户体验。本文适合那些在Vue项目中遇到类似性能问题的开发者参考。
2024-11-25 21:00:46
722
1
原创 Vue全局为`img`标签设置默认图片的优雅解决方案
在Vue项目开发过程中，我们经常会遇到图片加载失败的情况，这时候如果没有一个默认的占位图，用户体验会大打折扣。通常情况下，我们会在每个img标签上添加onerror事件来处理这种情况。但是，如果项目已经进行了一大半，页面中有大量的img标签，一个个去添加onerror事件无疑是一项繁琐且容易出错的工作。本文将介绍一种全局设置img标签默认图片的方法，无论是Vue 2还是Vue 3，都能轻松实现。
2023-07-21 11:43:37
2048
1
原创 关于Vite+ts构建项目，import引入文件路径标红找不到模块“xxxx”或其相应的类型声明问题解决
vite+ts，import引入路径标红找不到模块问题解决
2023-01-30 13:45:09
5920
原创 脚手架的工作原理
通过nodejs开发一款小型的脚手架工具, 来更加直观的了解一下脚手架的工作过程脚手架其实就是nodejs的一个cli应用创建文件mkdir sample-scaffoldingcd sample-scaffoldingyarn init编辑package.json文件// package.json{ "bin": "cli.js"}根目录创建 cli.js 文件，并编写逻辑#!/usr/bin/env node// node cli 应用入口文件必须要有这样的文件头
2022-01-18 22:05:27
752
原创 前端自动化构建工具——Plop的基本使用
一款小而美的脚手架工具，一般集成在项目中使用，用于自动化创建重复类型文件一、安装# 将plop模块作为项目开发依赖安装yarn add plop --dev二、使用在项目根目录下创建 plopfile.jsmodule.exports = plop => { // component ---> 为运行命令 plop.setGenerator('component', { // 描述 description: 'create a.
2022-01-18 21:32:03
7185
原创 Yeoman入门——实现属于自己的脚手架
脚手架工具开发脚手架的本质作用就是为了创建项目的基本结构，提供项目的规范和约定一切技术都是为了解决问题而存在的。我们在不同的项目中，可以会存在很多相同的地方，如：组织结构、开发范式、模块依赖、工具配置、基础代码。为了方便，避免做太多重复操作，所以就出现了脚手架。目前常用的脚手架工具react ==> creat-reate-appvue ==> vue-cliangular ==> angular-cli但今天我们要说说另外一种【Yeoman】，这是一
2022-01-16 17:26:45
790
1
原创 前端模块化开发
模块，模块化开发，规范模块化开发的目标是把程序拆分成一个个小结构在当前的结构中可以编写自己的逻辑代码，他拥有自己的作用域，不会影响到其他结构在某个结构中可以向外界暴露自己的变量、函数、对象等给其他结构进行使用在其他结构中如果需要使用别的结构的数据，则需要进行导入那么这些个结构就是模块基于这种模式的开发就是模块化开发这个导入导出则就是模块化规范为什么需要模块化？随着前端的发展，业务越来越复杂，特别是从 SPA 应用的出现后，前端所需要编写的代码量越来越大，所以为了方便管理项目，则需要对项
2022-01-13 11:01:05
301
原创 前端工程化
什么是前端工程化一切以提高效率、降低成本、质量保证为目的的手段都属于【工程化】一切技术都是为了解决问题在存在的。所以前端工程化的出现也是为了解决前端项目越来越大的问题而出现的。前端工程化主要解决的问题传统语言或语法的弊端无法使用模块化/组件化重复的机械式工作代码风格统一、质量保证依赖后端服务接口支持整体依赖后端项目工程化是如何表现的以一个项目的开发流程为例创建 ===> 编码 ===> 预览/测试 ===> 提交远程仓库 ===> 部署上线在项
2022-01-13 10:58:10
208
原创 ECMAScript
javascript 其实是 ECMAScript 的拓展语言ECMAScript 只提供了最基本的语法在浏览器中js = ECMAScript + 浏览器提供的API，如：BOM、DOM在 node 中js = ECMAScript + node中提供的API，如：fs、net、etc.人们平常说的 ES6 其实是泛指 包含ES2015及后续的所有新特性var let constlet 块级作用域，没有变量提升阶段，只在当前代码块生效const 在声明的时候就需要定义，一旦定义就不可更
2022-01-12 17:03:07
173
原创 手写Promise源码
从简单到复杂一步步实现自己的Promise因为不好拆解，如果想直接看最终版，请跳转到文章末尾最后一个代码块在手写源码的之前，首先需要知道Promise是什么，都做了哪些操作Promise是一个类,在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行Promise中有三种状态，分别为 成功(fulfilled) 、失败(rejected)、等待(pending)。只能从等待到成功或者失败，且一旦状态确定就不可更改resolve和reject函数是用来更改状态的then方
2022-01-05 10:07:24
585
原创 JavaScript异步编程
JS异步编程的介绍首先说说为什么会有JS异步编程众所周知，JS是单线程模式工作的，因为JS是运行在浏览器端的脚本语言，目的是为了实现页面的交互，那么因为页面交互主要是DOM操作，从而决定了它必须使用单线程模式工作，否则就会出现特别复杂的线程同步问题。这种模式优点是更安全、更简单，缺点就是如果在代码执行中遇到一个特别耗时的操作，那么后面的代码就必须等待这个操作结束以后才可以执行。所以，为了解决像这样的情况，JS将任务的执行模式分成了两种，分别是同步模式(Synchronous)和异步模式(Asynch
2022-01-04 11:00:00
161
原创 函数式编程
函数式编程概念函数式编程（Functional Programming, FP）是一种"编程范式"（programming paradigm），也就是如何编写程序的方法论。它属于"结构化编程"的一种，主要思想是把运算过程尽量写成一系列嵌套的函数调用。 就是对运算过程进行抽象，函数式编程中函数指的不是程序中的函数（方法），而是数学中的函数即映射关系。// 非函数式编程let num1 = 1let num2 = 2let sum = num1 + num2console.log(sum)//
2022-01-03 21:18:22
319
1
原创 H5本地存储
H5本地存储本地存储分两种localStorage存储的数据没有时间限制sessionStorage当关闭浏览器窗口时，数据就会消失他们的用法一样，存储大小在5M左右存储(setItem)存储valuelocalStorage.setItem('name', value)存储JSON数据localStorage.setItem('name', JSON.stringify(value))获取数据(getItem)localStorage.getItem(
2020-08-16 13:33:38
331
原创 vsCode常用插件
vsCode常用插件Auto Close Tag （自动闭合html/xml标签）Auto Rename Tag （自动完成另一侧标签的同步修改）Bracket Pair Colorizer (给括号加上不同的颜色，便于区分不同的区块)Debugger for Chrome （映射vscode上的断点到chrome上，方便调试）ESLint （js语法纠错，可以自定义配置。较复杂）GitLens （方便查看git的日志）HTML CSS Support （智能提示c
2020-08-15 21:16:13
144
原创 添加、修改、删除、查看本地git的用户名和邮箱
添加、修改、删除、查看本地git的用户名和邮箱添加git config --global user.name "yourName"git config --global user.email "your@email.com"修改覆盖git config --global user.name "yourName"git config --global user.email "your@email.com"替换git config --global --replace-al
2020-08-15 21:15:02
771
原创 Object.defineProperty方法详解
Object.defineProperty()首先我们看官方给出的解释是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。语法Object.defineProperty(obj, prop, descriptor)参数obj > 要定义的对象prop > 要定义或修改的属性的名称或 symboldescriptor > 要定义或修改的属性描述符返回值 > 返回此对象例：const
2020-08-15 21:10:48
451
原创 JS中的宏任务微任务
JS中的宏任务微任务首先js一大特点就是单线程，同一时间只能干一件事情。所以为了协调事件，用户交互，脚本，ui渲染和网络处理等行为，防止线程不堵塞，Event Loop的方案应用而生。Event Loop包含两大类： 一类是Browsing Context（浏览器上下文），一类是基于Worker。二者的运行都是独立的，也就是说，每一个javascript运行的‘线程环境‘都有一个独立的Event Loop，每一个web worker也是一个独立的Event LoopBrowsing Content
2020-08-15 21:09:05
535
原创 CSS篇之重绘(Repaint)与回流(Reflow)
CSS篇之重绘(Repaint)与回流(Reflow)概念回流(Reflow)当我们对DOM的修改引发了DOM几何尺寸的变化（比如修改元素的宽高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的的几何属性和位置也会因此受到影响），然后再将计算结果绘制出来。这个过程就叫做回流（也叫重排）。width / height / padding / margin / display / border-width / border / min-height / top / bottom /
2020-08-15 21:01:03
547
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人