自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(46)
  • 收藏
  • 关注

原创 【前端算法-简单】:两数之和(数组)

给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。

2024-09-30 22:44:36 151

原创 【小程序】小tips:微信小程序登录后返回登录前的页面继续操作(保留参数)

中执行登录后的正常逻辑,比如跳转到我的模块页面。方法,查看本地是否有需要跳转的地址,没有就在。方法获取即将跳转的当前页面,当登录后调用。跳转到登录页面前通过。

2024-09-30 22:34:43 593

原创 【微服务】前端微服务qiankun 2.x主子应用通信代码片段

【代码】【微服务】前端微服务qiankun 2.x主子应用通信代码片段。

2024-09-30 22:27:39 333

原创 【微服务】前端微服务之样式隔离插件代码笔记

【代码】【微服务】前端微服务之样式隔离插件代码笔记。

2024-09-30 22:22:51 148

原创 【CSS/HTML】footer固定在页面底部的实现方法总结

其次,设置main(.container最后一个子元素)的padding-bottom值大于等于footer的height值;缺点:中间区域main如果内容不够,不能撑满页面的中间区域。首先,设置.container的高度至少充满整个屏幕;展示效果跟第一种是一样的,缺点跟第一种也是一样的。最后,设置footer的height值和。优点:footer一直存在于底部。

2024-09-30 22:14:23 485

原创 【CSS/HTML】左侧固定,右侧自适应的布局方式理解margin负值理论

简单解释下flex: 0 0 200px的用处,flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。它的默认值为auto,即项目的本来大小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。是固定宽度的div脱离文档流。

2024-09-29 09:14:30 819

原创 【CSS/HTML】实现可扩展性的页面布局

下面我在总结一下一般的三种扩展布局,这儿所示的扩展布局很常规,有的童鞋会说使用column或者flex啥的布局不是很方便吗,但是你也要看它的支持程度吧,比如你在手机端使用,那当然很好,那我要兼容IE8,IE9呢?,主要是讲实现一列固定宽度,一列宽度自适应的几种方法。

2024-09-29 08:58:25 686

原创 【CSS/HTML】CSS实现两列布局,一列固定宽度,一列宽度自适应方法

但我需要sidebar在content之后!因为我的content里面才是网页的主要内容,我不想主要内容反而排在次要内容后面。博客的很多主题也是这样设计的,我的其他博客也是右侧固定宽度,左侧自适应屏幕的布局方式。这样实现,contentInner的实际宽度就是屏幕宽度-300px。不管是左是右,反正就是一边宽度固定,一边宽度自适应。但实际上这个方法是有局限性的,那就是html结构中。右侧一直固定不动,左侧根据屏幕的剩余大小自适应。那么上面讲解的第一种方法就无效了。就需要下面的方法来实现。

2024-09-27 08:44:54 618

原创 【CSS/HTML】圣杯布局和双飞翼布局实现两侧宽度固定,中间宽度自适应及其他扩展实现

圣杯布局和双飞翼布局是前端重要的布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。圣杯布局来源于文章,双飞翼布局来源于淘宝UED。两侧宽度固定,中间宽度自适应中间部分在DOM结构上优先,以便先行渲染允许三列中的任意一列称为最高列只需要使用一个额外的<div>标签。

2024-09-26 22:28:09 913

原创 vue3开发中易遗漏的常见知识点

事件总线(mitt)是对发布/订阅模式的一种实现,它是一种集中式事件处理机制,允许 vue.js 3 应用程序中的不同组件之间相互通信,无需相互依赖,就可以达到解耦的目的。在vue.js 3中,可以使用事件总线作为组件之间传递数据的桥梁。新建App.vue(父组件)、page/Home.vue(子组件)、page/About.vue(子组件)、page/Category.vue(子组件).新建三个vue文件,App.vue(根组件)、Home.vue(子组件)、HomeContent.vue(孙子组件)。

2024-09-24 22:23:58 1845

原创 vue自定义指令实现打字效果

实现如通义灵码官网关于代码片段中,当鼠标hover上代码上时,出现打字效果,示例地址:https://tongyi.aliyun.com/lingma?当然也可以使用第三方插件,例如:typed.js,参考地址:https://www.cnblogs.com/sexintercourse/p/18113289。

2024-09-24 21:58:16 310

原创 【TS】TypeScript内置条件类型-ReturnType

如果T满足这个条件(实际上,由于泛型约束,它总是满足的),那么TypeScript将使用infer关键字来推断出函数的返回类型,并将其赋值给R。在TypeScript中,ReturnType 是一个内置的条件类型(Conditional Type),它用于获取一个函数返回值的类型。这个工具类型非常有用,特别是当你需要引用某个函数的返回类型,但又不想直接写出那个具体的类型时。如果T不满足条件(但实际上由于泛型约束,这种情况不会发生),则条件类型的“假”分支(即:后面的部分)将被使用,这里是any。

2024-09-23 09:21:59 641

原创 【TS】TypeScript基础入门篇以及实践案例

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。return arg// 泛型也可以传入多个值。

2024-09-23 09:11:36 677

原创 【TS】加深TS理解的开发实战示例代码

上述代码,通过泛型类型<T>(arg:T)定义了一个泛型函数变量arrow_echo_type,并指定为泛型函数echo_type。上述代码,声明了一个接口IGenericsEcho,通过对象字面量“<T>(arg:T):T”定义了泛型函数的类型。上述代码定义了一个泛型函数echoVar,参数arg定义为类型<T>的数组形式Array<T>。上面代码声明了一个泛型接口IGenericsEcho<T>,接口类型为“(arg:T):T”。进一步在接口声明中直接加上类型<T>,写成真正的泛型接口形式。

2024-09-22 21:34:13 838

原创 【python】python入门基础理论+实践,这一篇就够了

");:号左边是key, 右边是valuepy2默认ASCIIpy3默认unicode,文件编码utf-8py2写中⽂的正确姿势,在代码⽂件第⼀⾏,做声明,告诉py解释器,后⾯的代码是⽤utf-8编码的,你⽤utf-8编码来解析它name = "张三"不过注意如果你的电脑 是windows系统 , 你的系统默认编码是GBK ,你声明的时候要声明成GBK, 不能是utf-8, 否则依然是乱码,因为gbk⾃然不认识utf-8。

2024-09-16 09:29:04 1737

原创 python的os模块的常见函数及用途详解

虽然这超出了基础范围,但os模块还包含一些与进程管理相关的函数,如os.fork()(在Unix系统上创建新进程)、os.execv()(执行新程序)等。这些函数在更高级的应用程序中可能很有用,但通常不是初学者的主要关注点。虽然os模块主要用于目录操作,但它也提供了一些基本的文件操作功能,但更常见的文件操作是使用内置的open()函数和文件对象的方法。然而,os模块中的os.path子模块提供了许多与文件路径相关的实用函数。它允许你执行许多常见的文件系统任务,如读取目录、处理文件、获取系统信息等。

2024-09-16 09:06:58 623

原创 【webpack4系列】设计可维护的webpack4.x+vue构建配置(终极篇)

一个模块可能有多个⽅法,只要其中的某个⽅法使⽤到了,则整个⽂件都会被打到bundle ⾥⾯去,tree shaking 就是只把⽤到的⽅法打⼊ bundle ,没⽤到的⽅法会在uglify 阶段被擦除掉。uglify阶段:将 JavaScript代码进行压缩、混淆,并去除一些不必要的代码,从而减小文件体积。webpack4及以上默认内置了,当mode为production情况下默认开启。进行tree shaking条件是必须是 ES6 的语法,CJS 的⽅式不⽀持。

2024-09-15 21:55:26 2100

原创 【webpack4系列】webpack构建速度和体积优化策略(五)

add-asset-html-webpack-plugin参考地址:https://www.npmjs.com/package/add-asset-html-webpack-plugin/v/3.2.2?起作用 就是把build/library/library.dll.js拷贝到编译后的dist文件夹下,并且通过script标签引入到index.html中。官网地址:https://github.com/stephencookdev/speed-measure-webpack-plugin#readme。

2024-09-15 21:36:29 1650

原创 【webpack4系列】编写可维护的webpack构建配置(四)

冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试,这种预测试的主要目的是暴露导致软件需重新发布的基本功能失效等严重问题。

2024-09-15 21:28:53 1959

原创 【webpack4系列】webpack进阶用法(三)

一个模块可能有多个⽅法,只要其中的某个⽅法使⽤到了,则整个⽂件都会被打到bundle ⾥⾯去,就是只把⽤到的⽅法打⼊ bundle ,没⽤到的⽅法会在uglify阶段被擦除掉。uglify阶段:将 JavaScript代码进行压缩、混淆,并去除一些不必要的代码,从而减小文件体积。webpack4及以上默认内置了,当mode为production情况下默认开启。进行tree shaking条件是必须是 ES6 的语法,CJS 的⽅式不⽀持。

2024-09-15 21:20:13 1831

原创 【webpack4系列】webpack基础用法(二)

我们需要注意的是,polyfill的体积是很大的,如果我们不做特殊说明,它会把你目标浏览器中缺失的所有的es6的新的功能都做垫片处理。但是我们没有用到的那部分功能的转换其实是无意义的,造成打包后的体积无谓的增大,所以通常,我们会在presets的选项里,配置"useBuiltIns": “usage”,这样一方面只对使用的新功能做垫片,另一方面,也不需要我们单独引入import '@babel/polyfill’了,它会在使用的地方自动注入。经过 Webpack 的处理,最终会输出浏览器能使用的静态资源。

2024-09-15 21:06:29 1566

原创 【webpack4系列】webpack初识与构建工具发展(一)

webpack-cli 是使用 webpack 的命令行工具,在 4.x 版本之后不再作为 webpack 的依赖了,我们使用时需要单独安装这个工具。,便可以访问到我们刚才创建的 html 文件了,打开控制台就可以看到前边的 js 代码打印出来的 hello world 了。在日常开发中,我们不可能每次修改一次代码就执行一次构建,我们需要一个方便本地开发的工具,和 webpack 配套的则是。然后我们执行npm run build,就会生成「dist/bundle.js」文件,这说明配置文件生效了。

2024-09-15 20:59:54 889

原创 MutationObserver监听DOM变化示例

【代码】MutationObserver监听DOM变化示例。

2024-09-13 21:14:37 118

原创 使用IntersectionObserver 实现:自动监听元素是否进入了设备的可视区域之内

上面示例表示,当某个元素进入到可视范围内,给当前元素添加一个类名,这个类名可以给当前元素添加一些动画效果之类的。

2024-09-13 21:01:53 178

原创 【前端效果】vue框架使用CSS样式实现loading效果

【代码】【前端效果】vue框架使用CSS样式实现loading效果。

2024-09-13 08:40:59 192

原创 【TS】TypeScript配置详解【三】

TypeScript 代码最终都会被编译成 JavaScript 代码来运行。这个编译的过程需要使用 TypeScript 编译器,我们可以为该编译器配置一些编译选项。在 TypeScript 项目的根目录下执行 “tsc-init” 命令,快速创建一个 tsconfig.json 文件。该文件用于配置 TypeScript 编译项目时编译器所需的选项。"target": "es2016", // 编译生成的目标版本代码。

2024-09-12 22:08:54 1407

原创 【TS】TypeScript高级详解【二】

通常使用 class 关键字来定义类。类内部可以声明各种属性,包括类型声明和初始值设定。如果没有类型声明,则默认为 any 类型。属性可以有初始化值。在 默认的 strictPropertyInitialization 模式下,属性必须初始化,否则编译时会报错。类可以有自己的构造函数(constructor), 当使用 new 关键字创建实例时,构造函数会被调用。另外,构造函数不需要返回任何值,它默认返回当前创建的实例。类可以有自己的函数,这些函数称为方法。

2024-09-12 21:55:24 1840

原创 【TS】TypeScript基础详解【一】

TypeScript 是 JavaScript 的超集,它带有类型并编译出干净的 JavaScript 代码。TvpeScript支持 JavaScript 的所有特性,并跟随 ECMAScript 标准的发展,因此支持ES6/ES7/ES8 等新语法标准。除了类型约束,TypeScript 还增加了一些语法扩展,例如枚举类型、元组类型等。TypeScript 总是与 ES 标准保持同步甚至领先,最终编译成JavaScript 代码,不存在兼容性的问题,不需要依赖 Babel 等工具。

2024-09-12 20:57:40 1326

原创 JavaScript开发技巧必备【一】

用来获取begin和end之间的数组元素。如果你不设置end参数,将会将数组的默认长度值当作end值。但有些同学可能不知道这个函数还可以接受负值作为参数。如果你设置一个负值作为begin的值,那么你可以获取数组的最后一个元素。

2024-09-12 15:45:56 1033

原创 【技巧】一个命令让VS code快速生成固定的代码片段

选择html模板后,会打开一个名为html.json文件。接下来,我们将刚才在一个在线网站生成的代码片段代码放到html.json文件中的。第三步,在VScode中打开User Snippets,不同的操作系统对应的步骤如下。比如我们经常使用固定的代码格式来生成代码片段。第五步,使用vue3app快速生成模板代码。取一个模板名称例如叫:“vue3app”。

2024-09-12 11:00:56 233

原创 vite如何打包vue3插件为JSSDK

查看 create-vite 以获取每个模板的更多细节:vanilla,vanilla-ts, vue, vue-ts,react,react-ts,react-swc,react-swc-ts,preact,preact-ts,lit,lit-ts,svelte,svelte-ts,solid,solid-ts,qwik,qwik-ts。vite-plugin-dts地址:https://www.npmjs.com/package/vite-plugin-dts。目的是告诉TS如何处理.vue文件。

2024-09-12 10:24:01 556

原创 一文快速上手-create-vue脚手架

create-vue类似于Vue CLI脚手架,可以快速创建vuejs 3项目,create-vue基于Vite。Vite支持Vue CLI中的大多数配置,并且Vite以极速启动服务、快如闪电的热重载,提供了更好的。与Vue CLI 不同的是,create-vue脚手架会根据你选择的功能创建一个预配置的项目,然后将其余部分委托给Vite。Vue CLI是基于webpack实现的,而create-vue是基于vite实现的。create-vue脚手架创建vue3版本项目,有两种常见的方式。

2024-09-12 09:05:37 1193

原创 一文快速上手-Vue CLI脚手架

如果保存了预设,在下次新建项目时,在第一步选择预设时,就可以看到我们保存过的预设,比如我们把前面的预设命名为“vue3-demo”,最后按"Enter"键即可。提示:“选中”和“取消选中”是按空格键,“上下移动”是按上下键,“确认”是按Enter键。输入y,表示保存自定义预设,也可以输入n,即不保存自定义预设。(4) 安装完 Vue CLI之后,可以在终端查看其版本号。根据需要选择vue版本,这儿示例选择vue3.x版本。方式一(推荐方式):在终端安装指定版本。方式二:在终端通过命令安装最新版本。

2024-09-12 09:00:19 1529

原创 VS code常用插件安装【持续更新】

右击html文件时,可在选项中单击“Open Width Live Server” 启动本地开发服务器,专为静态和动态页面提供实时加载功能。标签时,只需要修改第一个div标签的名称为span,后面的div也会自动跟着改成span。Vue - Official插件适用于vue3版本,为.vue文件提供高亮语法等。VS Code打开项目后,会根据项目中的文件类型显示该文件对应的图标。Vetur插件适用于vue2版本,为.vue文件提供高亮语法等。Volar插件适用于vue3版本,为.vue文件提供高亮语法等。

2024-09-12 08:45:07 283

原创 AI工具合集

以下工具来源于互联网,可能会失效,请参考使用。

2024-09-11 22:07:53 1111

原创 tips:vscode安装vue3 Snippets插件解决注释vue代码是双斜线问题

第一步:在vscode扩展中安装插件vue3 Snippets。

2023-11-04 11:40:13 633 2

原创 tips:docker 配置国内镜像地址

在配置文件daemon.json中添加国内镜像,让其下载加速。

2023-09-27 22:28:39 524 1

原创 tips:怎样实现简单的前端hash与history路由方式?

前端路由实现方式,主要有两种,分别是history和hash模式。

2023-09-26 22:04:54 108

原创 tips:vue2中broadcast和dispatch的实现

以上代码可当做全局混入mixins使用,使用Vue.mixin(emitter)注册。

2023-09-25 21:49:08 168 1

原创 JS的可选链操作符(?.)与双问号(??),你用到了吗?

在leftExpr和rightExpr之间,只有当。被认为是有意义的,所以还是取。

2023-09-25 21:43:45 166 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除