blog
blog copied to clipboard
大前端技术为主,读书笔记、随笔、理财为辅,做个终身学习者。
![](https://upload-images.jianshu.io/upload_images/12890819-9bc4595a3e1e3bef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ![](https://upload-images.jianshu.io/upload_images/12890819-46da8ddba8d33614.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) > * 原文地址:[https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif) > * 原文作者:Lydia Hallie ## 前言 尽管 `Git` 是一款非常强大的工具。 我发现在使用 `Git` 时,在头脑里可视化地想象它会非常有用:当我执行一个特定命令时,这些分支会如何交互,又会怎样影响历史记录? 为什么当我在 `master` 上执行硬重启,`force push` 到原分支以及 `rimraf` 我们的 `.git` 文件夹时,我的同事哭了? 我觉得创建一些最常用且最有用的 `Git` 命令的可视化示例会是一个完美的用例! 下面我将介绍的很多命令都有可选参数——你可以使用这些参数来改变对应命令的行为。...
![](https://upload-images.jianshu.io/upload_images/12890819-0b1e4d3de134b398.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) > * 原文地址:[https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke](https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke) > * 原文作者:Lydia Hallie ## 原由 你是否运行过不按你预期运行的 js 代码 ? 比如:某个函数被随机的、不可预测时间的执行了,或者被延迟执行了。 这时,你需要从 ES6 中引入的一个非常酷的新特性: Promise 来处理你的问题。 为了深入理解 Promise ,我在某个不眠之夜,做了一些动画来演示 Promise 的运行,我多年来的好奇心终于得到实现。 对于 Promise ,您为什么要使用它,它在底层是如何工作的,以及我们如何以最现代的方式编写它呢? ## 介绍...
![](https://upload-images.jianshu.io/upload_images/12890819-1ccc3e34fbe2542c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了。 GitHub 博客地址: https://github.com/biaochenxuying/blog ## 环境搭建 ``` $ git pull https://github.com/vuejs/vue-next.git $ cd vue-next && yarn ``` 下载完成之后打开代码, 开启 sourceMap : - tsconfig.json 把...
![](https://upload-images.jianshu.io/upload_images/12890819-4d82b2c6d236cdeb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 因为最近在做 Node 相关的项目,涉及到版本号的处理,根据版本号大小做升级 js 处理的,而因为多加了一位数,导致线上的 js 不能升级。 所以只能重写一个支持任意位数的版本号对比方法。 顺便先来一个语义化版本号的扫盲吧。 ## 为什么需要语义化版本号? 在软件管理的领域里存在着被称作“依赖地狱”的死亡之谷,系统规模越大,加入的套件越多,你就越有可能在未来的某一天发现自己已深陷绝望之中。 在依赖高的系统中发布新版本套件可能很快会成为恶梦。 如果依赖关系过高,可能面临版本控制被锁死的风险(必须对每一个相依套件改版才能完成某次升级)。 而如果依赖关系过于松散,又将无法避免版本的混乱(假设兼容于未来的多个版本已超出了合理数量)。 当你专案的进展因为版本相依被锁死或版本混乱变得不够简便和可靠,就意味着你正处于依赖地狱之中。 作为这个问题的解决方案之一,就是用一组简单的规则及条件来约束版本号的配置和增长,也就是 `语义化版本号`。 ## 语义化版本号 一般语义化版本号通常定义是这样的: js 代码: ``` Major_Version_Number.Minor_Version_Number[.Revision_Number[.Build_Number]] 主版本号 .子版本号 [.修正版本号 [.编译版本号...
![](https://upload-images.jianshu.io/upload_images/12890819-3efe8dea94368cd5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 大家好,我是你们的 前端章鱼猫,一个不喜欢喵、又不喜欢吃鱼的超级猫 ~ 今天给大家带来的是 **在 GitHub 上如何精准搜索的神仙技巧**。 ![](https://upload-images.jianshu.io/upload_images/12890819-428220a865dcd2b7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 普通的搜索 相信一般人搜索项目时,都是直接搜索技术栈相关的项目。 高级一点的搜索,会根据 最匹配、最多 Star 来进行排序、选择相应的语言、选择仓库或者代码来进行筛选。 ![](https://upload-images.jianshu.io/upload_images/12890819-358be34642d35c5f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 但是 GitHub 的搜索功能只支持以上这些而已吗 ? No! 如果你只会用以上的功能,那你知道的仅仅是 GitHub 搜索的冰山一角! GitHub 的搜索是非常强大的!下面介绍更高级的搜索技巧。 ![](https://upload-images.jianshu.io/upload_images/12890819-3e6836282fb4bc59.gif?imageMogr2/auto-orient/strip) ## 搜索语法...
![](https://upload-images.jianshu.io/upload_images/12890819-527034962df50506.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 五一期间,花了 3 天时间,边学 Vue3 和 Vite2,边重构自己的项目,终于都用 Vue3 + TypeScript + Vite2 + Vuex4 + Vue-Router4 + element-plus 重构完啦! 终于完成一项心心念念的 2021 年度目标了 ✌️ 项目地址: > [https://github.com/biaochenxuying/blog-vue-typescript](https://github.com/biaochenxuying/blog-vue-typescript) ![](https://upload-images.jianshu.io/upload_images/12890819-047787eb1527d24e.gif?imageMogr2/auto-orient/strip) ## 效果 效果图:...
![](https://upload-images.jianshu.io/upload_images/12890819-2c5d63508fdfdf56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 尤大的 Vue3.0 已经发布有一阵子了,已经很成熟了。 而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了。 主要是要熟练一下 Vue3,好准备用 Vue3 重构一下自己的网站项目: [blog-vue-typescript](https://github.com/biaochenxuying/blog-vue-typescript) ,计划是过年期间会着手重构这个项目,年后会上线。 ![](https://upload-images.jianshu.io/upload_images/12890819-efe792f5593b195a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 1. 初化化项目 全局安装 vite-app ```js npm i -g vite-app ``` 创建项目 ```js...
![](https://upload-images.jianshu.io/upload_images/12890819-022b0432b40b7683.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 。 TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript 在 2018年 势头迅猛,可谓遍地开花。 Vue3.0 将使用 TS 重写,重写后的 Vue3.0 将更好的支持 TS。2019 年 TypeScript 将会更加普及,能够熟练掌握 TS,并使用 TS 开发过项目,将更加成为前端开发者的优势。 所以笔者就当然也要学这个必备技能,就以...
![](https://upload-images.jianshu.io/upload_images/12890819-2c794950de4d7524.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 在写本文时,本文提到的新的 JavaScript 提案功能已进入第 4 阶段,并且几乎肯定会包含在 ES2021 中。你已经可以开始在 [最新版本的浏览器,Node.js 和 Babel 中使用](https://kangax.github.io/compat-table/es2016plus/)。 *注意:ECMAScript 是 JavaScript 所基于的标准,由 TC39 委员会管理。ECMAScript 始终是一个不需要的名称,这会使一切都对初学者感到困惑。人们经常谈论 JavaScript 功能,但参考的是 ECMAScript 规范。* **更新特性** * [数字分隔符](https://github.com/tc39/proposal-numeric-separator)(`_`) * [逻辑分配](https://github.com/tc39/proposal-logical-assignment/)(`&&=`,`||=`,`??=`) * [引用不足](https://github.com/tc39/proposal-weakrefs)(`WeakRef`和`FinalizationRegistry`)...
![](https://upload-images.jianshu.io/upload_images/12890819-36455378822c5eac.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 前言 小汪最近在看【WebKit 技术内幕】一书,说实话,这本书写的太官方了,不通俗易懂。 但是看完书,对浏览器内核的 WebKit 有了进一步的了解,所以从浏览器内核出发,写这篇文章以记录学到的知识,以加深对 WebKit 的理解。 相信很多开发人员在面试时都遇到这个问题,这道题可说是非常非常难的,因为深度可以非常深,广度可以非常广。这题是非常能考查一个前端开发人员的知识体系的题目。 写这篇文章的时候,边写边觉得难 !!! # 1. 大致过程 当你这样子回答的时候: - 用户输入 url 地址,浏览器查询 DNS 查找对应的请求 IP 地址 - 建立 TCP 连接 -...