- 博客(20)
- 收藏
- 关注
RSS订阅原创 关于Vite+ts构建项目，import引入文件路径标红找不到模块“xxxx”或其相应的类型声明问题解决
vite+ts，import引入路径标红找不到模块问题解决
2023-01-30 13:45:09
5445
原创 脚手架的工作原理
通过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
709
原创 前端自动化构建工具——Plop的基本使用
一款小而美的脚手架工具，一般集成在项目中使用，用于自动化创建重复类型文件一、安装# 将plop模块作为项目开发依赖安装yarn add plop --dev二、使用在项目根目录下创建 plopfile.jsmodule.exports = plop => { // component ---> 为运行命令 plop.setGenerator('component', { // 描述 description: 'create a.
2022-01-18 21:32:03
6976
原创 Yeoman入门——实现属于自己的脚手架
脚手架工具开发脚手架的本质作用就是为了创建项目的基本结构，提供项目的规范和约定一切技术都是为了解决问题而存在的。我们在不同的项目中，可以会存在很多相同的地方，如：组织结构、开发范式、模块依赖、工具配置、基础代码。为了方便，避免做太多重复操作，所以就出现了脚手架。目前常用的脚手架工具react ==> creat-reate-appvue ==> vue-cliangular ==> angular-cli但今天我们要说说另外一种【Yeoman】，这是一
2022-01-16 17:26:45
740
1
原创 前端模块化开发
模块，模块化开发，规范模块化开发的目标是把程序拆分成一个个小结构在当前的结构中可以编写自己的逻辑代码，他拥有自己的作用域，不会影响到其他结构在某个结构中可以向外界暴露自己的变量、函数、对象等给其他结构进行使用在其他结构中如果需要使用别的结构的数据，则需要进行导入那么这些个结构就是模块基于这种模式的开发就是模块化开发这个导入导出则就是模块化规范为什么需要模块化？随着前端的发展，业务越来越复杂，特别是从 SPA 应用的出现后，前端所需要编写的代码量越来越大，所以为了方便管理项目，则需要对项
2022-01-13 11:01:05
286
原创 前端工程化
什么是前端工程化一切以提高效率、降低成本、质量保证为目的的手段都属于【工程化】一切技术都是为了解决问题在存在的。所以前端工程化的出现也是为了解决前端项目越来越大的问题而出现的。前端工程化主要解决的问题传统语言或语法的弊端无法使用模块化/组件化重复的机械式工作代码风格统一、质量保证依赖后端服务接口支持整体依赖后端项目工程化是如何表现的以一个项目的开发流程为例创建 ===> 编码 ===> 预览/测试 ===> 提交远程仓库 ===> 部署上线在项
2022-01-13 10:58:10
180
原创 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
157
原创 手写Promise源码
从简单到复杂一步步实现自己的Promise因为不好拆解，如果想直接看最终版，请跳转到文章末尾最后一个代码块在手写源码的之前，首先需要知道Promise是什么，都做了哪些操作Promise是一个类,在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行Promise中有三种状态，分别为 成功(fulfilled) 、失败(rejected)、等待(pending)。只能从等待到成功或者失败，且一旦状态确定就不可更改resolve和reject函数是用来更改状态的then方
2022-01-05 10:07:24
563
原创 JavaScript异步编程
JS异步编程的介绍首先说说为什么会有JS异步编程众所周知，JS是单线程模式工作的，因为JS是运行在浏览器端的脚本语言，目的是为了实现页面的交互，那么因为页面交互主要是DOM操作，从而决定了它必须使用单线程模式工作，否则就会出现特别复杂的线程同步问题。这种模式优点是更安全、更简单，缺点就是如果在代码执行中遇到一个特别耗时的操作，那么后面的代码就必须等待这个操作结束以后才可以执行。所以，为了解决像这样的情况，JS将任务的执行模式分成了两种，分别是同步模式(Synchronous)和异步模式(Asynch
2022-01-04 11:00:00
144
原创 函数式编程
函数式编程概念函数式编程（Functional Programming, FP）是一种"编程范式"（programming paradigm），也就是如何编写程序的方法论。它属于"结构化编程"的一种，主要思想是把运算过程尽量写成一系列嵌套的函数调用。 就是对运算过程进行抽象，函数式编程中函数指的不是程序中的函数（方法），而是数学中的函数即映射关系。// 非函数式编程let num1 = 1let num2 = 2let sum = num1 + num2console.log(sum)//
2022-01-03 21:18:22
281
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
299
原创 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
122
原创 添加、修改、删除、查看本地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
585
原创 Object.defineProperty方法详解
Object.defineProperty()首先我们看官方给出的解释是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。语法Object.defineProperty(obj, prop, descriptor)参数obj > 要定义的对象prop > 要定义或修改的属性的名称或 symboldescriptor > 要定义或修改的属性描述符返回值 > 返回此对象例：const
2020-08-15 21:10:48
430
原创 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
508
原创 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
521
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人