Canvas 不完全讲解
Canvas 概述 从翻译其实就能很好的了解到 canvas 是用来干什么的。画布！很好理解就是用来画画的。那具体怎么“画”咱们就得看一下具体的 API 文档了。下面是对 canvas 的一些概述： canvas 是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素. Canvas API 提供了一个通过JavaScript 和 HTML的Canvas元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API 主要聚焦于2D图形。而同样使用Canvas元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。 Canvas使用Canvas 最早是由 Apple 引入 WebKit，用于Mac OS X 的...
性能优化
前言项目的性能决定了用户对项目的整体感观度，优秀的性能可以保证项目的流畅与自然给用户愉快的体验感受。当我们开发完成一个项目以后最重要的环节就是要保证项目拥有一个良好的性能，所以开发完成以后需要我们针对项目做好性能优化。 那么，要使一个项目拥有良好的性能，我们需要怎么去做性能优化呢？ 第一步就是定义好性能指标，而为网站量身定制一套最佳指标也是性能优化中最重要的一个环节。 性能是相对的首先我们要知道如何评价一个页面性能的好坏。 性能是 相对...
SVG 完全讲解
涸辙遗鲋，旦暮成枯；人而无志，与彼何殊。 简介SVG 是 Scalable Vector Graphics 的缩写，意为可缩放矢量图形。于 2003年1月14日 SVG 1.1 被Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达共同确立成为W3C推荐标准。 概念那么SVG究竟是什么呢？ SVG是 Scalable Vector Graphics 的缩写 意为可缩放矢量图形 SVG是一个基于文本的开放网络标准，用来定义用于网络的矢量图形 SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失，因此能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接 SVG 使用 XML 格式定义图形 SVG是万维网联盟的标准与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 优势相对于其他格式的图像，SVG的优势有很多： SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG图像中的文本是可选的，同时也是可搜索的，且可以与 JavaScript...
开发规范
前言 不以规矩，不能成方圆。 本人有幸经历了团队从缺乏标准到逐渐规范的一个过程，在此当做记录供大家参考。 本文从为什么需要规范以及建立规范的重要性出发，逐步引申出如何去建立适合自己团队的规范，详细讨论了前端具体涉及到的规范都有哪些，部分小节有具体的配置步骤和操作链接。 文中涉及到的所有配置均放在github上的 Demo[1] 中，觉得不错的点个赞 ❤️❤️❤️。 下面我们开始吧🏃。 为什么需要规范规范能给我们带来什么好处，如果没有规范会造成什么后果？这里主要拿代码规范来说。 统一代码规范的好处： 提高代码整体的可读性、可维护性、可复用性、可移植性和可靠性，这会从根本上降低开发成本，也是最重要的一点。 保证代码的一致性：软件系统中最重要的因素之一就是编码的一致性。如果编码风格一致，也更加易于维护，因为团队内任何人都可以快速理解并修改。 提升团队整体效率：开发人员通常需要花费大量的时间来解决代码质量问题，如果都按照规范编写，也有助于团队尽早发现问题，甚至完全预防问题，这将提高整个交付过程的效率。 减少code...
TS 入门学习
什么是 TypeScriptTypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 简而言之，TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript 。 TypeScript优缺点优点 增强代码的可维护性，尤其在大型项目的时候效果显著 友好地在编辑器里提示错误，编译阶段就能检查类型发现大部分错误 支持最新的JavaScript新特特性 周边生态繁荣，vue3已全面支持 typescript 缺点 需要一定的学习成本 和一些插件库的兼容并不是特别完美，如以前在 vue2 项目里使用 typescript就并不是那么顺畅 增加前期开发的成本，毕竟你需要写更多的代码（但是便于后期的维护） 安装环境安装typescript首先，我们可以新建一个空文件夹，用来学习 ts，例如我在文件夹下新建了个 helloworld.ts 12npm install -g...
pnpm 使用跟理解
大家最近是不是经常听到 pnpm，我也一样。今天研究了一下它的机制，确实厉害，对 yarn 和 npm 可以说是降维打击。 那具体好在哪里呢？ 我们一起来看一下。 我们按照包管理工具的发展历史，从 npm2 开始讲起： npm2用 node 版本管理工具把 node 版本降到 4，那 npm 版本就是 2.x 了。 然后找个目录，执行下 npm init -y，快速创建个 package.json。 然后执行 npm install express，那么 express 包和它的依赖都会被下载下来： 展开 express，它也有 node_modules： 再展开几层，每个依赖都有自己的 node_modules： 也就是说 npm2 的 node_modules 是嵌套的。 这很正常呀？有什么不对么？ 这样其实是有问题的，多个包之间难免会有公共的依赖，这样嵌套的话，同样的依赖会复制很多次，会占据比较大的磁盘空间。 这个还不是最大的问题，致命问题是 windows 的文件路径最长是 260 多个字符，这样嵌套是会超过 windows 路径的长度限制的。 当时 npm...
百度 serverless cli 试用
工具安装 安装 docker 桌面版: docker官网 安装 bsam cli 执行 sudo pip3 install bce-sam-cli 即可完成安装。 遇到问题： zsh: command not found: bsam ;原因是之前没有加 sudo 创建函数 初始化项目： bsam init --runtime nodejs12 --name lee-app 函数安装依赖： cd src npm install bsam local install 部署 打包 bsam package 发布 bsam deploy 发布之前要去配置 config， 把百度帐号的信息跟本地的cli绑定起来， 创建/获取 AK/SK执行 bsam configBCE Access Key ID:BCE Secret Access Key:BCE region (bj, gz, su): 执行完deploy命令后， 可到页面函数列表里边去看函数是否发布成功， 如果成功了， 就会在函数列表里边有 测试 本地 去src下边用...
Rollup output 不同类型对比
Rollup 输出的不同格式js文件对比1amd , cjs , esm , iife , umd , system 一、IIFE 自执行函数 IIFE 的全称是 “immediately invoked function expression”。 1.1 打包结果分析让我们先看看本 demo 的 iife 格式打出来的包长什么样。 对上述代码做一些简化： 123456789101112131415161718192021var Test = (function (exports, lodash) { 'use strict'; // 自带严格模式，避免一些奇怪的兼容性问题 /** * 下面折行无用代码被 tree-shaking 掉了 * const unusedVar = 'May the 4th' * */ var answer = 42; // 业务中被单一引用的模块，被直接抹平了 const printAnswer = () => { console.log(`the...
vue3 watch 理解
vue3中 watch、watchEffect区别1、watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行） 2、watch需要传递监听的对象，watchEffect不需要 3、watch只能监听响应式数据：ref定义的属性和reactive定义的对象，如果直接监听reactive定义对象中的属性是不允许的，除非使用函数转换一下 4、watchEffect如果监听reactive定义的对象是不起作用的，只能监听对象中的属性。 123456789101112131415161718let count = ref(0)let countObj = reactive({count: 0})// 惰性，首次加载不执行watch(count, (newVal, oldVal) =>{console.log(newVal, oldVal)} )// watch...
d0 领域驱动设计
Domain Driven Design（DDD）是Eric Evans于2004在其同名著作里提出的概念，它指明了让软件设计满足理想需求模型的方向。但是建模、设计这种事本来就很抽象，读懂这样的大作也是需要消耗不少脑细胞。本文希望能尽量以简单加实例的方式介绍DDD里的一些常见概念。 简介什么是领域《领域驱动设计》书里写的是：用户会把软件程序应用于某个主体区域，这个区域就是软件的领域。简单来说，就认为是公司的某块业务好了。如果领域比较大，可以将其拆分为多个子域（Subdomain），子域包含核心域（Core Domain）和支撑子域（Supporting Subdomain），核心域顾名思义，是最重要的子域，我们应该把关注点集中在它上面；其余的子域都是支撑子域。支撑子域里有一类特殊的用于解决通用问题的子域，称为通用子域（Generic Subdomain），例如用户和权限等。不过这些都是相对而言的，对于消费方来说，他的支撑子域有可能就是你的核心域。个别子域可能会有交集，称为共享内核（Shared...
