Lee Blog

在介绍WebGL和Canvas的区别和联系之前，需要先s了解它们各自的定义和特点。 WebGL是一种基于标准HTML5的技术，用于在Web浏览器中实时渲染3D图形。它是由Khronos Group开发的一套API（Application Programming Interface），允许开发者使用JavaScript等脚本语言来操作计算机的显卡，并利用其强大的图形处理能力进行高性能的3D渲染。 Canvas是一个HTML5元素，提供了一个可以通过JavaScript脚本来绘制图像、图形、动画等的空白区域。它可以看作是一个画布，开发者可以借助Canvas API来操作像素级的绘制，从而实现各种2D绘图效果。 作为HTML5的一部分，Canvas允许其用户使用动态的脚本渲染2D形状,可以将其视为具有更新位图图像的能力并且没有内置场景图的低级别。这些在具有抽象层(例如PIXI.js)和其他一些层(例如Three.JS和Unity)的游戏(2D和3D)中使用。 下面是WebGL与Canvas的区别和联系： 功能和应用领域： WebGL主要面向3D图形的渲染，具备强大的图形处理能力，能够 ...

原始章夫道、德、仁、义、礼，五者一体也。道者，人之所蹈，使万物不知其所由。德者，人之所得，使万物各得其所欲。仁者，人之所亲，有慈惠恻隐之心，以遂其生成。义者，人之所宜，赏善罚恶，以立功立事。礼者，人之所履，凤兴夜寐，以成人伦之序。夫欲为人之本，不可无一焉。贤人君子，明于盛衰之道，通乎成败之数；审乎治乱之势，达乎去就之理。故潜居抱道，以待其时。若时至而行，则能极人臣之位；得机而动，则能成绝代之功。如其不遇，没身而已。是以其道足高，而名重于后代。 此章揭道之体，析道之用，为贤人君子者不可离道，亦不可轻试，特以处穷处达之法言之，见时不可违，机不可失，不然，以道殉人，名亦何重之有。 正道章德足以怀远，信足以一异，义足以得众，才足以鉴古，明足以照下，此人之俊也。行足以为仪表，智足以决嫌疑，信可以使守约，廉可以使分财，此人之豪也。守职而不废，处义而不回，见嫌而不苟免，见利而不苟得，此人之杰也。 此章豪俊杰三者，总于道中，炼到出人头地处，或谓杰胜豪，豪胜俊，便属支离，并非立言本旨。 求人之志章绝嗜禁欲，所以除累。抑非损恶，所以禳过。贬酒阙色，所以无污。避嫌远疑，所以不误。博学切问，所以广知。 ...

吉日噶拉（在外企、上市公司工作过，自己也创业失败过，遇到过很多失败挫折，甚至露宿街头，但是最后还是挺过来了），是一个十几年的程序员了，里面介绍了他的相关经历，以及他的一下经验，无论是对刚入门的程序员，还是工作了十年八年的程序员都有一些经验值得借鉴学习。这里我也把这本书中的部分精华分享给大家，希望对大家有帮助！ 程序员你伤不起 封面 值得注意的是书中的作者本身是一个小牛，没毕业前已经在大企业工作过很长时间了（.Net开发为主，C、java都有猎取），03年前就可以自己接企业项目了，但是后来还是遇到过很多挫折，主要是创业方面的惨痛经历。 通过本书，你会看到，即使你并不天赋异禀，成不了乔布斯和马云，但你依然可以有所成就，成为幸福的人。 （一）三年前的一个项目经验 主要讲的是作者帮公司拉了一个政府的项目，但是由于经验较少，谈的价格很低，还有很多细节刚开始没有谈到，后面相当于收了很少的钱，給政府干了一个比较完善的项目，这节的经验就是：程序员一般不应该直接和客户谈项目，应该让专业的人去谈，他能把10万的项目谈到50万或更多。 （二）2005年我的第一次软件创业，烧掉30万，两年时间打水漂 ...

原文： https://fettblog.eu/typescript-better-object-keys/ 译文： 注意：要非常小心使用这个技术。最好查看我的新方法。 TypeScript在lib.d.ts中的预定义类型通常是非常良好类型化的，并提供了大量关于如何使用内置功能以及提供额外类型安全性的信息。直到它们不是。考虑以下带有对象类型Person的示例： 123456789type Person = { name: string, age: number, id: number,}declare const me: Person;Object.keys(me).forEach(key => { // 💥 下一行在我们这里抛出了红色波浪线 console.log(me[key])}) 我们有一个类型为Person的对象，我们想使用Object.keys获取所有键作为字符串，然后使用这些键在映射或forEach循环中访问每个属性，以在严格模式下对其进行某些操作，但是我们得到了红色波浪线。这是错误消息： “Element imp ...

原文链接：How not to learn TypeScript 全文 7747 字，大约 15 分钟。 译者注：这篇文章对于初学 TypeScript 的同学应该是有帮助的，但是要注意，本文更多关注于初学，其中的建议在实际工作中不一定有用，甚至是不对的。但是，在初学 TypeScript 时，这些内容，还是有一定帮助的。同时我也相信，只要读者坚持搞下去，不用多长时间，应该也能明白这些问题。 “我和 TypeScript 永远不是好朋友！“哎，我经常能听到这样的抱怨。学习 TypeScript，即便是在 2022 年，看起来也不是件容易的事儿。因为很多原因，尤其是有 Java 和 C# 经验的人会发现，在 TypeScript 中，和他们的预期是不一样的。经常写 JavaScript 的人又会被 TypeScript 的编译器搞的崩溃。这里是，我发现的一些新手开始学 TypeScript ，经常会犯的问题。我希望他们能帮助到你。 这篇文章深受 Deny 的如果学习错误的 Rust的影响，我也推荐你们看看这篇文章。 错误1: 忽视 JavaScript从一开始， TypeScript ...

一、前言首先，为什么我会学习数据结构与算法呢，其实主要是有两方面 第一，是我在今年的flag里明确说到我会学这个东西 第二，学了这些，对自己以后在工作或者面试也会带来许多好处 然后，本文是最近学习的一个总结文章，文中的算法题，大部分都是leetcode中的，如不太理解题意，可直接去leetcode中找到对应的题。 二、基本概念常常听到算法的时候，就会有人说到 时间复杂度， 空间复杂度。那么这俩玩意是啥呢，下面我们就来一一解释 1. 时间复杂度其实就是一个函数，用大 O 表示， 比如 O(1)、 O(n)… 它的作用就是用来定义描述算法的运行时间 O(1) 12let i = 0i += 1 O(n)： 如果是 O(1) + O(n) 则还是 O(n) 123for (let i = 0; i < n; i += 1) { console.log(i)} O(n^2)： O(n) * O(n), 也就是双层循环，自此类推：O(n^3)… 12345for (let i = 0; i < n; i += 1) { for ( ...

引言在大前端的趋势下，传统的前端开发模式已经不能很好地承载实际的项目需求。因此，我们需要一系列解决方案来使项目变得规范、可配置、易于优化等。 本文将针对这个问题进行简单分析，讲解前端工程化的概念、落地实践，并给出一系列解决方案。 本篇文章是本人在 2020年时推进公司内部前端工程化所写，在原文的基础上对详细细节、业务场景以及缘由进行了缩减，对于不了解前端工程化的前端开发可进行阅读，从而达到了解工程化的目的，更加详细的内容需要自行查阅资料并学习。 一、什么是前端工程化前端工程化是将软件工程相关的方法和思想应用到前端开发中，从而提升前端开发效率、提高产品质量、降低开发难度、减少公司成本的方法和工具。 前端工程化贯穿整个前端项目各个阶段，包括代码规范、流程规范、分支管理、程序开发、前后端联调、自动化测试、应用构建、系统部署和监控、运维等。 二、为什么要使用前端工程化随着近些年来前端技术的不断发展，越来越多复杂的业务放在了前端，前端不再是简单的 HTML + CSS + JavaScript 组合。 业务的复杂性导致前端代码量增加，因此前端代码的可靠性、可维护性、可拓展性以及前端应用的性能 ...

Vue 3已经稳定了相当长一段时间了。许多代码库都在生产环境中使用它，其他人最终都将不得不迁移到Vue 3。我现在有机会使用它并记录了我的错误，下面这些错误你可能想要避免。 使用Reactive声明原始值数据声明在过去都是非常直接的，但是现在有很多帮助函数供我们使用。目前的规则是： 使用reactive声明Object, Array, Map, Set 使用ref声明String, Number, Boolean 为一个原始值使用reactive会返回一个警告，并且该值不会成为可响应式数据。 123456/* DOES NOT WORK AS EXPECTED */<script setup>import { reactive } from "vue";const count = reactive(0);</script> [Vue warn]: value cannot be made reactive 矛盾的是，另一种方式是可行的。例如，使用ref来声明一个Array会在内部调用reactive。 解构响应式 ...

从 Object.defineProperty 到 Proxy一切的一切还得从 Object.defineProperty 开始讲起，那是一个不一样的 API … （bgm 响起，自行体会） Object.definePropertyObject.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个 新属性，或修改一个 对象 的 现有属性，并返回此对象，其参数具体为： obj：要定义属性的对象 prop：要定义或修改的 属性名称 或 Symbol descriptor：要定义或修改的 属性描述符 从以上的描述就可以看出一些限制，比如： 目标是 对象属性，不是 整个对象 一次只能 定义或修改一个属性 当然有对应的一次处理多个属性的方法 Object.defineProperties()，但在 vue 中并不适用，因为 vue 不能提前知道用户传入的对象都有什么属性，因此还是得经过类似 Object.keys() + for 循环的方式获取所有的 key -> value，而这其实是没有必要使用 Object.def ...

reduce 函数可以根据需要进行累加、过滤、分组、映射等操作，是一个非常强大的数组方法。在数据处理时使用的非常频繁，很多复杂的逻辑如果用reduce去处理，都非常的简洁，在实际的开发工作过程中，积累了一些常见又超级好用的 reduce 技巧的代码片段，筛选了如下 10 个，以供大家参考 reduce 介绍reduce 是数组的方法，可以对数组中的每个元素依次执行一个回调函数，从左到右依次累积计算出一个最终的值。其语法为： arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) 其中，callback 是每个元素执行的回调函数，其包含 4 个参数： accumulator：累积器，即上一次回调函数执行的返回值。 currentValue：当前元素的值。 index：当前元素的下标。 array：原始数组。 initialValue 是可选的，表示累积器的初始值。 reduce 函数的执行过程如下： 如果没有提供 initialValue，则将数组的第一个元素作为累积器的 ...