Giter VIP home page Giter VIP logo

exposir.github.io's Introduction

Eternity is the most romantic

Github Notion Twitter

我是一个前端工程师,我用过很多框架和工具写文章、搭博客。我同样看过很多其他人的博客,他们优秀的文章的令人惊胆,有些绝妙的设计的让人过目不忘。可惜的是有些博客已经不再更新,最后一篇文章终止在几年前,最让我遗憾的还是有些博客是已无法打开。所以我选择用 Github 作为我的博客,我希望在可见的未来它可以一直留在互联网上。 Eternity is the most romantic 2022-9-20

Blog

2023

2022

Book

exposir.github.io's People

Stargazers

 avatar  avatar

Watchers

 avatar

exposir.github.io's Issues

《Javascript 悟道》读书笔记

基本原则

ppt 中会包含大量的只有少数人知道的奇闻趣事
因为 js 很多地方的确有点奇怪,但是可能自己对 js 不是很精通,可能觉得 js 这么设计是很有道理的,在老道的吐槽下,可以达到对 js 祛魅的效果
本位很多的观点都是十分主观,我也不进行评论,还原作者的观点,以作者为准。
最后本次分享主要是达到一个抛砖引玉的效果,这本书和一般的技术书还是很不一样的,大家对这本书感兴趣可以去阅读一下。

命名

因为 JavaScript 对于变量名的长度没有限制,所以不要吝惜你的起名才华。我希望你在命名的时候尽可能描述清楚被赋名者的含义,而不要使用各种隐晦的缩写。

JavaScript 的命名能以下划线(_)或者美元符号($)开头和结尾,还能以数字结尾,但我认为你不该这么做。JavaScript 允许我们做很多本不该做的事情。这些命名习惯应该留给代码生成器或者宏处理器,而人类应该去做人类该做的事情。

因为 JavaScript 没有私有属性,所以通常只能将对应的公有属性名或者全局变量名加上下划线前缀或下划线后缀来从语义上表示其为私有。

大多数语言命名时使用空格

FORTRAN 首先打破了桎梏,允许在命名时使用空格。然而,后来包括 JavaScript 在内的大多数编程语言没有继承这个优良传统,反而学习了它的一些糟粕。例如,使用等号(=)表示赋值,用圆括号(())而不是花括号({})包裹 if 语句的条件表达式。

不过在出现这么一门语言之前,我还是推荐你使用下划线分隔变量名中的多个单词。这是因为,万一哪天真有更好的编程语言出现,这种命名法可以让你最便捷地将代码迁移至下一门语言。

JavaScript 中的所有名字都应该以小写字母开头,这一切都拜 JavaScript 中的 new 运算符所赐。

所有的构造函数都应该以大写字母开头,而其他任何名字都应该以小写字母开头。

保留字

存空间有限的另一个遗留产物,因为保留字的设计可以给编译器节约少许字节。
我们现在不必再受这些事情的困扰了。可惜这几十年来,人们的思维已经固化。对于现代程序员来说,保留字的设计真的是糟粕。扪心自问,你能否记住所有的保留字?
还有一种糟心的情况是,你在起变量名的时候,尽管有个单词可以完美地阐释该变量的意义,但很不巧,它是一个你从来不用的保留字,甚至是一个还没有被实现的预保留字。
此外,保留字对于现代编程语言的设计者来说也不是好东西。脆弱的保留字策略会使我们不能干净利落地为一门流行语言添加新特性,给我们添堵。真希望能有一门强硬的新语言出现,让我们不用再为“五斗保留字”折腰。

数值

JavaScript 只有一种数值类型这件事经常被人们诟病,但我反而认为这是 JavaScript 最成功的设计之一:这个设计让程序员不必浪费时间在几种相似的数据类型之间做选择,毕竟有时候花了时间还会选错;能避免那些由于数据类型之间的转换而造成的错误;甚至还可以避免整数类型的溢出错误。

JavaScript 的“整数”可比 Java 的整数可靠多了,因为它们不会溢出。

作为一门编程语言,Java 的数值运算系统在算错的时候甚至连 Warning 都不会报。int 类型总出错,还怎么指望通过它来避免错误呢?

零是独一无二的。理论上来说,在一个数值系统中只应存在一个零。然而事不遂人愿

在 IEEE754 标准中有两个零:0 和-0。你知道 JavaScript 为帮你抹平 0 与-0 的不同做了多大努力吗?它让我们几乎可以忽略-0 的存在。不过仍然需要注意以下几种情况:

NaN

NaN 是 Not a Number 的缩写。你说怪不怪?虽然它的含义是“不是一个数”,但是 typeof 对它的结果又告诉大家 NaN 是一个数("number")。

最让人困惑的是,NaN 居然不等于它自己!这是 IEEE 754 的糟粕,JavaScript 却将其照搬了过来,没有做任何处理。

因此,当我们要判断一个值是不是 NaN 时,应当使用 Number.isNaN(value)。Number.isFinite(value)函数会在值为 NaN、Infinity 或者-Infinity 的时候返回 false。

对于 NaN 而言,唯一有意义的运算就是 Number.isNaN(NaN)。除此之外,不要在任何场景用 NaN。

布尔

布尔(boolean)类型是以英国数学家乔治·布尔(George Boole)命名的,他发明了代数逻辑系统。克劳德·香农将布尔乔治·布尔的系统应用在了数字电路的设计上,所以我们称计算机电路为逻辑电路。

<、<=、>和>=的结果都是准确的。不过在其他情况下,这些比较大多是无意义的。JavaScript 并不会阻止你比较不同的类型,这些情况需要你自行规避。所以要尽可能避免在不同类型之间进行比较。

答应我,永远不要用这两个运算符;答应我,务必使用===和!==。

剩下的值就全都是幻真的了,比如空对象、空数组,甚至"false"和"0"这样看起来像幻假的字符串。

这些幻假的值虽然表面上看起来像 false,但实际上大多是装出来的。幻真的值也一样。这些犯蠢的类型是设计上的缺陷,但这并不能全怪 JavaScript。JavaScript 沿用的是 C 语言的习惯。

C 语言程序员有一个流派,就是利用隐式类型转换“特性”让条件判断尽可能简洁。

理论上,一个条件判断的结果只应为 true 或 false,其余的值都应该在编译时就抛错。然而 JavaScript 并非如此,它的条件表达式可以写得如 C 语言般简洁。当条件判断语句意外地传入了错误类型的值时,JavaScript 不会报错。这就很可能让程序进入另一个本不该进入的条件分支。Java 就不一样,它要求条件判断位中的值必须是布尔类型,这样可以避免很多潜在的错误。唉,真希望 JavaScript 也是这样的。

虽然 JavaScript 并没有学习这些好榜样,但我还是希望你能假装它已经做到了,然后在条件判断位中始终使用布尔类型。如果我们在编码的时候严于律己,就能写出更好的程序。

数组

数组真是最伟大的数据结构。

JavaScript 的第一个版本并没有将数组设计进去,但由于 JavaScript 的对象实在太强大了,以至于几乎没人发现这个纰漏。如果不考虑性能,数组能做的事,对象基本上都能做。

其实,JavaScript 的数组几乎就是对象,它们仅有四处不同。

  • 数组有一个神奇的 length 属性。该属性并不是指数组中元素的数量,而是指数组元素的最高序数加 1。
  • 数组对象都继承自 Array.prototype,该原型比 Object.prototype 多了一些更实用的函数。
  • 数组与对象的写法不同
  • 虽然 JavaScript 眼中的数组和对象几乎一样,但 JSON 眼中的它们很不一样。

JavaScript 自身也对数组感到迷惑。如果对数组进行 typeof 操作,返回将是"object",这显然是有问题的。

自古以来,人们都习惯用 1 来代表计数的开始。从 20 世纪 60 年代中期开始,一小股有影响力的程序员认为,计数应当从 0 开始。到了今天,几乎所有程序员都习惯了这种以 0 开始的计数法。不过,其他人(包括大多数数学家)还是习惯以 1 开始。数学家通常将原点标记为 0,但还是将有序集合的第一个元素标为 1。至于他们为什么这么做,至今仍是个谜。

有一个论点是从 0 开始可以提高效率,但并没有什么有利的证据;还有一个主张其正确性的论点是从 0 开始可以减少“差一错误”(off-by-wun)1,但人们对此也表示怀疑。也许有一天我们能找到有力的证据来证明,对于程序员来说从 0 开始更好。

差一错误是在计数时由于边界条件判断失误导致结果多了一或少了一的错误,通常指 计算机编程循环 多了一次或者少了一次的程序错误,属于 [逻辑错误]的一种。

indexOf

如果遍历了整个数组还没有匹配的值,则返回-1。我个人认为这个设计有错误,因为-1 也是一个数,与其他返回的序号都是数值类型。

JavaScript 还有很多类似的设计错误,这些底型在一开始设计的时候就有问题。

forEach 和 find 方法都有提前退出的能力(every 和 some 就是 forEach 的可提前退出形态)。map、reduce 和 filter 则没有这个能力。

reduce 方法有逆序版本 reduceRight,而可怜的 forEach、map、filter 和 find 都没有这种令人羡慕的逆序版本。

我甚至怀疑正是这些缺憾才导致 for 语句一直没有被废除。

对象

JavaScript 为“对象”一词赋予了新的含义。在 JavaScript 中,除了两种底型之外(null 和 undefined),万物皆对象。

在其他语言中,这类数据结构通常被称为哈希表(hashtable)、映射表(map)、记录(record)、结构体(struct)、关联数组(associative array)或字典(dictionary)

我建议不要在对象中存储 undefined。尽管 JavaScript 允许我们在对象中存储这个值,并且会正确返回 undefined 值,但是当对象中不存在某个属性的时候,JavaScript 返回的也是 undefined。这会产生二义性。我个人认为,为某个属性赋值 undefined 意在删除该属性,然而 JavaScript 并没有这样做。要删除某个属性,正确的做法是使用 delete 运算符。

JavaScript 的一个设计错误是对象上的属性名必须为字符串。有时候,我们的确需要用一个对象或者数组作为键名。很可惜的是,JavaScript 中的对象会在这种情况下做一件蠢事——直接把要作为键名的值通过 toString 方法进行转换。我们之前也看到了,对象的 toString 方法返回的完全是糟粕。

对于这种情况,JavaScript 也算有自知之明,为我们准备了备用方案——WeakMap。这类对象的键名是对象,不能是字符串,并且它的接口也与普通的对象完全不同

WeakMap 并不允许我们检视对象中的内容。除非拥有对应的键名,否则无法访问其中的内容。WeakMap 与 JavaScript 的垃圾回收机制可以融洽相处。如果 WeakMap 中的一个键名在外没有了任何副本,那么这个键名所对应的属性会被自动删除。这可以防止一些潜在的内存泄漏情况。

一种只允许字符串作为键名,而另一种居然只允许对象作为键名。就不能好好地设计出一种既支持字符串又支持对象作为键名的类型吗?

WeakMap 这个名字起得就够差劲了,Map 更不知所云。它与数组的 map 方法没有半点关系,更与绘制地图毫不沾边。所以我一直不推崇 Map,但是 WeakMap 和数组的 map 方法则是吾之所爱。

JavaScript 还有一种叫 Symbol 的类型,具有 WeakMap 的一些能力。但我不推荐使用 Symbol,因为它真的很多余。我个人的习惯就是不使用各种多余的功能,以此来简化操作。

// 字符串的全等运算非常有用。这也是我认为不需要 Symbol 的原因之一,毕竟内容相同的字符串会被认为是同一个对象。不过在 Java 之类的语言中,字符串是不能全等的。

底型

底型是用于指示递归数据结构结尾的特殊值,也可用于表示值不存在。在一般的编程语言中,常以 nil、none、nothing 或者 null 表示。

JavaScript 有两种底型:null 和 undefined。其实 NaN 也可以算作一种底型,主要用于表示不存在的数值。不过我认为过多底型属于语言设计上的失误。

在 JavaScript 中,可以说只有 null 和 undefined 不是对象。如果基于它们去访问一些属性,就会触发异常。

从一方面看,null 和 undefined 是非常类似的;但从另外一些方面来看,它们的行为又不一样——互有交集,却又无法完全相互替代。
有时候,它们的表象一致,但是实际表现不同,这就很容易造成混乱。我们经常不得不花时间决定当下到底该使用哪个底型,这些虚无缥缈的理论又会导致更多混乱,而混乱就是各种 bug 之源。如果只保留两者之一,程序将更美好。我们虽然不可能改变 JavaScript 这门编程语言来只留一种底值,但是可以从自身做起,只用一种 2。我个人建议淘汰 null,只用 undefined。

因为 JavaScript 自身也在用 undefined。如果你用 let 或者 var 声明一个变量却没有初始化它,这个值就是 undefined。这其实很神奇,你定义了一个未定义(undefined)的变量。如果你调用一个函数,却没往其中传入足量的参数,那么那些没有传参数的值就是 undefined;如果你访问一个对象中不存在的属性,得到的也是 undefined;数组也一样,如果你访问其中不存在的元素,得到的还是 undefined。

只有在创建空对象的时候,我才会使用 null——Object.create(null)。不过我也是不得已而为之,因为 Object.create()或者 Object.create(undefined)会触发异常,这是语言规范的设计错误造成的。

type of null === ‘’object 这就有可能导致一些程序逻辑上的错误。这也是我认为应该避免使用 null 的原因之一。

this

Self 语言是 Smalltalk 语言的一种方言,用原型替代了类。一个对象可以直接继承自另一个对象。原来的模型由于高耦合性而使扩展性变得脆弱和膨胀,而 Self 语言的原型特性是一种出色的简化。原型模型相比之下更轻巧、更具表现力。
JavaScript 实现了原型模型的一个怪异变体。

2007 年,多个研究性项目尝试开发出 JavaScript 的安全子集,而其中最大的问题就是 this 的管理。在方法调用中,this 会被绑定到对应的对象上。这种行为有时候是好的,但在其作为函数被调用时,this 就会被绑定到全局对象上,这就是一件糟糕的事了。我建议的方案是完全取消 this,因为我认为它既没用又会造成问题。如果将 this 从 JavaScript 中移除,JavaScript 仍是一门图灵完备的语言。所以,我自身已经开始了去 this 化的编程方式,这样就可以免受其害了。自从这么做之后,我发现用 JavaScript 编程并没有变难,反而变简单了,写出来的程序也更轻巧、优雅。因此我建议大家遵循去 this 化的原则。你会发现这是一个明智的决定,生活也会因此变得更加阳光明媚。我并不是要夺走你的 this,只是想让你成为一个无忧无虑的程序员。用“类”写代码的程序员终将走向一片凄迷的“代码坟场”。

this 真是个坏家伙。

写在最后

这些改进的最大受益者就是现在可以用更少精力来完成更多、更好工作的程序员。这些改进的最大对手同样是这些程序员,他们通常以怀疑和敌对的态度去迎接这些新范式。他们利用自己的知识和经验来提出令人信服的论点,然而事后再看,这些论点全是错的。他们待在旧范式的舒适区,不愿意接受新范式。大家都很难说出新范式和糟糕**之间的区别。

以上每个转变都花了 20 多年才完成。函数式编程花的时间甚至翻了一番。所花时间如此之长,仅仅是因为我们的惯性思维作怪。新范式必须在老一代程序员退休或者去世后才有出头之日。

普朗克在物理学中观测到了类似的现象:葬礼越多,科学越进步。

互联网常用名词

  • 服务器
    • Linux
    • CentOS
    • Ubuntu
    • Debian
    • Unix shell
    • Z shell
    • Bash
    • whoami
  • 数据库
    • MySQL
    • MongoDB
    • 关系数据库
    • NoSQL
    • Redis
    • Ruby
    • Nginx
  • 网络
    • 反向代理
    • CDN 内容分发网络
    • HTTP 超文本传输协议
    • HTTPS 超文本传输安全协议
    • IPS 互联网协议套件
    • TCP 传输控制协议
    • UDP 用户数据报协议
    • DNS 域名系统
    • TLS/SSL
    • URI 统一资源标志符
    • gRPC
    • Wget
    • cURL
    • ping
    • HTTP 压缩
    • gzip
    • Secure Shell
    • FTP文件传输协议
  • 前端
    • CommonJS
    • ECMAScript
    • Ecma 国际
    • W3C 万维网联盟
    • TC39
    • Cookie
    • Session 对谈
    • CORS 跨域资源共享
    • JSONP
    • 同源策略
    • XML
    • SSG static site generator
    • SSRserve side render
  • 其他
    • JSON
    • Homebrew
    • WebP
    • PNG
    • GIF
    • JPEG
    • Base64
    • JIT 即时编译
    • Unicode
    • UTF-8
    • ASCII
    • Dos 拒绝服务攻击
    • Docker
    • Kubernetesk8s
    • OSS 对象储存
    • SaaS 软件即服务
    • LaaS 基础设施即服务
    • PaaS 平台即服务

徒步游记之香巴拉

徒步游记之香巴拉

May 2, 2022

什么是香巴拉?

即香山至八大处,详情见链接:

香八拉_百度百科

北京户外最经典的徒步路线--香八拉

我的行程

先去公司取了一下行李,园区的绿化还是很不错的。带了一袋牛肉干,一根火腿肠,一个士力架,两瓶水一瓶饮料。

image

image

打车到 10 号线知春路地铁站,然后乘坐十号线西郊线到达香山站,然后步行到此次徒步的起点,香山邮局

image

从香山邮局向好汉坡方向行进,中途会途径一个村庄。

image

image

此时北京正被疫情的阴霾笼罩,正式进入香山需要申请防火码,然后检查 48 小时内核酸报告并扫描登记***。

image

好汉坡方向前进。

image

image

image

开始攀爬好汉坡,路程不算很长,但对体力消耗还是很大的。

image

image

image

image

爬上好汉坡后有一个可供休息补给的零食铺,我买了个一根烤肠和一瓶零度可乐。

image

此时有两个线路可供选择,一个是向北走,从植物园旁下山,路途一小时左右。另一个是向南走,即向八大处方向,时间不好估计。我继续了本次徒步的目标,即向南走。

image

image

image

北马场

image

到达本次徒步的关键节点,水库

image

八大处公园入口处,发现一只逗狗。

image

image

穿过八大处,向出口进发。

image

记录一个可供野餐的好草坪。

image

无名英雄广场。

image

到达本次徒步的重点,西山国家森林公园的入口。

image

全部行程

image

image

总结

第一次尝试户外徒步,也是一次入门级的徒步。不断在上山和下山中前进,经常处于前后无人,对出口迷茫,但没有退路的状态,即为什么要爬山?因为山就在哪里。如何前进?路就在脚下。

对体力的消耗还是很大的,在别无选择的前进中,激发出体能的潜力。总体的感觉还是和打代码有些相似,山重水复疑无路,柳暗花明又一村。发现适当的解决方案时会有些许的成就感。

最后

去盒马和久久丫买了点好吃的。。。

image

React 框架选择指北

React 是当前非常流行的用于构建用户界面的 JavaScript 库, 它不仅可以为应用的每一个状态设计出简洁的视图。而且,当数据变动时,React 还能高效更新并渲染合适的组件。

然而要想开发一个完整的前端应用,仅仅使用 React 是远远不够的,我们需要以下各种工具的帮助如:

  • 本地环境开发
  • 生产环境打包
  • opimizations
  • 模块按需加载和打包
  • 将最新的 ES 语法或 TS 转译成 ES5
  • 热更新

手动去实现以上功能是繁琐且没必要的,目前 React 有三个较为流行的框架可供我们选择即:Create React App、Gatsby、Next.js,下面我将逐一对比他们之间的优劣和不同。

https://user-images.githubusercontent.com/33340988/127197921-1e3393d7-bb63-431e-8060-dc24a1781a0f.jpg

Create React App (CRA)

Create React App 是 FaceBook 的 React 团队官方出的一个构建 React 单页面应用的脚手架工具。它本身集成了 Webpack,并配置了一系列内置的 loader 和默认的 npm 的脚本,可以很轻松的实现零配置就可以快速开发 React 的应用。

它适用于以下类型的网站:

  • 管理后台
  • 仪表盘
  • 数据分析
  • form 表单
  • 内网应用

CRA 的优势 ✅ :

  • 官方出品
  • 零配置
  • CSR(即页面完全在浏览器渲染),简单易于学习
  • 服务器和客户的代码完全解耦
  • 易于部署,因为打包后的文件是静态文件

CRA 的劣势 ⛔️:

  • 打包后的代码可能会臃肿
  • 需要手动配置路由、状态管理、代码分割、样式文件等
  • 不能用于需要 SEO 检索的网站
  • 首屏效果不好,因为 CSR 页面在初始加载时比较慢,

需要注意的是,相比于 Gatsby 和 Next ,CRA 并不是一个框架,正如它官网所描述的:

Create React App 是一个官方支持的创建 React 单页应用程序的方法。

Gatsby

Gatsby 不仅仅是一个静态网站生成器,它更是一个渐进式 Web 应用生成器💪。它的使用背景与 CRA 完全不同。通过 Gatsby 建立的网站,很容易搜索引擎检索到,而且页面的渲染性能非常好。完美支持个人网站、博客、文档网站(PS: React 的官方文档使用的就是 Gatsby),甚至是电子商务网站。而且 Gatsby 可以在构建时通过 GraphQL 获取数据。

可以在 官方展示页面 上查看有哪些页面是用 Gatsby 构建的。

Gatsby 的优势 ✅ :

  • 页面渲染性能优秀
  • 对 SEO 友好
  • 对打包文件进行了优化
  • 轻松部署到 CDN(基于出色的扩展功能)
  • 可以创建一个具有离线功能的 PWA 应用
  • 丰富的插件系统

Gatsby 的劣势 ⛔️:

  • 使用起来相较于 CRA 更为复杂
  • 需要了解 GraphQL 和 Node.Js 的相关知识
  • 配置繁重
  • 构建时间会随着内容的增加而变长
  • 有些功能可能需要付费

值得强调的是,丰富的插件系统也是选择 Gatsby 的一个原因,比如 Gatsby 提供许多博客主题插件,其他例如谷歌分析、图片压缩、预加载插件等等。

Next.js

Next.js 适用于高动态或者面向用户的网页,这些页面需要优秀的 SEO,并且可能每分每秒都在变化。

举个例子:今日头条的首页会根据每个人不同的喜好来推送不同的信息流。如果使用 Gatsby 或 Create React App,会首先渲染一个空页面,然后通过 HTTP 调用来获取信息流的新闻数据。然后有了 Next ,可以在服务器端进行数据的获取,并返回完整的页面。

可以在 Next.js 的展示页面 查看有哪些应用是用 Next.js 构建的。

Next.js 的优势 ✅ :

  • 支持服务器端预渲染
  • 对 SEO 友好
  • 零配置
  • 适用于面向用户的高动态内容
  • 还可以像 Gatsby 一样做 SSG ( Server Side Generation)

Next.js 的劣势 ⛔️:

  • 使用起来比 CRA 更复杂
  • SSR 增加了额外的复杂程度
  • 扩展取依赖于服务器
  • 没有丰富的插件生态系统
  • 有些功能可能需要付费

总结

我们需要分析我们想要构建什么类型的网站,以便在 CRA、Gatsby 或 Next.js 之间做出正确的选择,因为他们之间差距很大,适用于不同的场景。

如果我们对项目的需求有足够的了解,在这三者之间挑选就很容易多了。

原文链接:

When to pick Gatsby, Next.Js or Create React App

《他改变了**:***传》书摘

简介

《他改变了**:***传》(英语:The Man Who Changed China: The Life and Legacy of Jiang Zemin)是一部有关**第三代最高领导人、前****总书记***的传记,作者为罗伯特·劳伦斯·库恩,于 2005 年以英语和中文两种语言出版,出版后产生了广泛的影响和争议。这本书由兰登书屋集团在全球除**以外的地区出版发行。在**,它被上海世纪出版集团以《他改变了**:***传》的标题出版。

书摘

1946 年 4 月,江加人了共产觉,此时距他 20 岁生日还有 4 个月。

  • 辉煌的起点

在以后的岁月里,厉恩虞成为南京中学的校长;“文化大革命”期间他受尽折磨直到 1975 年才获得**。1978 年,他死于癌症。非常令人遗憾的是,他没能亲眼看到他曾经向之传授共产主义理论的年轻人最终成为世界上最大的共产党的总书记,1998 年 7 月,厉逝世 20 周年之际,江主席专门撰写了一篇文章《忆厉恩虞同志》。

  • 优秀耀眼却命运如此不同

在整个 1947 年春季,江参加了一个接一个的抗议活动。从 4 月到 6 月,反内战的集会接连不断。5 月,全国部分地区又爆发了多次反饥饿的示威这场持续了一个月的名为“反饥饿运动”的系列政治行动揭开了纪念五四运动 28 周年的序幕,并把***这代抗议学生和他们著名的前辈联系在了一起。

1919 -> 1947 -> 1966 -> 1996 ->2026 -> 2060
1919 五四运动
1947 抗日胜利
1966 **开始
1996 香港回归
2026 复兴之路
2060 ...

一天,一个工人要***修理一台坏了的马达。“我大吃一惊,”江在 50 年后回忆道,他的感受仍然十分新鲜,“我根本不知道该如何着手。不管怎么说,我是个大学生。但我学过的微积分、物理和工程学课程却没有一门教过我如何处理这样的问题。“从此以后,***必须成为“修理东西”的行家

  • 真实的社会与大学之间有很大的差距

国民觉后来轰炸了上海的发电厂。江亲手启动了工厂的备用发电机,以防止厂里的冰激凌融化变质。对解放事业的这一贡献使他终生感到自豪。

  • 为解放工作做过真正的贡献

在被接管之后,工厂成为益民公司的一部分,并改名为“上海益民食品一厂”。整个公司都隶属于华东工业部。1949 年 9 月的一天,汪道涵(华东工业部部长一位崭露头角的党的领导人)来工厂视察,在视察中,他看到了一家陈旧但士分整洁的乳品厂,到处散发着新鲜冰激凌的香味。此外,更重要的是,他发现了一个很有潜力的年轻人。
“***充满了活力,”回忆起他们初次见面的情景,汪说道,“他是党员,而且给人一种值得信赖的感觉。我觉得他前途无量。”

  • 命运转折

江始终对自己在葛被免职一事中所起的作用感到于心不安。“几十年来,甚至直到今天,江都非常后悔自己对葛冬青的做法。”沈永言回忆说。“江向他道歉了好儿次。1962 年给‘右派’摘帽的时候,江特别关照了他,葛是第一批被摘帽的。

  • 一个好人,更是一个真实的人

每天,江穿着蓝色工作服在厂里巡视。他和工人们聊天,询问机器的运转情况。他不懂就问,从不不懂装懂的态度是出了名的。他还很关心下属,无论是在工作还是在生活中。1960 年,跟江同事的一个年轻工程师想结婚 但因为厂里没有能分给新婚夫妇房子而无法完婚。当时江和 6 名其他家庭成员仍住在那套三居室的小单元房里,但他却马上为这位朋友腾出了一间房。此后两年,这对小夫妻一直和拥挤的江家合住。

  • 不懂就问

而在当时,人们试图采用务实的方法解决**的问题。最具革新精神的领域之一是由刘少奇的门生薄一波所领导的第一机械工业部。他营造了以工作成绩为奖惩依据的环境,像***汶样的人可以在这种环境中崭露头角。

  • 薄一波,第一机械工业部

武汉热工机械研究所——包括一个原子能研究中心在内的一项重要工程刚刚成立。汪道涵建议由不到 39 岁却有着动力工程领域过硬履历的江担任所兼党委副书记。身兼两职给了江很大的权力,这一任命把江提拔进了高级领导干部的行列。
江对于这一任命心情复杂。虽然他将成为有 300 多人的新机构的领导,但他更喜欢在北京工作的前景。新职务的一个不利因素是,他的家庭没法与他同行,家人不得不留在上海——这是一段 20 年分居生活的开始。尽管江每年有一个月的假期可以与家人团聚,两地分居还是使这个家庭,龙其是他的妻子在情感上付出了代价。另一个不利用素是,武汉作为湖北省的省会处于政治主流之外。不过,事实很快证明,这一点反而是天大的喜事。在此后的几件中,政治的主流是任何人都最不愿卷人的。

  • 暴风雨来临,远离漩涡中心

是什么原因使***遭受的**相对较轻呢?首先,他离北京和上海比较远——那两个地方被看成是滋生反对毛以及破坏共产主义的“走资派"的温床。另外,江的个人行为无懈可击:他没什么财产,从不追求浮华的生活方式。为了把**他的人搞糊涂,江强调他的父亲是共产党的烈士,而对他成长的文化背景和所接受的精英教育则经描淡写。那时江还不知道,他的母校扬州中学是红卫兵攻击的早期目标,他们用鲜亮的大红色把这栋“封建”大楼涂抹得面目全非。

江的语言能力对他的领导地位极为重要。他抓住一切机会练习罗马尼亚语,当他不能用这门新学会的语言表达自己的想法时,他还可以同东欧人说俄语,同西欧人说英语。他发现罗马尼亚人民活泼热情、**开放,他很喜欢与他们在一起。这是他在对外关系中的第一次官方经历。国内那些迫切希望能够取得任何形式外交胜利的上级认为,这是外交上的 一个漂亮仗。江后来回忆说,此次经历让他“张开双眼看世界”。此行标志着他一生中留给后人的主要成就之一的发端:促进**与世界其他地区的友好往来。

  • 语言才能

在这动荡的年代,两个家庭始终保持着联系。在汪道涵被清洗与罢黜之后,***在武汉,江的妻子在上海给了汪的女儿以庇护。这不是没有危险的,因为任何与已被罢黜的汪的接触,都会给那些想打倒江的人以方便的借口。

  • 重感情

***在政治局会议上发表讲话说:“现在,我们的主要任务是要不拘一格地发现和提拔有前途的中青年干部。”他提信“四个转变”,以产生新代的共产觉领导人员,要寻求“革命化、年轻化、知识化、专业化”的人才。
听了邓的指示之后,已完全恢复权力的汪道涵找到谷牧,推荐***在新成立的委员会中担任高级职务。(汪本人刚被委以**最重要的职位之一:上海市市长。)谷牧在 20 世纪 50 年代当过上海市委副书记,他记起了过去的江,并任命他为两个委员会的副主任兼秘书长、觉组成员。
经过 4 年鳌伏之后,54 岁的江终于成了副部长。在几周之内,江以尤投票权代表的身份列席了人大常委会的一次会议,并在会上作了有关建立经济特区的简要报告。江还首次被选举为**人民政治协商会议委员。政协代表着**的各界别、各团体、各少数民族和各**觉派,它们组成一个在共产党领导下的“爱国统一战线”

  • 改革开放 + 高人指路

1982 年 5 月,***被任命为电子工业部第一副部长兼党组副书记。这足个重妥的提升。
1982 年 9 月,***在第十二次觉代表大会致开幕词,题为〝**特色的社会主义",从此以后这就成为定义**改華计划的词组。邓认为,马列理论必领适应**的文化,这也是江后来进一步发展的主题。对西方人来说,邓的改革似乎是试探性的蹒跚学步,但在**,这些改革却被视为大胆而影响深远。

  • 1982 电子工业部第一副部长兼党组副书记

就在这次党代会上,***成为**委员会——制订政策并选举产生政治局——第 210 名委员。通过进入**政治权力的核心,江已经越过了成为高级职务候选人的最后一-个障碍。他几乎完全符合当时的四项标准:出身革命家庭,做过 30 年有知识的管理人员,又是几个领域的专家,而且只有 56 岁,相对来说仍属年轻。
当江第一次出席觉的**委员会会议,坐到座位上的时候,他环顾四周,感到非常地亲切自然。他认识许多**委员,包括几名在上海地下党时期的同事,一些老一辈的领导曾同他的养父江上青共同战斗过,其中很多人后来成了江的支持者、尤其是张爱萍将军。江最近的领导是副总理谷牧,谷牧还是**书记处成员,这是个管理党务的机构。

***给他妹妹的对联写的是有关诸葛亮的内容。诸葛亮生活在 3 世纪,被认为是**最伟大的军事战略家。
一边写着“攻心”。——意即“努力赢得人心”。
另一边写着“审势“——意即“判断时机”,换句话说就是估计形势。

  • 攻心
  • 审势

汪道涵的上海市长任期将于 1985 年届满,北京方面在物色他的接班人。不管是什么原因——有人说是汪年纪偏大,领导缺三活力,另一些人将此归咎于缺少**政府的支持,上海这一**最重要的商业中心没有繁荣起来。
“我当然参加了让谁来接替我任上海市长的讨论,”汪道涵回忆说,〝副总理万里来征求我的意见。他提出好儿个极有竞争力的人选。我推荐了江。

  • 上海市长

现在也到了***重新考虑自己的事业的时候了。1989 年他将满 63 岁。传统上为退休的高级领导人准备的职务——全国人大常委会副委员长或全国政协副主席——并没有吸引力。江想彻底改变一下。他想成为母校上海交通大学的教授。
尽管江可以利用上海市委书记的职务来确保在大学里谋得一个席位,但他更希望通过自己的学术成就来取得。他回忆起翻译过有关电力问题的俄文著作,就和老朋友沈永言联系,希望恢复这项工作。在内心里,江仍然是一位知识分子,出版著作令他感到自豪。他还准备在大学里进行—次题为《当前电力节约与能源开发趋势》的讲座,他将就这一课题撰写一篇技术论文。

  • 真正的知识分子

***一直密切关注着首都的局势发展,他打破自己的禁令与上海学生进行了对话,他走出来,彻夜不眠地劝说学生们停止抗议活动。凌晨,江作出了最勇敢的举动,他手拿扩音器走到在外滩的人群中间。

  • 站在学生中

到了凌晨 2 时 45 分,已经绝食 5 天的学生们停止了行动。当天晚些时候,***看望了住院学生并希望他们能够迅速恢复健康。江以非暴力手段出;色地结束了上海的****。而与此同时,他又向****发去电报,表示完仝支持实施戒严。

  • 手段巧妙,站位清晰

这期间,***与**的 8 位高级领导人见面,确定了赵紫阳的继任者。作出这一历史性的决定花了 5 个小时。
“经过漫长与仔细的考虑之后,〞邓告诉以他为核心的领导集体,上海市委书***同志看来确实是个合适的人选。我认为他挑得起这副担子。陈云、先念同志和我都倾向让***同志任;总书记。其他人有什么看法?〞
杨尚昆表示同意。他強调,〝新的领与集体(必须)保持改革开放的形象,赢得人民的信任”,并补充说奶果它“墨守成规,死板僵化,不思进取”,那么人民不会信任亡,党员不会尊敬它,那就会不断出乱子,“经济增长也就无从谈起〞。他说,**如果再次闭关锁国,那将是“很可怕”的,
元老薄一波也支持新一代的领导人。“只要我们不碍手碍脚,放手让
他们去干,”他说,我想他们会做得很好。”
***随后要水就任命以***为总书记的新一届政治局常委进行正式表决。结果是全票通过。

  • **已经决定了

***接到书记处的紧急通知,要他立即赶到北京。当他匆忙赶到机场时,发现等着他的是一架专机,但是在北京南苑机场接他的汽车却是一辆普通的大众桑塔纳。直到此时,江才被告知***将在西山别墅见他。这套伪装是为了防止江被愤怒的示威者认出而采取的预防措施。
当邓提出由他担任,总书记时,江大为惊讶。他表示了他对邓的感谢和对党的忠诚,保证他会做觉要他做的一切。“我担心,“江说,“我担当不起党赋子的伟大使命。”
***对这一任命感觉很复杂。他是有抱负的,但并非野心勃动。他在上海很愉快。当时,他向邓解释说,他没有在**工作的经验是一个缺陷,在与那些已在**工作数十年的同事打交道时更是如此。邓回答道:“我们都支持你。我们将帮助你克服任何困难,你不必担心。”当晚,江乘同一架飞机回到了上海。

  • 有所犹豫,高处不胜寒

江也怀疑自己是否能在北京的精英中站住脚。就像他以前经常做的,他拜访了汪道涵,征求他的意见。
“我知道他是总书记的合适人选,但是我能看出他的矛盾心情。所以我写了领导 1840 年抗英鸦片战争的**民族英雄林则徐的一副对联来勉励他:’苟利国家生死以,岂因祸福避趋之。’大意是如果对国家有利,就要不惧生死。”

  • 苟利国家生死以,岂因祸福避趋之

***处理上海的示威者时,表现出良好的直觉。他对示威者进行安抚并态度温和,同时又在涉及觉的权力的问题上寸步不让。最后,他果断处理《导报》问题这件事表明在必要的时候,他愿意采取行动。

  • 直觉

“如果三哥,就像他自己说的那样,毫无准备,”江泽慧说,“我们就更没有淮备了!真的让我们大吃一惊。我的第一反应是历史的重担已落在他的肩上。
“我们并末感到极度快乐,“她吐露说,“我们当然也没有庆祝。他的任命不值得庆祝。这是在‘六•四’后不久,国家将向什么方向前进尚不清楚。这是段非常闲难的时期。

  • ”国家将向什么方向前进尚不清楚。这是段非常闲难的时期。“

8 月初,***前往上海视察,由同事朱镕基、吴邦国、陈至立陪同,所有这些人最后都去了北京,在**担任显要职务。值得注意的是,这时江作了第一次职务任命,将时任上海市委副书记的曾庆红任命为党的**委员会办公厅副主任(副部级)。这是个起协调作用的关键职位,具有很大影响。江任命他忠诚的秘书贾廷安为“江办”主任,这也是个副部级的职位。(贾随江从上海来到了北京。)
这一选择非常明智,曾庆红具有机智的政治敏镜感、完美的政治背景以及个人关系:他的父亲曾是军队指挥官、党的高级领导和政府高级官员,在华东很有影响,尤其在上海。汪道涵也是其父的门生之一。他的母亲曾是一位早期的党的工作者,是参加过长征而幸存下来的少数女性之一并曾任一家幼儿园的园长,许多高千子女都曾在这家幼儿园就读。事实证明,不论是在行政工作还是在政治策略上面,曾庆红对江的帮助都是无可估量的。

  • 曾入阁

***在党校发表讲话 3 天后,他来到***家,寻求这位最高领导人对使用“社会主义市场经济”这 面改革新旗帜的同意。讲话前江没有和邓磋商。在邓南方谈话后,一切问题便由江自己来解决。在此意义上,南方谈话确实是对江的一次考验,而他的党校讲话正是最后一次考试。

  • 一切问题便由江自己来解决
  • 最后一次考试。

江对记者说:“我坚持这样一种**,那就是干一行,爱一行,钻一行。因此,我现在读一些有关历史、科技和世界事务的书籍。”江说他喜欢古典音乐,但也不排斥快节奏的音乐,比如迪斯科,“年轻人喜欢这个”。

  • 干一行,爱一行,钻一行

到 1992 年 12 月,《解放军报》至少发表了 12 篇社论,拥戴江为“觉的领导核心"和唯一的“军队统帅”。他的领导被称为反映了“老红军的传统〞江赢得了对**武装部队的领导。

  • 军队

虽然当时正下着雨,但**国家主席来到校园的消息还是迅速传开了。很快就有数百名学生赶来,围拢在这位著名的访客身边。“学生应该具有广博的知识,”江提出;忠告,“文学艺术,例如托尔斯泰、莎士比亚、巴尔扎克、但丁、莱昂纳多•达•芬奇的作品,可以提高你们的审美情趣,丰富你们的**和生活。不要局限在你们的专业里面。”江说,理科学生需要了解更多的文科知识,文科学生则需要了解更多的理科知识。“如果你们想学习其他国家的先进知识,”他补充说,“你们就必须掌握外语。在我的学生时代,我们每天早晨 5 点钟就起床,背通 60 个英语单词。”海南大学的校长担心**的元首会耽误行程,试图劝说江离开。不过,这个曾两度想做一名教授的人正在自得其乐。“**的末来在你们身上,〞江对周围的人说道,“当今世界的竞争主要是知识的竞争一位古代圣贤说过‘天下兴亡,匹夫有责。“江最后用***那句含义深远的话作为自己的结束语:“世界是你们的,也是我们的,但归根结底是你们的。”

  • 知识分子

对改革速度缓慢依旧感到恼火的***,将富有进取心的上海市委书记朱镕基提升为副总理。朱在国务院具体分管工业、农业和财政。尽管他们的个性不同,江和朱在上海时却合作得很好。作为一名热忱的改革者,朱镕基使国务院在政策问题上形成一种新的平衡。

  • 朱入阁

***委托出席晚宴的薄一波(**的“长寿元老”之一)代为宣读他的致词。“有个我一直在考虑怎么才能解决的难题,”邓告诉薄,“在觉内以及在国内外,我个人的作用和影响被认为是特别巨大的,甚至是不可或缺的。这不是一件好事。有一天如果我真的死了,这可能会给觉和国家造成动荡。我希望在很短的一段时间里,**和省一级领导班子能统一**,下定决心,紧密团结在以***同志为核心的觉**周围。
薄一波在《人民日报》撰文称,从邓到江的过渡与 1949 年新**成立时确立***为第一代领导人,以及 1978 年改革开始时确认***为第二代领导人有着同样重要的历史意义。“我们必须拥护***作为唯一的核心,"薄写道。

  • 薄一波与江的缘分

接下来的数天内,政治局势迅速明朗起来。**人民解放军和人民武装警察部队发表了支持江的声明。3 位高级将领也紧随其后。江对军队工作多年的投人获得丰厚的回报,证明了邓对其继承人所提建议的英明:“在每 5 个工作日中,要有 4 天与军队高层待在一起。“

  • 小平逝世,平稳过渡

Astro - chatGPT

什么是Astro

前端框架 Astro 是一个使用 JavaScript 构建 Web 应用程序的工具。它由开发团队 Snowpack 创建,旨在提供一种简单的方法来创建快速、可靠且易于维护的 Web 应用程序。

Astro 具有许多现代 Web 开发的特性,包括模块化、服务端渲染、静态站点生成和自动化构建。它还提供了一种可组合的、声明式的语法,使得构建 Web 应用程序更加简单、直观。

Astro 支持多种前端框架,包括 React、Vue 和 Svelte,可以帮助开发人员更轻松地使用这些框架来构建 Web 应用程序。同时,Astro 还内置了许多优化功能,如代码分割和图片优化,以帮助应用程序达到最佳性能。

Astro 对于多种框架的支持是怎么做到的

Astro 对于多种前端框架的支持是通过一种名为 "组件编译器" 的工具实现的。这个工具会将各种前端框架的组件转换为 Astro 的内部表示形式,这样这些组件就可以在 Astro 的环境中被使用和渲染。

当开发者在 Astro 中使用一个特定的框架的组件时,Astro 的组件编译器会将这个组件转换为 Astro 的组件格式,并将它与 Astro 的其他组件一起编译和打包。这样,即使应用程序中同时使用多种框架,Astro 也能够处理它们,并将它们整合到一个统一的应用程序中。

同时,Astro 还提供了一些框架特定的扩展,例如特定框架的预处理器或 AST 转换器,以便更好地支持这些框架。这些扩展可以在 Astro 的配置文件中进行设置。

核心源码

Astro 的组件编译器的核心源代码是开源的,可以在 Astro 的 GitHub 仓库中找到。

具体来说,Astro 的组件编译器是通过一系列的插件来实现的,每个插件负责处理组件的一个特定部分,例如模板、样式、脚本等。这些插件可以根据需要进行配置和组合,以创建一个自定义的编译器。

Astro 的组件编译器核心源码包括了许多 JavaScript 模块,其中最重要的是 @astro/compile 模块。这个模块包含了 Astro 的主要编译器逻辑,包括对组件文件进行解析、转换和优化的各个步骤。此外,还有一些额外的插件模块,如 @astro/plugin-markdown,用于支持将 Markdown 文件转换为组件。

如果你想了解 Astro 的组件编译器的具体实现细节,可以前往 Astro 的 GitHub 仓库,并查看 packages/compile 目录下的源代码。

package/compile

packages/compile 目录是 Astro 的组件编译器的核心源代码所在的目录,包含了组件编译器的主要逻辑和插件代码。由于该目录的代码较多,我将简要介绍该目录的几个重要文件和文件夹。

  1. src 文件夹:该文件夹包含了组件编译器的主要逻辑代码。其中,compile.js 是编译器的入口文件,负责处理编译器的各个阶段。parse.js 文件则负责将组件文件解析为抽象语法树(AST)。transform.js 文件则负责对 AST 进行转换和优化,以便生成可用的代码。
  2. plugins 文件夹:该文件夹包含了 Astro 的插件系统。插件是用来处理组件文件的各个部分,如模板、样式、脚本等。每个插件都包含了一个或多个处理函数,可以对组件文件进行解析、转换和优化。astro-markdown.js 插件是一个使用 Markdown 来写 Astro 组件的示例插件。
  3. types 文件夹:该文件夹包含了编译器使用的各种类型定义。例如,AstroConfig.js 文件定义了 Astro 的配置文件类型,AstroComponent.js 文件定义了 Astro 组件的类型。
  4. index.js 文件:该文件导出了 Astro 的主要编译器模块和插件模块。这样,其他模块可以使用这些模块来处理组件文件。

Astro 的组件编译器源码是比较复杂的,它涉及到很多的细节和优化。如果你对 Astro 组件编译器感兴趣,建议在 Astro 的 GitHub 仓库中查看这些文件的详细源代码,并对其中的逻辑进行深入的研究。

Astro 和 NextJs 的区别

Astro 和 Next.js 都是用于构建 Web 应用程序的框架,但它们有一些不同点。

  1. 架构模式不同:Astro 和 Next.js 的架构模式不同。Astro 基于组件编译器构建,使用标准的 Web 技术(如 JavaScript、CSS 和 HTML)构建应用程序。而 Next.js 是一个服务器渲染(SSR)框架,将服务器端和客户端渲染相结合,通过内置的路由和 API 管理器来管理应用程序的生命周期。
  2. 框架支持不同:Astro 支持多种前端框架,包括 React、Vue 和 Svelte 等。而 Next.js 主要基于 React,但也支持 Vue 和 Angular 等其他前端框架。
  3. 构建方式不同:Astro 使用 Snowpack 构建工具,可以快速地构建应用程序,而 Next.js 使用 webpack 构建工具进行应用程序打包和优化。
  4. 配置方式不同:Astro 的配置方式更加简单和直观,只需要一个简单的 Astro 配置文件即可。而 Next.js 则有更多的配置选项,并且需要开发人员更深入地了解它的配置文件。
  5. 性能方面有所不同:Astro 在许多方面都注重性能,如服务端渲染、自动代码分割和图像优化等。Next.js 也有类似的性能优化,但它的优化方法可能略有不同。

总的来说,Astro 和 Next.js 有一些共同点,都是用于构建 Web 应用程序的框架。但它们的架构模式、支持框架、构建方式、配置方式和性能优化等方面有所不同。开发人员可以根据项目需求选择适合的框架。

Vue.js 设计与实现

根据《Vue.js 设计与实现》 阅读整理而来

第一章 框架设计概览

命令式和声明式

从范式上来看,视图层框架通常分为命令式声明式。

命令式 -> 关注过程 -> Jquery

声明式 -> 关注结果 -> Vue

Vue 内部实现是命令式,而暴露给用户是声明式。

性能与可维护性的权衡

声明式代码的性能不优于命令式代码的性能。

在采用声明式提升可维护性的同时,性能就会有一定的损失,而框架设计者要做的就是:在保持可维护性的同时让性能损失最小化。

虚拟 DOM 的性能到底如何

声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗

而所谓的虚拟 DOM,就是为了最小化找出差异这一步的性能消耗而出现的。

  • innerHTML(模版) 心智负担中等 性能差
  • 虚拟 DOM 心智负担小 可维护强 性能中等
  • 原生 JavaScript 心智负担大 可维护性差 性能高

运行时和编译时

当设计一个框架的时候,有三种选择:

  • 纯运行时
  • 运行时 + 编译时
  • 纯编译时

纯运行时框架

function Render(obj, root) {
  const el = document.createElement(obj.tag);
  if (typeof obj.children === "string") {
    const text = document.createTextNode(obj.children);
    el.appendChild(text);
  } else if (obj.children) {
    // 数组,递归调用 Render,使用 el 作为 root 参数
    obj.children.forEach((child) => Render(child, el));
  }

  root.appendChild(el);
}

const obj = {
  tag: "div",
  children: [{ tag: "span", children: "hello world" }],
};

Render(obj, document.body);

手写树型结构的数据对象太麻烦了,而且不直观,能不能支持用类似于 HTML 标签的方式描述树型结构的数据对象呢?

为了满足用户的需求,你开始思考,能不能引入编译的手段,把 HTML 标签编译成树型结构的数据对象,这样不就可以继续使用 Render 函数了吗?

为此,你编写了一个叫作 Compiler 的程序,它的作用就是把 HTML 字符串编译成树型结构的数据对象,于是交付给用户去用了

const html = `<div>hello world</div>`;
//调用 Compiler 编译得到树型结构的数据对象
const obj = Compile(html);
// 再调用 Render 进行渲染
Render(obj, document.body);

上面这段代码能够很好地工作,这时我们的框架就变成了一个运行时 + 编译时的框架。

它既支持运行时 -> 用户可以直接提供数据对象从而无须编译;

又支持编译时 -> 用户可以提供 HTML 字符串,我们将其编译为数据对象后再交给运行时处理。
准确地说,上面的代码其实是运行时编译,意思是代码运行的时候才开始编译,而这会产生一定的性能开销,因此我们也可以在构建的时候就执行 Compiler 程序将用户提供的内容编译好,等到运行时就无须编译了,这对性能是非常友好的。

既然编译器可以把 HTML 字符串编译成数据对象,那么能不能直接编译成命令式代码呢?

这样我们只需要一个 Compiler 函数就可以了,连 Render 都不需要了。其实这就变成了一个纯编译时的框架,因为我们不支持任何运行时内容,用户的代码通过编译器编译后才能运行。

  • Svelte -> 纯编译时的框架
  • Vue3 -> 运行时 + 编译时

Astro 3.0

Astro 3.0 | Astro

Astro 3.0 不仅仅是一个版本更新,它几乎是一个革命性的跳跃,为前端开发带来了一系列令人兴奋的新特性和优化。

  • 图像优化(稳定版):无需标记,并且比以往更好。
  • 更快的渲染性能:Astro 组件渲染速度提高了 30-75%。
  • 针对无服务器(Serverless)的 SSR(服务器端渲染)增强:与您的托管平台连接的新方法。
  • 针对 JSX 的 HMR(热模块替换)增强:为 React 和 Preact 提供 Fast Refresh 支持。
  • 优化的构建输出:更干净、更高性能的 HTML。

引领新潮流:View Transitions API

Astro 3.0 是第一个主要支持 View Transitions API 的 web 框架。这一新特性允许开发者在页面导航中轻松地实现淡入淡出、滑动、形变等过渡效果。这些功能以前只能在 JavaScript 单页应用(SPA) 中实现,但现在,得益于 Web 平台的进步,Astro 3.0 使这些特性面向所有人开放。

  • 将持久元素从一个页面变形(或转换)到另一个页面。
  • 为了实现更流畅的导航效果,让内容逐渐淡入和淡出页面。
  • 为了增加更多个性,让内容滑动进入和退出页面。
  • 在多个页面中保持通用的用户界面(UI),无论是否进行页面刷新。

图像优化:更稳定,更高效

Astro 3.0 的图像优化功能现已稳定,并且比以往任何时候都要好。你只需使用新的内置 <Image> 组件,Astro 就会自动检测和优化每个图像,甚至还会为你添加推断的宽度和高度,以防止布局偏移。

性能提升:更快的渲染

在 Astro 3.0 中,大多数组件的渲染速度提高了 30-75%。这一显著的性能提升是通过一系列专门的重构工作实现的,包括优化构建管道中的热路径、移除不必要的生成器和异步代码等。

服务器端渲染(SSR)增强

Astro 3.0 提供了新的方式来连接到你的托管平台,特别是在无服务器架构方面。现在,你可以为网站的每个路由创建更小、更个性化的服务器文件,从而提高性能。

JSX 的 HMR 增强

感谢对内部 JSX 构建支持的重大重构,React Fast Refresh 现在在 Astro 3.0 中可用。这意味着 React、Preact 和 Solid.js 用户都将看到热模块重载(HMR)和整体开发服务器稳定性的显著提升。

更干净、更高效的构建输出

Astro 3.0 还优化了整体的构建输出,包括自动压缩所有 HTML 输出、替换嘈杂的 astro-XXXXXX 类名,以及自动将小块 CSS 内联到你的 HTML 中。

View Transitions API

View Transitions API - Web APIs | MDN

Smooth and simple transitions with the View Transitions API - Chrome Developers

Basic View Transitions API demo

View Transitions API 是 Chrome 111 及以上版本提供的一个 API,允许开发者在 Web 应用程序中实现原生的视图转换动画。视图转换动画可以用于实现页面切换、元素变换等效果,可以让 Web 应用程序的用户体验更加流畅和自然。

View Transitions API 的工作原理是,浏览器会在视图转换开始时捕获当前页面的状态,并在视图转换结束时将页面状态恢复到原来的状态。在视图转换的过程中,浏览器会根据用户定义的动画效果对页面进行过渡。

View Transitions API 提供了丰富的动画效果,包括淡入淡出、平移、缩放、旋转等。开发者可以根据自己的需求选择合适的动画效果。

View Transitions API 的使用方法如下:

  1. 在 JavaScript 代码中调用 document.startViewTransition() 方法开始视图转换。
  2. 在视图转换过程中,可以使用 CSS 或 JavaScript 来实现动画效果。
  3. 在视图转换结束时,调用 document.endViewTransition() 方法结束视图转换。

以下是一个简单的视图转换动画示例:

function startTransition() {
  document.startViewTransition(() => {
    // 在视图转换过程中,可以使用 CSS 或 JavaScript 来实现动画效果。
    document.querySelector(".element").style.transform = "scale(2)";
  });
}

function endTransition() {
  document.endViewTransition();
}

// 点击按钮开始视图转换
document.querySelector("button").addEventListener("click", startTransition);

上述示例中,在点击按钮时会调用 startTransition() 方法开始视图转换。在视图转换过程中,将元素的大小缩放为原来的两倍。在视图转换结束时,调用 endTransition() 方法结束视图转换。

View Transitions API 是一个强大的工具,可以让开发者在 Web 应用程序中实现原生的视图转换动画。通过使用 View Transitions API,开发者可以让 Web 应用程序的用户体验更加流畅和自然。

特征 View Transitions API CSS 动画
原生支持
动画效果 丰富 灵活
使用难度 简单 复杂
性能 一般 优异
浏览器支持 部分 所有

以下是 View Transitions API 的一些优点:

  • 可以实现原生的视图转换动画,效果更加流畅和自然。
  • 提供了丰富的动画效果,可以满足不同需求。
  • 使用简单,只需调用几个 API 即可实现视图转换。

以下是 View Transitions API 的一些缺点:

  • 目前还不支持所有浏览器。
  • 对性能有一定影响。

总体而言,View Transitions API 是一个非常有用的 API,可以让 Web 应用程序的用户体验更加流畅和自然。

总结

Astro 3.0 是一个里程碑式的版本,它不仅提供了一系列新特性,还在性能和稳定性方面做了大量优化。无论你是一个前端新手还是经验丰富的开发者,Astro 3.0 都值得你尝试。

TypeScript 不能正确处理 Object.keys() September 1, 2023

Why doesn't TypeScript properly type Object.keys?

简介

在 TypeScript 中,使用 Object.keys() 方法可以有时候会让类型检查变得复杂或者不准确。主要原因有以下几点:

返回值的类型是 string[]

当你使用 Object.keys() 方法时,TypeScript 通常会推断出返回值类型为 string[],而不是具体对象的键组成的联合类型。例如:

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);  // string[]

这样,编译器就不能准确知道 keys 数组实际上只可能包含 'a''b''c' 这三个字符串。

对象可能是非同构的

在 JavaScript 中,对象通常可以包含不同类型的值。当你使用 Object.keys() 获取键然后访问这些值时,TypeScript 编译器可能不能准确推断出你访问的值的类型。

const mixedObj = { a: 1, b: "hello" };
const keys = Object.keys(mixedObj);

keys.forEach(key => {
  const value = mixedObj[key];  // Error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ a: number; b: string; }'
});

解决方案

使用类型断言

你可以使用类型断言来手动指定更准确的类型:

const keys = Object.keys(obj) as Array<keyof typeof obj>;
  • Object.keys(obj): 这个函数调用会返回一个包含**obj**所有自身可枚举属性的字符串数组。
  • typeof obj将会返回一个类型,该类型具有与obj相同的结构,例如,如果obj{ a: number, b: string },返回**{ a: number, b: string }**。
  • keyof typeof obj: 这是一个TypeScript类型查询,它会返回**obj的类型的所有键的联合类型。keyof typeof obj将是"a" | "b"**。
  • as Array<keyof typeof obj>: 这是一个类型断言,它告诉TypeScript编译器将**Object.keys(obj)的返回类型从string[]更改为Array<keyof typeof obj>**。

使用 for ... in 循环

Object.keys() 类似,for ... in 循环可以遍历对象的键,但它在 TypeScript 中有更好的类型推断:

for (const key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
    const value = obj[key];  // No error
  }
}

使用映射类型和 keyof

在某些场景下,你可能会选择使用 TypeScript 的映射类型和 keyof 操作符以更准确地描述对象和其键。

type KeysOfObj<T> = keyof T;

const objKeys: KeysOfObj<typeof obj> = 'a' | 'b' | 'c';

这些方案可以帮助 TypeScript 更准确地处理 Object.keys() 以及相关的操作。

总结

在 TypeScript 中,Object.keys() 的返回类型默认是 string[],这是一个比较宽泛的类型,它没有包含对象实际键的联合类型信息。因此,在后续使用这些键去访问对象时,编译器往往无法提供准确的类型检查。不过,有一些解决方案,比如使用类型断言来手动指定键的类型,或者使用 for ... in 循环和 keyof 操作符以获得更精确的类型推断。

CDN - chatGPT

CDN

CDN(Content Delivery Network)是一种分布式网络架构,旨在加速互联网上的内容传递。CDN通过将内容(例如网页、图像、视频、音频等)缓存到多个地理位置的服务器上,从而将内容分发到全球不同地区的用户。

当用户请求访问一个网站或者应用程序时,CDN系统会根据用户的位置,选择最近的服务器,以最短的响应时间将内容传递给用户。这种方式减少了网站或者应用程序响应时间的延迟,从而提高了用户体验。此外,CDN还可以减轻源服务器的负载,降低带宽成本。

CDN通常由多个网络服务提供商共同组成。这些提供商拥有各自的网络和数据中心,通过协作提供广泛的CDN服务。常见的CDN提供商包括Akamai、Cloudflare、Amazon CloudFront等。

分类

CDN通常可以按照不同的方式进行分类,下面是几种常见的分类方式:

  1. 基础设施CDN vs 应用程序CDN:基础设施CDN主要用于传输静态内容,例如网页、图片、视频等。应用程序CDN则更适用于动态内容,例如电子商务平台、社交媒体应用等。
  2. 全局CDN vs 区域CDN:全局CDN指覆盖全球多个地理区域的CDN网络。区域CDN则覆盖较小的地理区域,通常是城市或者国家级别。
  3. 公有CDN vs 私有CDN:公有CDN是由CDN提供商拥有和运营的CDN服务,用户可以租用这些服务。私有CDN则是由用户自己构建和拥有的CDN服务。
  4. 软件CDN vs 硬件CDN:软件CDN是通过软件实现的CDN服务,通常运行在虚拟机或者云计算环境中。硬件CDN则是通过专用硬件设备实现的CDN服务。
  5. HTTP CDN vs P2P CDN:HTTP CDN是基于HTTP协议的CDN服务,用户通过向CDN服务器发送HTTP请求来获取内容。P2P CDN则是通过对等网络(P2P)传输内容,将下载请求从中心化CDN转移到用户之间进行内容交换。

这些不同的分类方式可以帮助用户选择最适合他们需求的CDN服务。

原理

CDN的原理基于分布式缓存和就近访问原则,主要包括以下几个步骤:

  1. 缓存静态内容:CDN会将源服务器上的静态内容(如网页、图片、视频等)缓存到位于全球各地的CDN节点服务器上,以提高内容传输的速度和质量。
  2. 智能路由:当用户请求访问CDN服务上的内容时,CDN会智能地选择距离用户最近的节点服务器,以保证就近访问,并减少响应时间和网络拥堵。
  3. 加速传输:CDN通过采用多种技术手段来加速传输,例如负载均衡、内容压缩、缓存策略等,以降低网络延迟和提高传输速度。
  4. 动态调整:CDN通过实时监测网络质量和用户请求情况,动态调整缓存策略和节点分布,以适应不同地区和不同用户的需求。

总的来说,CDN的原理是利用分布式缓存和就近访问原则,加速内容传输,降低延迟,提高用户体验,同时减轻源服务器负担,降低带宽成本。

CDN 如何改善网站加载时间?

CDN 可以通过以下方式来改善网站加载时间:

  1. 缩短网络距离:当用户请求访问网站时,CDN会自动将网站的静态资源缓存在离用户最近的 CDN 节点上,从而缩短数据传输的路程和时间。这样可以显著减少网络延迟和提高网站响应速度。
  2. 提高并发处理能力:CDN可以为网站提供更高的并发处理能力,因为它能够同时处理大量的用户请求。这意味着即使在高峰期,网站也能够保持快速的响应时间,避免因服务器过载而导致网站崩溃。
  3. 压缩和优化内容:CDN 可以对网站的静态资源进行压缩和优化处理,以减小资源文件的大小,从而提高网站加载速度。例如,CDN 可以将网站的图片文件压缩为更小的文件大小,以加快图片的加载速度。
  4. 负载均衡:CDN 可以通过分配流量和负载均衡来确保网站的快速响应,避免服务器过载和崩溃。
  5. 防御 DDoS 攻击:CDN 可以提供 DDoS 防御功能,通过在 CDN 网络上分发流量,减轻服务器的压力,从而保证网站的可用性和稳定性。

综上所述,CDN 可以有效地改善网站的加载时间,提高用户的体验和满意度。

CDN 和图床

CDN 和图床是两个不同的概念,但它们可以在某些方面有重叠。

CDN 是一种分布式网络架构,可以缓存静态内容(如图片、视频、音频等)到全球各地的 CDN 节点服务器上,从而提高内容传输速度和质量。CDN 可以为网站提供加速服务,以减少网络延迟和提高用户体验。在这种情况下,CDN 扮演的是一个优化和加速内容传输的角色。

图床是一种图像托管服务,可以让用户将自己的图片上传到第三方服务器上进行存储和管理,并通过链接的方式在网站上引用图片。在这种情况下,图床扮演的是一个存储和管理图片的角色。

尽管 CDN 和图床是不同的服务,但是它们可以有一些重叠。例如,一些图床服务提供 CDN 功能,即将用户上传的图片缓存到全球各地的 CDN 节点上,以加快图片的加载速度。在这种情况下,图床扮演的是一个提供 CDN 加速服务的角色。

总的来说,CDN 和图床是两个不同的服务,但它们可以在某些方面相互补充,以提高网站的性能和用户体验。

静态资源为什么要用CDN

静态资源(例如图片、CSS、JavaScript等)通常较大且数量众多,当用户访问网站时,需要从源服务器下载这些资源,如果源服务器距离用户很远或者网络拥堵,则会导致网站加载缓慢,影响用户体验。

CDN 可以将这些静态资源缓存到全球各地的 CDN 节点服务器上,当用户访问网站时,可以就近从离用户最近的 CDN 节点服务器上下载静态资源,从而提高了资源传输的速度和质量,减少了加载时间,提高了用户体验。

此外,使用 CDN 还有以下优点:

  1. 分担源服务器的负载:通过将静态资源缓存到 CDN 节点服务器上,可以分担源服务器的负载,减轻源服务器的压力,降低服务器崩溃的风险。
  2. 节省带宽成本:CDN 可以帮助网站节省带宽成本,因为用户可以从就近的 CDN 节点服务器上下载静态资源,从而减少了源服务器的流量。
  3. 提高安全性:CDN 可以提供一些安全功能,例如 DDoS 防御、SSL 加密等,以保障网站的安全性和可用性。

总的来说,使用 CDN 可以加快网站加载速度、提高用户体验,同时还可以分担源服务器的负载、节省带宽成本和提高安全性。因此,对于有大量静态资源的网站,使用 CDN 是非常必要的。

相关技术

CDN 技术是一套完整的技术体系,涵盖了多个技术领域。以下是与 CDN 相关的几个常见技术:

  1. 缓存技术:CDN 的核心技术是缓存技术,通过将静态资源缓存在离用户最近的 CDN 节点服务器上,以提高资源的响应速度和质量。
  2. 负载均衡技术:CDN 通常使用负载均衡技术来分配用户请求,确保资源的快速响应和可用性。
  3. 内容优化技术:CDN 可以对网站的静态资源进行优化和压缩处理,以减小文件大小,提高资源的传输速度和质量。
  4. 网络加速技术:CDN 可以采用多种网络加速技术,例如 TCP 加速、传输优化、压缩等,以提高资源传输的速度和质量。
  5. 安全技术:CDN 可以提供一些安全技术,例如 DDoS 防御、SSL 加密、WAF 防护等,以保障网站的安全性和可用性。
  6. 数据分析技术:CDN 可以通过数据分析技术,监测和分析用户访问情况,以实现智能路由、缓存策略的调整等。
  7. P2P 技术:有些 CDN 服务提供商采用 P2P 技术,通过对等网络传输资源,减轻 CDN 服务器的负担,提高资源的传输速度和质量。

综上所述,CDN 技术是一套完整的技术体系,包含了多个技术领域,以提高资源传输的速度和质量,同时分担源服务器的负载,保障网站的可用性和安全性。

知名厂商

全球知名的 CDN 厂商有以下几家:

  • Akamai Technologies:成立于 1998 年,总部位于美国麻省剑桥市,是全球最大的 CDN 服务提供商之一,分布在全球 130 多个国家和地区的 3000 多个节点上,为全球超过 90% 的互联网用户提供服务。
  • Cloudflare:成立于 2009 年,总部位于美国旧金山,是一家以安全和性能为核心的 CDN 服务提供商,拥有全球超过 200 个数据中心和 35 个 Tbps 的网络容量,为超过 25% 的全球网站提供服务。
  • Fastly:成立于 2011 年,总部位于美国加利福尼亚州旧金山,是一家提供高速 CDN 服务的云平台,目前在全球拥有超过 60 个数据中心。
  • Limelight Networks:成立于 2001 年,总部位于美国亚利桑那州斯科茨代尔,是一家全球性的 CDN 服务提供商,拥有超过 80 个数据中心和 40 Tbps 的全球网络容量。
  • ChinaCache:成立于 1998 年,总部位于**北京市,是**领先的 CDN 服务提供商之一,拥有全国最大的 CDN 节点网络和最高的带宽接入能力。

以上是全球知名的 CDN 厂商,它们提供的 CDN 服务具有高速、稳定、安全等特点,可以为用户提供优质的内容传输服务。
除了以上提到的几家CDN厂商,还有许多其他的CDN服务提供商,如Level3 Communications、Verizon Digital Media Services、Tata Communications等等。这些厂商在不同的地区和领域都有自己的优势,用户可以根据自己的需求选择合适的CDN服务提供商。

此外,一些云服务提供商也提供CDN服务,如Amazon Web Services的Amazon CloudFront、Microsoft Azure的Azure CDN、Google Cloud Platform的Google Cloud CDN等。这些云服务提供商在CDN服务上也拥有自己的特点和优势,可以为用户提供一站式的云服务解决方案。

防抖(debounce)、截流(throttle)

防抖 debounce

连续点击,最后一次点击一秒后执行一次。

function debounce(fn, delay) {
  let timer = null;
  return () => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn();
    }, delay);
  };
}

const get = () => {
  console.log("debounce");
};
a = debounce(get, 1000);
a();

节流 throttle

连续点击,每隔一秒执行一次。

function throttle(fn, time) {
  let begin = new Date();
  return function () {
    if (new Date() - begin < time) {
      return false;
    }
    fn();
    begin = new Date();
  };
}

const get = () => {
  console.log(666);
};
a = throttle(get, 1000);

阿波罗计划

阿波罗计划

阿波罗计划(英语:Project Apollo)或作阿波罗工程,港澳台地区有时称其为太阳神计划,是美国国家航空航天局从1961年-1972年从事的一系列载人航天任务,于1960年代的10年中,主要致力于完成载人登陆月球和安全返回地球的目标。1969年,阿波罗11号宇宙飞船达成了上述目标,尼尔·阿姆斯特朗成为第一个踏足月球表面的人类。为了进一步执行在月球的科学探测,阿波罗计划一直延续到1970年代早期。总共耗资250亿美元(币值相当于2018年时的1530亿美元)。

阿波罗计划是美国国家航空航天局执行的迄今为止最庞大的月球探测计划,“阿波罗”飞船的任务包括为载人登月飞行作准备和实现载人登月飞行,已于1972年底结束。迄今(2022年)40多年来还没有过其他的载人航天器离开过地球轨道。阿波罗计划详细地揭示了月球表面特性、物质化学成分、光学特性并探测了月球重力磁场、月震等。后来的天空实验室计划和美国、苏联联合的阿波罗-联盟测试计划也使用了原来为阿波罗建造的设备,也就经常被认为是阿波罗计划的一部分。

阿波罗计划取得了巨大的成功,惟计划中也有过几次严重的危机,包括阿波罗1号测试时的大火造成维吉尔·格里森爱德华·怀特罗杰·查菲的死亡;阿波罗13号的氧气罐爆炸以及阿波罗-联盟测试计划返回大气层时排放的有毒气体都几乎使执行任务的航天员丧命。

阿波罗一号

阿波罗七号

阿波罗八号

阿波罗九号

阿波罗十号

阿波罗十一号

阿波罗十二号

阿波罗十三号

阿波罗十四号

阿波罗十五号

阿波罗十六号

阿波罗十七号

Current Work

Repositories

文档

项目

Fork

参与

文档

Eternity is the most romantic

Github Notion Twitter

我是一个前端工程师,我用过很多框架和工具写文章、搭博客。我同样看过很多其他人的博客,他们优秀的文章的令人惊胆,有些绝妙的设计的让人过目不忘。可惜的是有些博客已经不再更新,最后一篇文章终止在几年前,最让我遗憾的还是有些博客是已无法打开。所以我选择用 Github 作为我的博客,我希望在可见的未来它可以一直留在互联网上。 Eternity is the most romantic 2022-9-20

“与其担心宏观经济,不如关注自己。你对自己生活的影响,往往比宏观经济对你的影响大得多。”

生酮饮食(keto)

基础知识

生酮饮食

生酮饮食(英语:ketogenic diet)字面意思是“会产生酮体的饮食”,其为一种高脂肪,充足蛋白质,极[低碳水化合物饮食]https://zh.wikipedia.org/wiki/%e4%bd%8e%e7%a2%b3%e6%b0%b4%e5%8c%96%e5%90%88%e7%89%a9%e9%a3%b2%e9%a3%9f](https://zh.wikipedia.org/zh/%E7%94%9F%E9%85%AE%E9%A3%B2%E9%A3%9F#cite_note-Masood2021-1)。这种饮食的特色是让食物严重缺乏碳水化合物,强迫身体燃烧脂肪而非[碳水化合物](https://zh.wikipedia.org/wiki/%E7%B3%96%E7%B1%BB),进而产生酮体;医学上主要在用于治疗难以控制(难治)的[儿童癫痫](https://zh.wikipedia.org/w/index.php?title=%E5%85%92%E7%AB%A5%E7%99%B2%E7%99%87&action=edit&redlink=1)。

生酮作用

生酮作用(英语:Ketogenesis,又称酮体生成)是指脂肪酸降解过程结果所致的酮体生成过程。

酮体

酮体(英语:Ketone bodies)是脂肪酸在肝内 β-氧化时特有的中间代谢产物,它包括丙酮乙酰乙酸β-羟丁酸三种化合物。不过严格意义上来讲,β-羟丁酸是一种羟基酸,而非类。当机体处于饥饿、禁食或某些病理状态(如糖尿病),酮体才会大量堆积。酮体可以提供一种替代的能源,对某些组织细胞来说非常重要。

身体在上述状态时,脂肪动员加强,大量的脂肪酸被肝细胞吸收和氧化;而同时为了维持血糖浓度的稳定,也会刺激体内糖质新生作用。糖质新生所需原料草酰乙酸因为被大量消耗,影响到草酰乙酸所参与的另一代谢途径三羧酸循环,使大量中间物乙酰辅酶 A无法消耗、出现堆积,因而生成酮体。

酮症

酮症是一种代谢状态,当体内的葡萄糖不足时,肝脏会将脂肪转换成脂肪酸与酮体,取代原本由葡萄糖负责的能量来源。当血中酮体的含量大于 0.5mM,且有长时间的低血糖及低胰岛素含量,即为‘酮症’。

胰岛素抵抗

胰岛素抵抗(英语:insulin resistance)又称胰岛素抗性,是指胰脏并没有任何病理问题时,脂肪细胞、肌肉细胞和肝细胞对正常浓度的胰岛素反应不足的现象,亦即这些细胞需要更高的胰岛素浓度才能对胰岛素产生反应。随着情况发展,可能胰岛素的分泌量尽管提升很多却也无法满足需求,引起肌肉细胞吸收和肝细胞储备的葡萄糖量降低,以及脂肪细胞储存的甘油三酸酯的水解,分别提升血浆中糖和自由脂肪酸的含量,进而导致代谢综合征。

糖异化

糖异生(英语:Gluconeogenesis[1])又称糖异生作用、糖原发育不良作用,指的是非碳水化合物(乳酸、丙酮酸、甘油、生糖氨基酸等)转变为葡萄糖的过程,所以又称为葡萄糖新生[2]。糖异生保证了机体的血糖水平处于正常水平。糖异生的主要器官是肝。肾在正常情况下糖异生能力只有肝的十分之一,但长期饥饿与酸中毒时肾糖异生能力可大为增强。

血脑屏障

脑血管障壁(英语:blood–brain barrier ,BBB),也称为血脑屏障血脑障壁,指在血管之间有一种选择性地阻止某些物质由血液进入大脑的“屏障”。

脑血管障壁几乎不让任何物质通过,除了氧气二氧化碳血糖,大部分的药物蛋白质由于分子结构过大,一般无法通过。

大脑供能

葡萄糖作为大脑的主要供能系统,大脑每天能消耗葡萄糖 100 克左右,这些葡萄糖主要由我们的血糖进行供应,所以吃甜的食物会让我们兴奋让大脑兴奋是对的!

如果血糖降低或者是血糖水平降低比如长期饥饿时,大脑无法得到充足的糖分供能就会利用肝生成的酮体提供能量。

饥饿期达到 3 天时每天大脑会消耗肝提供的酮体 50 克左右,饥饿达到两周后每天消耗的酮体可以达到 100 克!但是大脑无法提供正常工作,亢奋会降低!

Omega-6

欧米茄 6(OMEGA6)在人体内至关重要,胆固醇必须与欧米茄 6 的亚油酸(LA)相结合,才能正常运转和代谢;人脑中的不饱和脂肪酸欧米茄 6(OMEGA6)和欧米茄 3(OMEGA3)各占一半;欧米茄 6 的花生四烯酸(AA)所产生的前列腺素PGE2,是人体许多生命功能所必需的激素类化学物质,但它会加速癌细胞的生长,必须由欧米茄 3来抑制。

Omega-3

OMEGA-3 ,又被写作 Ω-3 、ω-3 ,中文称“欧美加 3 ” 、“欧米伽 3 ” ,为一组多元不饱和脂肪酸,常见于深海鱼类、海豹油、和某些植物中,对人体健康十分有益。在化学结构上,OMEGA-3 是一条由碳、氢原子相互连结而成的长链( 18 个碳原子以上),其间带有 3-6 个不饱和键(即双键)。因其第一个不饱和键位于甲基一端的第 3 个碳原子上,故名 OMEGA-3 。

Omega-3多元不饱和脂肪酸是人体无法自行合成的脂肪酸,同时也是人体合成各种荷尔蒙及内生性物质必要的营养素,只有靠食物外来的补充这些油酸,才能让人体的生理机能得以正常运作。

酮流感

当你刚开始生酮饮食时,会产生一些类似感冒的症状,比如说头痛,身上发冷,感觉疲劳等等。这种情况,大部分的小酮人在生酮初期都会经历。这种症状被称为"酮流感"(keto flu),也被称为诱导流感(induction flu),低碳水化合物流感(low carb flu)或阿特金斯流感(Atkins flu)。

症状

  1. 脑雾
  2. 头疼
  3. 发冷
  4. 喉咙酸痛
  5. 昏昏沉沉
  6. 失眠
  7. 暴躁
  8. 肌肉酸痛
  9. 反胃
  10. 难以集中注意力
  11. 糖瘾
  12. 胃痛

对策

  1. 大量喝水
  2. 喝骨头汤
  3. 补充电解质
  4. 吃更多脂肪,尤其是 MCT 油
  5. 保证充足睡眠
  6. 做一些温和的锻炼
  7. 增加一些碳水摄入

多巴胺

多巴胺在整个这个行动发起的过程中,至少起了两个关键作用:

  1. 多巴胺设定了门槛的高低。多巴胺越多,发起行动所需要的动力就越低。往往多巴胺越多,人的冲动性行为就越多,多巴胺越低,人就显得越麻木、反应就越慢。以吸毒这个行为为例,多巴胺越多,「摄入毒品」这一举动所需要的动力门槛就越低,大脑就更难抑制住吸毒行为。(帕金森大脑中多巴胺水平偏低)
  2. 多巴胺还给行动选择带来了「学习」这个技能。比如说,如果基底核发起了一个行动 A,并且并且行动之后多巴胺水平升高了,中脑皮层通路就会做出相应改变,使得下一次遇到类似的环境/场景时,更倾向于选择行动 A。

内啡肽

跑步者的愉悦感是指当运动量超过某一阶段时,体内便会分泌脑内啡。长时间、连续、中等至高强度的运动、深呼吸也是分泌脑内啡的条件。长时间运动把肌肉内的糖原用尽,脑内啡便会分泌。这些运动包括跑步游泳越野滑雪、长距离划船、骑单车举重有氧运动舞或球类运动(例如篮球足球美式足球)。

可以吃什么

  • 防弹咖啡

防弹咖啡是一种富含脂肪,热量超过 460 卡路里,不含碳水化合物的咖啡。它的配方主要为低霉菌咖啡豆、无盐草饲料黄油、中链甘油三酸酯油(MCT 油,一种易消化脂肪)。

  • 黄油
  • 椰子油
  • 橄榄油
  • 防弹咖啡
  • 牛排
  • 培根
  • 黄瓜
  • 夏威夷果
  • 奶酪

不能多吃

花生

  1. 致癌的黄曲霉素,“偏爱”长在花生上
  2. Omega-6 脂肪酸爆高,导致炎症
  3. 植酸、凝集素,妨碍营养吸收
  4. 非常容易暴食 → 瓜子理论

瓜子理论,管理学的一门理论。理论内容:1.无论人们喜欢与否,很容易拿起第一颗瓜子;2.一旦吃上第一颗,就会吃起第二颗、第三颗……停不下来;3.在吃瓜子的过程中,人们可能会做一些别的事情,比如去洗手间等等,但回到座位后,都会继续吃瓜子,不需要他人提醒、督促;4.大多数情况下,人们会一直吃下去,直到吃光为止。

设备

  • 生酮试纸
  • 酮体检测仪

重学 Javascript

重学 Javascript

Javascript 高级程序设计 + Modern JavaScript Tutorial + MDN

现代 JavaScript 教程

MDN Web Docs

第一章 什么是 JavaScript ⬆️

javascript 的实现

  • 核心 (ECMAScript)
  • 文档对象模型 (DOM)
  • 浏览器对象模型 (BOM)

组织分工

TC39 → ECMAScript

W3C → DOM

浏览器厂商 → BOM

规范和手册

规范:ECMA-262

ECMAScript® 2023 Language Specification

手册:MDN(Mozilla)JavaScript

JavaScript reference - JavaScript | MDN

小结

JavaScript 是一门用来与网页交互的脚本语言,包含以下三个组成部分。

  • ECMAScript:由 ECMA-262 定义并提供核心功能。
  • 文档对象模型(DOM):提供与网页内容交互的方法和接口。
  • 浏览器对象模型(BOM):提供与浏览器交互的方法和接口。

JavaScript 的这三个部分得到了五大 Web 浏览器(IE、Firefox、Chrome、Safari 和 Opera)不同程度的支持。所有浏览器基本上对 ES5(ECMAScript 5)提供了完善的支持,而对 ES6(ECMAScript 6) 和 ES7(ECMAScript 7) 的支持度也在不断提升。这些浏览器对 DOM 的支持各不相同,但对 Level 3 的支 持日益趋于规范。HTML5 中收录的 BOM 会因浏览器而异,不过开发者仍然可以假定存在很大一部分公共特性。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.