Lee Blog

...

吉日噶拉（在外企、上市公司工作过，自己也创业失败过，遇到过很多失败挫折，甚至露宿街头，但是最后还是挺过来了），是一个十几年的程序员了，里面介绍了他的相关经历，以及他的一下经验，无论是对刚入门的程序员，还是工作了十年八年的程序员都有一些经验值得借鉴学习。这里我也把这本书中的部分精华分享给大家，希望对大家有帮助！ 程序员你伤不起...

原文： 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...

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

一、前言首先，为什么我会学习数据结构与算法呢，其实主要是有两方面 第一，是我在今年的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) { ...

引言在大前端的趋势下，传统的前端开发模式已经不能很好地承载实际的项目需求。因此，我们需要一系列解决方案来使项目变得规范、可配置、易于优化等。 本文将针对这个问题进行简单分析，讲解前端工程化的概念、落地实践，并给出一系列解决方案。 本篇文章是本人在 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...

从 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，而这其实是没有必要使用...

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

unplugin-auto-import 和 unplugin-vue-components Bigger 2022年11月24日 18:15 · 阅读 1780 本文正在参加「金石计划 . 瓜分6万现金大奖」 背景unplugin-auto-import：为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。支持 TypeScript。 unplugin-vue-components：Vue 的按需组件自动导入。 这两个插件都是涉及到按需自动导入，所以我们在使用 Vue 和其对应的 组件之类时，都可能会需要这两个插件的帮助，帮助我们实现按需自动导入，避免全量引入的尴尬以及每个文件都要手动导入 API 的低效重复搬砖。 但是，在项目中使用 unplugin-auto-import 和 unplugin-vue-components 总会遇到的一些问题，在此特意汇总如下，以及提供最后的解决办法，希望帮助到有需要的人。 安装首先就是安装，为啥推荐使用 pnpm ，在此就不赘述了（可自行去了解）。 123pnpm add -D...