2023年5月18日
grid demo1
摘要： 当然可以，这里提供一个基本的 CSS Grid 布局的案例。 HTML 部分： <div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"> 阅读全文
posted @ 2023-05-18 10:35 kitebear 阅读(19) 评论(0) 推荐(0) 编辑
Grid去做水平垂直居中
摘要： 实现 grid 布局的水平居中和垂直居中可以使用以下两种方式： · 使用 align-items 和 justify-items 属性 可以将 grid 容器设置为网格项目在水平和垂直方向都居中，方法是将 align-items 和 justify-items 属性都设置为 center。例如： . 阅读全文
posted @ 2023-05-18 10:35 kitebear 阅读(2018) 评论(0) 推荐(0) 编辑
2023年5月17日
CSS三大特性
摘要： CSS 的三大特性包括： 层叠性（Cascading） 层叠性是指用于控制多个样式定义同时应用到某个元素时，如何决定哪个样式定义将被应用的机制。CSS 样式表中的规则可以根据其特定优先级与其他规则进行层叠，最终得到应用于元素的样式。常用的应用场景有： 通过应用不同的样式类来覆盖或扩展第三方 CSS 阅读全文
posted @ 2023-05-17 06:35 kitebear 阅读(57) 评论(0) 推荐(0) 编辑
rem和em区别及使⽤⽅法
摘要： rem和em都是CSS中用于设置字体大小的单位，它们之间的区别如下： rem单位 rem单位表示的是相对于根元素（即html元素）的字体大小。比如，如果html元素的字体大小是16px，那么设置1rem的大小就相当于设置为16px，2rem则相当于32px。因此，rem单位通常被用于响应式设计中，可 阅读全文
posted @ 2023-05-17 06:35 kitebear 阅读(158) 评论(0) 推荐(0) 编辑
2023年5月16日
flex：1表示哪三个属性？
摘要： flex: 1是 flex-grow: 1, flex-shrink: 1, flex-basis: 0 的合并写法。 flex-grow 属性规定项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间，如果一个项目的 flex 阅读全文
posted @ 2023-05-16 10:32 kitebear 阅读(462) 评论(0) 推荐(0) 编辑
CSS选择器有哪些
摘要： CSS选择器是用来选择HTML或XML元素的一种方式，CSS选择器可以根据元素的标签名、类名、ID、属性值等特征进行选择。以下是一些常用的CSS选择器： 标签选择器：使用元素的标签名作为选择器，例如：p、h1、div等。 类选择器：选择具有指定类名的元素，使用“.类名”作为选择器，例如：.demo。 阅读全文
posted @ 2023-05-16 10:31 kitebear 阅读(89) 评论(0) 推荐(0) 编辑
2023年5月15日
Import maps
摘要： 当 ES Module 最开始作为一种新的 JavaScript 模块化方案在 ES6 中被引入的候，其实是通过在 import 语句中强制指定相对路径或绝对路径来实现的。 import dayjs from "https://cdn.skypack.dev/dayjs@1.10.7"; // ES 阅读全文
posted @ 2023-05-15 08:53 kitebear 阅读(142) 评论(0) 推荐(0) 编辑
重排和重绘
摘要： 重排：指的是当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的过程。这个过程比较耗费 CPU 资源，因为它需要三种计算：布局计算、样式计算、分层和绘制计算。重排比重绘的代价更高。 重绘：指的是当渲染树中的一些元素需要更新属性，而这些属性只影响元素的外观、风格，而不会影响 阅读全文
posted @ 2023-05-15 08:53 kitebear 阅读(34) 评论(0) 推荐(0) 编辑
2023年5月14日
「硬核JS」你的程序中可能存在内存泄漏
摘要： 写在前面 想来很多同学看到内存泄漏，内心直接会跳出两个字：闭包！！！再让你说点其它的估计就噤声了。如果你对内存泄漏的了解仅限于闭包，那真的是应该仔细看此文了，闭包可能会造成内存泄漏，但是内存泄漏并不是只有闭包，它只是内存泄漏的引子之一罢了。 写的程序运行一段时间后慢慢变卡甚至要崩溃了？ 如题，你的程 阅读全文
posted @ 2023-05-14 20:01 kitebear 阅读(125) 评论(0) 推荐(0) 编辑
事件循环机制
摘要： 事件循环是 JavaScript 的一种执行机制，用于协调异步任务的执行顺序、传递消息以及处理用户交互等事件。事件循环由以下四个组成部分组成。 调用栈（Call Stack）：调用栈是 JavaScript 的一种执行机制，用于控制函数的执行顺序。当函数被调用时，将函数压入调用栈中，并开始执行函数， 阅读全文
posted @ 2023-05-14 20:00 kitebear 阅读(227) 评论(0) 推荐(0) 编辑
2023年5月13日
ajax请求的流程？
摘要： 浏览器中的 Ajax 请求流程一般包括以下几个步骤： 创建 XMLHttpRequest 对象 通过 new XMLHttpRequest() 方法创建 XMLHttpRequest 请求对象，该对象提供了一些属性和方法，可以用来发送 Ajax 请求并处理响应数据。 发送请求 使用 open() 方 阅读全文
posted @ 2023-05-13 08:12 kitebear 阅读(30) 评论(0) 推荐(0) 编辑
事件循环机制
摘要： 事件循环是 JavaScript 的一种执行机制，用于协调异步任务的执行顺序、传递消息以及处理用户交互等事件。事件循环由以下四个组成部分组成。 调用栈（Call Stack）：调用栈是 JavaScript 的一种执行机制，用于控制函数的执行顺序。当函数被调用时，将函数压入调用栈中，并开始执行函数， 阅读全文
posted @ 2023-05-13 08:12 kitebear 阅读(87) 评论(0) 推荐(0) 编辑
2023年5月12日
pnpm
摘要： pnpm 讲解 阿里数据中台前端团队分享前端界的好文精读——帮你筛选靠谱的内容。 pnpm 全称是 “Performant NPM”，即高性能的 npm。它结合软硬链接与新的依赖组织方式，大大提升了包管理的效率，也同时解决了 “幻影依赖” 的问题，让包管理更加规范，减少潜在风险发生的可能性。 使用  阅读全文
posted @ 2023-05-12 06:58 kitebear 阅读(77) 评论(0) 推荐(0) 编辑
npm到yarn到pnpm
摘要： npm的问题 npm中node_modules是嵌套的，但是包和包之间会有相互嵌套依赖的关系，这样会导致一个项目中重复安装了很多包 windows中文件路径最长260多个字节，这样嵌套如果超过windows的路径长度会导致项目都启不起来 yarn yarn 解决了重复嵌套和路径过长的问题，它将包文件 阅读全文
posted @ 2023-05-12 06:56 kitebear 阅读(91) 评论(0) 推荐(0) 编辑
2023年5月11日
npm包
摘要： Git Tag 规范# Tag 需遵循 语义化版本 semver 规范 命名规则：[类型][release版本]-[stages版本] 例如： js v3.0.1 v3.0.0 v3.0.0-rc.3 v3.0.0-rc.2 v3.0.0-rc.1 v3.2.0-beta.3 v3.2.0-beta 阅读全文
posted @ 2023-05-11 10:19 kitebear 阅读(40) 评论(0) 推荐(0) 编辑
npm version
摘要： 现在我们要开发一个项目，我们都知道为了方便项目管理，要写一个版本号，那开发的时候初始的版本号是多少呢？是 1.0.0 还是 0.0.1 开始？ 如果一个版本号为 X.Y.Z，什么时候是 X 应该加 1，什么时候 Y 应该加 1 ，什么时候 Z 应该加 1，加 1 遵循十进制吗？比如 1.0.9 的下 阅读全文
posted @ 2023-05-11 10:19 kitebear 阅读(73) 评论(0) 推荐(0) 编辑
2023年5月10日
xss 攻击（跨站脚本攻击），如何避免？
摘要： XSS攻击（跨站脚本攻击）是一种常见的Web安全漏洞，攻击者通过注入恶意脚本代码，从而获取用户的敏感信息或者使用用户的身份进行操作，对网站和用户造成损失。 为了避免XSS攻击，可以采取如下措施： 输入过滤 对于用户输入的内容进行严格的过滤，删除或者转义HTML、JavaScript、CSS等特殊字符 阅读全文
posted @ 2023-05-10 23:23 kitebear 阅读(418) 评论(0) 推荐(0) 编辑
部署前端到(NG)常用指令
摘要： 1. 构建压缩# bash # 构建 pnpm run build # 压缩产物 tar -czvf dist.tar.gz dist/ 2. 登录并上传资源到服务# shell # 上传 静态资源。xxx替换为实际服务地址，根据实际路径定义。 scp dist.tar.gz root@xx.xxx 阅读全文
posted @ 2023-05-10 23:22 kitebear 阅读(79) 评论(0) 推荐(0) 编辑
no bundle
摘要： no bundle 是基于浏览器支持 es module 来实现的，浏览器会做 es module 的依赖分析，然后加载对应的模块，这样自然就不用自己做依赖分析了，只需要实现模块的编译即可。 所以，no bundle 工具会启动一个开发服务器，根据请求的模块路径来进行相应的编译，然后返回编译后的代码 阅读全文
posted @ 2023-05-10 23:21 kitebear 阅读(39) 评论(0) 推荐(0) 编辑
conventional-changelog
摘要： onventional-changelog 是一款可以根据项目的commit 和 metadata信息自动生成 changelogs 和 release notes的系列工具，并且在辅助 standard-version 工具的情况下，可以自动帮你完成生成version、打tag, 生成CHANGE 阅读全文
posted @ 2023-05-10 23:21 kitebear 阅读(36) 评论(0) 推荐(0) 编辑
深入浅出pageage
摘要： package.json就是一个json文件，除了能够描述项目的包依赖外，允许我们使用“语义化版本规则”指明你项目依赖包的版本，让你的构建更好地与其他开发者分享，便于重复使用。 package.json package.json常用属性 package.json环境相关属性 package.json 阅读全文
posted @ 2023-05-10 23:19 kitebear 阅读(73) 评论(0) 推荐(0) 编辑
构建工具
摘要： Vite： 下一代前端工具 Vite(读音类似于[weɪt]，法语，快的意思) 是一个由原生 ES Module 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。 虽然 2021 年 webpack 仍然是毫无争议的构建之王 阅读全文
posted @ 2023-05-10 23:19 kitebear 阅读(6) 评论(0) 推荐(0) 编辑
commonjs
摘要： Commonjs的缺点 模块加载器由 Node.js 提供，依赖了 Node.js 本身的功能实现，比如文件系统，如果 CommonJS 模块直接放到浏览器中是无法执行的。当然, 业界也产生了 browserify 这种打包工具来支持打包 CommonJS 模块，从而顺利在浏览器中执行，相当于社区实 阅读全文
posted @ 2023-05-10 23:18 kitebear 阅读(16) 评论(0) 推荐(0) 编辑
AMD
摘要： AMD全称为Asynchronous Module Definition，即异步模块定义规范。模块根据这个规范，在浏览器环境中会被异步加载，而不会像 CommonJS 规范进行同步加载，也就不会产生同步请求导致的浏览器解析过程阻塞的问题了 // main.js define(["./print"], 阅读全文
posted @ 2023-05-10 23:17 kitebear 阅读(71) 评论(0) 推荐(0) 编辑
应用脚手架
摘要： 脚手架 预置一些通用的JS文件，埋点/数据处理/HTTP封装/Utils工具/时间包/一些可以公用的组件 构建发布 资源上传cdn配置 docker的生成与上传 CI的缓存配置 内部镜像源的配置 保持风格和样式的统一 eslint 语法 pertter 编码格式的统一 stylelint hooks 阅读全文
posted @ 2023-05-10 23:16 kitebear 阅读(8) 评论(0) 推荐(0) 编辑