Blog
Blog copied to clipboard
ljianshu
关注基础知识，打造优质前端博客，公众号[前端工匠]的作者
## 前言 本文我们将会介绍 JS 实现异步的原理，并且了解了在浏览器和 Node 中 Event Loop 其实是不相同的。 **想阅读更多优质原创文章请猛戳[GitHub博客](https://github.com/ljianshu/Blog)** ## 一、线程与进程 ### 1.概念 我们经常说JS 是单线程执行的，指的是一个进程里只有一个主线程，那到底什么是线程？什么是进程？ 官方的说法是：**进程是 CPU资源分配的最小单位；线程是 CPU调度的最小单位**。这两句话并不好理解，我们先来看张图：  - 进程好比图中的工厂，有单独的专属自己的工厂资源。 - 线程好比图中的工人，多个工人在一个工厂中协作工作，工厂与工人是 1:n的关系。也就是说**一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线**； - 工厂的空间是工人们共享的，这象征**一个进程的内存空间是共享的，每个线程都可用这些共享内存**。 - 多个工厂之间独立存在。...
## 前言 8.10号凌晨，尤雨溪在微博平台官宣 Vue 3.2 版本正式发布：  此版本包含一系列重要的新功能与性能改进，但并不涉及任何重大变更。本文主要介绍一些相对重要 Vue3.2新特性，如需了解更多请查阅官方文档！ ## 新的 SFC 功能 关于单文件组件（SFC，即.vue 文件）的两项功能**已经由实验状态正式毕业，现提供稳定版本**： - `` 是一种编译时语法糖，能够极大改善在 SFC 中使用 Composition API 时的开发者体验。 - ` v-bind` 用于在 SFC `` 标签中启用组件状态驱动的动态...
浏览器存储
## 前言 随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑“WebApp”——它即开即用，用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。WebApp 优异的性能表现，有一部分原因要归功于浏览器存储技术的提升。cookie存储数据的功能已经很难满足开发所需，逐渐被Web Storage、IndexedDB所取代，本文将介绍这几种存储方式的差异和优缺点。 ## 一、cookie ### 1.cookie的来源 **cookie 的本职工作并非本地存储，而是“维持状态”**。因为HTTP协议是**无状态的**，HTTP协议自身不对请求和响应之间的通信状态进行保存，通俗来说，服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，于是就诞生了cookie。它就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取cookie中包含信息，借此维护用户跟服务器会话中的状态。 在刚才的购物场景中，当用户选购了第一项商品，服务器在向用户发送网页的同时，还发送了一段cookie，记录着那项商品的信息。当用户访问另一个页面，浏览器会把cookie发送给服务器，于是服务器知道他之前选购了什么。用户继续选购饮料，服务器就在原来那段Cookie里追加新的商品信息。结帐时，服务器读取发送来的cookie就行了。 ### 2.什么是cookie cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 **cookie是服务端生成，客户端进行维护和存储**，存储在内存或者磁盘中。通过cookie,可以让服务器知道请求是来源哪个客户端，就可以进行客户端状态的维护，比如登陆后刷新，请求头就会携带登陆时response header中的Set-Cookie,Web服务器接到请求时也能读出cookie的值，根据cookie值的内容就可以判断和恢复一些用户的信息状态。 简而言之，cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。 cookie 主要用于以下三个方面： * 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息） * 个性化设置（如用户自定义设置、主题等）...
前端模块化详解(完整版)
## 前言 在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理。 本文内容主要有理解模块化，为什么要模块化，模块化的优缺点以及模块化规范,并且介绍下开发中最流行的CommonJS, AMD, ES6、CMD规范。本文试图站在小白的角度，用通俗易懂的笔调介绍这些枯燥无味的概念，希望诸君阅读后，对模块化编程有个全新的认识和理解！ **建议下载本文源代码，自己动手敲一遍，请猛戳[GitHub个人博客(全集)](https://github.com/ljianshu/Blog)**  ## 一、模块化的理解 ### 1.什么是模块? * 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起 * 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信 ### 2.模块化的进化过程 * **全局function模式 : 将不同的功能封装成不同的全局函数** * 编码: 将不同的功能封装成不同的全局函数 * 问题: 污染全局命名空间,...
Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7. Commits See full diff in compare view [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter...
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot] avatar"){kind=avatar}
浅拷贝与深拷贝
## 前言 在 javascript 中有不同的方法来复制对象，如果你还不熟悉这门语言的话，复制对象时就会很容易掉进陷阱里，那么我们怎样才能正确地复制一个对象呢？ 读完本文，希望你能明白： - 什么是深/浅拷贝，他们跟赋值有何区别？ - 深/浅拷贝的实现方式有几种？ ## 浅拷贝与深拷贝 - 浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以**如果其中一个对象改变了这个地址，就会影响到另一个对象**。 - 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且**修改新对象不会影响原对象**。 ```javascript var a1 = {b: {c: {}}; var a2 = shallowClone(a1); // 浅拷贝方法...
Bumps [postcss](https://github.com/postcss/postcss) from 7.0.27 to 7.0.36. Release notes Sourced from postcss's releases. 7.0.36 Backport ReDoS vulnerabilities from PostCSS 8. 7.0.35 Add migration guide link to PostCSS 8 error text. 7.0.34...
## 前言 本文主要介绍日常项目开发过程中的一些技巧，不仅可以帮助提升工作效率，还能提高应用的性能。以下是我总结一些平时工作中的技巧。 ## minxin 让组件复用灵活化 Vue提供了minxin这种在组件内插入组件属性的方法，个人建议这货能少用就少用，但是有个场景则非常建议使用minxin：当某段代码重复出现在多个组件中，并且这个重复的代码块很大的时候，将其作为一个minxin常常能给后期的维护带来很大的方便。 比如我们在项目中封装一个列表功能，有下拉刷新，加载自动请求数据，上拉加载下一页数据等等，代码如下： ```js export default { data() { return { page: 1, limit: 10, busy: false, // 请求拦截，防止多次加载 finish: false, // 是否请求完成，用于页面展示效果 pageList: [],...
Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. Commits See full diff in compare view [](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter...
Bumps [dns-packet](https://github.com/mafintosh/dns-packet) from 1.3.1 to 1.3.4. Commits ebdf849 1.3.4 ac57872 move all allocUnsafes to allocs for easier maintenance c64c950 1.3.3 0598ba1 fix .. in encodingLength 010aedb 1.3.2 0d0d593 backport encodingLength...