全栈开发者与 AI 产品实践者，记录从想法到产品的真实过程。https://leonsux.github.io/zh-CNhttps://leonsux.github.io/2022/06/14/%E6%A8%A1%E5%9D%97%E5%8C%96/https://leonsux.github.io/2022/06/14/%E6%A8%A1%E5%9D%97%E5%8C%96/为什么要有模块化？ 项目庞大时，js文件多，变得不好维护 js文件作用域都是顶层，这会造成变量污染 js文件依赖问题，稍微不注意顺序引入错，代码全报错 CommonJS CommonJS 是一个更偏向于服务器端的规范。NodeJS 采用了这个规范。CommonJS 的一个模块就是Tue, 14 Jun 2022 00:00:00 GMT模块化https://leonsux.github.io/posts/react-setstate-sync-or-async/https://leonsux.github.io/posts/react-setstate-sync-or-async/根据日常开发中的表现，我们可能理解 setState 是异步的，因为当执行 setState 更新数据后，直接打印会发现数据并没有更新。然而这里表现出的 “异步” 并非真正的异步。 以下直接引用现有结论，原文链接贴在最后。 在React的setState函数实现中，会根据一个变量Thu, 09 Jun 2022 00:00:00 GMTReacthttps://leonsux.github.io/2022/05/31/React-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/https://leonsux.github.io/2022/05/31/React-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/避免不必要的组件更新。 将 props 设置为数组或对象 每次调用 React 组件都会创建新组件，就算传入的数组或对象的值没有改变，他们的引用地址也会发生改变，比如，如果按照如下的写法，那么每次渲染时 style 都是一个新对象 使用 PureComponent、React.mTue, 31 May 2022 00:00:00 GMTReact 性能优化https://leonsux.github.io/2022/05/30/%E9%98%B2%E6%8A%96%E4%B8%8E%E8%8A%82%E6%B5%81/https://leonsux.github.io/2022/05/30/%E9%98%B2%E6%8A%96%E4%B8%8E%E8%8A%82%E6%B5%81/防抖与节流都是一种优化高频操作的手段。 比如在搜索框输入关键词时，如果不做处理，输入 “keyword” 会触发 7 次搜索，而实际上有效搜索只有最后一次。 节流(throttle): n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。 防抖(debounce): n 秒Mon, 30 May 2022 00:00:00 GMT防抖与节流https://leonsux.github.io/2022/05/25/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/https://leonsux.github.io/2022/05/25/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/网络安全 XSS 攻击 跨站脚本攻击，将恶意脚本注入到页面中，例： alert('warning') 。 XSS攻击有两种 一种是通过修改浏览器 URL 导致脚本被注入页面，这种一般会被 chrome 浏览器自动防御 另一种是通过输入框将脚本提交到后端并注入数据库，需要我们手动防Wed, 25 May 2022 00:00:00 GMT网络安全https://leonsux.github.io/2022/05/17/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF/https://leonsux.github.io/2022/05/17/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF/我们都知道 js 是单线程的，靠同步任务、异步任务来模拟实现多线程。 代码执行时，同步代码正常在主线程中执行，遇到异步代码（比如异步请求或者settimeout），则进入 Event Table（交给js的运行环境来处理，浏览器或者nodejs），并将其回调函数放入 Event Tue, 17 May 2022 00:00:00 GMT事件循环https://leonsux.github.io/2022/05/09/this%E6%8C%87%E5%90%91-&-apply%E4%B8%8Ebind%E9%87%8D%E5%86%99/https://leonsux.github.io/2022/05/09/this%E6%8C%87%E5%90%91-&-apply%E4%B8%8Ebind%E9%87%8D%E5%86%99/函数中 this 的指向 & 箭头函数中 this 的指向 如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。但是在非严格模式中，当this指向undefined时，它会被自动指Mon, 09 May 2022 00:00:00 GMTthis指向apply、bindhttps://leonsux.github.io/2022/04/25/%E5%B8%A6%E4%BD%A0%E6%90%9E%E6%87%82-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87-%E5%92%8C-%E4%BD%9C%E7%94%A8%E5%9F%9F/https://leonsux.github.io/2022/04/25/%E5%B8%A6%E4%BD%A0%E6%90%9E%E6%87%82-%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87-%E5%92%8C-%E4%BD%9C%E7%94%A8%E5%9F%9F/执行上下文（Execution Context） 每当 Javascript 代码在运行的时候，它都是在执行上下文中运行，用来跟踪记录代码运行时环境的抽象概念。 执行上下文的三种类型： 全局执行上下文 任何不在函数内部的代码都在全局环境中 一个程序只有一个全局执行上下文 全局环境Mon, 25 Apr 2022 00:00:00 GMT执行上下文作用域词法环境https://leonsux.github.io/2022/04/22/LeetCode-%E5%88%B7%E9%A2%98%E7%AC%94%E8%AE%B0-160.-%E7%9B%B8%E4%BA%A4%E9%93%BE%E8%A1%A8/https://leonsux.github.io/2022/04/22/LeetCode-%E5%88%B7%E9%A2%98%E7%AC%94%E8%AE%B0-160.-%E7%9B%B8%E4%BA%A4%E9%93%BE%E8%A1%A8/题目 https://leetcode-cn.com/problems/intersection-of-two-linked-lists/ 给你两个单链表的头节点 headA 和 headB ，请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点，返回 null 。Fri, 22 Apr 2022 00:00:00 GMT算法链表https://leonsux.github.io/2022/04/21/LeetCode-%E5%88%B7%E9%A2%98%E7%AC%94%E8%AE%B0-19.-%E5%88%A0%E9%99%A4%E9%93%BE%E8%A1%A8%E7%9A%84%E5%80%92%E6%95%B0%E7%AC%AC-N-%E4%B8%AA%E8%8A%82%E7%82%B9/https://leonsux.github.io/2022/04/21/LeetCode-%E5%88%B7%E9%A2%98%E7%AC%94%E8%AE%B0-19.-%E5%88%A0%E9%99%A4%E9%93%BE%E8%A1%A8%E7%9A%84%E5%80%92%E6%95%B0%E7%AC%AC-N-%E4%B8%AA%E8%8A%82%E7%82%B9/题目 https://leetcode-cn.com/problems/remove-nth-node-from-end-of-list/ 给你一个链表，删除链表的倒数第 n个结点，并且返回链表的头结点。 示例 输入： head = [1,2,3,4,5], n = 2 输出： Thu, 21 Apr 2022 00:00:00 GMT算法链表https://leonsux.github.io/2022/04/20/%E4%B8%BA%E4%BD%A0%E7%9A%84-GitHub-%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0-GitTalk-%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/https://leonsux.github.io/2022/04/20/%E4%B8%BA%E4%BD%A0%E7%9A%84-GitHub-%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0-GitTalk-%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。 先看一下最终效果，并且欢迎来体验：https://leonsux.github.io 添加授权 首先为我们的博客添加 GitHub 的登陆授权，点击头像到设置里找到新建授权 Settings Wed, 20 Apr 2022 00:00:00 GMTBloghttps://leonsux.github.io/2022/04/19/LeetCode-%E5%88%B7%E9%A2%98%E7%AC%94%E8%AE%B0-35.%E6%90%9C%E7%B4%A2%E6%8F%92%E5%85%A5%E4%BD%8D%E7%BD%AE/https://leonsux.github.io/2022/04/19/LeetCode-%E5%88%B7%E9%A2%98%E7%AC%94%E8%AE%B0-35.%E6%90%9C%E7%B4%A2%E6%8F%92%E5%85%A5%E4%BD%8D%E7%BD%AE/题目 https://leetcode-cn.com/problems/search-insert-position 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n)Tue, 19 Apr 2022 00:00:00 GMT算法二分查找https://leonsux.github.io/2022/04/18/LeetCode-%E5%88%B7%E9%A2%98%E7%AC%94%E8%AE%B0-206.-%E5%8F%8D%E8%BD%AC%E9%93%BE%E8%A1%A8/https://leonsux.github.io/2022/04/18/LeetCode-%E5%88%B7%E9%A2%98%E7%AC%94%E8%AE%B0-206.-%E5%8F%8D%E8%BD%AC%E9%93%BE%E8%A1%A8/题目 https://leetcode-cn.com/problems/reverse-linked-list 给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。 示例 非递归解法 思路 首先观察示例特点 before： 1 -> 2 -> 3 -> 4 -> 5Mon, 18 Apr 2022 00:00:00 GMT算法链表https://leonsux.github.io/2021/03/10/Royal-TSX%E4%BD%BF%E7%94%A8/https://leonsux.github.io/2021/03/10/Royal-TSX%E4%BD%BF%E7%94%A8/Royal TSX，mac上强力的远程连接管理神器 安装 直接去官网下载即可：https://www.royalapps.com/ts/win/download。 安装 Terminal(SSH) 和 File Transfer(FTPS) 插件 Royal TSX -> PluWed, 10 Mar 2021 00:00:00 GMTRoyal TSXhttps://leonsux.github.io/2021/01/30/%E5%85%B3%E9%97%ADOh-my-zsh%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0/https://leonsux.github.io/2021/01/30/%E5%85%B3%E9%97%ADOh-my-zsh%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0/感觉最近 Oh my zsh 更新有点频繁，每次打开都询问是否更新，再加上更新也比较慢，干脆关闭自动更新。 首先打开 Oh my zsh 的配置文件 找到 DISABLEAUTOUPDATE="true"(老版本是这个) 这行，可以看到是被注释了的，把注释去掉即可 现在最新版的zSat, 30 Jan 2021 00:00:00 GMToh my zshzshhttps://leonsux.github.io/2018/01/17/%E5%9C%A8create-react-app%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%8A%E5%AE%9E%E7%8E%B0Ant-Design%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD-2018/https://leonsux.github.io/2018/01/17/%E5%9C%A8create-react-app%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%8A%E5%AE%9E%E7%8E%B0Ant-Design%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD-2018/在看antd使用的时候官方提到了强烈推荐使用按需加载，按需加载可以在引用组件的时候引入组件对应的样式，而我们通常只会用到一个UI组件库中的极少一部分 首先安装babel-plugin-import npm i babel-plugin-import -S 然后在.babelrc中Wed, 17 Jan 2018 00:00:00 GMTReactcreate-react-appAnt Designhttps://leonsux.github.io/2017/12/20/create-react-app%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%8B%E9%85%8D%E7%BD%AEsass%E7%9A%84%E7%BC%96%E8%AF%91-2017/https://leonsux.github.io/2017/12/20/create-react-app%E8%84%9A%E6%89%8B%E6%9E%B6%E4%B8%8B%E9%85%8D%E7%BD%AEsass%E7%9A%84%E7%BC%96%E8%AF%91-2017/还是sass好用，当然在使用前还是要配置一波 安装sass-loader, node-sass 在nodemodules的react-scripts下的webpack.config.dev.js中修改如下图配置 跨域的proxy配置 嘿呀，又暴露了自己的无知，早该想到每次都去noWed, 20 Dec 2017 00:00:00 GMTReactcreate-react-appAnt Designhttps://leonsux.github.io/2016/11/27/JS%E4%B8%AD%E4%BB%A5name%E4%BD%9C%E4%B8%BA%E5%8F%98%E9%87%8F%E5%90%8D%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98-2017/https://leonsux.github.io/2016/11/27/JS%E4%B8%AD%E4%BB%A5name%E4%BD%9C%E4%B8%BA%E5%8F%98%E9%87%8F%E5%90%8D%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98-2017/JS中使用 name 作为变量名出现的问题 今天突然被问到一个问题：我定义了一个数组 var name = ["leon", "jack", "tom"]; ，但是为什么通过下标获取不到正确的值，而且居然能获取到 ,。当时我以为是什么细节问题，仔细检查了一下代码后发现并没有什么问Sun, 27 Nov 2016 00:00:00 GMTJshttps://leonsux.github.io/2016/09/08/git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C%E6%80%BB%E7%BB%93-2016/https://leonsux.github.io/2016/09/08/git%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C%E6%80%BB%E7%BB%93-2016/参照廖雪峰的git教程做了下自己的总结，包括一些常用的命令，用于自己查阅 公钥 私钥 在本地创建公钥，加密一波，生成私钥；把公钥传到远端，也加密一波，生成私钥；比较本地私钥和远程私钥，那肯定是一样的啊，所以就不用每次都输入密码了 SSH 1. 创建本地公钥 ssh-keygen Thu, 08 Sep 2016 00:00:00 GMTGithttps://leonsux.github.io/2016/08/10/JS%E4%B8%AD%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%97%AE%E9%A2%98-2016/https://leonsux.github.io/2016/08/10/JS%E4%B8%AD%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%97%AE%E9%A2%98-2016/JS解析器解析步骤 第一步：寻找代码中定义的变量，函数，参数（预解析，这也是在声明变量前使用变量不报错的原因） 第二部：逐行解读代码 Tips 1. 定义在script中的变量，称为全局变量，函数则称为全局函数，当变量名与函数名一致时会保留函数 2. 当有多个script时，先解Wed, 10 Aug 2016 00:00:00 GMTJshttps://leonsux.github.io/2016/07/16/JS%E9%97%AD%E5%8C%85/https://leonsux.github.io/2016/07/16/JS%E9%97%AD%E5%8C%85/闭包，虽然工作中用到的频率并不高，但是在面试中用到的频率倒不低，或许，闭包最大的一个功劳就是封装了jQuery吧 闭包 闭包是一个能读取其他函数内部变量的函数： 从这句话我们可以看出： 1. 闭包是一个函数 2. 这个函数能读取到其他函数内部的变量（局部变量） 3. 他能让读取到Sat, 16 Jul 2016 00:00:00 GMTJs闭包https://leonsux.github.io/2016/07/16/%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96jQuery%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E5%80%BC-2016/https://leonsux.github.io/2016/07/16/%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96jQuery%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E5%80%BC-2016/问题 标题可能有点绕，大致意思就是通过$()，把一个字符串str = "hello"转成了jQuery对象，如何获取到原字符串的值。为什么会有这种需求呢？因为今天封装一个处理字符串的jQuery方法时发现了这个问题。 方法里的this是jQuery对象，并没有原生的replaceSat, 16 Jul 2016 00:00:00 GMTJsjQueryhttps://leonsux.github.io/2016/05/16/JS%E4%B8%AD%E4%B8%8D%E5%86%99%E5%88%86%E5%8F%B7%E4%BC%9A/.-2016/https://leonsux.github.io/2016/05/16/JS%E4%B8%AD%E4%B8%8D%E5%86%99%E5%88%86%E5%8F%B7%E4%BC%9A/.-2016/问题 今天突然遇到了一个让我有点摸不着头脑的事儿，大致是这么个情况 按理说应该是理所当然的输出 fn1 和 fn2，但其实是在控制台报了错：Uncaught TypeError: fn1(...) is not a function，瞎说什么？fn1怎么会不是一个functionMon, 16 May 2016 00:00:00 GMTJshttps://leonsux.github.io/2016/04/12/%E5%8E%BB%E9%99%A4%E7%A9%BA%E7%99%BD%E6%96%87%E6%9C%AC%E8%8A%82%E7%82%B9(%E7%A9%BA%E7%99%BD%E7%AC%A6)-2016/https://leonsux.github.io/2016/04/12/%E5%8E%BB%E9%99%A4%E7%A9%BA%E7%99%BD%E6%96%87%E6%9C%AC%E8%8A%82%E7%82%B9(%E7%A9%BA%E7%99%BD%E7%AC%A6)-2016/什么事空白符 空白文本节点是指在编写代码时缩进所造成的换行和空格。 可以借助下面的小demo和图解理解下 处理 理解了空白符现在要了解为什么要去除他。 在开发中可能需要获取一个元素的所有子元素（包括纯文本），就比如： 现在要获取list里的所有元素，包括那句hello word!Tue, 12 Apr 2016 00:00:00 GMTJshttps://leonsux.github.io/2016/03/09/%E9%80%92%E5%BD%92%E9%82%A3%E4%BA%9B%E4%BA%8B-2017/https://leonsux.github.io/2016/03/09/%E9%80%92%E5%BD%92%E9%82%A3%E4%BA%9B%E4%BA%8B-2017/果然还是想递归能让脑子转起来 上一次写递归还是很久以前在学校写扫雷的时候用到的，因为需要遍历地图，当时自己写的时候用队列写的广度优先搜索（BFS），因为相对于比较费脑的递归，用队列好想的多了，但碍于指导老师的要求还是又用递归写了一遍。再往前的话，就是acm的时候做题用到的了，但也Wed, 09 Mar 2016 00:00:00 GMTJs