Youzi Blog

Youzi的Blog--开发笔记

Vue3.0 踩坑

项目升级 Vue3.0 配置相关 在·Vue-cli 3.0·以后的版本，其实该脚手架针对·webpack·已经内置好了很多默认配置，对于 webpack 的默认配置，像常用的·plugin·，有两种方式对其默认值进行修改； 官网介绍配置 webpack 相关的内容：https://cli.vuejs.org/zh/guide/webpack.html configureWeb...

Posted by Youzi on February 23, 2021

CSS项目配置相关

CSS 相关插件配置 页面适配方案（vw） 缺点: 比如当容器使用 vw 单位，margin 采用 px 单位时，很容易造成整体宽度超过 100vw，从而影响布局效果。对于类似这样的现象，我们可以采用相关的技术进行规避。比如将 margin 换成 padding，并且配合 box-sizing。 px 转换成 vw 单位，多少还会存在一定的像素差，毕竟很多时候无法完全整除。 ...

Posted by Youzi on February 22, 2021

webpack相关内容

关于 webpack 其实项目做了挺多的，但是我接触下来，多数都是用固有脚手架（像vue-cli | create-react-app）去构建的，或者部分是二次开发的，业务代码写的越多，构建方面的东西就越来越少了，下决心好好了解下webpack。 本文会通过从 0 配置一个使用 Vue 的完整项目，来说明 webpack 各个属性的功能作用及使用方式； webpack首先可以看做是个模...

Posted by Youzi on February 5, 2021

JS-Fetch

Fetch API Fetch提供了获取资源的接口，可以用于跨域请求，可以看做是 XHR 的替代；实际上手用了一段时间之后呢，感觉和 XHR 差异不是很大，因为前端在 XHR 这块也封装了许多插件，像 axios 这些，都可以实现异步promise返回了，如果考虑兼容性肯定还是 XHR 更好一些，但是毕竟 fetch 不需要引入其他的包，更方便快捷，易用性也很强。 核心概念 fetch...

Posted by Youzi on February 3, 2021

JS-blob对象

JS-blob 对象 记录 JS 对象中比较特别的，经常在文件上传中运用的 blob 对象； 前置任务 在了解 blob 之前先来看下密不可分的 JS 二进制类型的数据分类； 关于缓冲区 由于在 JS 里用 Array 这种数据类型存储大字节流很低效，且浪费内存空间，所以在node里创建了一种数据缓冲区来操作二进制数据；这是一块物理内存（相对于直接读写硬盘来说更快），用于在数据从一...

Posted by Youzi on January 26, 2021

CSS相关

CSS 杂项 本文记录 CSS 的一些小知识点，真的很零碎； 字符串溢出 常规需求，字符串溢出处理；可以用 JS 手动统计字数然后截取，也可以用 CSS 的方法； 单行 兼容性良好，简单，纯 CSS 1 2 3 4 5 .text-ellipsis-single { overflow: hidden; /* 超出部分隐藏 */ white-space: nowrap; /...

Posted by Youzi on January 18, 2021

JS继承

JS 继承 本文结合原先写过的JS 面向对象，接着写 JS 中实现继承的几种方式； 原型链继承 JS 是一种基于原型的语言，链式继承是这个语言很常见的继承方式；涉及到三种对象，实例对象、构造函数、原型对象，其中构造函数有一个原型对象，原型对象有一个指针指向构造函数，实例对象有一个指针指向原型对象。 用代码来表示就是： 1 2 3 4 5 6 7 8 // 实例 instance._...

Posted by Youzi on January 15, 2021

JS并发请求数控制

JS 并发请求数控制 掘金看到的文章，觉得不错，搜了些其他的方法也贴过来做个备忘；原文 1：https://juejin.cn/post/6916317088521027598，原文 2：https://juejin.cn/post/6844903972776460301； 要求 实现一个批量请求函数 multiRequest(urls, maxNum)，要求如下： 要求最大...

Posted by Youzi on January 12, 2021

npm私库搭建

npm 私库搭建 npm 私库 公共组件和方法越来越多，项目又不能直接公开到 npm 官方库上，所以衍生出了搭建团队内部的npm私库，本文记录搭建过程以及踩坑，包括在服务器上的配置，发布测试 npm 包等等。 Verdaccio 安装 Verdaccio是一个私库搭建工具，在服务器上用npm进行安装；步骤如下，服务器上需要有node, npm环境： 1 npm install -...

Posted by Youzi on December 23, 2020

面试总结

面经 VueRouter 相关 原理 两种模式的优劣 如何实现页面部分渲染 Vue3.0 原理 根据回答方向，确定后续问题（compositionAPI、响应式的原理改变等等，待补充） 为什么要新增 Composition API，它能解决什么问题 Vue2.0 中，随着功能的增加，组件变得越来越复杂，越来越难维护，而难以维护的根本原因是 Vue 的 API 设计...

Posted by Youzi on September 16, 2020

JS 中任务执行顺序

JS 中任务执行顺序 最近看面试题经常会看到一些关于宏任务、微任务执行顺序的题，结合了一些掘金大佬的博客写写自己的理解。 2021年7月24日更新如下： 更新事件循环的机制； 更新宏任务/微任务的区别； 更新JS单线程和执行宿主多线程的关系； event-loop 2021年7月24日更新： 关于事件循环： 调用栈和事件队列 调用栈 ...

Posted by Youzi on August 19, 2020

webpack require.context使用

前言 经常看到大型项目中使用webpack中的require.context来批量引入文件，最近刚好在写组件化 icon，用到了这个方法，写一篇 blog 来记录一下。 backup：大部分代码是基于 Vue 项目的。 require.context 是什么 这是一个 webpack 的 API，通过执行 require.context 函数来获取指定的上下文，主要用于实现自...

Posted by Youzi on August 19, 2020

H5开发踩坑

移动端开发过程中的踩坑记录 H5适配iPhoneX系列 众所周知，底部黑条，顶部刘海，适配方式如下： 1 2 3 body { padding-bottom: env(safe-area-inset-bottom); } 使用前提： 1 <meta content="viewport-fit=cover"/> video 标签相关 属性相关介绍； 1 2 ...

Posted by Youzi Blog on August 4, 2020

Nestjs相关笔记

nestjs 相关 前略，异常相关 基类：·HttpException·全局异常过滤器；默认未经过处理的异常会被全局异常过滤器或其子类捕获处理；但是如果抛出的异常不属于基类或其子类，会被封装成以下信息并返回； 1 2 3 { "statusCode": 500, "message": "Internal server error" 基类·HttpException· 刚已...

Posted by Youzi Blog on July 30, 2020

源码公开课笔记

源码分析 如何分析 健壮性分析(可以忽略源码的健壮性处理)： 参数，参数类型，默认参数，object.assign, {…o1, …o2} 易错操作(try…catch) 理清架构 -> 找到入口 -> 理出调用栈 tips: this instanceof Constructor，保证...

Posted by Youzi Blog on July 6, 2020

开发过程中的踩坑

项目 踩坑 Vue 使用踩坑 主要针对 Vue2.0 Vue父子组件各生命周期触发顺序 结论： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 父beforeCreate 父created 父beforeMount 子beforeCreate 子created 子beforeMount 子mounte...

Posted by Youzi Blog on June 4, 2020

杂记随笔备忘

随手记录备忘 随手记录一些看到的点。 正篇 with 表达式 Q: 昨天看到个面试题，问with表达式的利弊，还问为什么Vue的编译函数里一直用到这个语法； A1: with语句是一个用于扩展作用域链的语法，表达式语法： 1 2 3 with (expression) { statement; } 大家都知道 JS 找变量的过程是顺着作用域链往上找的，with语句将某个对...

Posted by Youzi Blog on May 19, 2020

Less学习笔记

Less——CSS 预处理器 为什么用Less，原因之一就是CSS太繁琐了，写起来没章法，没有变量，导致改动起来要修改好多地方； 同款预处理器还有：Sass || Stylus；预处理器其实是把Less这些代码编译成CSS，看起来和TS / JS的关系挺像的。 使用Less 由于Less不能直接被浏览器引入使用，所以要介绍下怎么用； 编译成CSS后引入使用； ...

Posted by Youzi Blog on April 29, 2020

微信小程序开发踩坑

微信小程序开发踩坑 基于微信小程序，使用初始小程序云开发模板进行开发； 记录一些组件、API 之类的注意事项； 正篇 不知道怎么分类但是又很坑的点 花括号和引号之间如果有空格，将最终被解析成为字符串，感觉这个应该坑过不少人； 1 2 3 4 5 6 7 8 <!-- bad --> <view wx:for=" "> </view> ...

Posted by Youzi Blog on April 26, 2020

开发规范讲解

前端开发规范 what 我把开发规范分成三个大类： 代码层面规范 接口规范 git 规范 从范围来看，代码层面规范是针对个人的；接口规范针对前后端开发团队；git规范针对的是整个开发测试团队。 关于代码规范 一般来说，一个项目大多是由多人合作开发的，即使目前是由个人开发的项目，也要提前想到后续也会交接给其他人；在团队中，我们一直都需要相互协作，其中代码...

Posted by Youzi Blog on April 13, 2020

FEATURED TAGS
JavaScript webpack 项目配置 面试 npm JS CSS Vue 前端 react
ABOUT ME

写代码的臭弟弟

FRIENDS