Lee Blog

没有别的意思， 就是希望自己能系统的把vue的api文档完整的看一遍 最近在用vue做新项目，碰到的东西的，有些还是需要临时查文档 最后，希望能多看几遍 开始 简介 快速上手 基础 创建一个应用 模板语法 响应式基础 计算属性 类与样式绑定 条件渲染 列表渲染 事件处理 表单输入绑定 生命周期 侦听器 模板引用 组件基础 深入组件 注册 Props 事件 透传 Attributes 插槽 依赖注入 异步组件 逻辑复用 组合式函数 自定义指令 插件 内置组件 Transition TransitionGroup KeepAlive Teleport Suspense 应用规模化 单文件组件 工具链 路由 状态管理 测试 服务端渲染 (SSR) 最佳实践 生产部署 性能优化 无障碍访问 安全 TypeScript 总览 TS 与组合式 API TS 与选项式 API 进阶主题 使用 Vue 的多种方式 组合式 API 常见问答 深入响应式系统 渲染机制 渲染函数 & JS ...

官网地址： https://matomo.org/

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 的 Dashboard，随后被各个浏览器实现。如今除一些过时的浏览器不支持Canvas元素外，所有的新版本主流浏览器都支持它。 Canvas元素的学习需要具备一些基本的HTML和JavaScript知识。 基本用法下面我们来简单创建一个例子，看看canvas究竟如何使用。 1234567891011 ...

前言项目的性能决定了用户对项目的整体感观度，优秀的性能可以保证项目的流畅与自然给用户愉快的体验感受。当我们开发完成一个项目以后最重要的环节就是要保证项目拥有一个良好的性能，所以开发完成以后需要我们针对项目做好性能优化。 那么，要使一个项目拥有良好的性能，我们需要怎么去做性能优化呢？ 第一步就是定义好性能指标，而为网站量身定制一套最佳指标也是性能优化中最重要的一个环节。 性能是相对的首先我们要知道如何评价一个页面性能的好坏。 性能是 相对 的，怎么说呢？举几个例子你就懂了： 设备不同：同一个网站，我访问的时候我感觉一般般，有时还有卡顿，首次加载还有点慢，但是小刘访问就挺好，首次加载贼快，页面一点都不卡顿。那为什么会这样呢？原因其实就是我用的手机是老款的诺鸡亚，网络用的是3G网络。而小刘用的是最新款的爱疯100，网络妥妥的10G网络。 实现方式不同：两个网站，他们完成加载的速度完全一样，但其中一个却显示的内容比另一个快很多。那为什么会这样呢？原因是其中一个用的是按需加载，而另一个却是要等所有内容都加载完才显示。 使用技术不同：两个图形编辑网站，其中一个各种性能都比另一个强一点点，但是在图 ...

涸辙遗鲋，旦暮成枯；人而无志，与彼何殊。 简介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 技术一起运行 SVG可在图像 ...

前言 不以规矩，不能成方圆。 本人有幸经历了团队从缺乏标准到逐渐规范的一个过程，在此当做记录供大家参考。 本文从为什么需要规范以及建立规范的重要性出发，逐步引申出如何去建立适合自己团队的规范，详细讨论了前端具体涉及到的规范都有哪些，部分小节有具体的配置步骤和操作链接。 文中涉及到的所有配置均放在github上的 Demo[1] 中，觉得不错的点个赞 ❤️❤️❤️。 下面我们开始吧🏃。 为什么需要规范规范能给我们带来什么好处，如果没有规范会造成什么后果？这里主要拿代码规范来说。 统一代码规范的好处： 提高代码整体的可读性、可维护性、可复用性、可移植性和可靠性，这会从根本上降低开发成本，也是最重要的一点。 保证代码的一致性：软件系统中最重要的因素之一就是编码的一致性。如果编码风格一致，也更加易于维护，因为团队内任何人都可以快速理解并修改。 提升团队整体效率：开发人员通常需要花费大量的时间来解决代码质量问题，如果都按照规范编写，也有助于团队尽早发现问题，甚至完全预防问题，这将提高整个交付过程的效率。 减少code review期间一系列的争议，因为缺乏标准，在争议过程中双方很难妥协（没 ...

什么是 TypeScriptTypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 简而言之，TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript 。 TypeScript优缺点优点 增强代码的可维护性，尤其在大型项目的时候效果显著 友好地在编辑器里提示错误，编译阶段就能检查类型发现大部分错误 支持最新的JavaScript新特特性 周边生态繁荣，vue3已全面支持 typescript 缺点 需要一定的学习成本 和一些插件库的兼容并不是特别完美，如以前在 vue2 项目里使用 typescript就并不是那么顺畅 增加前期开发的成本，毕竟你需要写更多的代码（但是便于后期的维护） 安装环境安装typescript首先，我们可以新建一个空文件夹，用来学习 ts，例如我在文件夹下新建了个 helloworld.ts 12npm install -g ty ...

大家最近是不是经常听到 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 还没解决 ...

工具安装 安装 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下边用 mocha ...

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 answe ...