忘忧杂货铺

How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code Javascript工作原理：如何在 V8 引擎中书写最优代码的 5 条小技巧 Couple of weeks ago we started a series aimed at digging deeper into JavaScript and how it actually works: we thought that by knowing the building blocks of JavaScript and how they come to play together you’ll be able to write better code and apps. 几周前，我们开始了旨在更深入地研究JavaScript及其工作原理的一系列文章：我们认为，通过了解JavaScript的组成部分以及它们如何一起发挥作用，你将能够编写更好的代码和应用。 The first post of the series foc ...

AST实现函数自动包裹try/catch背景看到一篇关于AST的文章，关于如何通过AST自动给函数包裹try/cache，实现错误的自动捕获上报。感觉真的好玩，以前对AST了解的也不多，于是参考该文章自己实现了一下，并且发npm包，在实际项目中使用并验证。写此文记一下。 文章主要参考哈罗出行-杭州团队：AST实现函数错误的自动上报、Alibaba F2E团队：用JS解释JS！详解AST及其应用，还查阅babel官方网站的一下API。 在此对这些优秀的FE团队表示感谢。 真是一个伟大的时代。 下面是正文。 实现效果开发环境： 123var fn = function() { console.log('hello, world');} 线上环境 1234567var fn = function() {+ try { console.log('hello, world');+ } catch(error) {+ console.log(`${ ...

漫话：如何给女朋友解释为什么计算机中 0.2 + 0.1 不等于 0.3 ？背景关于在计算机中 0.1 + 0.2 为什么不等于 0.3这个问题，以前确实很好奇。但是由于一些不可抗力(懒)一直没有去深挖下去。近日，偶然发现一篇文章漫话：如何给女朋友解释为什么计算机中 0.2 + 0.1 不等于 0.3 ？,通过漫画的形式对这个问题做了解释，醍醐灌顶，遂转载至博客。对其作者表示感谢。 下面时正文。 正文 为什么当我们使用电脑浏览器计算0.2+0.1的时候，解决却是0.30000000000000004，而0.1+0.6的结果却是0.7呢？ 这个问题其实一直是一个经典的问题，甚至有一个网站的域名就是https://0.30000000000000004.com/ ，主要就是解释这个问题的。 在这个网站中，列举了各种编程语言中计算0.2+0.1的结果，摘选几个如下： 可以看到，在各种语言中，计算0.2+0.1的结果都出奇的一致，那就是这个神奇的0.30000000000000004。 其实，当我们使用浏览器的控制台（F12）进行计算的时候，用到的就是JavaScript语言进行计算的，所以 ...

百度小程序——基础原理篇背景出于兴趣和业务需要的双重要求，开始学习一下百度智能小程序的开发。本文侧重原生百度小程序的学习，后续会涉及到小程序框架okam的学习。 简介智能小程序，是百度提供的一种技术解决方案。开发者基于此开发出来的服务，在各类宿主环境（手机 App、车载系统、IOT 设备等）中，可做到用户无感知安装过程即点即用。 小程序使用了双线程模型,包括逻辑层和渲染层。逻辑层作为一个单独的线程执行js代码，控制小程序数据的生成和处理；渲染层使用WebView线程，处理页面的渲染和用户的事件交互行为。 基本原理概览小程序开发包括全局配置文件、页面配置文件。开发者可通过app.json和app.js文件对小程序进行全局配置；通过.css、.js、.json和.swan文件进行页面配置。具体结构如下： 123456789101112131415├── app.js├── app.json├── app.css├── project.swan.json└── pages └── index ├── index.swan ├── index.css ...

sass学习记录前言之前一直使用的less，也整理过一篇关于less内置函数的文章，现在工作原因，需要了解一下sass。此篇文章记录一下学习过程，此篇为基础入门篇，后续会根据文档深入学习。 使用变量sass使用$符号来标识变量。 变量的声明和引用12345678910$highlight-clor: #F90;//声明变量.selected { border: 1px solid $highlight-clor;//引用变量}//编译后.selected { border: 1px solid #F90;} 在声明变量时，变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这相当有用。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量： 1234567891011$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected { border: $highlight-border ...

线程安全前言前一段时间学习了一下arrayBuffer,里面在谈及共享数组缓冲区(shared array buffers)时，提出了Atomics API，其是为了解决多个线程同时访问内存有风险这一问题。Atomics API 可以保证 SharedArrayBuffer 上的 JavaScript 操作是线程安全的。 这里的线程安全引起了我的兴趣，于是在网上查找了资料，发现一篇比较不错的文章。于是，转载到自己的博客，方便以后回顾。在此对其作者表示感谢。 下面为文章正文。 不是线程的安全面试官问：“什么是线程安全”，如果你不能很好的回答，那就请往下看吧。 论语中有句话叫“学而优则仕”，相信很多人都觉得是“学习好了可以做官”。然而，这样理解却是错的。切记望文生义。 同理，“线程安全”也不是指线程的安全，而是指内存的安全。为什么如此说呢？这和操作系统有关。 目前主流操作系统都是多任务的，即多个进程同时运行。为了保证安全，每个进程只能访问分配给自己的内存空间，而不能访问别的进程的，这是由操作系统保障的。 在每个进程的内存空间中都会有一块特殊的公共区域，通常称为堆（内存）。进程内的所有线程都 ...

TypeScript学习记录(一)前言前几天学习了一下Vue3的组合式API，发现Vue3对TypeScript的支持真的好，就是丝滑~。之前对于TS或多或少有了一些了解，今天做个整理。 环境搭建 安装typescript 1npm install -g typescript 可以通过 tsc -v 判断是否安装成功 tsc就是typescript compiler(编译器)。通过tsc xxx.ts就会将ts文件编译为js文件，至于是哪个版本的文件可以在tsconfig.json文件中进行配置。默认是ES3。 生产配置文件(非必需) 1tsc --init 执行上面的命令:point_up_2:会自动生成tsconfig.json文件。 生成的tsconfig.json文件默认如下 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970{ "c ...

Vue3 one piece前言Vue3发布有一段时间啦，也一直在关注Vue3带来的新特性，也在看不少业界大佬分享的一些文章。时逢元旦，正所谓“新年新气象”，新的一年，我也决定系统的学习一下新版本的Vue——Vue3。本文打算主要学习一下Vue3的主要的新特性—— Composition API。 讲真的，我超喜欢one piece这个版本名字。 初始化项目 安装vue-cli 123npm install -g @vue/cli# ORyarn global add @vue/cli 创建项目 1vue create vue3-test 配置如下 setupsetup函数是一个新的组件选项，作为在组件内使用 Composition API 的入口点。 所谓组件选项即 诸如：data, methods, directives, watch, computed, mounted, props, name, filters(3.0已删除)等等~~ 调用时机 创建组件实例，然后初始化props，紧接着就调用setup函数。从生命周期钩子的视角来看，它会在befor ...

浅析ArrayBuffer对象(上)前言ArrayBuffer对象、TypedArray视图和DataView视图是Javascript操作二进制数据的一个接口。它们都以数组的语法处理二进制数据，所以统称为二进制数组。它很像C语言的数组，允许开发者以数组下标的形式直接操作内存。 二进制数组由3类对象组成： ArrayBuffer对象：代表内存中的一段二进制数据，可以通过“视图”进行操作。“视图”部署了数组借口，这意味着，可以用数组的方法操作内存。 TypedArray视图：共包含9种类型的视图。 DataView视图：可以自定义符复合格式的视图，比如第一个字节是Uint8(无符号8位整数)、第二个和第三个字节是Int16(16位整数)、第四个字节是Float32(32位浮点数)等，还可以自定义字节序。 二进制数组并不是真正的数组，而是类似数组的对象。 TypedArray视图支持的数据类型一共9种(DataView视图支持除Uint8C以外的其他8种), 如下表所示。 数据类型 字节长度 含义 对应的C语言类型 Int8 1 8位带符号整数 signed cha ...

单行省略和多行省略 转载自可能是最全的 “文本溢出截断省略” 方案合集。对其内容进行了学习验证和修改(JS实现多行省略部分)。对文章作者政采云前端团队表示感谢。 前言在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。 单行省略核心CSS语句 overflow: hidden; (文字超出限定宽度，则隐藏超出的内容) text-overflow: ellipsis; (规定当文本溢出时，显示省略符号来代表被修剪的文本) white-space: nowrap; (设置文字在一行显示，不能换行) 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 省略号显示的位置刚好 短板 只支持单行文本截断 使用场景 适用于单行文本溢出显示省略号的情况 DEMO: 1234567891011121 ...