CherishTheYouth的博客

原创 超全的Git实用技巧

1.如何新建仓库？1.1. 将尚未进行版本控制的本地目录转换为 Git 仓库进入该项目得目录中；$ cd /c/user/my_project执行 git init；$ git init使用 git add 追踪已存在得项目文件;$ git add *.c使用 git commit 进行初始提交;$ git commit -m 'initial project version' // 提交时添加comments现在，你已经得到了一个存在被追踪文件与初始提交的 G

原创 JavaScript如何创建对象？

JavaScript面向对象的程序设计（一）——对象的创建文章目录JavaScript面向对象的程序设计（一）——对象的创建一、Object构造函数二、对象字面量三、 工厂模式四、 构造函数模式4.1 构造函数模式4.2 构造函数模式的问题五、原型模式。5.1 三个属性（三个指针）5.1.1 prototype5.1.2 [[prototype]]5.1.3 constructor5.2 理解原型对象5.3 读取对象的属性5.4 重写原型5.5 原型模式的问题六、组合使用构造函数模式和原型模式七、动态原型

原创 Express项目搭建与配置

Express新建项目与配置项目热加载声明：本文记载为笔者根据官方文档创建Express项目以及使用nodemon实现express项目热加载的简单笔记，非精心创作，旨在记录，笔者不对内容质量负责。创建Express项目运行Express生成器(只需一次)npx express-generator创建Express项目express --view=pug myapp(myapp是项目名)此应用将在当前目录下的 myapp 目录中创建，并且设置为使用 Pug 模板引擎运行结

原创 React倒计时功能实现——解耦做法

如何做一个通用的倒计时功能，超详细！

原创 Redux入门实战——todo-list2.0实现

目录1.前言2.项目演示3.Redux基础知识3.1 认识3.1.1 动机3.1.2 三大原则3.2 基础3.2.1 Store3.2.2 Action3.2.3 Reducer3.2.4 数据流3.3 展示组件和容器组件3.3.1 展示组件和容器组件分离3.3.2 展示组件和容器组件比较4.基于Redux的React项目实战4.1 目录结构4.2 配置React-Redux开发环境4.2.1 步骤4.2.2 Provider4.3 src目录文件列表4.4 项目代码4.4.1 入口文件 index.js4

原创 【源码】Vue.js 官方脚手架 create-vue 是怎么实现的？

Vue.js 官方脚手架 create-vue 是怎么实现的？摘要本文共分为四个部分，系统解析了vue.js 官方脚手架 create-vue 的实现细节。第一部分主要是一些准备工作，如源码下载、项目组织结构分析、依赖分析、功能点分析等；第二部分分析了 create-vue 脚手架是如何执行的，执行文件的生成细节；第三部分是本文的核心部分，主要分析了终端交互和配置读取的实现细节、脚手...

原创 Pinia 快速上手要点

使用 defineStore 创建一个 store, 每个 store 要设置一个唯一 id；import { defineStore } from 'pinia'import { ref } from 'vue'// useStore 可以是 useUser、useCart 之类的任何东西// 第一个参数是应用程序中 store 的唯一 idexport const useMa...

原创 Vue3响应式系统实现原理（二）

本文根据VueJs核心团队成员霍春阳《Vue.js设计与实现》第四章整理，推荐直接购买正版书籍系统学习。本文主要内容：（1）分支切换与cleanup（2）嵌套的effect与effect栈（3）避免无限递归循环（4）调度执行...

原创 Vue3响应式系统实现原理（一）

基于Vue.js 3.x响应式系统源码思路整理，有助于理解Vue.js 3.x 响应式系统实现原理。

原创 Vue3 使用router打开并跳转到一个新窗口

const router = useRouter()const url = router.resolve({ path: '/home', query: { userId: '12345' }}) window.open(url.href, '_blank')

原创 Vue3使用插槽时的父子组件传值

Vue3使用插槽时的父子组件传值用法见官方文档深入组件章节，插槽部分：参考文档：插槽-作用域插槽-插槽prop作用域插槽有时让插槽内容能够访问子组件中才有的数据是很有用的。需求：插槽内容能够访问子组件中才有的数据实现子组件TodoList.vue<template> <div v-for="(todoItem, index) in state.todoList"> <slot :item="todoItem" :index="index"&gt

原创 Vue.js 3.x 优化概览

本文整理自拉勾网Vue.js 3.x 源码课程，讲师是来自Zoom的大牛黄轶，非常感谢！ 本人仅补充一些参考资料。1. Vue.js框架的演进过程Vue.js 从 1.x 到 2.0 版本，最大的升级就是引入了虚拟 DOM 的概念。Vue.js 2.x 的版本痛点问题：源码自身的维护性；数据量大后带来的渲染和更新的性能问题；鸡肋 API；TypeScript 支持不佳；....

原创 Vue.js 3.x 优化概览

本文整理自拉勾网 Vue.js 源码课程导读，讲师是Zoom的前端大佬黄轶，非常感谢！1. Vue.js框架的演进过程Vue.js 从 1.x 到 2.0 版本，最大的升级就是引入了虚拟 DOM 的概念。Vue.js 2.x 的版本痛点问题：源码自身的维护性；数据量大后带来的渲染和更新的性能问题；鸡肋 API；TypeScript 支持不佳；…Vue.js 3.x 带来的优化源码优化性能优化语法Api优化2. Vue.js 3.0 优化概览那么接下来，.

原创 如何调试Vue3源码？

最近想系统学习一下vue3的源代码，本篇内容记录和分享一下，如何调试vue3的源代码。1. 下载源代码1.1 github下载想获取vue3的源码，需要直接从github上vue3的仓库获取，vue3github源码地址为：https://github.com/vuejs/core注意，vue3的源码是在这个 core目录下，一些同学别一直找目录为vue3的文件夹，那是找不到的...

原创 如何调试Vue3源代码？

最近想系统学习一下vue3的源代码，本篇内容记录和分享一下，如何调试vue3的源代码。1. 下载源代码1.1 github下载想获取vue3的源码，需要直接从github上vue3的仓库获取，vue3github源码地址为：https://github.com/vuejs/core注意，vue3的源码是在这个 core目录下，一些同学别一直找目录为vue3的文件夹，那是找不到的哈。1.2 码云（gitee下载）github虽好，但是对于国内用户，总还是有点敌意，访问的时候经常进不去，.

原创 这里是我精心整理的81条JavaScript编码小技巧

从各方各面搜集整理的js编码小技巧，吐血整理，强烈建议收藏7个条件判断简化技巧1. 多条件检查把多个值放在一个数组中，然后调用数组的 includes 方法。//longhandif (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { //logic}//shorthandif (['abc', 'd...

原创 81条实用JavaScript编码小技巧

本文对各种js编码技巧，数组操作方法，对象操作方法进行进行归纳整合，适合各类前端开发者查阅。

翻译 这些关于 ？的 Javascript 运算符的知识点，你都知道吗？

文中的nullish 代表 null 或者 undefined1. ?? 操作符在 JavaScript 中，?? 操作符被称为nullish 合并操作符。如果第一个参数不是 null/undefined，这个运算符将返回第一个参数，否则，它将返回第二个参数。让我们看一个例子。null ?? 5 // => 53 ?? 5 // => 3当为一个变量分配默认值时，JavaScript 开发人员传统上依赖于逻辑 OR 操作符，如下所示。var prevMoney = 1var .

翻译 17 个JavaScript 中你必须知道的数组方法

英文 | https://javascript.plainenglish.io/17-must-know-array-methods-in-javascript-37f7033ee721在 JavaScript 中，数组是一种常用的集合类型，可用于存储数据。有多种有用的内置属性和方法可以让你在使用数组时更轻松。今天我将向你分享 17 个有用的数组方法。此外，你还将看到一些有关如何实际使用它们的简单示例。现在，就让我们开始吧！1、 Array.find()使用.find()方法查找满足条件的数组.

转载 8 个你应该知道的JavaScript 数组方法

原文 | https://javascript.plainenglish.io/8-javascript-array-methods-you-should-know-81947c9e46de原译 | 杨小二数组构成了几乎任何编程语言的组成部分。了解数组对于揭示编程概念非常重要。根据维基百科的解释，数组可以定义为由一组元素组成的数据结构，每个元素由至少一个数组索引或键标识。存储一个数组，以便可以通过数学公式从其索引元组计算每个元素的位置。在本文中，我们将研究 JavaScript 数组方法以及如何.

翻译 20个让你看起来更加专业的 JavaScript 技巧

20个让你看起来更加专业的 JavaScript 技巧英文 | https://javascript.plainenglish.io/20-javascript-tricks-and-shorthands-1fa2576b2261翻译 | 杨小二1、单线 If-Else在 JavaScript 中，你可以使用三元条件运算符来压缩 if-else 语句。例如：const age = 10;let group;// LONG VERSIONif (age >= 18) { gr

原创 超详细的vue3使用pdfjs教程

vue3中如何使用pdfjs来展示pdf文档在项目开发中碰到一个需求是在页面中展示pdf预览功能，本人的项目使用的是vue3,实现pdf预览使用的是pdf预览神器 pdfjs以下，将详细介绍如何在项目中使用pdfjs，主要包括以下内容：单页pdf加载多页pdf加载pdf放大/缩小/大小重置pdf分页展示以及上下翻页pdf添加水印动态添加pdf从服务端获取pdf文件参考资料: pdfjs源码及使用文档1. 准备工作1.1 pdfjs-dist 安装百度搜索 npm pdfjs

原创 Vue中的Class Component使用指南

Vue中的Class Component使用指南本文由官方文档进行翻译而来，限于笔者英文能力和对技术理解能力有限，翻译或有不准确和出错之处，请多多包涵，可于评论中点出。原文地址：Vue Class Component一般性指引使用@Component注解，将类转化为 Vue 的组件，以下是一个示例import Vue from 'vue'import Component from...

翻译 超全的Vue中的Class Component使用总结

本文由官方文档进行翻译而来，限于笔者英文能力和对技术理解能力有限，翻译或有不准确和出错之处，请多多包涵，可于评论中点出。原文地址：Vue Class Component一般性指引使用@Component注解，将类转化为 Vue 的组件，以下是一个示例import Vue from 'vue'import Component from 'vue-class-component'// HelloWorld class will be a Vue component@Componentexp.

原创 js判断某个对象是否是Symbol对象

js判断某个对象是否是Symbol对象条件typeof 为 symbol或typeof 为 object不为nulltoString 值为 [object Symbol]实现/** * @description 检查 value 是否是原始 Symbol 或者对象 * @param value 参数 * @returns Boolean*/function isSymbol (value) { const type = typeof value re

原创 js判断值是否为对象

js判断值是否为对象2个条件值不为空值的类型为 object 或 function实现：/** * @description 判断参数是否是对象 * @param value * @returns 布尔值*/function isObject (value) { return value != null && (typeof value === 'object' || typeof value === 'function')}...

转载 JS 可选 (?.)操作符号

本文转自在公众号：大迁世界已获得作者授权，感谢作者风险精彩内容。目录概述语法属性方法数组?? 操作符可选的链接?.操作符用于使用隐式空检查访问嵌套对象属性。概述如何使用null (null和undefined)检查访问对象的嵌套属性?假设我们必须从后台的接口访问用户详细信息。可以使用嵌套的三元运算符 :const userName = response ? (response.data ? (response.data.user ? response.data..

原创 图解React生命周期方法

原创 Git实用技巧35招

本文适合作为一个速查手册使用，希望深入了解 git 的同学，请前往 Pro Git 中文版 下载 《Pro Git》手册进行学习Cherish作为一名菜鸟程序员在刚刚接触git时，虽然仔细阅读了《Pro Git》的第一、二章，基本清楚了git的使用流程，然而在实际运用中，却因为记不住各种常用的git 命令而常常畏手畏脚，经常因为使用了错误的git命令而把工作搞得焦头烂额，因为不记得各种 ...

原创 Taro3小程序中使用eslint standard校验踩坑

Taro3小程序中使用eslint standard校验踩坑摘要在taro项目中，一般很少有集成其他eslint 格式校验规则的情况，如 standard / airbnb 等，但没准呢，对于所有项目都使用相同校验规则的团队来说，别人就是想集成自己喜欢的校验规则，就是不中意taro自带的校验规则。如何在taro3中集成standard校验规则？这是我遇到的问题，记录下正确填坑方式。在网上搜索了很多解决方法，大部分都是先装上 eslint-config-standard 依赖，然后再在 .eslint

原创 taro脚手架如何适配不同版本的taro项目

taro脚手架如何适配不同版本的taro项目

原创 JavaScript经典pdf书籍推荐

共6本，分别是：《JavaScript高级程序设计》最新版 带目录《JavaScript权威指南》最新版 带目录《JavaScript面向对象编程指南》最新版 带目录《JavaScript设计模式》 最新版 带目录《JavaScript设计模式与开发实践》最新版 带目录《函数式编程指南》获取地址：JavaScript经典pdf书籍下载...

原创 深入理解JavaScript面向对象程序设计（二）之继承（一）

JavaScript面向对象程序设计之继承（一）文章目录JavaScript面向对象程序设计之继承（一）1. 原型链式继承1.1 原型模式1.2 原型链式继承1.2.1 原型链与原型链式继承1.2.2 原型链式继承的缺陷2. 借用构造函数2.1 借用构造函数实现继承2.2 借用构造函数的缺陷3. 组合继承3.1 组合继承3.2 组合继承的缺陷1. 原型链式继承1.1 原型模式原型模式是JavaScript中创建对象的一种最常见的方式。JavaScript是一种弱类型的语言，没有类的概念，也不是一种面

原创 JavaScript面向对象程序设计之继承（一）

JavaScript面向对象程序设计之继承(一)1. 原型链式继承1.1 原型模式原型模式是JavaScript中创建对象的一种最常见的方式。JavaScript是一种弱类型的语言，没有类的概念，也不是一种面向对象的语言。但是，在JavaScript中，借助函数的原型(也就是prototype)可以实现类的功能。使用原型模式创建对象的基本做法如下：function Person (na...

原创 Web Worker 如何使用？

Web Worker技术Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。web worker 是运行在后台的 JavaScript，不会影响页面的性能。1 用法1.1 创建Web Workerlet worker = new Worker('workerJsFile.js')// 里面写在后台线程执行的js文件 1.2 onmessage方法worker.onmessage() 用于监听 线程之间 的消息，一旦其中一方 调用 pos

原创 WebWorker如何使用？

Web Worker技术Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。web worker 是运行在后台的 JavaScript，不会影响页面的性能。1 用法1.1 创建Web Workerlet worker = new Worker('workerJsFile.js')// 里面写在后台线程执行的js文件1.2 onm...

原创 DICOM医学影像文件解析

DICOM医学影像文件格式解析目录DICOM医学影像文件格式解析1.DICOM2.DICOM存储格式2.1 DataElement的三种结构2.2 DataElement的Tag2.2.1 按tag格式又可简单分段2.2.2 按Tag展示信息的类别2.3 DataElement的VR2.3.1 27种VR的含义及数据长度2.4 DataElement的数据长度3 未完待续1.DICOMDICOM(DigitalImaging andCommunications inMedicine)是指医疗数字影像传

原创 DICOM医学影像文件格式解析

DICOM医学影像文件格式解析dicom协议中文文档可去csdn下载1.DICOMDICOM(DigitalImaging andCommunications inMedicine)是指医疗数字影像传输协定，是用于医学影像处理、储存、打印、传输的一组通用的标准协定。它包含了文件格式的定义以及网络通信协议。DICOM是以TCP/IP为基础的应用协定，并以TCP/IP联系各个系统。两个能接...

原创 各大浏览器UserAgent总结（超全）

本文转载于：https://www.cnblogs.com/syfwhu/p/5711975.html,点击查看原文，感谢原文作者归纳总结。IEIE6User-Agent:Mozilla/4.0 (Windows; MSIE 6.0; Windows NT 5.2)IE7User-Agent:Mozilla/4.0 (compatible; MSIE 7.0; Windows N...

原创 深入理解JavaScript面向对象的程序设计（一）——对象的创建

JavaScript面向对象的程序设计(一)——对象的创建目录JavaScript面向对象的程序设计(一)——对象的创建一、Object构造函数二、对象字面量三、 工厂模式四、 构造函数模式4.1 构造函数模式4.2 构造函数模式的问题五、原型模式。5.1 三个属性(三个指针)5.1.1 prototype5.1.2 [[prototype]]5.1.3 constructor5.2 理解原型...