Holyforsaken_FHC-CSDN博客

原创搭个项目玩玩 Vue3 + script setup + ts + Vite + Volar

搭个项目玩玩前言使用 Vite 创建项目三级目录前言好久没有写了，最近看到Vue3.2 发布了，害，又要开始卷了么。其实我自己本身还没有使用过Vue3 做过实际的项目开发，然鹅又出新东西了……，新时代农民工真的是左手工作，右手游戏，还要用jio去学习呢。什么？你说谈对象？ xswl，我特么一个农民工也配谈对象？看看自己盆友圈的小伙伴们经常半夜发各种技术文章，各种辛苦工作的照片，哎，不卷不行啊，我踏马看看自己盆友圈发的什么玩意？使用 Vite 创建项目参考 Vite 官方指南三级目录

2021-08-21 19:21:56 1988 2

原创 Vue 响应式——模拟封装Vue(二)

Vue 响应式——模拟封装VueDepDepDep这个类的作用，是收集依赖，发送通知。也就是在data的getter中添加观察者，以及通知watcher该类有三个成员，一个属性和两个方法:subs 观察者数组addSub 添加观察者方法notify 发送通知class Dep { constructor() { this.subs = [] } // 添加观察者 addSub(sub) { if (sub &&am

2021-06-11 20:14:59 212

原创 Vue 响应式——模拟封装Vue(一)

Vue 响应式原理——模拟实现前言三个概念数据驱动响应式核心原理Vue2.xVue3.x发布/订阅模式前言首先，一个问题。为啥要去了解Vue的响应式数据？直白的说为了面试的时候应付面试官的相关问题，在现在Vue广泛使用的情况下，基本上数据响应式是一个必考点委婉的讲了解它的原理，可以学习别人优秀经验，转为自己的经验，还可以通过原理层面去解决一些开发中的问题，比如:给 Vue 实例新增一个成员是否是响应式的？给属性重新赋值称为对象，是否是响应式的？真正的原因为了能够跟我的同事，漂亮的

2021-05-31 14:31:47 315

原创 VueRouter的实现原理——封装简易功能的VueRouter

VueRouter的实现原理Hash模式和History模式的区别表现形式的区别原理的区别History 模式的使用node 环境下支持 historyNginx 下支持 historyVueRouter 两种模式的实现原理Hash 模式History 模式实现思路VueRouter-install 方法实现Hash模式和History模式的区别不管哪种模式，前端路由都是客户端路由的实现方式，也就是当路径发生变化时，不会向服务器发送请求，是利用js监视路径的变化。然后根据不同的地址渲染不同的内容，如果需

2021-04-25 17:06:20 2409 4

原创 Rollup

Rollup安装和基本使用Rollup配置文件Rollup 使用插件加载npm模块加载CommonJS 规范的模块代码拆分webpack vs rollup 如何选择？ParcelRollup相比于webpack，rollup更小巧，它是一个充分利用ESM( ECMAScript Modules )各项特性的高效打包器。安装和基本使用在项目中通过yarn 安装 rollup yarn add rollup --dev直接输入 yarn rollup 会出现rollup的帮助信息输入 yarn r

2021-04-13 20:16:12 1274 2

原创 Webpack知识整理———插件&提高开发体验

Webpack知识整理———插件概述基本使用Webpack 常用插件自动清除输出目录自动生成引用打包结果的HTML把静态资源目录拷贝到打包后的目录中插件工作原理提高开发体验自动编译webpack-dev-serverwebpack-dev-server 版本不支持 webpack5.0和 webpack-cli4.0使用contentBase 指定静态资源目录概述在开发中为了增强webpack自动化的能力，我们需要安装一些插件来辅助开发。Loader 是为了解决资源加载的问题，而Plugin是为了解决

2021-04-12 11:30:52 1393 3

原创 Webpack知识整理——资源加载器

Webpack知识整理-01前端模块化概述模块化打包工具前端模块化概述提到前端的模块化，很多朋友第一时间想到的就是 AMD ，CMD， CommonJS 以及 ES Modules这些。不过，这些都是js文件的模块化，而一个前端项目并不是只有js文件。一个前端项目中，除了js文件还有html，css，图片字体等等各种文件，既然是前端模块化，那么所有的前端资源都需要模块化。总结一下我们前端项目模块化，需要支持以下几个功能:ES新特性代码编译模块化JS打包支持不同类型的资源进行模块化打包

2021-04-07 16:20:55 2053 2

原创 ES Modules 的一些使用注意

ES Modules 的一些使用注意ES Modules 的一些使用注意使用时的注意点在node中使用ESMnode环境下 ES Modules 中导入CommonJS 暴露的成员ES Modules 的一些使用注意ES 中的模块化规范，已经广泛使用了。它的特点如下：通过给 script 添加 type = module 的属性，就可以以 ES Module 的标准执行其中的 JS 代码了ESM 自动采用严格模式，忽略 ‘use strict’每个ES Modules都是运行在单独的私有作用域中

2021-04-06 15:52:45 1366

原创自动化构建02——Gulp

自动化构建02——Gulp概述基本使用快速开始创建基本任务创建组合任务 series¶llelgulp 控制任务结束的一些其他写法gulp 构建过程的原理概述额，我有一个跟这logo一模一样的杯子。gulp, 功能与grunt类型，但是要比grunt快很多，相比于grunt,我个人更偏向于gulp。但是我喜欢grunt的logo。基本使用快速开始创建基本任务首先准备一个空目录并初始化 yarn init在目录中创建 gulpfile.js, 这是gulp 的入口文件安装gulp导出任.

2021-04-01 20:39:49 275

原创自动化构建01——Grunt

自动化构建01——Grunt概述常见的自动化构建工具Grunt基本用法注册执行任务 grunt.registerTask()给任务添加执行错误标记为任务添加配置选项 grunt.initConfig()为任务添加多个目标使用loadnpmtask执行grunt插件任务常用的grunt插件概述什么叫构建？简单的来说就是把开发环境中的代码，给加工成生产环境的代码。什么叫自动化？就是不用程序员自己手动去做，而是交给工具去做所以所谓自动化构建也就是通过工具自动把开发环境的代码构建成生产环境的代码.

2021-03-29 17:16:58 344

原创 Plop工具和脚手架工作原理

Plop 创建文件工具plop 是用于在项目中创建特定类型文件的工具。如果有开发小程序经历的朋友，应该记得在微信小程序的 app.json 里的path 中添加了新了页面路径之后，小程序开发工具就会立刻在pages目录中，自动帮我们创建出一个新的页面目录并创建好它其中的page.wxml、page.js、page.wxss、page.json四个文件。而使用Plop就可以让我们的项目中也能够达到这样类似的功能。使用方法plop的使用非常的简单在项目中安装 plop 模块 yarn add pl

2021-03-28 20:58:16 346 1

原创 Yeoman构建前端脚手架

Yeoman概述Yeoman基本使用自定义Generator通过模板生成文件接收用户输入数据案例发布到npm概述脚手架本质作用是用于创建项目基础结构，提供项目规范和约定。在后端项目开发中，比如像Java 使用的IDE，IDE在创建项目的过程就是脚手架创建项目的过程。而前端项目因为技术选型比较多样，也没有统一的标准，所以前端方向的脚手架一般不会集成在某一个IDE中。它们大多是作为独立工具存在。在 react 中我们使用的是 create-react-app在 Vue 中使用 @vue/cli

2021-03-28 19:54:18 343

原创 Flow 和 TypeScript 基础回顾

TypeScript 基础回顾类型系统基础概念强类型与弱类型静态类型与动态类型JavaScript 自有类型系统问题Flow 静态类型检查方案Flow 快速上手在项目中使用flow移除类型注解Flow 基本使用TypeScript 语言规范与基本应用基本使用类型系统基础概念强类型与弱类型从类型安全角度区分类型。强类型从语言层面限制函数的实参类型必须与形参相同弱类型在语言层面不会限制实参的类型强类型语言中不允许有任意的隐式类型转换弱类型语言则允许任务的数据隐式类型转换变量类型允许随时改变的特

2021-03-24 13:17:47 1909 4

原创复习回顾 ECMAScript 标准

重新学习ECMAScriptECMAScript 概述ECMAScript 2015概述特性ECMAScript 概述通常情况下,我们会有ECMAScript看做是JavaScript的标准化规范，但是实际上 JavaScript 是 ECMAScript 的扩展语言ECMAScript 只提供了最基本的语法，它只是停留在语言层面，规范如果定义变量，如何去写循环等等。并不能直接用来去完成实际应用中的功能开发。JavaScript 语言本身指的就是 ECMAScript。JavaScript 实现了

2021-03-20 18:57:03 4532 12

原创 JavaScript 异步编程

JavaScript 异步编程单线程的优势和弊端同步模式与异步模式同步模式 Synchronous异步模式 Asynchronous事件循环与消息队列异步编程的几种方式Promise 异步方案、宏任务/微任务队列Generator 异步方案、Async/Await 语法糖单线程的优势和弊端js是单线程的，在浏览器中js的执行栈跟渲染线程是相互阻塞的。单线程模式最大的优势就是更安全，更简单，缺点也很明确，就是如果中间有一个特别耗时的任务，其他的任务就要等待很长的时间，出现假死的情况。为了解决这种问题

2021-03-15 18:50:51 4416 14

原创 JS 函数式编程 02 —— 函数组合，Pointfree，Functor(函子)

JS 函数式编程 02函数组合管道lodash 中的组合函数 flow() or flowRight()函数结合律函数组合的调试lodash中的fp模块PointfreeFunctor什么是函子，作用是什么？什么是Functor常见函子Maybe 函子Either函子IO函子Task函子（异步执行）Pointed函子Monad函子（单子）函数组合为什么要使用函数组合？因为纯函数和柯里化会很容易就形成洋葱代码 ( 多个括号嵌套 )比如：获取数组中最后一个元素并且把它转化为大写_.toUpper(

2021-03-13 23:49:34 2756 18

原创 JS 函数式编程 01 —— FP，纯函数，柯里化

函数式编程的相关概念什么是函数式编程函数式编程和面向对象编程的不同高阶函数闭包纯函数纯函数的好处可缓存可测试并行处理副作用柯里化lodash 中的curry()方法什么是函数式编程函数式编程，Functional Programming，简称FP，是一种编程范式，也是一种编程风格。简单理解就是把事物与事物之间的联系抽象到程序世界函数式编程和面向对象编程的不同面向对象是把事物本身进行抽象函数式编程是对运算过程的抽象对于函数式编程的理解：程序本质是通过某种运算获得响应的输出，而函数就

2021-03-12 22:27:15 3700 10

航诚的博客