ScarSu - 终身成长,前端技术,信息源

提升认知：信息输入、知识管理🧠

新闻 | 中国网络媒体抖音、头条、小红书先后宣布拟展示帐号IP属地：更真实有序的网络言论氛围
信息源 | 反复推荐过多次的happy xiao的博客改了域名：coke.do - 简短实用的效率方法，健康习惯，思维模式，每周都会分享一些好的想法、信息
信息源 | 博客TA :Total Annarchy - 华尔街日报畅销书作者ANN HANDLEY的无政府主义博客，关于写作、营销
信息源 | 国家智慧教育平台：中小学、职业教育、高等教育免费高质量资源
书籍 | 《乌合之众》+《娱乐至死》+《美丽新世界》+《1984》四本结合看：“媒体是现代社会的独裁者”、”人一到群体中，智商就严重降低”
书籍 | 《纳瓦尔宝典：财富和幸福指南》
书籍 | 《大国空巢：反思中国计划生育政策》：了解中国社会人口、老龄化现状
播客 | 知晓有我：从女性视角出发探讨社会现象(小宇宙App可听
播客 | 霞光里FM：《三联生活周刊》出品(小宇宙App可听
播客 | 螺丝在拧紧：单向空间出品(小宇宙App可听
播客 | 随机波动：三位女性媒体人的一档泛文化播客(小宇宙App可听
播客 | 放学以后：探寻日常生活之外的可能性(小宇宙App可听
播客 | 故事FM：真实的女性故事自有万钧之力(小宇宙App可听
话题 | 人生唯一确定的就是不确定的人生 - 罗翔
话题 | 道法术器：学校就是打造社会工具的地方、“有时候有些观念知识不是你真正需要的，而是这个世界少数掌握话语权的人想要你知道的，但这不一定是真相”
话题 | 言论自由：李敖2005年北京大学演讲
话题 | 怎样让别人觉得自己很靠谱？：明确能力边界、帮助对方明确任务的规划和想法、不要完美主义，先把事情做出去、学会邀功
想法 | 新闻自由是灾难最大的救助者
想法 | 尊重他人命运，放下助人情节、你的建议如果唤不起别人的改变，那不如说句好话结个善缘、禁止🈲好为人师
想法 | 弱者如何以小博大：1.快，先起步。2.差异化
想法 | 谈判前要包装自己：要懂得给自己造势
想法 | 表达、抓逻辑漏洞、不要被挑起情绪、不要陷于对攻击自己的无关的问题的辩解之中

提升效率：用好工具、用好工具🔨

工具 | Auto.js：Android平台上支持Node.js的JavaScript自动化工具
工具 | Parsec：轻量级、即开即用的远程连接工具
工具 | Thud：一款用ionic+angular开发的、开源、无广告的Android 新闻 App
工具 | 叮咚抢菜-派送时段监听及推送工具

提升体验：身心舒适、自律极简😃

健康 | 据《柳叶刀》医学期刊称，步行几乎对身体内所有的细胞都有好处；能够带来益处的步数大约是 7000步(老年人) - 9000 步(年轻人)，超过推荐的次数后，死亡风险就不再降低。
健康 | 在线问诊平台横评：当下的在线问诊平台是资本的大饼
健康 | 程序员延寿指南：稳健的活得更久、降低66.67%全因死亡率
疫情 | “躺平”抗疫维护的是既得利益者的财产，牺牲的是大众以及弱势群体的健康、甚至生命，而我们这些普通人，早晚一天都是弱势群体的一员。
疫情 | 首批新冠感染幸存者：每一天看似平淡的生活，其实都是最大的幸福。
心理学 | 自卑的本质 - one：接受自己的不好、承认问题的难度、想办法解决问题
心理学 | 如何提高情绪阈值：避免悲观即刻努力、放大心胸面向未来、持续学习保持健康
生活 | 在线小工具：选择食材 ⇒ 推荐食谱
游戏 | 汉兜、词影：国内版Wordle(在国外大火的游戏)，玩家有十次机会猜一个四字词语（一般是常见成语）。每次猜测后，通过拼音、音调和汉字的颜色标识与答案的区别。
环保 | 科学家在活人血液以及肺部发现塑料微粒，/样本取自 13 名接受手术的患者的组织，其中 11 例发现了微塑料。最常见的是用于塑料包装和吸管的聚丙烯，以及用于瓶子的 PET。这些颗粒可以在人体内传播，并且可能滞留在器官中。
时间管理 | 如何高效利用下班后的时间？- 少数派：**可用时间 = 24 小时 - 工作时间 - 通勤时间 - 休息时间 - 花在必要事项上的时间：**从 996 的工作换到 965；搬到离公司更近的地方；从社交网络抽离；提升睡眠效率减少睡眠时间；

提升物质：专业技能、工作投资💹

自媒体 | 写作技巧：尽可能写的更具体 - 文案大师 Ann Handley 的邮件
商业 | 美剧《亿万》金融、财富、信息差：财富的本质就是洞察力的变现
商业 | 微软是如何做到市值$10T的：2000 年代的 Windows 公司，2010 年代成为 Office 公司，并正在成为 2020 年代的云公司
商业 | 金融战历史：”不创造财富，也不以土地占领为目标，而是依仗资本实力建立各色武装实力去偷猎、围猎他国财富，其实都属广义金融战范畴，与当今更加隐秘、更加高超的金融战异曲同工，不过是时代不同、表象不同而已。“
行业 | IC Insights 的数据显示，2021 年中国占了全球半导体市场份额的 4%，美国占据了一半以上的份额。
职业 | **Topworker跨境客：**全国最大的、优质的跨境自由职业者社群
职业 | Toptal：全球精英自由职业者平台（需要英语好
职业 | TalentOrg：互联网行业的远程工作社区（不需要有好的英文能力也可以胜任，招聘多语言产品经理
职业 | 前端私活
求职 | Show Me Bug：技术面试的云端IDE，提供实时共享的编程环境
求职 | 如何判断一个求职者的职业水平：反向思考自己如何提升求职成功率
技术 | Nginx替代方案：Caddy2 开源自动化https 比nginx配置简单
技术 | 22种设计模式目录
前端 | 前端架构：前端架构设计模式
前端 | 前端架构：前端代码的三种设计模式：组件模式、compose组合模式、Membrane模式
前端 | 项目管理：从零到一建立前端规范
前端 | 性能优化：webpack优化
前端 | 性能优化：虚拟列表
前端 | 性能优化：得物团队H5秒开优化
前端 | 补齐知识体系：React知识点脑图
前端 | 补齐知识体系：ajax fetch axios区别
前端 | 补齐知识体系：分析HTTP TCP区别
前端 | 补齐知识体系：CSS calc()函数，可以计算长度值、角度、时间、百分比、数值
前端 | 补齐知识体系：css3 animation暂停/恢复：animation-play-state: paused/running;
前端 | 补齐知识体系：CSS Functions脑图
前端 | 补齐知识体系：5个好用的现代JS特性
- 用Object.hasOwn()代替key in obj（包含原型链）和obj.hasOwnProperty（对于非obj容易报错）
- 用#声明私有属性
- 数字分隔符6000_000_000
- 用?.简化&&和三元运算符
  1. obj?.prop 对象属性
  2. obj?.[expr] 对象/数组属性
  3. func?.(...args) 执行函数
前端 | 学习借鉴：年包70w+的前端技术专家offer是如何拿到的
前端 | 开发工具：Javascript运算符搜索引擎
前端 | ECMAScript新提案：通过复制更改数组，提案了四个新的数组方法.toReversed()、.toSorted()、.toSpliced()、.with()，前三种方法相对应的原始方法.reverse() .sort() .splice() 均会更改原数组，.with(index, value)方法替换了原始的修改数组元素的方式arr[index]=value
前端 | ECMAScript新提案：类型注解（TypeScript 在未来可能被纳入 ECMAScript 中）
前端 | 函数式编程：函数组合compose、管道符、pipe函数
前端 | 实际场景与方案：Vue API 统一管理
前端 | 实际场景与方案：用责任链模式解决一系列校验问题、避免大量if、else
前端 | 实际场景与方案：前端常见实际问题&解决方案
前端 | 项目实例：koa2+vite+ts+vue3+pinia前端SSR项目
前端 | 项目实例：Angular 13 Example App + Angular CLI + i18n + GraphQL + TypeScript

纯CSS实现无限循环轮播

Fri, 22 Apr 2022 00:00:00 GMT

原理

demo代码

html

<div class="wrap">
  <div class="slide-dom">
    <div class="itemA">A</div>
    <div class="itemB">B</div>
    <div class="itemA">A</div>
    <div class="itemB">B</div>
  </div>
</div>

css

@keyframes infinite-slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.wrap {
  overflow-x: visible;
  background: #eee;
  width: 200px;
  height: 300px;
  margin: 0 auto;
  padding: 100px 0;
}
.slide-dom {
  width: max-content;
  animation: infinite-slide 10s linear infinite;
}
/* 鼠标悬浮时暂停动画 */
.slide-dom:hover {
  animation-play-state: paused;
}
.itemA {
  display: inline-block;
  width: 200px;
  height: 100px;
  background: pink;
}
.itemB {
  display: inline-block;
  width: 200px;
  height: 100px;
  background: yellow;
}

效果

demo在线地址

前端字体性能优化

Mon, 11 Apr 2022 00:00:00 GMT

问题1：字体文件过大，解决方案：`Fontmin - 字体子集化`

介绍

Fontmin是一个纯JS字体子集化方案，用于压缩字体文件。

依赖node环境。

其原理是扫描项目中的文字，将用到的字从字体文件中单独拿出来组成一个子集字体文件。

可以达到大幅度减小字体文件尺寸的效果。

安装

npm install --save-dev fontmin

使用

const fs = require("fs");
const Fontmin = require("fontmin");

//扫描文件目录
const scanFolder = (dir, done) => {
  let results = [];
  fs.readdir(dir, (err, list) => {
    if (err) {
      return done(err);
    }
    let i = 0;
    (function iter() {
      let file = list[i++];
      if (!file) {
        return done(null, results);
      }
      file = dir + "/" + file;
      fs.stat(file, (err, stat) => {
        if (stat && stat.isDirectory()) {
          scanFolder(file, (err, res) => {
            results = results.concat(res);
            iter();
          });
        } else {
          results.push(file);
          iter();
        }
      });
    })();
  });
};

//Fontmin根据文字内容生成压缩后的字体子集
const generateFinalHTML = (finalString) => {
  const fontmin = new Fontmin()
    .src('static/fonts/*.ttf')  // 需要压缩的所有字体文件
    .dest('static/fonts/')  // 压缩后文件存储路径
    .use(
      Fontmin.glyph({
        text: finalString,
        hinting: false,
      })
    )
    .use(
      Fontmin.ttf2woff({
        deflate: true,
      })
    );

  fontmin.run((err) => {
    if (err) {
      throw err;
    }
  });
};

//获取目录下所有文件的文字内容
scanFolder("dist", (n, results) => {
  let set = new Set();
  results.forEach((file) => {
    const result = fs.readFileSync(file, "utf8");
    const currentSet = new Set(result);
    set = new Set([...set, ...currentSet]);
  });
  generateFinalHTML(Array.from(set).join(""));
});

问题2：FOIT（Flash of Invisible Text ）字体闪现问题

问题描述

浏览器在加载字体时，默认不展示文本内容，在现代浏览器中，FOIT会导致这种现象出现至多3秒。

如果有文字混搭（有的字体需要加载，有的字体不需要）那么用户可能就会发现“网页只显示部分字体”的情况，用户体验很差。

解决步骤1：`font-display:swap` ：未加载到字体时，优先显示替代字体，而不是空白（MDN文档）。

font-display属性决定了一个@font-face在不同的下载时间和可用时间下是如何展示的。

@ font-face {
  font-family: ExampleFont;
  src: url（/path/to/fonts/examplefont.woff）format（'woff'），
       url（/path/to/fonts/examplefont.eot）format（'eot'）;
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

解决步骤2：`preload`：预加载字体文件，提前加载字体。

<link rel="preload" type="font/woff" href="/fonturl" as="font" crossorigin="true">

解决步骤3：`document.fonts.ready` 接口：浏览器处理完成字体加载后的回调（加载成功或者失败都会触发回调）

document.fonts.ready.then(() => {
  // 字体加载完成后的逻辑
  this.fontLoaded = true;
});

月刊#9 | 2022.03

Thu, 31 Mar 2022 00:00:00 GMT

提升认知：信息输入、知识管理🧠

话题 | 迄今为止看到的对女性最诚挚的祝福
书籍推荐 | 女性主义入门书《成为波伏瓦》：“有伦理的爱情必须是对等而互惠的，爱人与被爱的人都必须有意识，是自由的，努力拥抱彼此生活中的价值所在。而且，当他们的爱涉及性时，他们都必须是性的主体，而不是客体。”
纪录片 | 天地玄黄 (豆瓣)：从远古到现在，从猿猴到人类，从荒无人烟的沙漠到震撼人心的宗教活动现场，从广袤天地带来的感动到婴孩单纯的笑脸给予的幸福，祝福与我们共同存在在这颗蔚蓝地球上的一切
纪录片 | 积极心理学 (豆瓣)：哈佛幸福课，幸福感是衡量人生的唯一标准，是所有目标的最终目标
纪录片 | 地球脉动 - 电影 - 豆瓣搜索：BBC纪录片，从南极到北极，从赤道到寒带，从非洲草原到热带雨林，再从荒凉峰顶到深邃大海，难以数计的生物以极其绝美的身姿呈现在世人面前。
纪录片 | 但是还有书籍 (豆瓣)、但是还有书籍第二季 (豆瓣)：在阅读多样化、碎片化的当下，记录这个时代形形色色的爱书之人，捕捉和书有关的那些精彩故事
纪录片 | 人生第一次 (豆瓣)：央视网系列人文纪录片《人生第一次》旨在通过蹲守拍摄，观察不同人群在人生重要节点的“第一次”：第一次上学、第一次上班、第一次走进军营，许多“第一次”串联起我们人生的重要节点，“初来乍到，请多关照”。
纪录片 | 人生七年 - 电影 - 豆瓣搜索：采访来自英国不同阶层的十四个七岁的小孩子，他们有的来自孤儿院有的是上层社会的小孩。此后每隔七年，艾普特都会重新采访当年的这些孩子，倾听他们的梦想，畅谈他们的生活。人生的轮回从这十四个七岁的孩子真实生活开始，他们天真无邪的脸上写满对生活的憧憬和渴望。“七岁看老”，在这童言无忌的问与答中，人生七年又七年，震撼上演。（截至2022年，从7UP，到63UP，已经拍摄了9部）
纪录片 | 女人 Woman(豆瓣)：走访50个国家，纪录2000名女性对自己的评价，构成了一幅巨大且撼动心灵的女性“自画像”。

提升效率：用好工具、用好工具🔨

工具 | WIS微思博客：多款在线智能工具、自定义地图空间可视化工具
工具 | 超级简历：免费快速创建简历、海量模板
工具 | Tunefind：电影和电视音乐查询网
工具 | zlibrary：免费电子书搜索下载
工具 | slidesgo：海量免费 PPT资源下载
工具 | 古诗文网：古诗文经典传承
工具 | all to all：在线文档音视频图片格式转换

提升物质：专业技能、工作投资💹

前端 | 一个Canvas3D动效网页案例
前端 | docx to html在线转换网站（常用于网站隐私政策、用户协议等页面）
行业 | 2022年的互联网行业

黄金投资新时代：黄金是永恒的硬通货

Wed, 30 Mar 2022 00:00:00 GMT

简介

书名：黄金投资新时代
原作名： The New Case for Gold
作者：[美]詹姆斯·里卡兹 James Rickards
译者：许余洁吴海军
出版时间：2016年4月
ISBN：9787508693743
封面：/images/picgo/20220331171131.png
豆瓣链接：https://book.douban.com/subject/30353151/
Amazon链接：https://www.amazon.com/New-Case-Gold-James-Rickards/dp/1101980761/
思维导图：/images/picgo/20220331171755.png

《黄金投资新时代》一书深入浅出地论述了黄金即货币的观点：当货币秩序紊乱时，黄金将起到重要的作用，即使并非单纯的定锚作用，也是重建货币体系中各国谈判的重要筹码。

作者梳理历史，发现在面临国际货币体系失序和复杂的金融市场时，黄金的表现仍然非常稳健，拥有黄金是抵御当前经济环境和不稳定货币体系的保险和保障。

黄金即货币

黄金是人类共识的财富资本

黄金是唯一具有作为货币所需的全部必要特性（稀缺性、延展性、惰性、耐用性和均匀性）的元素，可以作为可靠并且实用的价值贮藏物。

黄金的历史1：18世纪经典的金币金本位在英国诞生以来，英镑、美元等信用货币先后依靠黄金的天然信用成为世界货币，黄金成为社会财富价值标准。

黄金的历史2：二战即将结束时，多国遭受重创，金融和货币体系皆处于崩溃边缘。然而，美国却成为这次战争的最大受益者。大量黄金流入，令美国当时拥有世界黄金总储备量的大约75%。

为了加强各国经贸合作，重建国际货币秩序，1944年7月，美国邀请44国政府代表共同确立了布雷顿森林体系：规定美元与黄金挂钩，每35美元兑换1盎司黄金，其他国家的货币与美元挂钩，只能通过美元同黄金发生联系。美元因此成为了国际货币体系的中心。

黄金的历史3：19世纪末，美国关闭黄金与美元挂钩的窗口，把“黄金无用论”推上了巅峰。

黄金的历史4：2008年国际金融危机以来，关注黄金又成为世界资本市场上的潮流。俄罗斯等多国央行增储黄金。

图片来自WGC-世界黄金协会，在图中可以看到，全球黄金总储存量约19万吨，其中：

黄金首饰约9万吨
私人投资金约4万吨
各国央行官方储备金约3.5万吨
其余黄金约2.6万吨

由金本位制度、到美元-黄金的布雷顿森林体系，到“非货币化”，再到当下社会对黄金的重视，足以说明：30多年来的黄金非货币化其实是人类的一次试错过程。

如今，包括美元在内的世界范围内的信用货币的信任危机在不断加深。黄金已经进入一个新的价值（价格）重估阶段。

黄金是“M小于0”（M-Subzero）货币

货币由3部分组成：交易的媒介、价值的储存和记账的单位。

从技术层面讨论关于广义或者狭义的货币供应，如M3、M2、M1、M0等范畴。

M0（货币）= 流通中的现金，M0也被称为“基础货币”，即流通于银行体系之外的现金（消费、终端市场
M1（狭义货币）= M0 + 企业活期存款（现实购买力
M2（广义货币） = M1 + 准货币（居民储蓄款 + 定期存款 + 其他存款）（投资和中间市场
M3 = M2 + 金融债券 + 商业票据 + 大额可转让定期存单等

作者把黄金称为“M小于0”（M-Subzero），因为即使经济学家们不予认可，黄金也是纸币背后真正的基础货币。

美联储不愿承认的事实：美元依赖黄金

“美联储”一般是指联邦储备银行体系，由12个独立的地区性联邦储备银行组成，每个银行都由该地区的私人银行所拥有。

如果只考虑美联储的证券投资组合，美联储在2013年已濒临破产：

表面上看，美联储并没有破产和资不抵债。在撰写本书时，美联储的资产负债表显示总资产约为4.49万亿美元，总负债约为4.45万亿美元，总资本（资产减负债）约为400亿美元。
但是，美联储杠杆率很高（约合114∶1），杠杆放大了资本账户收益及损失的影响。美联储资产的损失只需要达到1%就可以彻底抵销其资本。

然而，考虑到美联储隐藏的黄金资产，它从来没有资不抵债：

美国财政部持有的黄金数量约为8000吨，大致相当于美联储在其资产负债表中所称的黄金数量——也是8000吨左右。
隐形资产（黄金券）为美联储资本账户增加了3000亿美元，使得美联储的杠杆比率从114∶1降至一个更加合理的比例——13∶1，与大多数资本雄厚的银行的资本比率类似。

美元决定了人们对全球金融体系的整体信心，对美元的信心依赖于美联储资产负债表的偿付能力，而这种偿付能力最终却依赖于黄金。

这就是为什么虽然各国央行和政府都公开贬低黄金的重要性，但仍然将黄金储存在它们的保险库中。

黄金是复杂经济局势下的保险

作者为何判断国际货币市场不久会崩溃

作者在分析世界经济状况和经济崩溃的可能性时，使用了复杂性模型。然而，美联储却使用随机均衡模型。

然而，经济并非一个均衡的体系，而是一个复杂的体系：

由于网络自身的特性，网络之中存在着相互连接、相互作用和溢出效应的现象，这些现象导致了网络的复杂性。
在一个复杂的系统中，如果你试图使用均衡模型实施策略，那么必定会错误百出。
例如，2007年美国房地产崩溃，但是尽管平时美国房地产市场与日本股票市场本身没有关联，但美国住房贷款市场的困境导致日本股票市场同时大幅下滑。
总而言之，全球经济状况就如同复杂的网络系统，盘根错节，十分复杂

过去30年来，经济出现了极度的金融化

传统上，金融被用来促进贸易、生产制造业和商业的发展，它支持其他业务活动的开展，但金融业本身并不是目的所在。

在2008年经济危机时期，美国经济中金融业约占股票市值的17%，占GDP的17%。对于一个促进性的行业来说，它的比例是巨大的，合理的比例应该是5%。

这表示我们更倾向于从金融交易，而非从制造业、建筑业、农业和其他实体形式的生产中获得财富。

银行家用来提取财富的手段增加了复杂性，却没有增加价值

金融业本身并不能创造财富，它利用内部信息和政府补贴从其他行业中获取财富，这是一种寄生或所谓的“食利者”活动。

在金融引发下一次经济危机之前，应该控制它的无序发展，控制措施包括分拆大银行、禁止大部分金融衍生品、限制货币供应等。

美联储及其政策具有不可靠性

美联储是私人银行所有权与政府监管的不寻常混合体：

在区域性的储备银行层面，联邦储备银行是私有的，美联储的下一层所属机构由位于全美主要经济中心的12家地区联邦储备银行组成。其中包括纽约联邦储备银行、波士顿联邦储备银行，以及费城，旧金山和达拉斯等联邦储备银行。这些区域储备银行并不属于美国政府所有。
但整个系统的控制权仍掌握在由美国总统任命并经美国参议院确认的理事会中。

美联储执行政策普遍失败：

美联储可以通过公开市场操作直接控制所谓的“政策利率”，也就是联邦基金利率，美联储通过调节这一利率来达到一个目的——保持美国最大限度的就业和物价稳定。
如果加息，这一利率升高，银行在给企业或个人放贷时的利率也水涨船高，此举可以减少货币供给量，降低通胀，从而给经济降温。
反之，如果降息，银行放贷的利率就会降低，借钱成本更低，将刺激企业和个人贷款，一般来讲，整体经济得到刺激，变得更加活跃。
自2008年以来，美联储已有15个不同版本的政策去调控利率，按照作者的原话“这并不是一个训练有素而严谨的实验，美联储只是走一步算一步，随着时间的推移对此加以弥补。”

个人投资者的最保险的投资就是黄金

互联网金融战争

2013年8月22日，纳斯达克停业了半天。4年后，媒体报道了原因：俄罗斯政府向纳斯达克操作系统植入了攻击病毒。

因此互联网金融战争威胁的存在，是拥有黄金的另一个原因，因为黄金不是数字化的，不能被黑客攻击或抹除。

现金之战

除了货币战争和金融战争之外，美国还出现了针对现金的战争。这种对自由使用现金权利的攻击，是在经济不确定时期考虑投资实物黄金的另一个理由。

一个完全数字化的系统正在为负利率的经济体系铺路；取消现金也使得强制保释、征收和冻结账户变得更加容易。

从金币到黄金担保支持的纸币，再到法定货币，之后到数字货币的整个过程，已经花费了大约100年的时间。在此过程中的每一个步骤，都让政府更容易征收你的财富。

因此黄金作为一种实物财富，有保值的效果，并且可以不受其他形式的货币数字化的影响。

无论是通货膨胀、还是通货紧缩，黄金都是保值的

通货膨胀的情况下，物价上涨，金价上涨，黄金的保值是显而易见的。

通货紧缩的情况下，如果黄金的名义价格下跌，那么其他商品的名义价格下跌更多，如果以实际价格来衡量，黄金仍然是保值的。

美元霸权力量减弱

世界对美元的信心正在减弱：

自2010年以来，美国政府实际上已经放弃了稳健的美元。当年1月，美国结束了自1980年以来盛行的稳健美元政策。一项旨在鼓励通货膨胀和名义增长的货币贬值政策开始实施。廉价的美元策略引发了一场货币战争。

世界各地有许多活动旨在削弱美元作为全球储备货币的地位。我们有太多的贸易伙伴和金融投资伙伴已经对美元失去了信心，并对美国利用美元的地位来维持赤字和印钞补缺的方式感到不满。

外资银行也正在尽快摆脱美元体系。

多个国际力量都希望结束国际货币体系中的美元霸权：

俄罗斯、伊朗、中国都先后遭到过美国的经济制裁；

2014年俄罗斯和中国、伊朗分别签署了石油贸易协议；

俄罗斯本身是石油出产国，但是俄罗斯同意购买伊朗的石油；由于美国的制裁，伊朗还不能轻易地在公开市场上出售石油；因此俄罗斯可以进口伊朗的石油，担当伊朗向其他国家出售石油的中间人；

而中国与瑞士进行了货币互换；因此中国向俄罗斯购买石油后，可以用瑞士法郎支付给俄罗斯；俄罗斯可以通过其他国家转换瑞士货币；

这样的贸易链接，完全跳过了美元。

金价起伏，但是黄金的价值永恒不变

黄金的“价格”

黄金的美元价格的“上涨、下跌”，其实意味着美元货币价值的“下跌、上涨”。

作者对黄金投资者的建议：应该关注的是黄金的重量，而不是黄金的价格。

实物金价会遭到来自纸黄金市场的压制，但实际上，实物金比纸黄金价值更高：

黄金的衍生品——期货、掉期、ETF、租赁、远期和未分配黄金构成纸黄金市场。
纸黄金市场很可能有实物黄金市场的百倍之大，如果一直有双向市场、价格行为不混乱、人们愿意不断滚动契约、人们不坚持实物交割，杠杆化的纸黄金系统就可以有序运转。
实物金价会遭到来自纸黄金市场的压制，但是如上所述，纸黄金市场存在过高的杠杆、意味着过高的风险，一旦黄金实物交割的任何意外中断都可能引发买盘恐慌、金价暴涨。

操纵金价的力量

金价操纵是千真万确存在的。在没有相关消息的情况下，当我们看到金价大幅下跌时，我们可以合理推断出黄金市场正在被人操纵着。

操纵金价的途径有很多，例如抛售实物金、纸黄金操纵、对冲基金操纵、租赁未分配远期合约，或是以上途径的组合操纵。

美联储希望美元走弱：

美元贬值会导致进口成本上升，这有助于美联储实现其通胀目标
美元疲软原则上意味着黄金价格上涨
美联储希望金价有条不紊的上涨，但不希望金价无序增长，因此需要操纵金价走低。

中国希望金价走低：

中国拥有数万亿美元的美国国债
如果美国达到它所希冀的通货膨胀率，美元走低，中国持有的美国国债就会贬值
但是美元走低，黄金就会涨价，持有的黄金价值会更高。
因此持有美国国债和黄金是保护中国财富的一种对冲方式。

对抗操纵？

如上所述，复杂莫测的原因导致实物黄金的“价格”起起伏伏，实物金投资者应该如何对抗操纵？

作者的建议是：

任何金价控制都需要实物黄金；实物黄金是有限的；对金价的操纵控制是有极限的。最终，价格控制者的实物黄金将消耗殆尽，或通货膨胀预期的变化将导致金价飙升，甚至连政府都无法控制。
因此无需对抗操纵，即使金价起伏，实物金的价值也是永恒不变的。
投资者应该忽略金价的起伏，长期购买和持有黄金，以在突如其来的金融震荡和恐慌情况下达到财富保值的效果。因为我们的目标不是通过交易头寸来快速获利，而是财富长期保值。

如何投资黄金

作者的建议是：现在就投资黄金，将流动资产的10%配置为黄金，并将其妥善存放在安全的地方。

除此之外，我总结了国内投资者购买实物金的几种途径：

上海金交所，但此渠道已经对个人买家关闭（2022年，金交所已经取消了个人用户注册，各大银行的代理交易通道也被关闭了）
各大金店实物金，溢价较高（例如2022年4月1日金交所大盘价394，四大珠宝品牌中谢瑞麟、周生生、周大福金条价是502，首饰金价是512，还要另外收几十~上百每克的工费）
银行实物金，大多数基础投资金条价格是大盘价+10~30元/g工费
各大电商平台黄金卖家，出售大盘价格+5元/g工费的实物金、金条、板料

关于黄金的有趣知识

自人类文明以来，开采了约18.72万吨黄金
世界海洋中的含金量被预估为1.5万吨
世界上**90%**的黄金已经被开采
被开采的黄金中，有**49%**被用于首饰
已被开采的所有黄金，可以装进一个21立方米的箱子中。
黄金的熔点是1064摄氏度
国外通常使用盎司Oz作为单位衡量黄金的重量，1Oz=31.103g
伦敦金交所的标准交易金条重量是400盎司
中国上海金交所的标准交割金条重量是1kg

以上数据来源: www.gold.org

月刊#8 | 2022.02

Mon, 28 Feb 2022 00:00:00 GMT

https://weread.qq.com/web/reader/95e323805dfeb195e2928b1k1c3321802231c383cd30bb3

高敏感是种天赋：HSP自救指南

Fri, 25 Feb 2022 00:00:00 GMT

简介

书名：《高敏感是种天赋》
原名：《Highly Sensitive People in an Insensitive World》
作者：[丹麦]伊尔斯·桑德
ISBN：9787559608710
豆瓣链接：https://book.douban.com/subject/27125070/
思维导图：/images/picgo/2022HSP.png

HSP是Highly Sensitive People，高敏感人群。

如果你无法长时间待在热闹的环境
如果你被人指责过于敏感
如果你因为对信息过于敏感，以致于大脑“硬盘”很快就被填满、意识失去秩序
如果你因为高度共情，而常常被别人的情绪影响
如果你拥有过度的责任感、总是努力避免给他人带来不便或痛苦、甚至常常自责
如果你即使独处也能拥有丰富的内心世界
如果你行事谨慎、提前考虑好每个细节，想象所有可能的风险，并准备好对应的解决方案

如果以上的特征之一与你相符，那么我推荐你看看这本书。

我从前常常产生自我怀疑：是否自己过于敏感？

看完了作者在本书中介绍的HSP的特质，才认知到自己是高敏感人群的一员。

本书的作者是心理治疗师，丹麦奥胡斯大学神学硕士，硕士论文以卡尔•荣格与索伦•克尔凯郭尔为主要研究方向。

书中的HSP如何自处、如何自我疗愈、如何应对人际交往等方法，让我受益良多。

如何判断自己是否高敏感

发达的神经系统

高敏感人群拥有发达的神经系统，听觉、视觉、触觉、嗅觉等感官可能较敏感，能感知更多的信息。

因此，高敏感人群可以感知到事物细微的差别，并对信息进行更深入的加工。

我们拥有活跃的想象力和丰富的内心世界，这意味着我们从外部世界接收和感知到的信息，会触发大脑里各种概念、想法并建立联结。

这也会导致我们的大脑“硬盘”很快就被填满，不堪重负。

高度共情，容易受别人的情绪影响

能给予别人共情式的倾听；

在帮助和照顾他人方面十分尽心；

对别人的情绪也非常敏感；

但是，并不擅长将自己从他人的痛苦中抽离出来

拥有强烈的责任感

许多高度敏感型人都有着强烈的责任感，认为自己需要承担整个世界的责任。

研究显示，与一般4岁左右的儿童相比，抑制性（敏感性）的儿童更少欺骗他人、破坏规则或者做出自私的行为。

高度敏感型人总是努力避免给他人带来不便或痛苦。他们也花更多精力去维持与他人的关系。

但是，有时学着后退一步，让他人负责，使之从错误中汲取教训或许会更好。

拥有更加丰盛的内在世界

HSP享受宁静的生活，独自一人时，很少感到孤独无聊，甚至享受其中。

敏感者们的意识和无意识之间的间隔太过无力，无意识的意念和想法很容易在他们进行创作或者编织梦想时闯入大脑，变得清晰可见。

有时候能思如泉涌，并不需要特别激励。这股天生的动力可谓是价值连城的财富，当然，前提是你懂得如何利用它。

谨慎

HSP倾向于提前考虑好每个细节，想象所有可能的风险，并准备好对应的解决方案。

这虽然会降低你出错的概率，但是，它也会降低你对事物的接受速度。

可能使你长期处于担心焦虑的状态

附录2：敏感度指数测试

高敏感是与生俱来的

有些人生而敏感，其敏感性是与生俱来的，遗传因素比环境和教养的影响更大。

研究表明，这些高敏感人群的比例是20%。

敏感不是缺陷，相反，它可以丰富你的人格。

高度敏感型是不同特质的复杂结合体：尽责、创造、积极向上、易受影响、共情，敏感的感觉和脆弱的神经系统等等。

这些特质会给敏感型人的生活带来些许麻烦，但也会是创造性、专注力和同理心之源。

高度敏感可以极大地丰富我们的人格特点……只有在糟糕或者异常的情况出现时，它的优势才会转变成明显的劣势，因为那些不合时宜的影响因素让我们无法进行冷静的思考。没有比把高度敏感归为一种病理特征更离谱的事。如果真是这样，那世界上25%的人都是病态的了。

——荣格（C.G. Jung）

因此，作为HSP，我们应该客观看待自己，可以将敏感一词，视为中性词，不贬不褒。

我们天生比别人拥有更敏感的感官、神经，如果妥善利用，敏感就是我们天生的优势。
在糟糕的环境中，我们比别人更容易感到疲惫，如果我们知道这一点，并合理安排自己的生活，也可以最大程度的避免糟糕的体验。

HSP应该如何自处

了解自己、接纳自己、爱自己

正如前文所说，高敏感是与生俱来的。

我们应该客观地看待自己和周围的世界。

和过去和解、和自己和解。意识到并理解自己的敏感性，选择让自己最舒服的方法。

你越是接受自己是一个什么样的人，你越不需要花太多精力去让自己适应

关切自己，同情自己，给予自己支持和鼓励。

学着接受自己，肯定自己的独特、感受更多、想象更多、创造更多。

停止内耗、跳出恶性循环

典型的高度敏感型的人都存在低自尊问题，并且尝试通过设定高标准来弥补自己的缺点。

也因此容易陷入恶性循环：

跳出恶性循环的方法，就是做真实的自己，接纳自我、正视自我，设定与自身能力相匹配的目标。

为自己设定一些可实现的目标：

比如早早起床、做顿早饭。
简单的事就可以为自己带来积极的体验。
列出一份心愿清单，当感觉心情低落时，找点清单上的事情做，完成它们会带来极大的快乐。

合理处理冲突、愤怒、内疚、羞耻

愤怒有害无利，冷静下来

当愤怒值达到顶峰时将其发泄出来并不是件好事；

如果你的愤怒给别人带来伤害，你也会感到痛苦，无法忽视内心强烈的自责感。这会刺痛你的神经，使你受困于内疚和自责的牢笼。

清楚地说出“不”“我不想做”或者“我不能接受”常常比直接表达愤怒更有效。

在冲突中，叫停、休战，确定重新沟通的时间，各自冷静
共情，发现愤怒背后的需求

愤怒常常只是人们保护自己的盔甲。愤怒之下，往往隐藏着许多其他脆弱的情感。

发现隐藏在愤怒背后的情绪、根源。
明确边界

认真观察，勇于表达，最后不带偏颇地讲出自己感知到的信息。

为自己设置界限，明确要求对方停止对你做出的行为。
转愤怒为悲伤

愤怒往往出现在期望未被实现或者需求未被满足之时。

与愤怒不同的是，悲痛的优势在于它可以唤起别人的同情，得到别人的支持。

可能的话，放下未得到满足的期望，启动悲伤程序，引导对方与你共情。

从“应该”到“希望”，从愤怒到悲伤。
合理内疚

内疚其实是一种面向自己的愤怒，可以视为一种对自己的无能为力和悲伤情绪的防御方式。

如果你的内疚感和你的行为所带来的影响之间是成比例的，那么你的内疚就是合理的。

如果你对那些你并没有产生任何实质性的影响或者根本无法人为控制的事感到内疚，那么这种内疚感就是多余的。

如果是合理的内疚，对承受方表达歉意、做出补偿，及时消除内疚感。

如果是不合理的内疚，那就勇敢直面生活的不确定性和自己的无能为力，打破“非黑即白”的世界观；详尽列举出糟糕状态的所有原因，找出只属于自己责任的那部分。
及时止损，远离不健康的人际关系

有时候，人际关系不顺利，并不是自己的问题。

如果尝试过上述方法后，仍然不起作用。

那么应该重新思考一下，你们的关系给你们双方带来了什么？是否要继续维持你们的关系？

精神断舍离

清晰地设定边界、表达不满
留出独处时间
减少信息刺激的输入
做一些疗愈的事情
给自己适当的独处时间
向伴侣表达明确需求：希望ta尊重你的敏感型人格

人际交往的技巧

高质量互动

在高质量的互动下，情感的交流就会代替信息刺激，给高敏感人群更好的体验。

如果自己是倾听者，要给予对方反馈，适当表达自己。

如果自己是表达者，要寻找方法获得对方回应，例如提问对方如何看待你、分享想法和感受、进一步追问等。

掌控对话：设定对话界限

设置好对话的界限，当人际交流中感到疲惫、不适时，将注意力返回到自己身上，避免在对话中被信息吞噬。

掌控对话：控制聊天深度

不同的聊天深度适合不同的场景。

深入的聊天，引人入胜，可以带来情感的体验。

想要很深度的聊天，有两个技巧：

沉默，可以在无形之中增加对话的深度。
从泛泛而谈转变到具有针对性的交流。
追问。

浅聊，适合初识、短时间的交际场景，有时候，需要及时避免对话变得更深，在必要的时候能成功地将深入的对话带回到表面，轻松地结束对话；

浅聊的技巧：使用一些概括性或者解释性的语言（俗称糊弄、敷衍😂

掌控对话：灵活切换于对话的四个层次

层次1：短对话。

短对话的优点是，你很容易开始一个话题，结束一个话题也非常轻松。如果你对你们的对话并不满意，你也可以很快从对话中脱身

适合不熟悉的人，作为互相认识的敲门砖。

结识一个新的人方法，就是建立你和ta之间的纽带

可以直接直接讲讲自己当前的感觉，包括味觉、嗅觉、听觉、视觉

重要的不是你说了什么，而是你说话的语气，让对方感受到你们还有进一步交流的空间

层次2：角色层次，寻找共同兴趣。

根据某个特定角色来展现自己，例如介绍自己的职业、家庭

寻找共同的兴趣，交换信息、想法、意见，讨论政治、家庭以及其他有意思的东西

从第1层次到第2层次，可以延长每个话题的停留时间。例如：对食物的一点意见就可能将话题切换到对食谱的探究；对天气的简单点评也可能发展到对气候的讨论。当然，你也可以提出一个新的话题。

达成一致，定下约定。

层次3：情感层次，让对方踏入你的秘密空间。

分享一些个人经历，将对方带入到你的秘密空间

聊一些自己关于人和事的经历和感受

分享你的童年、婚姻、同事关系和家庭关系、流言蜚语、八卦新闻

分享自己的内心世界

层次4：坦诚相待。

先确认对方是否真的想跟你进行如此深入的对话

讨论两者之间的关系：我和你，此时此刻，是如何看待对方的。

例如：我想跟你聊一聊我们之间的感觉。可以吗？我很想跟你聊一聊此刻我对你的感觉。你愿意听吗？我想知道你对我的感觉。你愿意告诉我吗？

月刊#7 | 2022.01

Mon, 31 Jan 2022 00:00:00 GMT

【月刊】分类集合页 https://scarsu.notion.site/b4ea0fb5a9ad4131b031205a8d2929f2

认知提升 | 读书 | 信息源 | 知识管理 🧠

【话题】每个人的缺点，都会在与最亲近的人相处时放大显现。
【话题】我们一生中不同阶段需要放弃的东西 - 《少有人走的路》
【话题】为什么有些垂直技术领域看不到好文章 - 余杭子曰
【TED演讲】读书是为了什么思维导图 - 余杭子曰
【文章推荐】happy xiao：2021改变我人生的那些文章
【知识管理】一个信息流管理方案：RSS、Inoreader、简悦、Obsidian、Notion
【播客】有趣的中文播客推荐？
【播客】全种类播客推荐

纪录片 | 电视节目 📺

央视纪录片《基金》，基金投资必看
我们究竟有多轻，上下五千年 - 央视纪录片《国家宝藏》
电视节目《锵锵行天下》，窦文涛深度聊天
电视节目《很高兴认识你》，在疗愈时光里与生活对话
《但是还有书籍》纪录片，快时代里的阅读指南
为情所困《梁永安爱情问答》
拓展知识边界、开阔心胸和格局，访谈节目《十三邀》
拖延、焦虑《某某与我》呼兰篇
内耗严重、身心俱疲、找不到人生目标与意义《梁永安从“小镇做题家“到”窄人“》
【财富】电视节目《隐姓亿万富翁》，亿万富翁再现如何从贫穷汉到价值百万公司的总裁
【财富】电影《金钱与我》，消费节流的方法
【财富】纪录片《富哥哥穷弟弟》，相同背景走出的不同人生
【财富】纪录片《金钱通解》，经济骗局
【财富】纪录片《成为沃伦巴菲特》
【财富】纪录片《无节制消费的元凶》，资本主义的三大毒药：性开放、成功学、消费主义。

2021年度书籍榜单 📔

kindle电子书2021年度榜单（中国）：
- 蛤蟆先生看心理医生
- 被讨厌的勇气
- 三体
- 消失的13级台阶
- 百年孤独
- 别想太多啦
- 绝叫
- 活着、无人生还
- 毛泽东选集
2021微信阅读年度书单：
- 《疫苗竞赛》
- 《狂人日记》（2月觉醒年代热播）
- 《棉花帝国》（3月H&M发布声明抵制新疆棉）
- 《切尔诺贝利的午夜》（4月日本决议投放核废水）
- 《袁隆平的世界》（5月袁隆平逝世）
- 《人口大逆转》(6月“三孩政策”)
- 《漫画百年党史·开天辟地1921-1949》（7月中共建党100周年）
- 《无规则游戏：阿富汗屡被中断的历史》（8月塔利班在时隔20年后重新掌控阿富汗）
- 《论中国》（9月孟晚舟在加拿大被拘1028天后回归祖国）
- 《血战长津湖》（10月电影《长津湖》拿下年度票房冠军）
- 《罪与罚》（11月陀思妥耶夫斯基诞辰200周年）
- 《煤气灯效应》（12月王力宏婚变事件让“gaslighting”这个词进入公众视野）

用好工具 | 用好工具 🔨

【App - 你我当年】：修复模糊照片

技术 | 职场 | 财富 💹

【职场】年终总结怎么写？
【行业】成功转型的初创公司列表
【行业】下一个 10 年，将会发生的 12 个趋势
【行业】2022年，互联网10大关键词
【行业】2021全球最受欢迎域名榜单，Tiktok取代Google成为第一
【前端】ES2016-ES2021知识点
【前端】前端监控系统设计 - 掘金
【前端】2022 年需要关注的几个前端技术 - 掘金
【前端】CSS-Based Fingerprinting | CSS-Tricks - CSS-Tricks
【前端】Defensive CSS | CSS-Tricks - CSS-Tricks
【前端】浅析我们为什么要上Vue3？ - 掘金
【前端】下一代CSS：@container
【前端】web components组件库
【前端】css + svg 实现极光特效
【前端】低代码行业现状简析-凹凸实验室京东
【前端】对2D图片实现3D效果
【前端】腾讯UI套件： TDesign（支持vue2、3、react、angular；并内置于设计工具pixso中
【前端电子书】：给不耐烦的JS程序员看的ES2022 - The ECMAScript 2022 edition of “JavaScript for impatient programmers”
【前端】如何在产环境debug：global search、添加本地sourceMap、local overrides

少有人走的路：心智成熟的旅程

Tue, 25 Jan 2022 00:00:00 GMT

简介

原名：The Road Less Traveled
作者：[美]M.斯科特·派克
ISBN：978-7-5158-1979-2
豆瓣链接：https://book.douban.com/subject/35442753/
思维导图：/images/picgo/less-road-note.png

在这本书中，作者结合“自律、爱”等话题，阐明了如何在人生这一场艰辛之旅中，经历一系列艰难乃至痛苦的转变，促进心智成熟，最终达到自我认知的更高境界。

人生苦难重重

人生苦难重重————这是作者写在正文中的第一句话。

前段时间看了《逆商》、《心流》这两本书，作者都有着类似的观点。

《心流》中说：宇宙初创之时，就没有以人类的安逸舒适为念；自然选择出的基因和生理机制只是服务于人类生存繁衍，没有增加幸福快乐的考虑。

《逆商》中说：人生就是要面对一个又一个逆境。

本书作者说：人生就是一个不断面对问题解决问题的过程。

人生苦难重重。这是个伟大的真理，是世界上最伟大的真理之一。

它的伟大之处在于，一旦我们领悟了这句话的真谛，就能从苦难中解脱出来，实现人生的超越。

只要我们真正理解并接受了人生苦难重重的事实，那么我们就会释然，再也不会对人生的苦难耿耿于怀了。

回避问题和逃避痛苦的倾向，是人类心理疾病的根源。

自律

自律就是解决人生问题最主要的工具，也是消除人生痛苦最重要的方法。

所谓自律，就是主动要求自己以积极的态度去承受痛苦，解决问题。

心灵在承受痛苦和解决问题的过程中，会不断地成长和成熟。

所以，自律是人们心灵进化最重要的手段和工具。

自律原则1:推迟满足感

不贪图暂时的安逸，先苦后甜，重新设置人生快乐与痛苦的次序。

不逃避问题，不拖延：

问题拖得越久，就越是积重难返。
问题带来痛苦，尽早的直面问题，把满足感向后推迟，放弃暂时的安逸或是程度较轻的痛苦，去体验程度较大的痛苦，这才是对待问题和痛苦最明智的办法。

对自我价值的认可也是自律的基础：

当一个人觉得自己很有价值时，就会采取一切必要的措施来照顾自己。
自律是自我照顾，自我珍惜，而不是自暴自弃、贪图安逸。

自律原则2:承担责任

必须面对属于自己的问题，而不是推卸责任。

过度承担责任、或者推卸责任，都是心理疾病：

神经官能症患者为自己强加责任；
人格失调症患者不愿承担原本属于自己的责任。

自己承担责任，就可以掌控自己的自由：

把自己的责任推给别人、让别人为自己负责，实则是逃避自由
作为成年人，我们一生都充满选择和决定的机会。接受这一事实，就会变成自由的人；无法接受这种事实，就会永远觉得自己是个牺牲品。

自律原则3:忠于事实

认清事实，才能认清自己的位置:

我们对现实的观念就像是一张地图，凭借这张地图，我们才能了解人生的地形、地貌和沟壑，指引自己的道路。

如果地图准确无误，我们就能确定自己的位置，知道自己要到什么地方，怎样到达那里；

如果地图信息失真，漏洞百出，我们就会迷失方向。

要不停探索、接受新信息:

大多数人过了中年，就自认为地图完美无缺，世界观没有任何瑕疵，甚至自以为神圣不可侵犯，而对新的信息和资讯缺乏兴趣。

只有极少数幸运者能继续努力，他们不停地探索、扩大和更新自己对于世界的认识，直到生命终结。

不要逃避现实，不要让过去的信息成为现在的“心结”:

抱着残缺的人生地图不放，与现实世界处处脱节，这是不少人的通病，也是造成诸多心理疾病的根源。心理学家把这种情形称为“移情”。
把产生和适用于童年时期的那些感知世界、对世界做出反应的方式，照搬到成年后的环境中，尽管这些方式已经不再适用于新的环境。
逃避现实的痛苦是人类的天性，只有通过自律，我们才能逐渐克服现实的痛苦，及时修改自己的地图，逐步成长。

要不断自我反省，并主动接受挑战：

验证自己是否知行合一
接受外界的质疑和挑战，以确定我们的地图是否与事实符合

保持诚实，但有选择地表达意见和想法：

要完全忠于事实，就需要一辈子保持诚实。我们必须确保我们的言语能够准确地表述出我们所认知的事实。
敢于面对事实的人，能够心胸坦荡地生活，不必面临良心的折磨和恐惧的威胁。

自律原则4:保持平衡

确立富有弹性的约束机制：

例如：不但要有生气的能力，还要具备克制脾气的能力。

学会放弃：

要让心智成熟，就得在彼此冲突的需要、目标和责任之间保持微妙的平衡，这就要求我们不断自我调整。保持平衡的最高原则就是“放弃”。
失去平衡远比放弃更为痛苦
我们一生中不同阶段需要放弃的东西：

无需对外界要求作出回应的婴儿状态

无所不能的幻觉

完全占有父亲或母亲（或二者）的欲望

童年的依赖感

自己心中被扭曲了的父母形象

青春期的自以为拥有无穷潜力的感觉

无拘无束的自由青年时期的灵巧与活力

青春的性吸引力

长生不老的空想

对子女的权威

各种各样暂时性的权力

身体永远健康

最后，自我以及生命本身

兼容并包:

既要肯定自我以保持稳定，又要放弃自我以腾出空间，接纳新的想法和观念，实现自我平衡。
消除熟悉的过去，追求新鲜的未来

面对陌生的人、事、物，我需要让昔日的经验、当前的需求和未来的期待一并出席，共同对我的需求和现实状况进行评估，做出恰当的判断和决定。

为了体验新鲜事物的独特性，我必须以包容一切的姿态，说服既有的成见和观念暂时退位，让陌生、新奇的事物进入感官世界。

不然的话，人生的每一分每一秒，都将是过去经验的一再重复。

爱

爱是自律的原动力，把爱和自律结合起来，才能拥有幸福的人生。

作者对爱的定义是：为了促进自己和他人心智成熟，而不断拓展自我界限，实现自我完善的一种意愿。

爱的目的:

实现自我完善
拓展自我界限
真正的爱是一种扩展自我界限的体验，对外界投入的精神越多，自我边界就会得到越多扩展

真正的爱有以下特征：

爱是一个长期、渐进的过程。
爱情不是是永恒的。
依赖不是爱

只想获取却不愿付出，心智就会永远停留在不成熟的状态，这只会对人生构成限制和束缚，给人际关系造成破坏，让别人跟着遭殃，而不是促进别人的心灵成长。
爱在某种意义上是自私的，最终追求的是自我完善。

我们真心去爱某个人，是因为我们自己需要去爱别人；

我们生儿育女，是因我们自己想要孩子；

我们爱自己的孩子，是因为我们渴望自己成为充满爱心的父母。

如何爱：

爱不是无原则的自我牺牲。

真正意义上的爱，既是爱自己，也是爱他人。不爱自己的人，绝不可能去爱别人。
爱不是感觉，是实际行动。

爱是行为，爱意味着我们要不断付出努力，去跨越原来的界限。爱不能停留在口头上，而要付诸行动；爱不能坐享其成，而要真诚付出。
爱的对象，也可以是事物、活动

培养某种爱好，是自我滋养的有效手段。要学会自尊自爱，就需要自我滋养。
爱需要充分投入、付出关注

爱，最重要的体现形式，就是关注。我们爱某个人，一定会关注对方，细心照料对方，进而帮助对方成长。

关注的主要途径是“倾听”，暂时放下个人的想法和欲望，把注意力放在别人身上

充分投入是情感的基础；投入、做出承诺并遵守，可以给别人带来安全感
爱需要勇气

勇气，并不意味着永不恐惧，而是面对恐惧时能够坦然行动，克服畏缩心理，大步走向未知的未来

人生是一场冒险。你投入的爱越多，经受的风险也就越大。

敢于追求独立自主、摆脱依赖性。

人生唯一的安全感，来自于充分体验人生的不安全感。
保持诚实、谦虚、自省，尽力避免指责、冲突、傲慢

我们常常以爱的名义去指责所爱的人。可是，大多数批评只是出于一时的冲动、不满和愤怒，不但没有启发和教育意义，反而会使局面更加混乱。

保持诚实和谦虚，勤于自省，指责别人之前，先质疑自己是否“绝对正确”。

该批评、指出错误时，也不能退缩。
爱的前提是独立

爱的重要特征之一在于，爱者与被爱者都不是对方的附属品。

付出真爱的人，应该永远把爱的对象视为独立的个体，永远尊重对方的独立和成长。

有的父母不尊重孩子独立的人格，只把子女当成自我的延伸。子女就像他们昂贵的衣服、漂亮的首饰、修剪齐整的草坪、擦拭一新的汽车一样，代表着他们的社会地位和生活水平。父母的这种自恋情结，看上去没什么大不了，但其实有着惊人的破坏力。

婚姻是分工与合作并存的制度，夫妻双方需要奉献和关心，为彼此的成长付出努力。理想婚姻的基本目标，是让双方同时得到滋养，推动两颗心灵的共同成长。双方都有责任照顾后方营地，都要追求各自的进步，都要攀登实现个人价值的人生巅峰。

月刊 | 信息源分类集合页

Sat, 01 Jan 2022 00:00:00 GMT

心流：最优体验心理学

Sat, 25 Dec 2021 00:00:00 GMT

前言

《心流：最优体验心理学》的作者是心理学理论之父、积极心理学奠基人米哈里•契克森米哈赖。

他在30年前，在大量案例研究基础上，开创性地提出了“心流”的概念。

“心流”是指一个人完全沉浸在某种活动当中，那种全神贯注、投入忘我的状态。

这种状态下，你甚至感觉不到时间的存在，在这件事情完成之后我们会有一种充满能量并且非常满足的感受。其实很多时候我们在做自己非常喜欢、有挑战并且擅长的事情的时候，就很容易体验到心流，比如爬山、游泳、打球、玩游戏、阅读、演奏乐器还有工作的时候。

人类不幸福的原因

作者之所以提出“心流”理论，离不开对“幸福”的研究。

宇宙初创之时，就没有以人类的安逸舒适为念。

大马哈鱼溯江而上，产卵后便死去。自然选择的这种机制，为了繁衍连母体的生命都要牺牲，快乐在其中怎么能算得上重要的追求呢？

动物和人类性快感为何这么短促？因为只要完成配种就够了。

寻求快乐是基因为了物种延续而设的一种即时反射，其目的与个人利益无关。

饮食的快乐是为确保身体得到充足营养，男女的快乐则是鼓励生殖的手段，它们实用的价值凌驾于一切之上。

对食物和异性的兴趣不过是基因的一招布局。

自然选择出的生理机制只服务于人类生存繁衍，没有增加幸福快乐的考虑。

空虚感、内在秩序的缺失(作者称之为精神熵)

人类与动物的最大差别在于神经系统过于发达。

感知和摄取更多的信息，无疑有利于人类生存。对外部情况不感知，当然更危险，但感知更多往往也更苦恼。

动物中除了人以外，都不会自作自受，它们的进化程度还不足以感受沮丧和绝望，只要没有外来的冲突干扰，它们就能保持和谐，体验到人类称为心流的那种圆满。

常言说：无知无畏。反之，多知多畏，多知多忧。于是焦虑增长。刚巧一切平安的时候呢？神经系统过于发达的人类偏偏又会感到枯燥无聊。

内在秩序的缺失，表现在某些人所谓的存在焦虑或存在恐惧等主观状况上。基本上，它是一种对生存的恐惧，一种生命没有意义、不值得继续的感觉。

人类有一个超大的意识系统。意识系统需要秩序，其无序时人们会焦虑、烦躁。

米哈里提出了精神熵：资讯对人们意识中的目标和结构的威胁，将导致内心失去秩序，处在混乱状态，内心一片混乱，熵值非常高。

心流就是让内心的意识更有规律、更有秩序，是降熵的过程。

永无止境的欲望

世上大多数人的人生目标都很简单：平安地活着，养育一儿半女；如果可能的话，再加上那么一点儿舒适与尊严。

只要基本的生存问题解决了，充足的食物和舒适的居所就立刻显得微不足道，新需求、新欲望会立即出现。

生活越改善而越不满足的矛盾表明，提高生活品质是一件永远没有尽头的苦役。

设立新目标也没什么不好；但问题就在于一般人总把所有心力放在新目标上，不能享受现在，也因此与知足的快乐绝缘。

外貌、金钱、权力、地位、财富，人类想追求的太多，却无人能达到完美。在无法同时满足太多要求的挫折之下，有些人干脆投降认输，躲进自己的小天地：培养一种高雅的嗜好、沉溺于酒精、消费、性欲、毒品。

古代帝王的生活，比起现代人的生活品质，不值一提。

但是尽管人类的物质力量增强了几千倍，在改善体验的内涵上却不见得有何长进。

如何应对不幸福：心流

上述总结了人类不幸福的原因，针对这几个原因，作者提出了“心流”理论。

心流即一个人完全沉浸在某种活动当中，无视其他事物存在的状态。

“心流”是改善体验，提升幸福感的关键。

我们对自己的观感、从生活中得到的快乐，归根结底直接取决于心灵如何过滤与阐释日常体验。我们快乐与否，端视内心是否和谐，而与我们控制宇宙的能力毫无关系。

只有学会掌控心灵的人，才能决定自己的生活品质；具备了这种能力，也就相当于接近幸福的境界了。

最优体验有赖于时时刻刻用意识控制周遭事物，而要达到这种境界，唯有靠个人的努力与创意。

心流是意识和谐有序的一种状态，在这种状态下，注意力集中，意识有了秩序，上述的“不幸福的原因”，自然就不存在了。

心流如何形成

提高控制意识的能力

每个人都有控制意识的自由。

我们通常将意识化资讯为秩序的那股力量称为“意图”。

先天遗传或后天得来的意图，会按目标的高低排定重要性。政客可能认为政治改革比生命重要、普通人很根据身体的需要认为健康、长寿、美食、舒适生活更重要、英雄、圣人、疯子、罪犯也都会在其意识中排列出最重要的目标......这一切都证明了，意识可以遵循不同的目标与意图发展，每个人都拥有控制主观现实的自由。

意识是有限的

神经系统在特定的时间内能处理的资讯极为有限。

思绪必须井然有序，否则就会混乱。

现阶段的科学知识已可以估计出中枢神经系统处理资讯的速限。大致而言，我们顶多能同时应付七组资讯，诸如分辨声音、影像、情绪或思想中可辨识的弦外之音等。由一组转换到另一组，至少需要1/18秒。从这些数字可以算出，大脑1秒钟顶多能处理126比特的资讯，1分钟是7560比特，1小时则大约50万比特。**一生若以70年计，每天有16小时的清醒时刻，一生中可处理的资讯便是1850亿比特。**这就是生活的全部——所有的思想、记忆、感觉与行动。这个数字听起来似乎很庞大，其实则不然。

光是听懂他人说的话，就需要每秒钟处理40比特的资讯，意识的有限由此可见一斑。假设大脑的极限是每秒钟126比特，那么同时理解三个人的话，在理论上是可能的，但这样一来，我们就得把其他思想和感觉摒除在意识之外。比方说，我们就无法注意到说话者的表情，也不能考虑他们说话的动机，或注意他们的穿着打扮。

意识使用率决定生活品质

很多人没有充分发挥处理资讯的能力。大多数人在每天约占1/3的闲暇时间里，都尽可能避免用脑子，其中一半时间以上是消磨在电视机前。

每个人一生中能处理的资讯有限，所以准许哪些资讯进入意识就显得格外重要。实际上，这就决定了生活的内涵与品质。

注意力是“精神能量”

控制意识最明显的指标就是能随心所欲地集中注意力，不因任何事情而分心。

注意力负责从数以百万计位的资讯中挑出相关的资讯，以及从记忆中抽取相关的参考数据，然后评估事件，采取正确的对策。

应用注意力的方式足以决定人生的外观与内涵。

注意力除了决定某些事物能否进入意识外，还要带动其他心灵活动——回忆、思考、感觉、做决定，所以应该把注意力视为一种精神能量。

它是完成工作不可或缺的能量，在工作中会耗损。我们通过这种能量的应用，创造自我；也通过应用的方式，塑造记忆、思想和感觉。

注意力是一种受我们控制、随我们使用的能量变化而改变，也是改善体验品质的最重要的工具。

生活的品质取决于控制意识的能力。

痛苦与快乐都属于可意识的范围，而且只在意识中存在。

一个人可以不管外界发生什么事，只靠改变意识的内涵，使自己快乐或悲伤

“人害怕的其实是自己对事物的看法，而非事物本身。”

生活的品质取决于控制意识的能力。

自寻目标与乐趣

集中注意力是造就心流的关键。而凝聚注意力需要一个目标。目标从何而来呢？

在传统社会中，为百姓们提供人生目标的是社会权威：国王、主教、政府。他们提供的目标有：宗教、道德、阶级习俗、爱国主义。

最后到来的一个目标提供者是商人，他们宣扬的是消费。

这些目标渐渐失效，不再吸引众生。

原因之一是，这些目标设置的动机是维护社会秩序、或者是鼓吹者自身的利益，更有利于宣讲者或统治阶层。

社会将我们塑造成拼命工作与储蓄的公民、商人哄骗我们将辛苦赚来的钱消费、灰产与地下组织提供禁忌的快乐.....这些种种，都是为了剥削我们的精力，以满足其私欲或目标。

因此，我们应该从社会制约与本能冲动下，解放意识，培养独立意识：

克服现代生活的焦虑与沮丧，从社会环境中独立出来，不再以社会的奖赏为念，试着以自己所能控制的奖赏取而代之。要在别人用以利诱我们的目标之外，另行建立一套自己的目标。
不要屈服于出于人性和基因的本能反应，不要被肉体的欲望牵着鼻子走，控制本能的冲动。享受自然的乐趣并没有什么不好，但我们应该认清事实真相，在必要的时候，按照自己内心的优先顺序，做自己的主人。

自寻乐趣

睡眠、休息、食物与性，都属于恢复“均衡”的体验，在肉体需求引起精神熵以后，重整意识的秩序。

它们并不能带动心灵的成长，也不能增加自我的复杂性。换言之，享乐虽有助于维持意识的秩序，却无法在意识中创造新秩序。

一味追求财富、地位、权力，未必能使人更快乐。唯有从每天的生活体验中创造乐趣，才能真正提升生活品质。

改善生活品质的主要策略有两种：一是使外在条件符合我们的目标；二是改变我们体验外在条件的方式，使它与我们的目标相契合。

如果要控制体验品质，就必须学习从每天的生活中创造乐趣。

有即时反馈，挑战要与能力匹配

所有心流活动，不论涉及竞争、投机还是其他形式的体验，都有一个共同点：它带来一种新发现、一种创造感，把当事人带入新的现实。

简单地说，它把自我变得更复杂，自我因而成长，这就是心流活动的关键。

字母A代表艾利斯，一个正在学打网球的男孩，图形显示艾利斯学打网球的四个阶段。

刚开始的时候，艾利斯不懂任何技巧，他唯一的挑战就是把球打过网去，这是A①。

这种挑战没什么了不起，但艾利斯还是可能打得很愉快，因为难度正适合他粗浅的技巧。这时他很可能感受到心流，但为时不会太久。经过一段时间的练习，他的技巧进步了，他开始厌烦只是把球打过网去的动作（A②），

或者他也可能碰到比他熟练的对手，使他发现球场上还有比高吊球更难应付的挑战——这时，他对自己拙劣的表现产生了焦虑（A③）。

总而言之，可以造就心流的活动中必有挑战，且挑战应该是动态的。

当挑战与你的技能匹配时，就有了心流。
当挑战的目标大大高过你的技能时，将产生焦虑，那么就要提高技巧和能力，或者降低挑战目标。
当你的技能高过设定的目标，继续持续这种活动将产生厌倦，那么就提高目标和挑战的难度，以求挑战和心流的持续。

正是在技巧提高、目标上调的过程中，当事者感受到了成长的乐趣。

学会独处，屏蔽外界的干扰

一个人若能从独处中找到乐趣，必须有一套自己的心灵程序，不需要靠文明生活的支持——亦即不需要借助他人、工作、电视、剧场规划他的注意力，就能达到心流状态。

一方面，独处是建立自己的内心系统的必要经历。

另一方面，有了自己内心的系统，更能够适应因偶然原因陷入的孤独的处境中。

人生的意义：追寻人生的心流

如果一个人决心实现一个困难的目标，所有其他目标都是为这个大目标而存在，他就会投入所有精神能量，培养实现这一目标所需的技巧，那么所有的行动与感受就会形成蔚为和谐的整体，人生各个不同的部分也会契合无间。不论过去、现在，还是未来，每种活动都深具意义。在这种情形下，一个人的生命就有了意义。

培养方向感

每个人刚开始都只想到求生、保持身体及其基本目标的完整性，这时人生的意义很简单——就只是求生、求舒适、求享乐而已。

当身体的安全得到充分保障后，一个人就可以扩张意义系统，包容家人、邻居、宗教或种族等团体的价值观。这一步骤虽然通常会要求个人认同传统的标准与规范，但仍能提升个人的复杂性。

下一步发展又回到个人主义的反省。个人再次转向内心，从自我寻求权威与价值标准的新基础。他不再盲目认同，开始发展独立自主的善恶观念。这时人生的主要目标变为追求成长、进步和实现潜能。

前面各步骤都已臻至圆熟，第四步才能展开，这是最后一次脱离自我，认同他人及宇宙共同的价值观。在这个阶段，极端个人化的人——就像修行功德圆满，听任河水控制船行方向的佛陀——终于心甘情愿让自己的利益融入大我的利益之中。

下定决心

在为一个目标投下大量精神能量之前，应该先提出几个基本问题：

我真的想做这件事吗？
做这件事会有乐趣吗？
在可预见的将来，我仍然能从中得到乐趣吗？
我和其他人，必须为它付出的代价值得吗？
完成这件事以后，我还会喜欢自己吗？

月刊#6 | 2021.08-12

Tue, 21 Dec 2021 00:00:00 GMT

前端

政采云 | 如何写前端技术文档
State Of CSS 2021
V8编译浅谈
前端面试八股文合集
一个Three.js实例 | 3D看鞋
文件下载9种场景
在网页中实现裸眼3D
Web Workers 2021现状分析
微前端落地，悬着的心终于放下了
如何搭建适合自己团队的构建部署平台
中国计算机学会的前端会议，前端的发展与未来
你真的了解package.json吗？
前端零成本建站
petite-vue | 6KB 轻量迷你基本版 vue
awesome-javascript | 优秀前端库合集
前端性能优化 | 9大策略和6大指标
B站五面面经（附过程、答案）
字节跳动的B面详细解读最新资讯_热点事件_36氪
webpack 最佳实践-微医前端团队
ES6复盘知识点
如何成为优秀的大前端Leader
滴滴前端博客(核心成员黄轶)
尤雨溪是怎么发布 Vue.js 的？
上传文件夹的API HTMLInputElement.webkitdirectory
前端异常监控和容灾
css houdini ：js in css
Vue3 源码中实用的基础工具函数
http2 & 前端
每个前端都需要知道这些面向未来的CSS技术
Github | Javascript进阶问题列表 - 39.8k star

开发 | 科技

“技术为业务而服务，不同的场景需要不同的工具，我们的任务就是找到最合适的工具并用好它。”
知乎 | 探索Notion的实现
少数派 | 2021：树莓派入坑指南
树莓派实验室 | 用树莓派制造一个像样的 NAS
树莓派实验室 | Raspberry Pi中文资讯站，提供丰富的树莓派使用教程和DIY资讯
开源 | google面试算法题训练
开源 | MojoJS-Animation：开源强大、轻量、易用的JS动画引擎
政采云 | 你需要知道的项目管理知识
字节 | 如何写开发设计方案
文章 | 10款lowcode开发平台
资源 | 编程电子书
开源 | 可视化编程
科技 | 研究人员教会培养皿中的脑细胞打乒乓球
科技 | 双足机器人 Atlas 在表演流畅的跑酷
Google代码审查指南、中文版
Google开发语言风格指南 - 29.4k star
Google软件工程经验、中文版

话题🎙️

公开目标 | 公开之后就会有社会压力，你会感受到别人在看你。其实没有人会看，但这会让你对自己多一个旁观的视角，让你能好好审视自己。
自省 | ”在愚昧之峰狂欢，在信息孤岛独舞，在一滩死水里永世长存“以此提醒不要太固执、太自信、太墨守成规、邓宁-克鲁格效应
吃苦 | 高级的吃苦能力，不是单纯的忍受贫穷、耗费体力，是一种自控能力。长时间聚焦于一件事情，没有无效社交没有无意义的消费没有娱乐生活忍受孤独。
视频推荐 | 不要活在别人的评价体系中 - 小唯up
视频推荐 | 社恐自救指南： be yourself is cool enough、别人怎么对待你，是你自己交给别人的 - 小唯up
视频推荐 | HSP自救指南：接纳自己、停止过度共情、精简社交 - 小唯up
文章 | 46 六个对我影响最大的效率习惯
文章 | 如何提升自己的幽默感？
文章 | 我们为什么爱郑渊洁？：犀利有度、幽默加持
文章 | 为什么你需要一个自己的网站：拥有品牌和属于自己的听众、回避审查、掌握数据、避免骚扰、长期经营，享受长远复利
文章 | 外圆内方、思维导图
少数派 | 每年更新一次遗嘱、数字遗产保护
少数派 | 如何追求精力充沛的生活
少数派 | DPS 周刊 01 - 如何努力？
少数派 | 目标这个 Flag，是对自己的承诺
性别差异 | 中华人民共和国妇女权益保障法（修订草案）
性别差异 | 韩国作家孙雅兰演讲《性别歧视的代价&逆向性别歧视》

极简 | 低消费🛒

极简主义 | 在极简中寻找平衡
理性消费 | 自问“这种东西你买了你不觉得亏吗”
低消费主义 | 承认并管理生活方式的膨胀
低消费主义 | 豆瓣低消费研究所小组创建人小松悠：买东西不是为了快乐，我所认为的消费就是正常的因需购买”

Grow Up With You 指路人系列🤝（世上没有任何一人是绝对善恶，请择善而从

两个站在时代风口的首富：世界首富马斯克、”中国新首富”币安赵长鹏
TomKeeper
v站一位前端前辈的简历
于航
掘金前端卷王（年终总结都卷到提前一个月发😅

读书📔（开卷有益

《心流》| 最优体验心理学
《高敏感是种天赋》 | HSP人群必读
书单 | 豆瓣2021年度图书榜单
书单 | 看了十张年度书单，我挑选出这 16 本不容错过的好书 - 少数派
书单｜澎湃新闻编辑们推荐的2021年度十大好书
书单 | 2020 多抓鱼鲜鱼榜

信息源📑

掘金八大分类百强文章可视化分析
抖音数据
国外社区 | 顶流论坛Reddit、优质内容平台Medium、国外版知乎问答社区Quora
国内外行业报告查询网站集合
播客 | 一派·再读 Feed

知识管理📑

Cubox 6.0 | 全能网络收藏夹、语音、视频、速记 - 少数派
一个文科博士生的资料管理、阅读和笔记系统-基于 DEVONthink 3，Obsidian - 少数派
一个“阅读工作流”例子 | 信息源->稍后阅读->划线批注->临时笔记->永久笔记（知识库）->回顾系统->创作输出
一个(自动化)信息流管理的案例

Notion📑

Notion 2.11 更新日志 What's New? （sync block、ifttt api、https://www.integromat.com/en/integrations/notion）
Notion (Beta) works better with IFTTT
Request page data for Next.js from the Notion API | egghead.io

有趣的网站🪀

解压 | 声音视觉动效网站Patatap 、初音未来版
镜像式炫光生成器
乐器模拟器
io游戏站
茶杯狐
小霸王其乐无穷
随机带你去一个没用的网站

职场💼

如何应对变相裁员
如何看一个人有没有领导力

投资 | 理财 | 副业💰

投资理财 | 普通人如何有效投资理财？ - 少数派
远程工作 | UpWork：打字、翻译、客户支持、开发

种草🛍️

编程工作适合用什么鼠标? - V2EX
腾讯云羊毛：云开发Webify个人网站扶持
Ipad端图形创作APP：Lazyshare 搭配 Procreate
路人：联通 500M 宽带包年 700 咸鱼租的
路人：中国移动 300 Mbps 家庭宽带套餐，首年资费 39 元 /月，次年 30 元 /月，套餐含 5GB 4G 流量。2 年合约期。

工具🔧

小程序 | 极客词典：中国互联网超爱读错的单词
浏览器 | 管理浏览器插件的插件
浏览器 | ImageAssistant图片助手：自动提取网页图片、批量下载、以图搜图
Windows工具 | 抖音无水印下载用户视频
Android | Auto.js脚本安卓设备重复性操作
PowerToys：微软官方Windows系统工具、文件管理器插件、分屏
Snnedacity：开源免费的音频编辑工具
DataEase：开源数据可视化分析工具
App Star Walk 2：打开AR 相机对着天空就能识别出星空
Potplayer：全网最强播放器
RustDesk：免费的开源的远程桌面软件
全国移动电话卡“一证通查”
万有导航

设计 | 创作✍️

非设计师也该学的排版知识：视觉动线 - 少数派
用好 Keynote 和 iMovie，在 iPad 上做出有高级感的视频 - 少数派
想做视频？这里有一份入门到进阶知识完整指南 - 知乎
Youtube运营者必备12个工具
图片处理App｜VSCO 用了六年的照片调色 App
手绘插画库/人物库
图片特效生成器
网站 | 人像转卡通

生活 | 健康🏃

少数派 | 你的家庭小药箱，从这 8 种非处方药开始
体检 | 你该掌握的自查手段
保健 | 提升好胆固醇，降低坏胆固醇
住房 | 筛选房源的第一步，读懂户型图
装修 | 三万字装修经验「验收」
服装 | 我们需要学习的挑选与购买

逆商：我们该如何应对坏事件

Wed, 15 Dec 2021 00:00:00 GMT

前言

豆瓣链接 - 《逆商》

以前我觉得消极、积极的态度，来自于身处的环境和人的内在性格，是很难改变的。

读了这本书之后，才意识到自己过去对待事物的消极态度，其实完全没有必要、没有意义。

如书中所说，“我们无法选择身处的时代和环境，唯一能选择的是如何有效和积极地去应对“。

及时止损永远是糟糕状态下的最优选择。

逆商是什么

众所周知，IQ是智商，是一个人在其年龄段的智力和认知能力。

EQ是情商，是一个人认识、了解、控制情绪的能力。

而AQ是逆商，即Adversity Quotient，能反映出一个人抵御、应对、战胜逆境的能力如何。

为什么要提升逆商

人生就是会面临一个又一个逆境

从最轻微的挫折到最惨烈的悲剧都算上，你通常一天会遇到多少大大小小的难题？

我和我的研究团队在1991年开始收集这个问题的答案时发现平均数量是三个。如今，这个问题的全球平均答案数是32个，而且这一数字还在上升。

在大多数社会里，深受焦虑、无助、失眠、抑郁甚至是自杀倾向之苦的人数持续攀升。

我们从出生起，就要面临各种问题：幼童时学步要面临不断地摔跤、青年时要应对各种学业课程、成年后要面临各种人际关系的矛盾、工作事务的难处、社会生活的压力。

我们身处在逆境时代

我们处在一个RUPT时代，即急速、莫测、矛盾、缠结。

全球变暖情况持续加重、海平面持续上升；

信息化、国际化使全球各个国家的关系越来越紧密、纠缠，经济战使经济环境变得更难预测；

新冠病毒带来的疫情经久不衰、影响范围持续扩大；

不论是个人健康、家庭生活、职场经济和社会，随时都可能将各种难题抛到我们面前，必须应对。

提高逆商，那么生活的各个方面就会渐渐改善：

提升活力、幸福感，对心理健康有益（因逆境而受伤的人容易感到无助，转而觉得抑郁）；

提升学习能力（积极的心态有益于保持冷静、充满活力的学习状态）；

提升竞争力、生产力、创造力、动力、毅力、韧性；

提升身体健康，多项研究表明心理健康对身体健康有一定的影响，人的想法和感受与其体内的活动有着直接而显著的联系，传递人类情绪的化学物质会直接影响人类的身体健康，在压力面前表现得非常抑郁和焦虑的人，其体内的白细胞要弱得多。

如何提升逆商

告别习得性无助

习得性无助是指将“做什么都没有用”这一想法内化，从而削弱一个人的掌控感。

科学家塞利格曼做过两个实验。在第一阶段，A组的狗被背带绑住并受到轻微电击。它们可以用鼻子去按控制杆，让电击停止。很快它们就学会这样做了。 B组的狗也是被同样的背带绑住并受到同样的电击，但它们无法让电击停止。这些狗只能忍受痛苦。 C组是对照组。C组的狗被背带绑住，但没有受到电击。

第二天，塞利格曼进行实验的第二阶段。他将这些狗逐个放进一个叫作穿梭箱的装置里，这个箱子中间立着一块低矮的挡板。每只狗都被放到挡板的一侧并受到轻微电击。它们只需要跨越矮挡板跳到另一侧就能停止电击。 A组的狗（可以控制电击）和C组的狗（没有受到电击）很快就明白怎样跨越挡板，摆脱不适。但B组的狗（不能控制电击）则有不同的反应，它们躺下来呜咽啜泣，没有尝试逃脱。

塞利格曼等人发现，这些狗学会了无助，这一行为几乎摧毁了它们采取行动的干劲。此后，科学家还发现，猫、鱼、狗、大鼠、蟑螂、小鼠和人类都能学到这一特性。

不要将一件事情带来的消极情绪带入到其他事情中。

不要扮演受害人的角色

扮演受害者，是人类自我防御机制的一种方式。

将责任推到外部环境，就有借口放弃掌控力、放弃自我努力。

乐观的归因风格

如果一个人认为逆境是永久的（“这永远不会改变”）、普遍的（“我会把所有的事搞砸”）和个人的（“这都是我的错”），那这个人就会拥有悲观的归因风格；

如果一个人认为逆境是暂时的、外在的和有限的，那这个人则拥有乐观的归因风格。

一个人的成功，很大程度上是由他归因或应对生活事件的方式所决定的。

建设性应对逆境

处理事情时考虑如何应对，而不是担心哪里会出问题。

止念法

改变潜意识的行为和习惯，在自己的消极想法和悲伤蔓延时，及时制止自己，例如：转移注意力、运动、用力拍手喊“停”、用手腕上的小皮筋弹自己一下、访问自己的初衷和目标是什么、等等...

停止灾难化，不要因为一个逆境，就臆测“一切都完了”。

把假设和事实区分开，停止无助的臆测，将逆境的影响范围最小化。

放大格局

凝视无垠的海洋或天空会让你意识到，在浩瀚的宇宙面前，自己的问题是多么地微不足道。

LEAD法

L= Listen，倾听自己的逆境反应：自己当下应对逆境，表现了高逆商还是低逆商？

E= Explore，探究自己对结果的担当：我应该对结果的哪些部分担起责任？

A= Analyze，分析证据：有什么实际证据可以表明此次困境脱离了我的掌控、一定会蔓延到生活的其他方面？

D= Do，做点事情：搜集信息、列出行为清单，如何及时止损、如何控制此次逆境的影响范围和结果？

生活是艰难的，但你应对生活的方式决定了你的命运

怦然心动的人生整理魔法笔记

Fri, 03 Dec 2021 00:00:00 GMT

《怦然心动的人生整理魔法》豆瓣链接

为什么要整理

房间之乱是心乱：不要把整理一次杂乱的房间当作逃避现实的出口，应该迅速地一次性整理完毕，然后将时间和精力花在真正有价值的地方
有助于增强决断力：将整理物品的思维逻辑带到事情、人际关系中
环境整洁的附加值：降低物欲、不被杂乱的环境影响身心
整理是一个发现自己、复盘人生的过程：找到自己真正喜欢的事物、复盘自己的消费决策
学会对家、物品充满敬意和感情：热爱生活，生活会将舒适、顺心、自信反馈给你

两步整理原则

分类物品并断舍离：决定已有物品弃留、丢弃无用的物品，否则不断舍离只收纳，治标不治本
确定物品收纳的固定位置：每个物品必须有固定的位置，合理收纳：1物品就近收纳在使用的位置；2使用频率越高的物品放在越容易拿取的位置；3利用垂直的空间

如何长期维持整洁

控制买入，不要执着于“囤货”
养成用完物品立即复原位置的习惯，日常只需要花少量的时间维护和打扫，即可长期享受整洁的环境

极简主义：如何用更少的东西过更有意义的生活

Fri, 22 Oct 2021 00:00:00 GMT

关于《极简主义》这本书

《极简主义》豆瓣链接

这本书的作者是乔舒亚和瑞安，曾经是两个年薪六位数（美元）的美国职场精英，拥有香车、豪宅、昂贵服装及大量玩物。

但是他们对这种“一周工作七八十个小时、买更多东西”的生活感到不满足、焦虑又空虚，于是开始了极简主义。

我最初对极简主义的印象，来自于扎克伯格满衣柜的灰色同款衣服，和乔布斯平生不变的穿搭

但是这本书介绍的极简主义，重心不是在如何扔东西、如何降低物欲，而是如何过更有意义的生活。

答案就是关注人生中最重要的五个方面：1.健康 2.人际关系 3.热情 4.成长 5.奉献

快乐源自内心，而不是物质财富

我们处在被商业营销充斥的环境：各种购物app创造了接连不断的购物节，短视频app不停的推送带货直播，微博、知乎、b站、小红书充斥着商业广告；下班回家路上有各种广告牌，小区电梯有24h不间断播放的广告视频，回家开门还时不时发现门把手被塞上了小广告......

商家在营造一种购物、消费就能让我们生活更幸福的假象。

但全世界的商家、营销的根本目的是赚钱，而不是我们的幸福快乐。

每次购物会带来些许快感，但是它会瞬间消散。

如果要依赖物质带来快乐，随着边际效应递减，获得快乐的阈值会越来越高，我们只会走向对金钱永无止境的追逐。

所以，快乐不是来自金钱、物质，而是来自于内部、来自我们的内心。

那么如何去追寻内心的快乐呢？

答案就是追寻有意义的生活。

如果我们的短期行为和长期价值相符，那么我们就会在自己所做的所有事情中找到意义。

矛盾的是，这种生活方式（有意识的生活）才会带领我们走向真正的幸福快乐。

不是转瞬即逝的欢愉，而是长久的满足，来自自律、专注、觉知、目的明确的生活。

过有意义的生活，快乐自然而然会成为副产品。

我们在这世上只有有限的时间，

这些时间可以用来积攒金钱财富，也可以花在有意义的事情上。

后者不一定会妨碍人们追求前者，

但对财富永无止境的追求并不能将我们带向有意义的生活。

为有意义的生活清除障碍

当我们意识到“快乐不是来自金钱、物质，而是源自内心”这个真相后，

就能发现我们身边充斥了许多事物，也许阻碍了我们自由地追求有意义的生活。

例如，需要大量时间却没有给生活增添相应价值的东西：

房子（和随之而来的大笔按揭还贷）
某些人际关系（没有为我们的生活增添价值的不健康关系）
汽车贷款和其他大额账单、
大笔债务、
我们的事业
...

会消耗我们时间和注意力的小事：

有线电视费、
网费、
其他账单、
小额债务、
不穿的衣服、
没用的家居用品、
家庭杂物、
某些徒劳的次要关系、
日常的开车时间
...

上面举了一些例子，抛弃这些对我们不重要的事物、财物，扔掉多余的东西，

只留下我们喜欢和享受的、那些在日常生活中实实在在用得到的东西。

当达到物质上的极简后，就会发觉自己必须去追求精神上的富足。

摆脱混乱的身外之物，就会有足够的时间和精力，去实现有意义的人生：充满热情和自由的人生，可以实现个人成长、以有意义的方式为他人做出贡献的人生。

健康

健康是生命的基础。

虽然疾病与死亡不可避免，但是我们仍然应该在自己力所能及的范围内过着最为健康的生活。

书中给出了具体的建议：

不吃加工食品、包装食品、糖、甜品
少吃麸质、面包；少喝水以外的一切饮料
多吃自然果蔬、豆类、鱼类
坚持运动

人际关系

人际关系能满足最基本的人类情感需求。

不好的、不必要的人际关系会浪费我们大量的时间和精力、甚至会伤害我们的情感。

有三种方法可以建立更好的关系：

评估现有关系，舍弃掉不必要的，无法给你带来价值的关系。
寻找超棒的新人际关系。确定自己寻求的是什么？想要避免的是什么？为了想要的管旭你又必须让自己改变什么？
改造你现有的人际关系，花更多时间维护。
改变你自己，以身作则影响身边的人、吸引同类的好的人际关系。

热情

热情，有所热爱才会感到充实。

找到自己真正感兴趣的事物，专注地投入热情和热爱。

找到至少三个以你的爱好谋生的人，找到正在做你想做的事情的人，向他们学习，吸收他们的知识经验，然后大步行动。

成长

成长，持续进步而不是停在原地。

我们生命的意义：实现个人成长，为他人做出贡献。

想要长久的幸福，就必须继续做出改变。

你的多数改变，都是通过每天在小的方面逐渐改善积累而成的。

奉献

成长和奉献相互成就，为自己添加人生价值

你越成长，就越能帮助其他人成长；而越是帮助他人成长，你自己就越能获得更多成长。

总结

可以通过一个简单的等式来衡量自己在五大价值的各个方面是否成功：

成功 = 快乐 + 持续进步

为五大价值中某个方面的现状感到快乐，而且持续地进步着，那么你在这一领域便是成功的。

看完书，然后做什么？

行动。

从你的物品开始。

精简你的壁橱/抽屉。
献出时间去帮助他人。
把你的东西捐献给慈善机构。

从你自己开始，以身作则。

改变你的习惯。
改变你的消费观念。
改变你的饮食习惯、锻炼方式。
找回你的时间。
追求你的爱好。
找到你的使命。

最好的告别：如何优雅地走向生命终点

Tue, 31 Aug 2021 00:00:00 GMT

我最期望的死法

《人生果实》是我最喜欢的纪录片，讲述了日本建筑师津端修一夫妇的隐居生活。

片中的老夫妻一个90岁，一个87岁，他们的老年生活令我羡慕不已，种树、种菜、种花、种水果、做甜品、做饭、自给自足......

纪录片拍到一半的时候，90的老爷爷去世了。

像往常每个午后一样，他安详的躺在床上午休，再也没有醒来。

以前的我总是不敢想象自己和身边人的死亡，但是纪录片看到这的时候，我就在想，既然死亡不可避免，那么希望所有人告别人世时，都能像老爷爷这样安详、体面。

坦然地聊聊死亡

死亡是一个沉重的话题，但是看完《最好的告别》这本书后，也许能更加坦然的面对这个话题。

死亡本身是可怕的。

人类历史发展30万年，数不清的灵魂诞生、消逝，无一逃脱死亡的命运。

现代医学再怎么发愤图强，依然无法摆脱一个很确定的结局，那就是永远也无法战胜死神。

死亡的未知性更令人恐惧。

谁也无法预知自己的死亡时间、死亡方式。

中国近年死亡人口的2/3是正常死亡，其中主要包括癌症、心脑血管疾病、呼吸系统疾病、新生儿疾病、阿尔兹海默症与痴呆等；1/3是非正常死亡，其中主要包含自杀、交通事故、工伤事故、刑事案件死亡、中毒死亡、自然灾害等。

我们都希望能像纪录片中老爷爷一样善始善终，但是也应该对衰老、疾病和意外做好心理准备。

如果未知是令人恐惧的，那么了解衰老与死亡就是我们克服恐惧的必修课。

关于本书

《最好的告别》是一本关于死亡的书，作者是哈佛大学医学院的外科教授。

这本书梳理了作者所处的美国社会养老的发展历程、医学界对末期病人的不当处置、医药的局限性。

但更多地，作者详尽地说明了“善终服务”、“辅助生活”、“生前预嘱”的理念

通过这些理念，我们能找到这些问题的答案：

当独立、自助的生活不能再维持时，该怎么办？
在生命临近终点时，该和医生谈些什么？
如何优雅地跨越生命的终点？

衰老的真相

生命老化的故事就是身体器官走向衰竭的故事

牙齿、骨头软化脆弱，心脏、血管、关节、肺部变硬，肌肉流失，器官运行速度减缓，记忆力减退，感官退化。

饮食有限制，行动有限制，听觉、视觉、触觉减弱，还有一定可能性患上痴呆。

外表上的变化也很明显，但相比于健康，已不是最重要的事情。

衰老是我们的宿命，死亡总有一天会降临。

书中说高龄老人们害怕的并不是死亡，而是那之前的种种状况——丧失听力、记忆力，失去最好的朋友和固有的生活方式。

老年是一系列连续不断的丧失

凭着运气和严格的自我控制（注意饮食、坚持锻炼、控制血压、在需要的时候积极治疗），人们可以在很长一段时间内掌控自己的生活。

但是，最终所有的丧失会累积到一个点

到这个点时，我们会有相当长的一段时间由于身体太衰老、太虚弱而无法独立生活。

我们不愿意思考这种可能性，结果，大多数人都没有为之做好准备。

过度治疗

一个理智的人在死亡降临的时候还是无法舍弃求生的欲望

拉扎罗夫，一位市政府的行政官，60多岁患上转移性的癌症。病中癌症扩散到了胸椎，对脊椎形成压迫，右腿无法动弹，大便失禁。

癌症此时已经无法彻底治愈。医生给了两个方案：一是安宁缓和医疗；二是实施手术，切除脊椎处生长的肿瘤包块。

尽管手术风险很高，他依然选择了手术，“别放弃我，”他说，“只要我还有任何机会，你们一定要让我尝试。”

他的妻子死在监护室里，死的时候全身插满了管子，戴着呼吸机。

当时，他曾经说过，他绝不想这样的情形发生在他的身上。但是，时至今日，他却坚决要求采取“一切措施”。

从医学技术角度看，手术达到了切除肿瘤的目的，但是他一直没能从手术中恢复过来。

他住在监护室，并发了呼吸衰竭、系统性感染，卧床不动又导致了血栓，然后，又因治疗血栓的血液稀释剂而引起了内出血。

第十四天，他的儿子告诉医疗组，我们应该停止“治疗”了。

医生取出了他嘴里的呼吸管，他咳了几声，眼睛睁开了一小会儿，然后又闭上了。他的呼吸变得越来越吃力，然后终止了。

这是书中的真实案例，显然，故事的主人公还没有做好死亡的心理准备。

随着现代医疗的发展，像他一样死亡在医院的人越来越多，他们希望这个世界竭尽全力地留住他，但是医疗无法战胜死亡。

这是临终病患中最为普遍的情况，拼命抵抗，牺牲病人的生存质量，通过手术、化疗、把他们送到监护室。于是，死的时候，血管里留着化疗药物，喉头插着管子，肉里还有新的缝线。

2008年，美国全国抗癌协会发表的研究表明，使用呼吸机、电除颤、胸外按压，或者在临死之前入住监护室的末期癌症患者，其生命最后一周的质量比不接受这些干预措施的病人差很多。在去世之后 6周，他们的照料者患严重抑郁的可能性大了三倍！

过度的技术干预增加了对逝者和家属的伤害，剥夺了他们最需要的临终关怀。

临终关怀

当一个人已经无法避免地走向死亡，任何治疗都无法阻止这一过程，甚至会伤害到当事人时，

采取姑息疗法（不加速也不拖延死亡），只减缓疾病症状，提升病人的心理和精神状态，

可以让生命的最后一程走得完满有尊严。

临终关怀不是等死，而是好好的走到终点

临终关怀并不是放弃，而是给予当事人尊严、舒适感、控制感和有质量的生命。

除了单纯地延长生命之外，重病患者还有其他的优先考虑事项。

调查发现，重病患者的主要关切包括避免痛苦、加强与家人和朋友的联系、意识清醒、不成为他人的负担，以及实现其生命具有完整性的感觉。

所以，临终关怀应该做的有：

放弃过度治疗，关注他们的疼痛感，护理、照顾他们的生活
维护他们的尊严，尊重他们的意见和选择
共同面对死亡，帮助他们完成最重要的心愿

现在能做什么

正视死亡

在中国，我们的传统教育和思想，让我们避讳死亡的话题。

我的外婆在2018年初头疼，查出肺癌晚期，已经脑转移，在脑部形成大大小小的肿瘤，家人们不敢告诉她真相，安慰她一定会治好。后来带她辗转医院，住院，接受放疗和药物治疗，外婆精神渐渐不清醒，我自始至终不知道，外婆是否知道自己的情况很糟糕，但直到去世，都没有人能够和外婆坦诚地聊一聊死亡。

2018年底外婆就走了，外婆不吸烟也没有长期生活在坏空气中，无论是诊断出肺癌晚期还是去世，对我们来说都太突然了。

那是我身边第一次有人去世，我后知后觉，但凡当时能在她还清醒时，和她聊一聊她的心愿、情绪、遗憾、对我们的期望，妈妈和小姨失去母亲的痛苦都能减轻一分，我们对外婆的遗憾也不会留存终生。

从死亡的视角重新考量我们的现在

当你年轻、身体健康的时候，你相信自己会长生不老，从不担心失去自己的任何能力，周围的一切都在提示你“一切皆有可能”。你愿意延迟享受，比方说，花几年的时间，为更明媚的未来获取技能和资源。你努力吸收更多的知识和更大的信息流，扩大自己的朋友圈和关系网，而不是和妈妈黏在一起。当未来以几十年计算（对人类而言这几乎就等于永远）的时候，你最想要的是马斯洛金字塔顶端的那些东西——成就、创造力以及“自我实现”的那些特质。

但如果面临死亡的境遇，你的视野会收缩，你开始觉得未来是有限的、不确定的，你的关注点开始转向此时此地，放在了日常生活的愉悦和最亲近的人身上。

生活是一种技能。老年的平静和智慧是在时间历程中实现的。

随着年龄的增长，我们从在意实现、拥有和得到转而懂得欣赏日常生活的愉快和亲密关系，如果我们发现这更具满足感，那么，为什么我们要等这么久才去做？为什么我们要等到老了才去做？

每个早晨我都对着镜子自问，假如今天是我生命的末日，我还会想去做我今天打算做的事情吗？如果连续几天我的回答都是“No” 我就明白，我需要改变了。记住“你即将死去”，会使你受益匪浅。

这是乔布斯在斯坦福的演讲说过的话，从死亡的视角重新考量我们当下的生活，也许可以让我们找到真正想做的事情。

如果我明天死去，我也已经度过了愉快的一生。我能做的事都做了，想做的事都做了。

希望在我临终前，可以说出这句话。

月刊#5 | 2021.07

Thu, 01 Jul 2021 00:00:00 GMT

【Grow Up With You】指路人系列

Mike Shakes：从0开始自学一切

信息流管理

一个(自动化)信息流管理的案例
RSS收集：大多数网站都有RSS源；没有RSS的网站可以上rsshub、rss.lilydjwg.me找；可以在Feedly中搜索；可以用 feed43 转一个；可以自己写个 serverless function 转下，部署在 now 上
Feedly 工具用于抓取你收集的RSS源上更新的内容
笔记应用Obsidian：本地化存储、工作区文件树管理、个人用户免费、开放丰富的插件API库、双向链接、关系图谱、思维导图。(我做为一个Notion深度用户，Obsidian对我的吸引力是本地存储和关系图谱，但是还不足以让我弃用Notion转投Obsidian，因为Notion的数据库功能对我来说很重要)
播客简介&推荐

话题

小唯UP：不要活在别人的评价体系中
happy xiao：B级玩家
niche：细分主题、市场定位、长尾效应
一次网购维权经历
日本老人三行诗：仿佛看到了我们这代人的未来

逗猫棒，挥的太慢，被猫嫌弃了一脸。 ——见边千春 69岁

那个医生，以前教我养生，竟然比我先死了。 ——森田志郎 79岁

开发

小程序极客词典：中国互联网超爱读错的单词
chiphuyen / ml-interviews-book ：机器学习面试指南
geerlingguy / internet-pi：树莓派的所有网络配置
eugeneyan / applied-ml：公司的论文和技术博客，分享他们在生产中的数据科学和机器学习工作。
AllThingsSmitty / css-protips：收集CSS tips
tuteng / Best-websites-a-programmer-should-visit-zh：程序员应该访问的最佳网站中文版
fent / node-ytdl-core：javascript写的Youtube视频下载器
webpack老项目迁移到 Vite ：实战经验
为你的产品量身定制一个图标

Chrome图片工具

ImageAssistant图片助手：自动提取网页图片、批量下载、以图搜图
Fatkun：微博图片批量下载、转webp图片
Octo微博相册批量下载：微博用户相册照片原图

PodCast 播客简介与推荐

Wed, 30 Jun 2021 00:00:00 GMT

为什么听播客

和博客、公众号的长文章、短文章、长视频、短视频这些互联网内容相比，有什么特点？

没有视频和文章直观、快速，是一种慢消费内容，快进、倒退、分享不便
不占用太多注意力、专注度，更方便在上下班通勤、做家务等场景收听
晦涩的内容通过口语表达出来，比看书、看文章更易接收
相比于文章，更能从播者的语言中，得到他传递的情感、力量、态度，更容易和播者建立情感粘性
从生理和记忆的角度看，相比于文字，声音更能给人留下印象
没有视频的信息量大，留有边听边自主思考和想象的空间
比视频尺寸小，更易传输、制作、存储

播客工具

Android 平台有哪些优秀的播客 (podcast) 应用？
IOS有原生podcast应用
小宇宙App：自用，中文播客app，纯播客app、界面简洁、有平台推荐节目、有社交属性加时间戳评论类似弹幕进度条可以显示高能点赞，主要是中文内容，国外内容很少
Pocket Casts：自用，外国播客app，英文界面，国外内容较多，中文内容较少

播客推荐

知乎-有哪些值得关注的播客节目
豆瓣-一些播客推荐
不丧-已更新137期，夫妻档，很真实

关于我 | 简短的年中总结

Fri, 25 Jun 2021 00:00:00 GMT

上半年看了3本书

看《忍不住的新努力》，跟胡适学习了如何做一个温和、沉稳、务实，而又乐观、积极的人。

看《麦肯锡教我的写作武器》，让我更高效、更合理、更有逻辑的写出你此刻所见到的文章。

看《亲密关系》，让我更了解自己的情绪，更懂得维护和伴侣、家人的关系。

开了月刊，更新了4期，会持续更新。

顺便想在此聊一聊为什么开月刊，我写博客、更新公众号，是想做一个能分享一些有价值内容的输出者。

但是作为一个25岁没有足够人生阅历、视野认知有局限、没有硕博学历、事业技术水平都没达到行业金字塔顶部的平凡程序员，

可能只处于互联网内容产出者金字塔的底部。

之前看happy xiao的文章，说互联网内容大多是由B级玩家产出的，内容消费者是C级玩家，真正的A级玩家，是顶部的行业大亨、专家、学者、作家，他们是很少产出互联网内容的。

在如今的互联网中，内容产出几乎没有门槛，谁都可以发文章、发视频、开直播，因此B级玩家是一个庞大的群体。

每个B级玩家，都有他自己的一套信息渠道，去定期获取新信息，结合自己的思考，才能输出见解。

这些信息渠道、信息源不是固定不变的，每个信息源都有其上级信息源，直至追溯到源头的A级玩家。

我做月刊的目的，就是把自己不断更新的那些信息渠道、信息源分享出来，让我的博客不仅仅有自己的见解，也有日益更新的信息来源。

假如我分享了自己的见解A，分享了这个见解的信息源头B,C,D，那么我传递给你的信息就从A扩展到了B,C,D，

你还可以自己从每个B,C,D中继续向上溯源，找到更多有价值的信息，这样就间接实现了这个博客的价值~

另一个方面的原因，其实是我忍不住。

我觉得好的信息值得分享，不分享出来很可惜，我相信每一次分享，都是对我想看到的优质互联网内容的一次投票~

优化了我的时间管理方案 GTD

TODO List + Inbox 收集箱 + 知识体系，感兴趣的博友可以看这篇文章

优化了我的日记/记账体系

目前稳定实践了三个月，等使用达到半年后，如果觉得省心+高效+有意义，就会分享出来

上半年NotionX更新了2版本

Google商店中目前的用户量是2160，算是我的开源启蒙项目，希望以后做出更好的技术工具

年初参与了StateOfJS 2020的翻译

希望国内外技术社区的隔阂和差异能越来越小

上半年只整理了一篇技术文章

上半年在技术学习提升这一方面，主要的时间在看新出的红宝书第四版，学一个算法课程，坚持刷leetcode，处于输入和自我消化的阶段，因此技术输出暂时停滞。

计划中第四季度会发不少技术文章。

下半年规划

第三季度有两个月要用来考证，还有一个月读两本上半年想看没来得及看的书《卡耐基魅力口才与演讲艺术》和《心流》

第四季度集中在技术上，复习一下去年的全栈课、完成红宝书第四版阅读、理清自己的前端知识体系，查漏补缺

亲密关系：好的亲密关系是独立+合作

Sat, 05 Jun 2021 00:00:00 GMT

引言

阿德勒曾说过：“一切烦恼都来自于人际关系”

因为我们每个人都是社会中的一份子，无法脱离人群和社会独自生存

而亲密关系，更是占据了我们人生的大部分篇章

子女、父母、爱人、朋友，都是我们人生中不可或缺的角色

处理得好，亲密关系能给我们带来极大的快乐

处理得不好，则会造成重大创伤和无与伦比的痛苦

恋爱的本质是满足需求

情感是来自人类“爱与被爱”的基本需求

开始和维持一段亲密关系背后的真正动机，其实在于需求。

在日常生活中，我们的所作所为，绝大部分都是为了让某些需求得到满足。我们追求或吸引别人来做我们的伴侣，是因为我们需要人陪伴、照顾、了解、支持、接受、赞赏、抚摸和相拥而眠……

这是人类的本性，并没有什么不对，但是如果我们认为，我们所需要的快乐、安全感、自尊或其他的许多事物，都要依赖别人来实现的话，这就成为一个大问题了。

爱不是依赖、不是占有

每个人的童年时代，没有任何生活能力，所以需要依赖父母来达成的内心的需求、满足归属感、感受自己的重要性。

但是当我们长大之后，我们应该培养自己独立生活的能力、自爱的能力，而不是找到一个人，来满足自己的这些感受，弥补这些缺失，从别人身上索取爱。

因为如果你依赖别人，当发现对方不满足需求和期望时，就想改造对方，各种“手段”因此而生：

暗示、明示、甚至PUA，以“改造”对方，“如果你真的爱我，你就应该xxx”。
吵架，用愤怒当作自我防御、自我欺骗的机制，用愤怒保护自己脆弱的内心。
扮演受害者，把自己的伤痛归咎在对方身上。

这不是爱，这是把对方当作满足自己内心的需求的工具人。

好的亲密关系是：独立+合作

我们每个人都是完整的个体，不是离开谁活不下去

害怕受伤、痛苦、恐惧，渴望永恒真挚、开心、快乐，都是我们生而拥有的情绪，

要学会独立消化、处理自己的情绪

要学会接受、面对自己，面对自己最好的、最糟的状态

每个成年人的行为、决策，都是他生而为人的自由

你可以建议、沟通，但是不能干涉、强迫；

与自由相应的，每个人都有独立承担其行为后果的责任

不要扮演受害者，你的需求未满，不是别人的责任

亲密关系，不是我们人生的最终目的

亲密关系是丰富我们漫漫人生之旅的风景、增强人生体验的精神补剂

要勇于接受未来，舍得放下过去

不能把自己的需求和期望，强加在伴侣、亲人、朋友身上

要学会自爱，让自己内心变得完整、安全、有爱

建立独立完整的自尊体系，心智成熟

你跟我在一起，我拥有了合作走完人生的伙伴，我可以开心幸福

你不跟我在一起，我也能独自看完这世上的风景，我也不会崩溃度日

愉悦与不快都很重要

亲密关系是一种完美设计

在亲密关系中，所有的一切都是重要的部分，即使是令人不悦的冲突与不适的情境。

当你继续在感情中成长时，你也开始懂得欣赏你跟伴侣之间所发生的任何事情。

你的伴侣不是你的爱与幸福的来源，满足你的期待与使你开心不是他们的职责。

你的伴侣在你的生活中扮演了三个重要的角色：

一面镜子，让你看见引发你关注的不舒服感；
一名老师，在你探寻真实自我的时候，激励与启发你；
一名“玩伴”，开启并陪伴你一段生命的旅程。

不要过度追求浪漫主义的恋爱

一见钟情的颜值、小鹿乱撞的心动、一束花、

一次表白、几句甜言蜜语、嘘寒问暖、

肾上腺素飙升的亲密接触、轰轰烈烈的你追我逐、

都是爱情的修饰，而不是爱情本质，

不要再通过小说/影视剧/磕cp去学习爱情，

坚持读书、勇于识人，可以补充我们缺少的“爱情教育”

积累知识和人生经验，去成就洒脱、成熟的亲密关系

总结

慕名而读，结果读错了，不是这本，是另一本罗兰·米勒的《亲密关系》。但是看完了这本书，还是有一定收获的。

这本书从心理学和人性的角度，直戳亲密关系中的问题，以及问题出现的原因。

边看书边审视自己的上一段恋爱，从而发现导致分手的原因双方都有责任，过去对他的埋怨和不满也放下了，把这本书推荐给他看之后，我们复合了。从高中到工作第三年，我们从懵懂无知地向往爱情，到热恋期的亲密无间，到归于平淡，再到吵吵闹闹，互相埋怨，分道扬镳......

一切都是因为我们不懂爱情，我们在年少无知的时候选择了彼此，把彼此当作依赖，当作生活、工作、压力的唯一寄托和宣泄口，把彼此当作那个理所当然、应该无条件支持、纵容自己的人。

现在我们才懂，我们都是完整而独立的个体、而爱情就是拥有一个合作伙伴一起经营人生

月刊#4 | 2021.05-06

Tue, 01 Jun 2021 00:00:00 GMT

【Grow Up With You】指路人系列

霍孙杨 hcy: Vue核心团队成员，Vue设计分析文章《Vue Design》作者

开发资源

MDH • 前端情报日刊：社群活跃，每日更新
最新的前端框架性能对比结果、分析文章、了解测试的基准
You-Dont-Need-JavaScript：用原生CSS实现UI逻辑
免费公开API搜集仓库
动画算法仓库
手写easy webpack ，熟悉AST

纪录片推荐

海豚湾 2009

有意思的资源

FUNN.FUN：奇趣网站收藏家
世界电台：从世界地图上探索全世界电台
Deep Nostalgia：将人脸照片转换成表情视频
NandGame：从逻辑电路开始一步一步制造电脑的游戏

月刊#3 | 2021.04

Thu, 01 Apr 2021 00:00:00 GMT

舒适生活

成年人如何科学地应对压力？
每天晚上睡觉之前写下当天发生的3件好事：低成本持续幸福
写日记的意义：和自己对话
闲鱼攻略

职业发展

Solo Developer：两位独立开发者
若川：公众号运营策略
Happy Xiao博客推荐：你在展示你是谁，你如何思考，而不是你在想什么

投资

【2020胡润财富报告】目前中国拥有600万人民币资产、千万人民币资产、亿元人民币资产和3000万美金资产的家庭数量和地域分布情况，包括中国内地和香港、澳门、台湾
【业界事件】一表看完散户大战华尔街全过程（持续更新）
【投资思维】复利的谎言随机性、不连续性、不均匀性、非对称性、思考>勤奋
【投资分析】中国居民会增加股票配置吗？

话题推荐

【自律=压抑欲望？】所谓自律，就是主动要求自己以积极的态度承受痛苦。——《少有人走的路》
【感情是信念的基础】“爸爸说我很冷静，他并没有真正理解我，我认为，有时候，感情是信念的基础，这里有我汗水浸过的土地，这里有我患难与共的亲友，这里有我相濡以沫的妻子，这里有我生命的根。”——电影《牧马人》
【投射】我们所看到的每件事其实都是我们内心的投射。我们怎么评论别人，就是我们怎么看待自己。如果我觉得别人太爱批评而讨厌他，就代表我讨厌自己爱批评的习性。——《亲密关系》

文章推荐

教育内卷现状：为了鸡娃，上海的家长到底有多拼
「翻墙违法是无可争议的事实」

麦肯锡教我的写作武器：如何无痛写文章

Sun, 28 Mar 2021 00:00:00 GMT

引言 - 写文章为什么令我痛苦

作为一个理科生，要问我学生生涯最讨厌的是什么，我无疑会回答写作文。

无论是小学的流水账日记，

还是高考的800字作文，

甚至是现在工作上的文档/报告，

都曾为我的脱发症增添几分贡献🤧。

自从维护博客/写公众号以来，我常常反思，写文章为什么令我痛苦

我写文章，一是为了将我自己对某些事物的思考/总结记录下来，供自己回顾；二是为了分享给你，听听你不同的见解。

总归是有一些东西在脑子里，想表达出来，却缺乏章法🤯。

因此在朋友给我推荐这本书的时候，就没有犹豫加入书单了✅。

《麦肯锡教我的写作武器》是怎样的书

这本书可以说是一本商务文案写作指南

虽说是商务文案，但是也同样适合日常写作和技术文章。

因为这本书从信息筛选、遣词造句，到整体结构的设计这些方面，介绍了写文章的通用技巧和思维。

下面的正文，会从上述的三个方面，总结书中的内容。

信息筛选

信息是组成文章的“零件”

写作本质上就是信息的整合。

能明确表现主语与谓语的关系的句子，都是信息。

“这瓶农夫山泉的容量是500ml”可以作为一条信息；

“农夫山泉”、“500ml”这种单独的对象，都不是信息；

信息分三类

记述信息：描述事物的情况和现象本身，常常包含现象、数据、经验、实例（平铺直叙）

例子🌰：本篇文章总结了《麦肯锡教我的写作武器》这本书的主要内容。

评价信息：表达某一情况或现象的好坏（有形容词）

例子🌰：《麦肯锡教我的写作武器》这本书很值得读。

规范信息：要求事物应有的状态以及人该采取的行动（有动词）

例子🌰：你应该读一读《麦肯锡教我的写作武器》。

区分清楚信息类型非常重要，以书中的一处对话为例🌰：

主管：山田，X公司最近的业绩如何？

山田：是……X公司最近一季的销售额为220亿日元，营业利益为5亿日元。自由现金流量（Free Cash Flow）为87亿日元。昨天股票的收盘价为每股358日元。

主管：喔，所以呢……

山田：啊！是……好像还有特别损失的部分，再扣除税之后，利益为2亿日元。利息支出大概是1千万日元左右。

主管：所以呢？

山田：啊！还有……该公司利息收入为200万日元。销售成本是……

主管：我是问你“他们的业绩怎么样？好还是不好？”

山田：喔！是……似乎回升了不少。

主管：好啦，有上升就是了，我知道了……

从上面的对话可以看出来，主管想要了解的是评价信息，并进行了四次提问才得到想要的回答，而山田小呆呆前三次都回答的是记述信息。

所以为了避免像他一样给上司留下“鸡同鸭讲、对牛弹琴”的不良印象❌，

同样为了避免给文章读者造成混淆❌

在传达信息前，我们应该明确，究竟要传达哪一类信息。

活用三种类型的信息

记述信息 + 评价标准：有“评价信息”的效果，却比直接评价更委婉。🌰例如小明的妈妈说：你这次考了40分，60分是及格分。

评价某种行为的信息：有“规范信息”的效果，却比规范信息更委婉。🌰例如小明的妈妈接着说：下次再考40分就过分了。

如果你表达了某一类信息，例如记述信息，别人仍然说“听不懂”时,可以接着说出评价信息、规范信息。🌰例如小明对妈妈说：这台电脑RAM有32G。+运行内存很大，电脑运行十分流畅。+妈妈你应该买给我学习。

文章的主题不是信息

一般来说，文章的主题不应该是一条信息，🌰例如“我分享了一篇关于《麦肯锡教我的写作武器》的文章”不适合作为文章的主题。

文章的主题应该告诉别人你文章内信息的范围，🌰例如“《麦肯锡教我的写作武器》读后感觉”可以作为文章主题。

此外，用“时间”替主题定调，可以增加吸引力,🌰例如"三分钟了解《麦肯锡教我的写作武器》"。

遣词造句

信息的筛选很重要，如何将信息合适的表达出来也很重要，

想让信息提升说服力，可以从遣词造句下手。

1. 善用主语

明确表达一条信息，核心在于，高度明确的主语与谓语的关系。

在日常生活口语中，我们常常习惯于省略主语，但是这个习惯带入到文章中，容易造成误解、加重阅读负担。

此外，也可以通过主语影响别人思考，🌰例如：“门要关了”，“列车员要关门了”这两句话，后一句的主语时活生生的人，会引发听者更多思考。

2. 明确逻辑，善用连接词

文字的逻辑性是否强，思维是否流畅，很大程度上取决于连接词。

连接词用好，可以降低阅读负担，让文章一气呵成。

🌰举个例子，如果删去下面这段话中加粗的连接词，会给人一种“这段话每个句子我都认识，但就是不知道想表达什么”的感觉：

美国总统明年一月开始进入第二任的任期，关于执政(解说)，国民年金以及税制的根本改革是优先课题。首先(分点1)，国民年金将导入确定提拔型的“个人结算”，以(目的)防止高龄化带来的年金财政的缺口。其次(分点2)，简化繁杂的所得税制，同时(追加)继续保持减税路线，为的是(目的)长期的经济成长。当然(让步)，要努力减少过去最严重的“双重赤字”，也就是财政赤字和贸易赤字。不过(转折)，在通往实现的道路上，困难重重。

常见的逻辑连接词及分类可以参考下图：

3. 用词“具体”

滥用抽象的表达，是不负责任的表现。

“……的活性化”、“……的多样化”、“重新评估”、“推动”、“调整”这类词汇仅仅可以用于表达一个方向性，如果用多了，会显得文章空泛、圆滑闪躲。

4. 合理分段

一个分段最好传达单一的信息。

分段的数量也有小tips，最少3个，5、7这样的质数也比较合适，因为3是稳定结构的最小数量，7是科学证明人类一次能记住的最大数量，而质数更容易被记忆。

文章结构

前两段，分别讲了如何筛选合适的信息、如何遣词造句以更好的传达信息，

除了表达独立的信息，整体文章的设计也很重要。

金字塔结构

金字塔结构是写大多数文章的常用结构，分为多个层级

主要信息
关键信息
次要信息

和思维导图一样，金字塔结构可以一路扩展下去，这样的结构，逻辑性强，条理清晰。

由上而下⬇️设计结构（分解

当你拥有一个写作目标时，例如高考的命题作文，就可以由上而下设计文章结构。

先选定一个主要信息，然后再分解成个别的关键信息。

分解的方法有理由法和详述法，考虑“为了让上层信息更有说服力，要用哪些下层信息比较能够支持论点”，来设计信息。

由下而上⬆️设计结构（抽象、摘要

当你拥有一些零散信息和思维时，可以由下而上设计文章结构。

由下而上法就是要将位于下层的信息群往上精炼，成为上层的信息。

具体来说，需要先将零散信息分组，再通过结论法和摘要法，得到上层信息。

通常我写读书笔记就是采用这种方法：看书时，标记出有收获的字句、段落，输出笔记时，聚合所有的标记、分类、向上提炼，三步套路之后，写读书笔记就能得心应手。

MECE：不重复不遗漏

除了主题的数量、金字塔结构，还有一个在构成关键主题时很重要的概念，那就是主题之间是否为MECE。

MECE的全称是“Mutually Exclusive Collectively Exhaustive”，直译之意为“相互排他性、集合网罗性”，也有人翻译成“不重复、不遗漏”。

将关键主题设定在三、五、七个，目的在于分类能够清楚，没有重复冗余，同时又能足够完整地网罗重要条目，没有遗漏。

结语

掌握了信息筛选、遣词造句、结构设计，足够写出一篇逻辑清晰的文章，

如何将脑子里的种种思维，以更有逻辑的形式，形成文章
如何提高文章说服力
如何流畅写作，提高写作效率

这些写作最核心的问题，也能找到答案。

月刊#2 | 2021.03

Mon, 01 Mar 2021 00:00:00 GMT

2020年总结收集

若川的2020年度总结，水波不兴（川佬的第七个年总结
前端劝退师：晃荡一年，我那错乱无力的2020 | 年度总结（晃荡又不失风骚的职业旅程
惊天码盗：2020年度总结（增长的朋友）（偏重于学习/工作/职业成长
一位阿里前端er的年总结（生活、工作、兴趣、理财，主题丰满

学习资源

英文演讲/影子跟读【Never Give Up】尼克·胡哲音频中英文稿
神经网络入门教程 - freecodecamp
docker教程 - freecodecamp
如何快速进入学习状态 - bilibili

Notion相关资源

Notion 自动化：Notion API key + Automate.io
Mac alfred Notion搜索快捷操作
Notion子弹笔记

工作

工作中提高效率的方法
前端软技能，反制职场PUA
敏捷项目管理：notion 看板，飞书多维表格

书单

女权书单
30+大男孩的世界好奇书单
学科入门书单/短板补充书单

话题

【自律=压抑欲望？】所谓自律，就是主动要求自己以积极的态度承受痛苦——《少有人走的路》
【“人设”的作用】是快速让对方知道能从你身上获得哪一类内容。
【投资】一表看完散户大战华尔街全过程（持续更新）
【职业故事】两位独立开发者

前端图标的那些事

Sat, 13 Feb 2021 00:00:00 GMT

初次发布于2020-02-19
第二次编辑于2021-03-13，更新svg-symbol

前言

用了矢量图标,

UI再也不吐槽你页面的图标放大后有点糊了...

PM再也不会嫌弃你画的页面图片太大，太占load time了...

你也不用因为一个hover状态，就写一段换图片src的逻辑了...

矢量图标

不会因为放大/缩小而导致图标变模糊，即可以任意定义尺寸的icon。
在现代前端项目中，除了任意定义尺寸，对图标的要求还有定义颜色等等。

字体图标

以字体的形式定义的图标，可以像字体一样定义尺寸,颜色。
优点：体积小（用到的图标越多性价比越高）；样式便于控制，与字体一样可以调节font-size，color，阴影，旋转，透明度，且兼容低版本浏览器。
方法与原理：UI提供svg矢量图 -> 用工具将svg转换成字体文件 -> 前端在css中自定义font-face，通过unicode的方式使用图标。
可以使用主流的字体图标库:fontAwesome,阿里的iconfont。
也可以使用自动化工具，例如@ztwx/webfont：可以自动化上述过程，运行工具打开网页后，上传svg文件，自动更新代码中的字体文件和css文件。
缺点：需要UI合作；每次图标变更都需要重新生成字体文件，更改css中定义的font-face和class。
前端引用iconfont主流方式：

直接使用Unicode字符

兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。

/*第一步：自定义@font-face，引用字体文件*/
@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
        url('iconfont.woff2') format('woff2'),
        url('iconfont.woff') format('woff'),
        url('iconfont.ttf') format('truetype'),
        url('iconfont.svg#iconfont') format('svg');
}
/*第二步：定义使用 iconfont 的样式*/
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*第三步：挑选相应图标并获取unicode编码，应用于页面*/
<span class="iconfont">&#x33;</span>

font-class（使用最多）

unicode变体，解决了unicode编码语义不明确的问题，书写更直观。可以很容易分辨这个 icon 是什么，著名的FontAwesome即使用该方式
兼容性良好，支持 IE8+，及所有现代浏览器。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
本质上还是字体，所以多色图标还是不支持的。

/*第一步：自定义@font-face，引用字体文件*/
@font-face {
  font-family: "iconfont";
  src: url("iconfont.eot");
  src:
    url("iconfont.eot?#iefix") format("embedded-opentype"),
    url("iconfont.woff2") format("woff2"),
    url("iconfont.woff") format("woff"),
    url("iconfont.ttf") format("truetype"),
    url("iconfont.svg#iconfont") format("svg");
}
/*第二步：定义iconfont样式*/
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*第三步：定义每个icon unicode 样式类*/
.icon-gouwuche:before {
  content: "\e669";
}

<!-- 第四步：引入1，2步的css -->
<link rel="stylesheet" href="./iconfont.css" />
<!-- 第五步：挑选相应图标并使用定义的类名，应用于页面： -->
<span class="iconfont icon-xxx"></span>

Symbol

本质是svg，支持多色。
较新的使用方式，兼容性较差，支持 IE9+，及现代浏览器。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
浏览器渲染 SVG 的性能一般，还不如 png。

<!-- 第一步：引入js代码 -->
<script src="./iconfont.js"></script>

/* 第二步：加入通用css样式（引入一次即可） */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

<!-- 第三步：挑选相应图标并获取类名，应用于页面： -->
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

icon最佳实践：svg图标

除了字体图标，现代前端项目中使用更多的是Svg图标
<svg>及其一系列元素，用于矢量图像的结构、绘制与布局
<symbol>元素，是可复用的svg图像，用来定义一个图形模板对象，它可以用一个<use>元素实例化。

<svg>
  <!-- symbol定义模板（symbol本身不会显示图像 -->
  <symbol id="sym01" viewBox="0 0 150 110">
    <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
    <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
  </symbol>

  <!-- 使用use元素才能实例化 -->
  <use xlink:href="#sym01"
      x="0" y="0" width="100" height="50"/>
  <use xlink:href="#sym01"
      x="0" y="50" width="75" height="38"/>
  <use xlink:href="#sym01"
      x="0" y="100" width="50" height="25"/>
</svg>

symbolId:在<use>元素的xlink:href属性需要指向symbol元素的id
优点：
1. svg图标拥有字体图标的各种优点此外
2. svg不需要UI转成字体、定义font-face，只需要原始的svg代码，即可使用。
3. 通过现代前端工具整合，svg图标变更时，只需要变更单个svg文件，耦合度低

svg symbol应用于现代前端框架

创建svg目录，存放一个svg文件，例如@/assets/svg/test.svg
在webpack中配置svg-sprite-loader，匹配上述的svg文件，并将其symbolId配置为svg文件名,详情参考svg-sprite-loader文档

// 以下为vue cli4的配置
module.exports = {
	chainWebpack(config){
	  // 1. 将./src/assets/svg排除在vue的默认webpack配置的svg规则之外
	  config.module.rule('svg')
	    .exclude.add(resolve('./src/assets/svg'))
	  // 2. 添加一条icons规则
	  config.module.rule('icons')
	    .test(/\.svg$/) // 匹配svg后缀的文件
	    .include.add(resolve('./src/assets/svg')).end()  // 添加规则生效的路径
	    .use('svg-sprite-loader') // 使用svg-sprite-loader插件
	    .loader('svg-sprite-loader')  // 加载svg-sprite-loader插件
	      .options({symbolId: 'icon-[name]'}) // name:文件名，此处的symbolId即svg的xlink:href属性，xlink:href="#icon-文件名"
	}
...
}

在vue模板中即可直接使用

// text.vue
<template>
  ...
  <svg :class="svgClass" v-on="$listeners">
    <use xlink:href="#icon-test"></use>
  </svg>
  ...
</template>

import '@/assets/svg/test.svg';
...

更进一步的封装：不需要每个icon都import;<svg-icon>组件;

通过webpack上下文，将svg文件作为固定上下文，即可避免手动import，用到了webpack中的require.context api

// @/assets/svg/index.js
// 使用 webpack提供的require.context()指定svg为固定上下文
function importAll(r) {
  r.keys().forEach(r);
}
importAll(require.context("@/assets/svg", false, /\.svg$/));

在main.js中引入上述js文件

import "@/assets/svg/index.js"; // svg上下文

封装icon组件

<template>
  <svg :class="svgClass" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    // iconClass要和svg的文件名一致
    iconClass: {
      type: String,
      required: true,
    },
    // className可以用来定制样式
    className: {
      type: String,
      default: "",
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    },
  },
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

在main.js中注册全局组件

import SvgIcon from '@/components/common/SvgIcon.vue'
Vue.component('SvgIcon', SvgIcon)

使用

<svg-icon iconClass="test"></svg-icon>

月刊#1 | 2021.02

Mon, 01 Feb 2021 00:00:00 GMT

我的本月文章

2021年，给自己来点鸡血
《当我谈跑步时我谈些什么》：痛苦难以避免，而磨难可以选择
【GTD时间管理】高效低耗的应对信息洪流
我做了一年公众号有多少收入？

优质信息源

构建我的被动收入 - 马大伟

终身学习(认知杠杆) → 全栈技术(时间杠) → 投资理财(财务杠杆) → 被动收入(人生杠杆)

美团技术博客

更新稳定，积累多，技术领域宽泛

学习资源

美团技术沙龙——85个演讲，70+小时视频
技术人必读书单-美团
技术团队书单-美团
- 通用能力类：6本
  
  原则 8.3
  
  系统之美 8.2
  
  潜力量 8.7
  
  乔布斯的魔力演讲 7.8
  
  远见 : 如何规划职业生涯3大阶段 7.7
  
  事实 : 用数据思考，避免情绪化决策 8.0
- 经济管理类：6本
  
  孙子兵法 9.4
  
  格鲁夫给经理人的第一课 9.1
  
  刷新 7.5
  
  关键时刻MOT 8.2
  
  领导梯队 8.1
  
  经济学通识课 8.3
- 哲学历史类：8本
  
  光荣与梦想 8.7
  
  民国大人物 6.5
  
  极简欧洲史 8.2
  
  世界观 8.9
  
  当下的力量 8.0
  
  枪炮、病菌与钢铁：人类社会的命运 8.8
  
  传习录 9.3
  
  西方心理学史 6.7
- 人物传记类：3本
  
  邓小平时代 9.2
  
  我的世界观 8.9
  
  曾国藩传 6.8

流量积累

独立博客流量可视化案例
零成本搭建现代博客之订阅推送篇

独立博客流量的即时性

看看机会

【JD】莉莉丝（年终抽奖真香

莉莉丝游戏 - 平台组

公司名：莉莉丝游戏
部门名称：平台组
工作城市：上海
经验要求：2年以上
招聘岗位：前端工程师（P6、P6+）
职位描述：
1、负责公司官网，社区，平台开发和维护；
2、负责游戏管理系统的开发；
3、参与平台产品的架构优化，性能优化。
职位要求：
1、精通html5、css3、javascript、ajax等web开发技术，掌握至少一种前端框架，如react，angular，vue。熟悉ECMAscript6/7语法；
2、熟悉不同版本浏览器的兼容性、能够对不同尺寸设备进行适配；
3、至少一门后端开发语言，如nodejs，php，java等。掌握数据库和缓存系统，如mysql，memcached，redis等 ；
4、有一定的架构设计理念，熟悉常用设计模式；
5、有良好的ui交互实现能力、能熟练使用photoshop进行切图；
6、计算机或相关专业本科及以上学历；
内推联系人（微信）：Jaked_M
内推联系人（邮箱）：liuchao@lilith.com

莉莉丝游戏 - Avatar项目组

公司名：莉莉丝游戏
部门名称：Avatar项目组
工作城市：上海
经验要求：3年以上
招聘岗位：RN工程师（P6 ~ P7）
职位描述
1、负责社区核心产品的设计、开发、维护工作
2、负责App基础组件和架构设计，编写高质量代码
3、和产品经理配合，深度参与产品需求讨论，功能定义，优化产品体验
4、研究移动平台新技术，持续优化App性能，对齐业内一流产品水平
任职要求
1、大学本科或以上学历，3年以上工作经验
2、iOS/Android端开发经验（高级android开发优先），具备一定双端开发能力者优先
3、深入理解Android端界面绘制原理/iOS端内存管理机制
4、熟悉网络通信机制和常用协议，有网络连接优化经验者优先
5、熟悉移动端性能调优方法
6、熟悉设计模式的相关知识
7、有即时通信产品开发经验者优先
8、熟悉React Native框架/JS语言者优先
9、了解swift/kotlin语言者优先
内推联系人（微信）：Jaked_M
内推联系人（邮箱）：liuchao@lilith.com

莉莉丝游戏 - 测试开发部

公司名：莉莉丝游戏
部门名称：测试开发部
工作城市：上海
经验要求：3年以上
招聘岗位：前端开发工程师
职位描述
1、参与莉莉丝游戏内部测试平台的研发并独立负责前端开发工作
2、与设计师同事合作，对UI图进行高度还原和页面交互的实现
任职要求
1、大学本科或以上学历，3年以上工作经验
2、熟练运用JavaScript语言与HTML5、CSS3等技术
3、熟悉模块化，熟练运用主流的Web端JS库和开发框架，例如：Vue、Webpack、React等
4、有node开发经验优先
内推联系人（微信）：Jaked_M
内推联系人（邮箱）：liuchao@lilith.com

莉莉丝游戏 - 产品发行中心

公司名：莉莉丝游戏
部门名称：产品发行中心
工作城市：上海
经验要求：2年以上
招聘岗位：前端开发工程师 （P5+）
职位描述
1、负责游戏官网、H5活动页、小程序等相关网站的前端开发与维护工作；
2、与设计师、后端同学紧密合作，负责产出高质量的产品前端层；
3、协助中台系统开发。
任职要求
1、大学本科或以上学历，2年以上工作经验
2、精通HTML5、CSS3、JavaScript等Web开发技术，具备扎实的前端基础；
3、对页面的架构和布局、多端的适配兼容、网站性能的优化、模块/组件等有深入的理解；
4、至少熟悉并上线使用过一种主流的前端开发框架，比如：vue、react；
5、热爱前端、较强的责任感、良好的团队协作能力。
内推联系人（微信）：Jaked_M

忍不住的新努力：胡适的人生哲学

Sun, 31 Jan 2021 00:00:00 GMT

引言

《忍不住的新努力》是文化大师胡适的随笔集，收集了他34篇经典文章。

以前对胡适的了解，仅限于历史书中“新文化运动的倡导者”这样一个标签。

读完这本书，才感受到一个更有温度的胡适：

他的文字透露着他温和、乐观、自由、沉稳的性情和态度，他留学美国师从哲学家，做过北大的教授，参与或创办过《新青年》等等刊物，获得过诺贝尔文学奖提名。

但他的建树不仅限于文学：

他宣扬个性解放、思想自由、向当时代的学生科普宇宙观、时间观，他追求科学、实践和真理。

在我们这一代人中，鲁迅先生很受欢迎，他比胡适大10岁，也算是同时代的人，他的文字犀利激烈、令人振聋发聩。

但是读完这本书后，我发现自己更喜欢胡适，温和沉稳但坚定、有态度、务实。

因为是随笔集，所以内容很宽泛，读完之后，我总结了其中几个令我有收获的主题：

生活的意义
读书/问学的方法

生活的意义

生活的意义、人生的意义，是一个很广很抽象的哲学话题，不同的人有不同的理解。

这本书中的有几点能反映作者的人生哲学：

有意思的生活

如何过有意思的生活：一个人做的事应该件件事回的出一个“为什么”，说得出为什么，就是有意思的生活

迷茫？青年困惑？不满社会？

不满于社会，又无能为力，无所作为，怎么办？这是很多青年人的困惑。

作者的答案，就是“独善其身”，先努力学习充实自己，然后能兼善天下。

大多数的失望，皆起于奢望>能力。

因此，无论是内因还是外因导致的苦闷，都要先从自己做起。

人生的意义到底是什么？

人生的意义是各人自己造出来的

人生的意义在于自己对待人生的态度

人生的意义在于自己赋予其的意义

“高尚、清贵、污浊、有用、无用”......都在于你自己的追求

对学习的理解

学习驱动力

我之前专门写过一篇学习方法，但是没讨论过为什么要学习。

活学活用，学习的意义在于知道自己“为什么”学习，也就是找到最原始的学习驱动力：

保持质疑的态度。问题是一切知识的来源。
保持兴趣。找到令自己感兴趣的事物，兴趣是驱动力。
保持对努力的信心。功不唐捐，努力就一定不会后悔。

求知的原则

怀疑。始终保持怀疑的态度去看待他人、自己的认知，不盲从，构建自己的知识体系。
务实。切实的做，而不是一味的打口号，立flag。
讲证据。依靠证据去质疑别人、质疑自己现有的认知，依靠证据支撑自己的认知。
追求真理。宇宙无穷，真理无穷。以追求真理为求学态度，以追求真理为乐趣所在。

学习的目标

学习的目标可以分为两点，就是提升智、识：

识：拥有知识
智：拥有运用、发挥知识的能力

学习的方法

眼到，要理解字面意思
口到，熟读
心到，思考，横向比较思考，纵向追根究底，不断质疑“为什么”，和已有知识建立连接，融入自己的知识体系
手到，抄录、提炼、总结心得，知识只有在经过自己的思考提炼，形成自己的“输出”后，才真正成为自己的知识

构建金字塔型的知识体系，能广大、有专精

GTD时间管理

Wed, 27 Jan 2021 00:00:00 GMT

优点

更好的应对信息洪流，不被其打乱节奏，减少信息焦虑，减压

遇见一个信息就处理一个，很容易打乱节奏，先收集再定期处理，类似计算机进程调度

和任务管理协同执行，定期处理信息、更新任务，可以使任务更灵活稳定，成长效率更高

例如每周7天，前6天专心执行当下的任务，不理会新的信息，只需要将其丢入inbox；

第7天专心整理inbox，对任务做相应的调节（毕竟大脑是个单线程机器

利于对信息抽丝剥茧，更高效的将信息筛选转化为自己的认知

举个例子🌰，你养了一个鱼塘，每天都去钓鱼，无论肥瘦只要上钩你都照单全收，最后鱼篓不一定挺得住不说，鱼的质量也不高；但是你养上一周一个月，再去挑大鱼，又省力，质量又高 😉

简化的GTD流程

1 执行 & 收集期

在各种设备、将各种来源的新信息，统一收集到inbox收集箱
专心的执行当下的任务，不受信息困扰

inbox的形式千千万，用的开心就好

可以使用专业的app，例如：OmniFocus、Doit IM

也可以使用更易得的工具，例如：只有自己的微信QQ群、邮箱

我个人比较偏向QQ群，1是手机电脑qq常在线，2是比微信方便同步，3支持文字图片链接文件，覆盖大部分场景

2 处理期

定期整理：规定定期的时间，例如每周末/每月底，处理inbox
理解转化：筛选有价值的信息，理解并记忆，输出自己的东西，归纳融合到自己的知识体系中
计划：根据信息的更新，确定/调整下一周期的待办事项

关于我 | 2021年，给自己来点鸡血

Fri, 01 Jan 2021 00:00:00 GMT

为什么要趁年轻多学习原文

爆炸性压力才能带来爆炸性进步

每次我状态低迷的时候，我都会看看这个视频，视频18分钟，如果你懒得看，我简述一下：

演讲者是许峰源先生，他出身一个非常贫穷的家庭，整个家庭，靠的是父亲踩着三轮车出去卖豆腐微薄的收入支撑着。

这不是一个烂仔逆袭的故事，因为从小看到了生活艰苦的一面，许峰源一直很努力想考上台大法律系，因为成为律师才有高收入，才能改变家庭的现状。

不幸的是，在他上大学的时候，父亲却查出了舌癌晚期，只剩一年左右的时间，为了让父亲在临终前看到自己的孩子成才，许峰源用了极短的时间通过了司法考试，成为了一名律师，让父亲看到了自己的律师证，才安然去世。

祸不单行，很快许峰源的母亲也查出了患有肺腺癌，一种扩散很迅猛的癌症，为了让母亲有一个安享晚年的环境，许峰源在23岁的时候，毅然辞职创业，白天在律师事务所打拼，晚上做培训，最终让母亲住上了好房子，接受更好的治疗，然后平静地送走了母亲。

前半生，许峰源先生为之奋斗的两个对象都走了，迷茫了一阵子之后，他依然没有放弃努力，而是选择了实现自我，成为了一名作家。

再烂的牌也得打下去，这就是人生

成熟的一些标志

能克制欲望，不追求即时反馈，延迟享受。

保持一致性，无论在人群中还是独处时，知行合一，不卑不亢，不矫揉造作，不哗众取宠。心中始终有底线、有原则、有追求。时刻反省自己：what在做什么、why为什么这样做、how如何做的更好

—— 尼古拉斯·鱼

别让任何人打乱你的人生节奏

每个人的人生都不同

"Not everything that counts can be counted，and not everything that's counted truly counts"

"并不是每件算出来的事，都有意义；也不是每件有意义的事，都能被算出来" ——爱因斯坦

@https://www.bilibili.com/video/BV1WW411F7Hx

如何追求快乐

有很多快乐是放纵的快乐，是降低了人性尊严的快乐，而越能体现人性尊严的快乐，越是一种高级的快乐。

追求高级的快乐并不意味着放弃低级的快乐，但是如果你的眼目永远只关注地下，你永远不知道向上看有多么的快乐。

——罗翔

@https://www.bilibili.com/video/BV1AE411T7p7

I don't need dollar bills to have fun

——【Cheap Thrills】 Sia

关于坚持

坚持这两个字，远比你想象中的要难的多，但也比你想象中的有效的多。

'You do make a difference!'

@https://www.bilibili.com/video/BV1XJ411d7Xx

两年，是很容易虚度过去的时长，也是足够改变自己的时长。

@https://www.bilibili.com/video/BV1NE41197sr

就是不想努力怎么办

我就想做一个安于现状的人

就想利用上班赚钱过好自己的小日子

就想平凡的过完一生

我就是不想拼命奋斗，拼命努力，拼命内卷

不可以吗？

当然可以，每个人的追求不同，淡泊名利，平静一生，真正能做到的话，是一种很高的人生境界。

但是你做出这种决定，就要考虑其带来的结果

你能做到真正的“淡泊名利”吗？

当别人用光鲜亮丽的服装、车子、房子包装和提升自己的生活品质时，你能做到不羡慕吗

当别人在马尔代夫浮潜、在阿尔卑斯滑雪、在土耳其滑翔、在富士山脚泡温泉喝清酒，你能做到不羡慕吗

你身边的人生活品质都比你高得时候，你会不会后悔

你的普通收入扣除房子首付、房贷、车子、奶粉钱之后你还足够安稳吗

如果不买房，你可以做到一生租房，并容忍一生到老不断的搬家吗

你的普通收入能让你匹配上你心仪的另一半吗

你的现状能维持你一生的稳定平凡吗？你能对抗人生所有的风险吗

你可以为自己的一生、父母后半生、孩子前半生的大大小小的健康问题买单吗

如果你有了孩子，你作为爸爸/妈妈，能给孩子最好的教育吗

如果你深刻的考虑了这些问题，得到的答案都是肯定的，那么安于现状，不拼命努力，也没什么不好

每个人的人生都不同，人生的路也没有对错之分，只是路上的酸甜苦辣，你需要独自承担

比本文更硬核的鸡血

为什么要趁年轻多学习 - 知乎乔布斯斯坦福大学演讲 - bilibili 前端er要向qian看 - BOSS直聘别让任何人打乱你的人生节奏 - bilibili 如何对抗平庸的生活 - 罗翔做人一定要坚持 - bilibili 改变自己，只需要两年时间 - TED 真正的自律 - Will Smith 自信心不足? - bilibili

2021，自律 + 坚持，一路向前

动画demo解释防抖、节流、rAF(CSS Tricks译文)

Wed, 30 Dec 2020 00:00:00 GMT

原文链接：防抖与节流的区别

译者注：为了文章更易理解，对原文略有改动

防抖与节流是两种相似（但不同）的技术，用于控制一定时间内函数的执行次数。

当我们为DOM事件添加事件处理函数时，防抖或节流函数十分有用。为什么呢？因为我们并不能控制DOM事件被触发的频率，而防抖和节流在事件和事件处理函数之间，为我们添加了一个控制层。

例如scroll事件，看这个demo：

See the Pen Scroll events counter by Corbacho (@dcorb) on CodePen.

当使用触控板，滚轮，或者滚动条滚动时，每秒钟可以轻易地触发30个事件。但是在我的测试中，在手机中缓慢滑动屏幕，每秒可以触发多达100个事件。你能确保你的事件处理函数在这种执行频率下正常工作吗？

2011年，Twitter网站上出现了一个问题：当你在向下滚动Twitter feed时，网页变得缓慢且无响应。John Resig发表了一篇关于这个问题的博客，文章中解释了将消耗昂贵的函数直接附加到scroll事件上是多么的糟糕。

John建议的解决方案（当时是五年前）是在onScroll事件之外，每隔250ms运行一个循环。这样处理程序就不会与事件耦合。通过这个简单的技术，我们可以避免破坏用户体验。

现如今，有一些更复杂一些的处理事件的方法。让我给大家介绍一下Debounce、Throttle和requestAnimationFrame，以及相应的demo。

Debounce 防抖

Debounce 防抖技术允许我们将多次连续的执行"分组"到一次单一的执行中。

想象一下这样的场景，你在电梯里，电梯门开始关闭，突然有另一个人想上电梯，电梯则不会运行，门会再次打开。然后又有一个人要上电梯，电梯再次延迟了它的运行（移动楼层），但优化了它的资源。

可以在下面的示例中，尝试在顶部的“Trigger area”中点击或移动：

See the Pen Debounce. Trailing by Corbacho (@dcorb) on CodePen.

在上面的示例中可以看到，debounced事件是如何代替一组连续快速触发事件的。但如果事件的触发有很大的时间间隔，则不会发生debouncing。（可以这样理解，如果一直有人要上电梯，电梯就不会运行，直到等待一定时间内无人上电梯，电梯就会开始运行，在上述的示例中，这个等待时间被设定为四个刻度，也就是400ms）

leading / immediate 参数

在上述的示例中，debouncing事件需要等待，直到事件在一定时间内停止触发，才会执行函数。这种场景与等电梯的场景吻合。

如果有另一种场景，需要在事件触发时，就立即执行函数，在快速连续触发的过程中，直到有一个暂停(满足等待时间)，才会再次执行函数。

这种需求，可以通过leading参数来实现：（在underscore.js中，这个参数的名称叫 immediate ）

“leading”防抖的demo：

See the Pen Debounce. Leading by Corbacho (@dcorb) on CodePen.

Debounce 实现

我第一次看到debounce的Javascript实现是2009年，在John Hann的这篇文章中（他也是这个词的发明者）。

不久之后，Ben Alman创建了一个jQuery插件（不再维护），一年之后，Jeremy Ashkenas将其添加到了underscore.js中。后来，它又被添加到Lodash中，成为undererscore的替代方案。

这3种实现内部有些不同，但它们的接口都差不多。

曾经有一段时间，在我于2013年发现_.debounce函数中的一个bug之后，underscore采用了Lodash的debounce / throttle实现。从那时起，两种实现都有了长足的发展。

Lodash在其_.debounce和_.throttle函数中增加了更多的功能。原来的immediate 标志被替换为leading 和trailing 选项。你可以选择启用一个，或者两个。默认情况下，只有trailing 被启用。（leading可以理解为，在一组连续触发事件的起始，就调用函数；而trailing，则是在一组连续触发事件的末尾，经过等待时间后，执行函数）

还有一个新的maxWait选项（目前只在Lodash中使用）在本文中没有涉及，但它可能非常有用。

实际上，在Lodash的源码种，throttle节流函数是用通过_.debounce和maxWait选项来定义的。

Debounce 实例

Resize 实例

当调整(桌面端)浏览器窗口的大小时，可能会触发许多的resize事件。

可以在下面的demo中看到：

See the Pen Debounce Resize Event Example by Corbacho (@dcorb) on CodePen.

如你所见，上面的例子中，启用了默认的trailing选项，因为我们只关心用户停止resize后的最终值。

带有AJAX请求的自动填充输入框的输入事件

有一些场景例如等待用户停止输入后再验证其输入，反馈验证信息。这种场景下 _.debounce可以实现：只有当用户停止输入时才发送请求。

此时，leading 标志没有意义，因为我们需要等待至最后的输入。

See the Pen Debouncing keystrokes Example by Corbacho (@dcorb) on CodePen.

如何使用debounce 和 throttle 以及常见陷阱

你可以自己写debounce/throttle函数，或者从一些随机的博客文章中复制它，但我的建议是直接使用 underscore 或 Lodash库。

如果你只需要_.debounce和_.throttle函数，你可以使用Lodash自定义构建器来输出一个自定义的2KB minified库。下面时构建命令：

npm i -g lodash-cli
lodash include = debounce, throttle

也就是说，大多数人都是通过webpack/browserify/rollup工具，使用模块化形式的lodash/throttle和lodash/debounce或lodash.throttle和lodash.debounce包。

一个常见的陷阱是，多次调用_.debounce 函数：

// WRONG
$(window).on('scroll', function() {
   _.debounce(doSomething, 300);
});

// RIGHT
$(window).on('scroll', _.debounce(doSomething, 200));

在lodash 和 underscore.js中，为debounced饭都处理过的函数创建一个变量，可以调用私有方法 debounced_version.cancel()

var debounced_version = _.debounce(doSomething, 200);
$(window).on('scroll', debounced_version);

// If you need it
debounced_version.cancel();

Throttle 节流

通过使用 _.throttle, 可以限制函数在 X 毫秒内，最多只能执行一次。

与debouncing的主要区别在于，节流保证了函数的定期执行，至少每X毫秒一次。

Throttling 实例

无限滚动

举一个很常见的例子，用户正在向下滚动你的无限滚动页面。你需要检查用户离底部有多远。如果用户在底部附近，我们应该通过Ajax请求更多的内容，并将其添加到页面中。

在这种场景下，_.debounce就不适用了，它只有在用户停止滚动时才会触发......而我们需要在用户到达底部之前开始获取内容。而_.throttle可以保证我们不断地检查用户离底部有多远。

See the Pen Infinite scrolling throttled by Corbacho (@dcorb) on CodePen.

requestAnimationFrame (rAF)

requestAnimationFrame 是限制函数执行速度的另一种方式。

它相当于_.throttle(dosomething, 16)，但保真度要高很多，因为它是浏览器原生的API，拥有更好的准确性。

可以考虑使用rAF API，作为节流函数的替代品，以下是它的优缺点：

优点：

目标为60fps(即每秒60帧)，但是由浏览器内部机制决定如何安排渲染的最佳时间。
更简单和更标准的API，未来不会改变，更好维护。

缺点：

rAFs的启用/取消是我们的责任，不像debounce或throttle，是内部管理的。
如果浏览器标签页未激活，它就不会被执行。（对于滚动、鼠标或键盘事件来说，这并不重要）。
虽然所有的现代浏览器都提供了RAF，但在IE9、Opera Mini和旧的Android中仍然不支持。仍然需要polyfill 。

根据经验来讲，如果我的JavaScript函数是 "绘画 "，或者会直接变更动画相关属性，我会使用requestAnimationFrame，以及在一切涉及重新计算元素位置的地方使用它。

如果要进行Ajax请求，或者决定是否添加/删除一个class（可能会触发CSS动画），我会考虑_.debounce或_.throttle，因为可以设置更低的执行速率（例如200ms，而不是16ms）。

rAF 实例

这个demo灵感来自于 Paul Lewis的文章, 文章做他详细解释了demo中的原理和逻辑。

我把rAF和 16ms 的_.throttle 放在一起进行了比较，结果是它们的性能相似。但是在更复杂的情况下，rAF可能性能会更高。

See the Pen Scroll comparison requestAnimationFrame vs throttle by Corbacho (@dcorb) on CodePen.

我在headroom.js库里见到过rAF技术更高级的实例，其中的逻辑被解耦并且被包装在了对象中。

总结

debounce防抖, throttle 节流和 requestAnimationFrame 可以用来优化事件处理函数，三种技术都很有用，且各有区别，互相补充：

debounce防抖: 将快速连续的多次事件触发分组，归为一次执行。
throttle节流: 确保每隔X 毫秒就有一次稳定的执行，例如每200ms检查一次用户滚动位置以触发一个CSS动画。
requestAnimationFrame: 节流函数的16ms替代选择。更适用于在页面上重新计算/渲染元素的函数，能得到更平滑的动画。但是注意: IE9 不支持。

当我谈跑步时我谈些什么：痛苦难以避免，而磨难可以选择

Mon, 30 Nov 2020 00:00:00 GMT

引言

即使我是一个不怎么爱看文艺类书籍的理工科出身程序猿，也听过村上春树的大名。

他是日本著名的作家、小说家，代表作有《挪威的森林》、《1Q84》。

我的书单上从没有出现过村上春树的书，直到有一天逛书店，看到了这本《当我谈跑步时我谈些什么》。

那段时间刚好开始晨跑，每天早上起床5公里，大约坚持了一个多月，十分倦怠，所以希望看看这本书，为意志力充充电。

作者的跑步人生

作者年近30时，才转行做一名职业作家。

开始专职于写作之后，他发现自己每天需要高强度的脑力工作，一坐就是一整天，一天下来要吸掉60多支烟。

要维持体力，又要将体重保持得“恰到好处”，村上春树选择跑步，作为解决健康问题的方法，并发展成了终生爱好。

每天一小时的长跑，几乎每年都参加一场马拉松，即使没拿到过名次和奖励，但依然跑了30年。

跑步时，人最残酷的对手是自己，其他选手都不是真正的敌人；

真正的敌人就是你自己，就是你用智慧和勇气掌控自己情绪的能力。

戴好流线型头盔，架上体育专用太阳眼镜

水壶里灌满了水，设定好计时器

一意猛骑

书中作者对跑步、以及参加铁人三项的细微感触、日日坚持跑步的所见所闻、所惑所思，十分打动人心。

很遗憾的是这本书还没看完的时候，我由于膝盖疼痛没能继续坚持晨跑。

但是我依然看完了这本书，因为这本书不仅仅讲了作者的跑步历程和意义。

令我收获良多的，还有贯穿全书的人生哲学。

坚持与磨砺

无论奔跑速度降了多少，我都不走，这是原则，违背了自己定下的原则，哪怕只有一次，以后就将违背更多原则

这是村上春树诠释的马拉松精神，更是一种对待人生的态度。

无论多么微小的举动，长久坚持，就一定会有其影响力。

痛苦难以避免，而磨难可以选择

Pain is inevitable, Suffering is optional

坚持跑步的理由不过一丝半点，中断跑步的理由却足够装满一辆大型载重卡车。我们只能将那“一丝半点的理由”一个个慎之又慎地不断打磨。见缝插针，得空儿就孜孜不倦地打磨它们。

刻意经历这痛苦

起码曾经努力的事实会留存下来

即使这是虚妄的没结果的行为，也不是愚蠢的行为

曾经努力就不会给日后的自己，留下后悔的机会。

输赢与自卑

在长跑中，如果说有什么必须战胜的对手，那就是过去的自己

欧内斯特•海明威好像也说过类似的话：持之以恒，不乱节奏，对于长期作业实在至为重要。

一旦节奏得以设定，其余的问题便可以迎刃而解。

诚然，我并非毫无争强好胜之心。不过不知何故，跟别人一决雌雄，我自小就不甚在乎胜负成败。这一性格在长大成人后也大致未变。

无论何事，赢了别人也罢输给别人也罢，都不太计较，倒是更为关心能否达到为自己设定的标准。

村上春树参加多次马拉松也未获得过名次或奖励，诺奖也陪跑多年，但是不曾气馁，仍然全意追求自己想要的人生，掌握并坚持自己的节奏。

世人皆有其唯一性，必定与他人相异，不必与人比较

年少时，无力客观的把握自己的定位

极易因微不足道的事而沾沾自喜

也极易产生自卑感。

随着年龄的增长，经历了形形色色的失误

该拾起来的拾起来，该抛弃的抛弃掉

然后才能形成这样的认知：

缺点如果一一去数，必将没完没了

可是优点肯定也有

我们只能凭借手头现有的东西去面对世界

这是他对自卑的态度，语言真切，结论也很直观：

自卑、与他人比较是虚妄的，只需要利用好现有的条件，做最好的自己。

保持自己的节奏

我是那种喜欢独处的人。更确切地说，我是那种不觉得孤独是痛苦的人。我发现每天花一两个小时独自跑步，不跟任何人说话，还有四五个小时独自坐在办公桌前，既不困难，也不无聊。我从小就有这种倾向，当时如果有选择的话，我更喜欢自己看书或专心听音乐，而不是和别人在一起。我总是能想出自己要做的事情。

希望一人独处的念头，始终不变地存于心中。

所以一天跑一小时，来确保只属于自己的沉默的时间，

对我的精神健康来说，成了具有重要意义的功课。

至少在跑步时不需要和任何人交流，不必听任何人说话，只需眺望周围的风光，凝视自己即可。

这是任何东西都无法替代的宝贵时刻。

从小我的性格，就十分依赖别人，和朋友玩就久久不想分开，不喜欢一个人睡觉，没有人陪伴就会觉得孤独。

这种抵触一个人独处的情绪，直到成年才慢慢消除。

因为越长大，才越能体味到作者对“独处”的感触。

长大了才知道，人生的路，出生到死亡，没有人能真正陪伴你全程
长大了才知道，热闹的人群给你带来的也许是温暖，但不是成长
长大了才知道，孤独其实并不是坏事
长大了才知道，这世界上没有任何人能真正的与你感同身受
长大了才知道，你所有的行为都要自己承担后果，你要为自己兜底

而当我学会独处，并开始享受独处，我才意识到自己真正的成熟了。

不管全世界所有人怎么说，我都认为自己的感受才是正确的。

无论别人怎么看，我绝不打乱自己的节奏。

喜欢的事自然可以坚持，不喜欢怎么也长久不了。

人在失去自我方面浪费的时间越多，形成自己的特点的机会越少，大多数人最后都活成了麻雀群里的一个点。

学会独处，更多的发现和探索自己，才能找到真正喜欢的事情，才能独一无二的特别的你。

结语

无论少年还是暮年，

希望你心中始终有一面鲜明的旗帜，指示着你自己的坚持；

希望你心中始终有一扇嘀嗒的时钟，稳定着你自己的节奏。

自卑与超越：一本对自我的答疑书

Fri, 30 Oct 2020 00:00:00 GMT

书与作者简介

作者：[奥地利]阿尔弗雷德·阿德勒
- 医学博士
- 从医：眼科、全科、精神科
- 探索人格、心理与身体，得到了当时心理学大师弗洛伊德的赏识，加入了弗的心理分析学会
- 与弗在产生分歧，退出了弗的心理分析学会，转而自立门派，研究“个体心理学”
- 因“个体心理学”研究、一系列著作出版，而声名远播
书：心理学必读经典书籍《What Life Should Mean To You》
- 从个体心理学的观点出发，阐明人生道路和人生意义
- 是一本通俗性读物，但包含着极深的哲理，和丰富的学术创见
- 全书涉及了人生的方方面面：人活着的意义、心灵&肉体关系、自卑感&优越感、早期记忆和梦的意义、原生家庭和学校对人的影响、青春期、犯罪、职业、人&同伴&社交、爱情&婚姻......
- 中文书名的由来：这本书着重讲了自卑感的形成，自卑感对人的影响，如何超越自卑感，如何将自卑感转为对优越地位的追求以取得成就

带着问题看文章

很多人从孩童时期、到青春期、到中年，都在不断地苦苦思索人生的意义。

很多人活一世，即使到临死前，也没能够了解自我。

不知道这一生在追寻什么，最终得到了什么。

因此，可以把这本书当作一本对自我的答疑书来看。

对人生的方方面面产生困惑时，可以翻阅本书，跟着阿德勒的个体心理学，探寻自己内心的最深处，摸索答案。

生活的意义到底是什么

个体心理学认为人类的所有问题都可以归于职业、交际和两性这三个问题。

我们生活在地球上，依靠地球所提供的资源生存，除此之外别无选择。在地球的有限资源限制下，为了永存，我们需要工作、付出努力换取资源
任何人都是人类族系的一员，每个人必然要与他人发生关系。为了与人合作，共同发展，我们有自己的定位和身份
人类有两种性别，男和女。任何人的一生都无法避开爱情和婚姻这一问题。面对“人有男女”和“人类延续依赖于爱与婚姻”这一事实，我们应该如何调整自我？

如果一个人完全没有爱情，生活遭遇挫折，在工作上也表现得平平庸庸，并且不善交际，朋友很少，他觉得与同伴交往是非常痛苦的事情。那么生活对于他来说就是痛苦而危险的事。

而如果一个人交友广泛，人脉很广，事业有成，拥有甜蜜的爱情和幸福的生活。那么我们可以断定，他的生活是丰富的，是充满创造性的。

所以，作者认为，生命的意义在于乐于关注他人，渴望成为社会大家庭一员，梦想着为人类和社会贡献自己的力量。

著名国学大师季羡林在望九之年写过一篇文章，叫《人生的意义与价值》，在文章的最后，他是这么说的：

如果人生真有意义与价值的话，其意义与价值就在于对人类发展的承上启下，承前启后的责任感。古往今来，但凡人们认为具有“生命意义”的人或事，都离不开对他人和社会的贡献。那些赋予人生以个人意义的人，他们的人生就此走过，没有留下一丝痕迹。

因此作者说：

个人意义没有任何价值，真正的生命意义存在于个体与他人的交互作用中。每个人都希望自己变得重要、有价值，但如若不能搞懂个人的成就建立在对他人做出贡献的基础之上，那就太容易走上歧途。

早期记忆/童年对一个人的影响有多大

一个人的价值观，世界观都和经历有关，所有的经历造就了现在的你你的所有需求，你的所有期望，都是曾经你没有得到的，所以你现在渴望得到。没有了解一个人的童年,不会了解他的现在。

自卑感&优越感

我们每个人都有不同程度的自卑感，因为我们都想让自己更优秀，让自己过更好的生活。

自卑感的存在并不是一件坏事，因为它激励了人不断追求卓越，克服自身的障碍，在有限的生命空间内发挥出最大的价值。

未完待续

CSS变量

Fri, 25 Sep 2020 00:00:00 GMT

资源

文档
在线demo
vue3 css变量文档

是什么

CSS自定义属性、CSS变量、级联变量，可以文档中重复使用的样式变量

声明

声明一个自定义属性，属性名需要以两个减号（--）开始
大小写敏感
属性值则可以是任何有效的CSS值。
和其他属性一样，自定义属性也是写在规则集之内的
例子🌰：
```
element {
  --main-bg-color: brown;
}
```
规则集所指定的选择器定义了自定义属性的可见作用域
自定义属性具有继承性，受级联的约束，从其父级继承其值。
最佳实践💁‍♀️：根伪类:root，相当于全局变量
```
:root {
  --main-bg-color: brown;
}
```

使用变量

color: var(--main-color);

备用值 / 默认值

// 正确做法
var(--my-var, red)
var(--my-var, var(--my-background, pink))

// 错误做法
var(--my-var, --my-background, pink)

js更新变量

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", newValue);

Vue3 响应式css变量

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

【学会如何学习】成为更好的终身学习者

Tue, 15 Sep 2020 00:00:00 GMT

6000字长文预警，建议拉到底部，先看总结❤

酥鱼我从小学到大学毕业，当了十六年的学生，工作又选择了程序员这个发展日新月异、需要持续学习的行业。

如何提升学习效率，减少学习带来的挫折感和痛苦，一直是我所苦苦追寻而不得的。

每每看到别人能用更短的时间，学到更多、更深刻、更系统的知识，我都留下了羡慕的泪水。

因此我也曾向很多学霸、前辈们请教学习的法门，多多少少能有些学习方法上的收获，但这些方法都因人而异，起不到决定性的作用，始终觉得自己对于如何学习这个问题，理不出一个最完美的、有逻辑性的答案。

直到我接触到了Coursera上的一门免费课程Learning how to Learn，这门课从神经学、生物学的角度，揭示了大脑认知的底层原理，和学习的本质，从而提供了一系列提升学习效率、减轻学习痛苦与挫败感的技巧。

这门课视频内容大概10小时，值得花时间去上，但是如果你想节省时间，可以直接看看本文。

如果你刚好学过这门课，可以跟着本文一起复盘一遍（学过的你一定知道复盘的重要性。

另外有一本书《学习之道》，是这门课的书面材料，书的作者也是课程主讲老师，内容和视频是相对应的，因此也可以直接啃书。

废话讲了一堆，下面跟着我一起开始正文吧~

人脑的两种思维模式

提到学习，离不开大脑的思维，有了思维才能去理解、才能拥有记忆。

人的大脑一共有两种思维模式:

Focused Mode 专注模式	Diffuse Mode 发散模式
集中精力解决单一问题	放松的思考模式
熟练掌握的内容	新事物学习，获取灵感
顺序思考	整体思考
熟练掌握的内容	新事物学习，获取灵感

以弹珠游戏类比大脑的思维：

专注模式下，大脑遇到已知问题，能快速定位到已掌握的知识，利用训练好的知识回路，专一且迅速的解决问题（弹珠定向发射），此时思维的粒度很细（弹珠盘上的桩很密集），当遇到新问题时，由于过于关注细节，大脑无法进行更广的思维跳跃，无法将更多的知识回路连接（由于桩很密集，弹珠弹射区域很小）。

发散模式下，大脑处于放松状态，不考虑细节（弹珠盘上的桩很少），思维灵活跳跃，能从整体层面解决问题，更有助于发挥创造力（弹珠随意发射，在较大的区域弹射）。

这两种思维区别很大，而且不能同时应用，所以我们需要将两种思维模式结合使用，灵活转换。

举个例子🌰：

Salvador Dali，20世纪著名超现实主义画家。他有一个有趣的方法，来帮他创造富有创造性的作品：坐在椅子上，放松大脑，模糊的思考着之前专注的事情，手上拿着一串钥匙晃悠，当他睡着时，钥匙会掉落在地上，把他吵醒，这样他就能把脑子里刚刚发散模式下的联想和点子集中起来，带着它们回到专注模式去记录灵感并进行创作。

专注模式更适合解决细节问题，发散模式更适合寻找灵感和整体解决方案。

如何拥有更牢固的记忆

学习，其实就是掌握知识的过程，这个过程主要就是两步，理解 + 记忆。

理解，可以通过很多方式，比如听老师讲课，看书，看视频，看资料，请教前辈等等，方式很多，这一步一般不需要很多时间。

先来谈谈记忆，这门课把人类记忆划分为两种:

Working Memory 工作记忆	Long-term Memory 长期记忆
短期记忆	长期记忆
负责处理即时的有意识的想法例如专注学习新知识时如果不加以复习和记忆，会被其他信息挤掉	负责存储已掌握的知识需要时常复习，才能提升未来能记忆到的几率
类似于计算机内存，或者一块小黑板	类似于硬盘，或者一个存储仓库
例如你尝试在脑海中用多个概念串联起来，去解决一个当下遇到的问题	例如你回忆99乘法表去计算9×9的结果
存储于大脑的前额皮质，与大脑的其他部位可以联系	占据大脑大片区域
容量较小，因人而异，大约可以存储四个组块的信息	容量巨大
处于大脑的前额叶皮质区域，与大脑的其他区域可以连接	不同类别的长期记忆，处于大脑的不同位置

学习的最终目标，就是将已经理解的知识从工作记忆，转化到长期记忆。而这个过程，需要的是练习。

那么怎样在相同练习次数下，获取更牢固的记忆呢？

间隔重复：刻意的进行反复练习，每次练习中间要有间隔，不断增大两次练习之间的时间间隔。（同样次数的练习，分散在几天中做的效果比集中在一个晚上做更好）
利用比喻、类比、想象，将知识和人类感官联系，如视觉、听觉、触觉、情感，更有利于记忆。例如：把想要记住的东西，转换成一些难忘的画面、大声朗读单词文章等等
充足睡眠+睡前复盘：睡眠对于学习至关重要，入睡时脑细胞会缩小使得专注学习时产生的代谢毒物可以被清除，且大脑会在睡眠期间自动清理不重要的记忆，并在潜意识中排演睡前学习的内容。因此睡前花几分钟回顾学习内容，有助于记忆。
冷静。在你感到紧张/生气/害怕时，这些情绪会占用你的工作记忆。因此开始专注前，要排除各种情绪的干扰。

学习的本质：Chunk 组块

Chunk 组块：是指大脑可以轻松使用的小而紧凑的信息碎片（可以理解成多个神经元组成的回路或思维回路

Chunking 组块化：根据意义和逻辑将信息碎片拼接起来，得到Chunk的思维过程

概念有点抽象，举一个拼图的例子🌰：

一堆拼图碎片是凌乱无意义的，每块拼图碎片的棱角和图像就是它和其他碎片相互连接的信息和逻辑，理清了所有碎片的逻辑关联，拼成整体后，才能得到一个具有清晰逻辑的整体图片

再以小星星⭐举例：

S,T,A,R四个字母单独看，都是单纯的无意义字母，组合成Star后，就是一个有意义的词，你就能联想到五角星的图片形象，也能联想到星空，这就是一个chunk的例子，这个chunk虽然是一个抽象的概念，但是在你的大脑中，真实存在着相互连接的神经元，其中包含了对四个字母、五角星和星空形象的记忆。

最后一个栗子🌰：

我们人类出生后最初的学习，就是认识妈妈，一个母亲不断的在孩子面前说“妈妈”这个词，孩子就能学会叫妈妈，并且能把“妈妈”这个词的发音，和母亲的笑容、母亲的形象联系起来，从而不会把别人错认成妈妈。这个学习过程会形成下图👇这样的神经回路，也就是Chunk。

为什么要用这么多内容介绍Chunk呢？

因为，专注学习、重复训练的过程，就是建立chunk的过程，当chunk建立后，神经回路里的任何一点，都能引导你串联整个记忆回路。

人类复杂的神经活动、记忆的存储、牛顿从“苹果落地”到“万有引力”，都建立了并依赖于大脑中众多的Chunks。

Chunk就像是人脑中最小可利用的思维回路，解决复杂问题、掌握复杂知识时，需要利用到众多的相互关联的Chunk，最终形成了你整个大脑的思维网络。

再回到之前讲的学习的本质，就是理解+记忆，记忆这一步的技巧前面已经讲了，理解这一步要做的，就是把现有的外界的知识，转化成自己的知识，在大脑中形成Chunk，为你所用。

那么怎样建立牢固可靠的Chunk呢？

1. 开启专注模式

集中注意力，切断一切外界干扰，不能让有限的工作记忆被其他事情占用。

例如呆在一个安静的环境，打开手机电脑的勿扰模式，将手边无关的东西都拿开，打开番茄钟计时，然后开始专注。

2. 自下而上学习 - chunking

先从基本概念开始理解，在理解的前提下，将新知识与已掌握的知识相关联，建立chunk。

理解后不断的用自测的方式，检验chunk是否真正形成。自测的形式很多，可以合上书回忆所有内容，也可以practice（实践），脱离书本，自己利用Chunk去实际独立操作、独立解决问题，通过这个过程知道怎么使用chunk

3. 自上而下学习 - context

gaining context，获取背景知识，从更广的更高的角度去理解chunk如何融入整体的知识架构，通过这一点去了解何时何处使用chunk，掌握了how to之后，思考why to ，when to，从而在遇到问题的各种场景中信手拈来。

例如🌰看一本书之前，先看看图片、章节大纲，看完一本书后，画流程图、思维导图，就能更清楚整体的结构，有利于chunk的建立和巩固。

最高效的学习方法：间隔重复

Science杂志曾发布一篇论文，让一群学生，使用不同的方法，在相同时间内，学习一篇科技文本，最终的结论是这样的：相较于重复阅读、边学边画思维导图等方式，通过recall方式学习的学生，学的最多、也最牢固。

这里的recall，我把它总结成间隔重复练习法，也就是不断重复下面的3个步骤：

学习
脱离书本回忆（自测）
留出时间间隔（随着练习的次数增多，逐渐增大时间间隔）

看完这篇文章，你可以忘记所有内容，但是一定要记得这个 经过实验验证有效的 学习方法。

一些学习的误区

看书喜欢画线、画高光：很容易给自己造成”画了就是会了“的错觉，不是不可以画重点，但是记得要通过自测的方式检验一下自己是否真的掌握。
能看懂，就是会了：能看得懂不代表能独立解决，不要觉得你理解的知识，就是你的知识。一定要自己亲自去实践，去自测。要建立自己的思维模式，而不是被动的接受知识。
过度学习：在掌握一个知识后继续反复学习和训练的行为，在需要练出肌肉记忆、自动反应的情况下是必要的（比如体育竞技、演讲），在其他状况下，过度学习是对时间和精力的浪费
思维定势：固定的思维形式、牢固的记忆和chunk可能会阻碍你发现更好的灵感，因此在学习新事物时，要把过去的思维模式先放下。（有几个关于死亡的句子对这个观点具有启发性：1. There's the old saying that science progresses one funeral at a time，国外有句老话说，科学会随着每个葬礼的进行而进步； 2.乔布斯在斯坦福大学的演讲中曾说，死亡是我们生命中最酷的发明，死亡是生命轮换的代理人，它淘汰旧的以给新生事物发展空间。 3. 死亡意味着根深蒂固的旧思想的流逝）

一些学习的技巧

记笔记：看书时，减少划线和画高光以避免错觉，可以在知识点旁边写下你自己的理解，这样更利于加深印象，巩固记忆（酥鱼我仍然记得，我高中的时候做练习册，都喜欢把练习册写的黑压压的，即使是我掌握了的知识，也会在旁边写上清晰的解题思路。这种习惯一直延续到现在，我看过的书随便翻一翻就能看到笔记。我相信比起看完了还是一片雪白的书，这种方式更容易加深记忆
换个环境：间隔重复练习的时候，切换不同的环境，可以帮助我们脱离记忆对固定场景的依赖，避免单环境下的知识误区，更全面的理解所学知识的各个方面
transfer知识迁移：联系不同领域的相似chunk，也有助于加深记忆
interleaving交替学习：在已经掌握了基础知识后，可以交叉着不同类别的问题、方法、知识一起学习，有利于让大脑更具有灵活性和创造性，也更利于记忆。（用过百词斩的应该知道，他们的逻辑就是背一轮单词，再来一轮，不同的单词交替着出现，比一个单词一直背的效果好很多）另外可以了解一下Anki软件，利用交替学习等原理实现了帮助记忆的算法，形式类似于百词斩，只是把单词换成了你想记忆的知识点。
奖励性学习：在学习或者完成适量的目标后激励自己，可以让负责人体动力的多巴胺发挥生理作用
刻意训练：专注于学习困难的部分，是容易和别人拉开差距、超越平均水平的好方法
关注过程，而不是结果：对于一些困难的任务，需要很多时间和付出才能得到结果，如果只关注结果，会让人产生痛苦，导致拖延。只关注过程恰恰其实是大脑最喜欢的，在deadline之前的时间内，平静地尽最大的努力，关注每个番茄钟的30分钟周期，是否专注成功。
在睡前坚持写周计划和日计划：研究显示入睡时潜意识会进入类似于 Diffuse Mode 的状态来“消化”和“排练”要完成的项目，从而使你在白天能更好地去完成他们。写计划的另一个好处在于，如果你不这么做，这些待办事项就会停留在你的 Working Memory 中，占据宝贵的精神空间。通过将它们转移到纸上，你能够更好地专注于做事情本身。
确定好停止学习的时间：计划并严格遵守于停止学习、专注、工作的时间是很重要的。这么做有助于形成日程规律，形成惯性，还给你更多时间去休息、发展身心健康
把最困难最厌恶的事情放在早上第一件事做
运动有助于神经元的活跃，有助于学习和记忆
创建生动的视觉比喻和类推，将知识形象化，能够帮助你更好地理解内容本身，将新事物与旧的神经回路联系了起来，使得大脑能思考得更快、更发散，也能帮助你突破定势比如 18 世纪的化学家开始想象和可视化分子级别的运动时，他们取得了巨大的突破。
与其他人一起合作，在专注模式下，大脑倾向于坚持已经建立的推理步骤。与其他人一起合作可以填补你思维上的空缺，建立起更强的自我纠正能力。从这个意义上讲，与你一同合作的人们就好像是对你而言的外部发散思维。对身边的人解释所学的内容也有助于自身的学习。
考试策略：前文中多次提到自测，测试本身是一种非常有用的学习体验，

如何准备一场考试

这里介绍 Richard Felder 博士提出的备考清单。

是否认真地理解了内容？
是否与同学讨论过课后问题？
是否尝试列出课后问题的解题大纲？
是否积极参加小组讨论？
咨询过老师吗？
是否弄清楚了所有课后问题的答案？
对于不清楚的问题，是否在课堂上提出疑问？
是否尝试快速列出一些问题的解题大纲？
是否认真通读了辅导书
是否参与考前复习？
测试前有一个合理的睡眠时间吗？

对于上述问题，在理想的备考状态下，肯定的回答越多越好。

一些考试时的策略：

先难后易：如果我们先大概看一眼题目，从困难的问题出发，将它们“加载”到大脑中，然后跳回去做简单的问题，从而使大脑进入 Diffuse Mode 发散模式，这样就很有可能在较短的时间内找到难题的思路（当然，应该控制在你能力范围内，如果短时间内找不到思路，应该直接跳过）
保持兴奋：当你处于紧张状态时，大脑会分泌化学物质引发一系列生理反应。但你可以用不同的方式来解读这些反应。恐惧和兴奋其实是两种很相似的反应。当你坐在考场里，心跳加速，满头是汗，如果你不去想“这场考试让我恐惧”而是“这场考试让我兴奋”，这会对你的考试非常有帮助。
深呼吸：考试时感到心慌是自然反应。你可以通过深呼吸来部分或者全部抵消这一反应。当然，不要等到考试的时候才去做。考前两周、考试开始前的最后时间里做深呼吸，有助于平复心情。
不要被大脑欺骗：我们的大脑经常会欺骗自己，是自己认为自己的解答是正确的。在考试过程中要时刻小心，可以多眨眨眼或是晃晃头，用这种方式来提醒自己稍微往 Diffuse Mode 发散模式倾斜一点看看有没有出错，然后再用 Focused Mode 专注模式进行确认。

拖延症 & 习惯

拖延症的原理：

拖延症是个普遍的现象，在所有人身上多多少少都有体现，这是因为，拖延是大脑做出的自然反应。

当你遇到不想做的事情时，会感受到不快，这种刺激(Cue)激活了大脑中与疼痛相关的区域，大脑就会迅速作出反应去寻找停止这种负面刺激的方式，即转移注意力到另一件令你愉快的事情上，从而让你在短期内感到舒服一些。

拖延症的影响：

拖延的负面影响不限于当前被拖延的事情。例如你觉得某一门课或者某一类知识很难，拖延症使你不断地拖迟学习它，当这种拖延行为成为习惯后，即使是想到学习这件事，都会令你痛苦。

因此拖延的负面影响是有累积效应的，越拖延，不适的感觉越强。

对抗拖延症的几个技巧：

有研究人员发现，当人们真正去做不喜欢的事情后，这种精神上的抵触和不适很快就会消失。了解这个原理，在遇到不想做的事情时，暗示自己先开头去做，很快就能克服，就可以减轻负面刺激带来的不快感
番茄工作法：利用计时器或者番茄钟，计时25分钟，这25分钟内排除一切干扰集中精力专注，专注结束后，计时5分钟，给自己一些奖励：放松一下/起来溜达一圈/上网冲冲浪/吃点零食/聊会天。30分钟一次循环，这样的时间效率会相当高，计时器的作用，就是Cue，提醒你切换专注模式和发散模式。（25分钟的专注，对于大多数人来说应该不难。但是如果你发现自己很难持续专注25分钟，那可以循序渐进，先从10分钟开始训练自己的专注耐力）
利用习惯

对抗拖延症，是对抗身体的本能，需要消耗精力和意志力，而习惯就是我们的节能机制。

一旦形成习惯，只需要一点点的Cue(信号)，后面的行为就会像呼吸一样自然，消耗很少的精力和毅力

就像你刚开始学车，倒车入库会让你手足无措、手心流汗、提心吊胆，但是当你成为了老司机，看后视镜、转动方向盘就会一气呵成，流畅自然。

那么如何养成好习惯呢：

Cue信号：触发惯性行为的外界刺激。比如待办清单上的第一项，办公桌前的便利贴。Cue 大致可以分为四类：时间、地点、感受、反应，从这四个方面，为自己的好习惯，找一个显眼的信号。
Routine惯性行为：大脑受到信号刺激后，习惯性做出的反应。反复多次的练习，就可以养成。
Reward奖励：任何习惯得以延续，都是因为它可以回报我们，它会立即给我们带来愉悦感。拖延极易养成习惯，就是因为拖延能带给我们迅速即时的愉悦感。因此为了克服拖延症，奖励好习惯很重要。
Belief信念：习惯的力量之所以强大，是因为你在内心深处往往认为它们是无法被改变的。

总结

灵活运用两种思维模式：专注模式更适合解决细节问题，发散模式更适合寻找灵感和整体解决方案
牢固记忆的4个技巧：间隔重复、感官联系、充足睡眠+睡前复盘、保持冷静
学习的本质是建立组块Chunks，建立过程有三个步骤：开启专注模式、自下而上学习、自上而下学习
最高效的学习方法：间隔重复练习法（可以用Anki应用辅助）
拖延症没那么可怕，只要开始入手做，痛苦就会减轻；可以利用番茄钟、良好的习惯，来帮助你减轻拖延症提高效率
4个学习误区、14个学习技巧、关于考试的几个技巧也值得掌握~

Harmony OS | 作为前端技术人，体验刚开源的鸿蒙OS

Sat, 12 Sep 2020 00:00:00 GMT

华为2020开发者大会在9月10号如约而至

从2019年大会鸿蒙发布后，很多人的目光都聚焦在了鸿蒙OS的开源计划上，“PPT系统”的声音不绝于耳

今天发布会之前，吃瓜的我无意间在gitee上看到了这个横幅👇，我知道，终于它来了

截至到我发稿前，开源仓库已经有了2k+ star

并且提供了看起来比较完善的中文文档

同时发布了一款配套的IDE 「DevEco Studio」，注册开发者即可下载

前端er上手体验

作为一个前端技术人，比较令我兴奋的是，鸿蒙OS有一套基于前端技术栈的UI开发框架

于是我上手体验了一下，下面简单介绍一下步骤。

安装IDE之后，创建项目，这里我选择了一个TV设备的项目模板

做一些简单的配置

然后会自动打包构建出一个demo项目，并且在IDE内提供了远程模拟设备

选取合适的模拟设备后，就可以运行项目了，得到的效果是这样的

代码

效果图这样的一个电视页面，用到了 hml+css+js 三部分代码

hml：

<div class="container">
  <div class="tv_box">
    <div class="title_box">
      <text class="title">{{title}}</text>
      <text class="title">酥鱼TVtest</text>
      <button
        type="circle"
        icon="{{icon_src}}"
        class="setting_box"
        onfocus="iconFocusFunc"
        onblur="iconBlurFunc"
      ></button>
    </div>
    <tabs class="tab_box">
      <tab-bar mode="scrollable" class="bar_box">
        <block for="[1,2,3,4,5,6,7,8,9]">
          <text class="tab_text">{{$t('strings.tab')}} </text>
        </block>
      </tab-bar>
      <tab-content>
        <block for="[1,2,3,4,5,6,7,8,9]">
          <div class="content_box">
            <list class="content_img">
              <block for="[1,2,3,4]">
                <list-item type="listItem" class="list_img">
                  <image
                    focusable="true"
                    class="tab_img"
                    src="/common/img-large.png"
                  ></image>
                </list-item>
              </block>
            </list>
            ...
          </div>
        </block>
      </tab-content>
    </tabs>
  </div>
</div>

js:

import app from "@system.app";
export default {
  data: {
    title: "",
    subtitle: "",
    icon_src: "/common/plus.png",
    appName: app.getInfo().appName,
  },
  onInit() {
    this.title = this.appName;
    this.subtitle = this.$t("strings.subtitle");
  },
  iconFocusFunc: function () {
    this.icon_src = "/common/plus-black.png";
  },
  iconBlurFunc: function () {
    this.icon_src = "/common/plus-white.png";
  },
};

css:

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000000;
}

.title_box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.title {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 48px;
}
...

JS架构和源码

鸿蒙的 JS 框架 ace_lite_jsfwk,官方介绍是“轻量级 JS 核心开发框架”

提供了一套跨平台的类web应用开发框架，通过Toolkit将开发者编写的HML、CSS和JS 文件编译打包成JS Bundle，然后再将JS Bundle解析运行成C++ native UI的View 组件进行渲染。通过支持三方开发者使用声明式的API进行应用开发，以数据驱动视图变化，避免了大量的视图操作，大大降低了应用开发难度，提升开发者开发体验。

源码的地址在：https://openharmony.gitee.com/openharmony/ace_lite_jsfwk

其中JS的核心代码，主要在以下几个文件

runtime-core\src\core\index.js
runtime-core\src\observer\
                    |----observer.js
                    |----subject.js
                    |----utils.js
runtime-core\src\profiler\index.js

也提供了一些测试用例：

从源码看，实现了一个轻量的响应式MVVM系统，使用了 vue2 同样的属性劫持技术，即 Object.defineProperty API。

总结

整体体验下来，感觉开发过程还是很丝滑的，api和开发模式很有vue的味道，应该存在借鉴。对于vue技术栈的前端er来说应该很好上手

自从去年的贸易战到后来的疫情，国际局势日趋复杂，鸿蒙OS的开源，对于国家和国内技术行业都有非凡的意义

单从前端行业的角度来看，鸿蒙OS的发布，给前端技术人提供了web之外，扩展向物联网行业的，更广的发挥空间和更多的应用场景

值得前端技术人向国内鸿蒙开源社区，提供更多的关注，注入更多的技术力量

资源

鸿蒙OS开源地址
鸿蒙OS IDE下载
鸿蒙OS开发者文档
鸿蒙OS前端js框架文档
鸿蒙OS前端js框架源码

Vu3响应式原理

Fri, 24 Jul 2020 00:00:00 GMT

关于Vue3

话说，Vue3已经进行到rc4版本了，4月份beta发布的时候前端圈红红火火，不知道大家开始学了没

整理了一些资源，现在开始学习应该还不算晚[狗头]

vue-next仓库
20200723 Vue3 官方发布的beta文档
Vue3 Roadmap & FAQ
Vue3仓库已经合并的780多个PR
尤大在Vue Mastery的Vue3课：Vue 3 Deep Dive with Evan You
202007 尤大在前端会客厅节目关于Vue3的访谈
202005 The process: Making Vue 3
202004 尤大 - 聊聊 Vue.js 3.0 Beta 官方直播
2018 VueConf 杭州尤大关于Vue3的演讲视频

vue2 响应式原理回顾

对象响应化：遍历每个key，通过 Object.defineProperty API定义getter，setter

// 伪代码
function observe() {
  if (typeof obj != "object" || obj == null) {
    return;
  }
  if (Array.isArray(obj)) {
    Object.setPrototypeOf(obj, arrayProto);
  } else {
    const keys = Object.keys();
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      defineReactive(obj, key, obj[key]);
    }
  }
}
function defineReactive(target, key, val) {
  observe(val);
  Object.defineProperty(obj, key, {
    get() {
      // 依赖收集
      dep.depend();
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        observe(newVal);
        val = newVal;
        // 通知更新
        dep.notify();
      }
    },
  });
}

数组响应化：覆盖数组的原型方法，增加通知变更的逻辑

// 伪代码
const originalProto = Array.prototype;
const arrayProto = Object.create(originalProto)[
  ("push", "pop", "shift", "unshift", "splice", "reverse", "sort")
].forEach((key) => {
  arrayProto[key] = function () {
    originalProto[key].apply(this.arguments);
    notifyUpdate();
  };
});

vue2响应式痛点

递归，消耗大
新增/删除属性，需要额外实现单独的API
数组，需要额外实现
Map Set Class等数据类型，无法响应式
修改语法有限制

vue3响应式方案

使用ES6的 Proxy 进行数据响应化，解决上述Vue2所有痛点

Proxy可以在目标对象上加一层拦截/代理，外界对目标对象的操作，都会经过这层拦截

相比 Object.defineProperty ，Proxy支持的对象操作十分全面：get、set、has、deleteProperty、ownKeys、defineProperty......等等

// reactive 伪代码
function reactice(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      const ret = Reflect.get(target, key, receiver);
      return isObject(ret) ? reactice(ret) : ret;
    },
    set(target, key, val, receiver) {
      const ret = Reflect.set(target, key, val, receiver);
      return ret;
    },
    deleteProperty(target, key) {
      const ret = Reflect.deleteProperty(target, key);
      return ret;
    },
  });
}

响应式原理

通过 effect 声明依赖响应式数据的函数cb ( 例如视图渲染函数render函数)，并执行cb函数，执行过程中，会触发响应式数据 getter
在响应式数据 getter中进行 track依赖收集：建立 数据&cb 的映射关系存储于 targetMap
当变更响应式数据时，触发 trigger **，**根据 targetMap 找到关联的cb执行
映射关系 targetMap 结构：

targetMap: WeakMap{
	target:Map{
		key: Set[cb1,cb2...]
	}
}

手写vue3响应式

大致结构

// mini-vue3.js

/* 建立响应式数据 */
function reactice(obj) {}

/* 声明响应函数cb(依赖响应式数据) */
function effect(cb) {}

/* 依赖收集：建立 数据&cb 映射关系 */
function track(target, key) {}

/* 触发更新：根据映射关系，执行cb */
function trigger(target, key) {}

reactive

/* 建立响应式数据 */
function reactive(obj) {
  // Proxy:http://es6.ruanyifeng.com/#docs/proxy
  // Proxy相当于在对象外层加拦截
  // Proxy递归是惰性的,需要添加递归的逻辑

  // Reflect:http://es6.ruanyifeng.com/#docs/reflect
  // Reflect:用于执行对象默认操作，更规范、更友好,可以理解成操作对象的合集
  // Proxy和Object的方法Reflect都有对应
  if (!isObject(obj)) return obj;
  const observed = new Proxy(obj, {
    get(target, key, receiver) {
      const ret = Reflect.get(target, key, receiver);
      console.log("getter " + ret);
      // 跟踪 收集依赖
      track(target, key);
      return reactive(ret);
    },
    set(target, key, val, receiver) {
      const ret = Reflect.set(target, key, val, receiver);
      console.log("setter " + key + ":" + val + "=>" + ret);
      // 触发更新
      trigger(target, key);
      return ret;
    },
    deleteProperty(target, key) {
      const ret = Reflect.deleteProperty(target, key);
      console.log("delete " + key + ":" + ret);
      // 触发更新
      trigger(target, key);
      return ret;
    },
  });
  return observed;
}

effect

/* 声明响应函数cb */
const effectStack = [];
function effect(cb) {
  // 对函数进行高阶封装
  const rxEffect = function () {
    // 1.捕获异常
    // 2.fn出栈入栈
    // 3.执行fn
    try {
      effectStack.push(rxEffect);
      return cb();
    } finally {
      effectStack.pop();
    }
  };

  // 最初要执行一次,进行最初的依赖收集
  rxEffect();

  return rxEffect;
}

track

/* 依赖收集：建立 数据&cb 映射关系 */
const targetMap = new WeakMap();
function track(target, key) {
  // 存入映射关系
  const effectFn = effectStack[effectStack.length - 1]; // 拿出栈顶函数
  if (effectFn) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }
    let deps = depsMap.get(key);
    if (!deps) {
      deps = new Set();
      depsMap.set(key, deps);
    }
    deps.add(effectFn);
  }
}

trigger

/* 触发更新：根据映射关系，执行cb */
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (depsMap) {
    const deps = depsMap.get(key);
    if (deps) {
      deps.forEach((effect) => effect());
    }
  }
}

测试demo

<!-- test.html -->
<div id="app">
 {{msg}}
</div>

<script src="./mini-vue3.js"></script>

<script>
  // 定义一个响应式数据
  const state = reactive({
    msg:'message'
  })

  // 定义一个使用到响应式数据的 dom更新函数
	function updateDom(){
		document.getElementById('app').innerText = state.msg
	}

	// 用effect声明更新函数
  effect(updateDom)

  // 定时变更响应式数据
  setInterval(()=>{
    state.msg = 'message' + Math.random()
  },1000)
</script>

效果：

如果想获取上述代码，放在了这个仓库:mini-vue3-reactive

非暴力沟通：有些话真的可以好好说

Sun, 14 Jun 2020 00:00:00 GMT

前言

当有人批评指责你的时候，你的愤怒和失望会让你作出什么反应？

你是否会以同样的方法去报复？

还是干脆置之不理，实施冷暴力？

有时候，你是否很想与家人、朋友、爱人进行友爱的沟通，和同事进行高效的沟通，却以矛盾、吵架和不愉快收场？

当你看见别人的恶行、听见别人的恶语、在网络上遇到扛精喷子的时候，

你是不是很想重拳出击，指责、批评、贬低、嘲讽、惩罚他？

上面列举的这些沟通问题都可以归类到 暴力沟通 的范畴。

暴力沟通 困扰着我们生活的方方面面，对我们造成精神伤害，蒙蔽了我们的爱和情感。

如果你也被类似的沟通问题所困扰，那么《非暴力沟通》这本书能启发你，如何通过 好好说话，来解决这些问题～

简介

今天分享的《非暴力沟通》这本书，于2018年，由华夏出版社出版，作者是美国的马歇尔·卢森堡博士，豆瓣评分: 8.8。

非暴力的表达+聆听

这本书指导我们转变谈话和聆听的方式。

让我们不再条件反射式的反应，而是去了解自己的观察、感受和需求，有意识地使用语言。

使我们既诚实清晰地表达自己，又尊重与倾听他人。

非暴力沟通的4要素

非暴力沟通模式下，我们需要关注4个要素：观察、感受、需求、请求。

第1是表达我们此刻观察到什么，说出人们所做的事情，清楚表达观察的客观结果，而不是去主观判断或者评价。
第2是了解和体会感受，比如受伤害怕喜悦开心气愤等等
第3，我们需要去弄清楚，是哪些需求导致了我们这样的感受。

举一个常见的例子来说：一位母亲可能对他处于青春期的儿子说

我看到桌子下面有两只脏袜子，我不太高兴，因为我比较看重整洁

接着她可以立即提出非暴力沟通的第4个要素，也就是具体的请求。

她会说

你是否愿意将袜子拿到房间或者放进洗衣机

这一要素，要明确的告知他人，我们期待他采取哪种行动来满足我们的需求。

这样这位母亲就清楚的说出了非暴力沟通的4个要素，借助这4个要素，诚实高效地表达了自己。

下面我们将这4个要素拆分开来看，逐一分析，如何将这4个要素做好。

01 观察和评论

非暴力沟通的第1个要素是 描述观察。

它强调的是我们要如实的表达出观察的客观结果，而不是我们的主观评价。

举几个主观评价的例子：

哥哥昨天无缘无故的对我发脾气我男朋友是一个没有主见的人我女朋友是一个很霸道的人

其实以上这三个例子，在我们以往的沟通中十分常见。

我们常常通过单一的行为去给一个人贴标签，

我们通过静态的语言去定性变化不断的现实。

印度哲学家克里希那穆提曾经说：

不带评论的观察是人类智力的最高形式

对于大多数人来说，观察他人及其行为，而不去评判指责，或以其他方式进行分析，是难以做到的。

将客观的观察和主观的评价混淆，往往会在沟通中造成误解，让人产生逆反心理。

想要更合理的表达出我们的观察，而不是评论，可以通过以下几点去改善。

我们应该去关注有事实依据的具体行为
而不是我们的愿望情感推测
不应该把形容词和副词当作观察结果
应该更少的使用“总是，从不，每次”这种言过其实的夸张词汇

附上一张书中的对比表格：

02 体会和表达感受

非暴力沟通的第2个要素是 表达感受。

当我们的需求得到满足时，我们的感受可能会有：兴奋，喜悦，甜蜜，开心，振奋等等。

当我们的需求没有得到满足的时候，我们的感受可能是：害怕，担心，焦虑，忧虑，着急，绝望，失望，不满，尴尬，遗憾等等。

附上一张书中的感受词汇表：

在往常的人际交往沟通中，我们往往不愿意表达自己的感受。

因为社会文化并不鼓励我们表达个人需求。

我们从小到大的教育，使我们习惯于考虑：人们期待我怎么做，而不是倾听自己的内心。

但是积极的表达自己的感受，可以使别人更好的了解我们的需求，更容易得到积极的回应。

03 挖掘感受背后的需求

非暴力沟通的第3个要素是 表达需求。

在分析非暴力沟通第2个要素的时候，我们强调，我们的喜悦或者失望的感受，都来源于 我们的需求是否得到满足。

这一点其实至关重要，我们通常会错误的认为自己的感受是由他人的行为引起的。

举一个简单的例子。

我有一个闺蜜冬梅，有一次情人节，她男朋友因为加班没有陪她。

如果冬梅跟她男朋友说

你昨天没陪我，令我很失望

那么她就是认为：她的感受是由别人的行为引起的。

如果他跟她的男朋友说

你昨天没陪我，我很失望，因为我需要你的陪伴

那么此时冬梅能够清楚地了解到：自己感到失望，是因为她的需求没有得到满足。

如果我们认为自己的感受是他人的行为引起的，那么我们更倾向于指责别人

我们想利用他人的内疚来达到我们的需求，把自己不愉快的感受归咎于对方。

如果我们通过批评来提出主张，人们的反应通常都是反驳和申辩。

反之，如果我们直接说出需求，对方就更有可能做出积极的回应。

但不幸的是大多数人并不习惯于从需求的角度来考虑问题，在不顺心的时候，我们倾向于考虑别人有什么错。

在沟通中，如果双方都习惯于指责对方，这样的沟通往往都不会得到好的结果，伤害彼此的情感。

因此从我们的感受，去发掘我们的个人需求，而不是下意识指责他人，是十分重要的。

04 发出请求

在我们清楚地表达观察感受和需求之后，对方往往会做出积极的回应。

如果对方没有对我们的需求所处反应，那么我们可以提出请求。

这也就是非暴力沟通的第4个要素。

在提出请求时，我们应该提出更加具体可行的请求。

举一个例子来说

我希望你尊重我的个人隐私我希望你进我房间之前敲门

这两种表达，后者是非暴力沟通所倡导的，具体的请求。

另外，区分请求和命令也很重要：

请求没有得到满足时，如果提出请求的人批评和指责对方，那么这就是命令。他想利用对方的内疚来达到目的。

如果别人拒绝了你的需求，那么你也可以通过更深的沟通，去了解别人拒绝你请求的意图，和隐藏在背后的需求。

需求驱动

在有些场景下，书中的固定模式应用起来也许不太合适，

但是，只要掌握了非暴力沟通的 核心思想 ，都能达成非暴力沟通。

那就是 以需求为驱动 。

无论是怎样的沟通场景，

无论你是表达的一方，还是聆听的一方，

不要急于表达和作出反应，先去观察和感受，去发觉彼此的需求，

当你透过语言，洞察到了别人的需求，你会用全新的眼光，去看待我们的人际关系，让自己和家人、朋友、同事、爱人，都拥有更好的交际体验。

当你透过情绪和感受，洞察到了自己的需求，你能够用更高效更友善的方式，去达到自己的需求，令自己更舒适，令你的生活更有乐趣和爱意。

好好说话的力量

通过这本书，我感受到了好好说话的非凡力量

非暴力沟通这种充满善意和爱的沟通方式。

能使我们脱离情绪的控制，更好的了解自我，与自我建立和谐的关系。

使我们拥有更清晰的沟通思路，更高效的掌握沟通信息，达成沟通目的，

同时，还拥有更好的沟通体验。

让我们能更加舒适、更加专注的去追求人生的方向。

反思

读完这本书，可以发现，非暴力沟通的实践和应用，不是一朝一夕能达成的。

我分享的只言片语，也并不能传达全书的信息。

因此这本书，值得你反复阅读、思考，并亲身实践。

附上书中的一首诗歌：

富爸爸穷爸爸：财商入门

Sun, 14 Jun 2020 00:00:00 GMT

简介

文章标题只是想侧面说明这本书的主要内容，请勿对号入座～
我本人是个工作不到两年、背着房贷、没什么存款的理财门外汉，读完这本书，彻底改变了我对“钱”的认知和观念，因此把书中启发到我的地方分享出来，希望对你有些帮助～
《富爸爸穷爸爸》从1997年最初版至今已经23年，在全球范围大受欢迎，被誉为“全球最好的理财入门书”，连续六年在纽约时报畅销书榜都榜上有名，目前已翻译超过51国语言。后续又出了一系列以达成财务自由为中心的 “富爸爸系列”丛书，。
书名中的 穷爸爸，指的是作者的亲生父亲，受过良好的教育：从斯坦福大学和芝加哥大学毕业，博士学位，身居夏威夷州教育部门的要职，一生勤奋工作，收入颇丰，是一个看起来十足“成功”的高级知识分子。但是他终其一生都在个人财务问题的泥潭中挣扎，操劳一生离开人世留下了一堆账单。他总是教育作者：要努力学习，取得好成绩，这样才能有好的工作。
书名中的 富爸爸，指的是作者好友的父亲，初中学历，没有很高的教育水平，但是是一个成功的商人，充分理解金钱的力量，拥有很高的财商，富爸爸是成为了全夏威夷最富有的人之一，他身后留下的是慈善机构、教堂以及巨额的遗产。作者和朋友很小的时候，就开始接受了富爸爸的财商教育。
作者：Robert T. Kiyosaki，Robert ·清崎，日裔美国人，在1994年47岁的时候，因为遵循了富爸爸教给他的关于金钱和投资的知识，实现了财务自由，创造了“现金流”游戏，财务自由后因出版《富爸爸》系列书而成名，成为金融教育领域的领头人。
书中用很多篇幅，对比富爸爸和穷爸爸，指出性格、思想、行为和结果上的差异，从而引出造成贫富差异的原因。

带着问题看文章

上班、工作、打工几十年，真的能积累财富吗？
退休依靠养老金的模式可靠吗？
买房是稳赚不赔的投资吗？
普通家境的人用父母前十几年+自己后几十的劳动剩余价值换来的房子值得吗？
财商是什么？、财务自由是什么？
富人和穷人的差异有哪些？消费观、财商、勇气、自律...

老鼠赛跑的人生

我成长在一个普通家庭，和周围的大多数普通家庭的同学一样，从小到大都接受着来自父母、亲戚、老师的教育：

小学中学阶段，他们让我好好学习考一个好大学

大学阶段，他们让我好好学习找一个稳定的好工作。

工作之后，我拿着在父母眼中还算体面的工资，开始有了消费的自由，买一些自己喜欢的东西。

也许不久的将来，我会遇到心爱的人，开始组建新家庭，在我们多年不断努力的工作下，我们的薪水实现了增长，进入 “中产阶级” ，但是我们依然需要依靠双方父母的积蓄买房付首付，我们的消费和纳税也水涨船高，我们买车、计划旅行、养孩子......

这时候工作就会变成我人生最重要的事情。

我需要努力的为老板工作、通过纳税为国家发展做贡献、通过房贷为银行工作。因为工资是我唯一的收入来源，我需要依靠工资来支付生活成本，维持消费，还花呗信用卡，支付房贷月供。

于是，我需要不停不休的朝九晚五(甚至996)，上班工作，直到退休。

我可能还会把同样的教育施加在我的孩子身上，让这样的人生在下一代身上继续循环重复。

也许看到文章的朋友中，有创业者，有事业有成的成功人士，有对理财投资颇有心得的朋友。但是当代乃至我们的上一代人，大多数人都有着类似的人生轨迹。

这就是《富爸爸》这本书里写的 “老鼠赛跑”的游戏 ：每一代人都不懂理财规划，只会通过拼命工作和加班，用大量的工作时间来换取金钱，再用这些金钱来养育子女赡养父母，而自己的子女也在重复着父母心这一辈的命运。

人们的生活总是被恐惧和贪婪控制，太努力工作，而忘记了思考

我们因为恐惧而工作：害怕付不起房贷、养不起老人孩子；

我们因为贪婪而工作：随着工资增加，消费也增加；

穷人为钱工作，富人让钱为他工作

我们每天都在为了更稳定的生活、更好的生活水平，努力勤恳的上班、挣工资。

但是这样的生活方式根本就不是任何一个富人的生活方式。

实现了财务自由的富人，不会为了钱而工作，他们用钱创造更多的钱，为自己的消费买单。

区分资产和负债

想要向富人迈进，创造财富，最重要的第一步，就是要分清楚 资产和负债：

资产：带来正向“现金流”的个人拥有的东西 => 能把钱放进你口袋的东西。
负债：产生支出的个人拥有的东西 => 把钱从你口袋拿走的东西。

关注自己的现金流

资产和负债强调的，就是 现金流。

现金流更多用于分析企业是否良好经营，但是对于个人来说，越早关注现金流，有利于越早实现财务自由。

《富爸爸》中用了 收益表+资产负债表 分别描述了穷人、中产阶级、富人的现金流：

穷人的现金流

对于大多数穷人来说，他们的收入基本全部来源于工资，工资通过日常开支、教育支出等费用消耗掉。他们的资产和负债项是空的。

中产阶级的现金流

中产阶级的现金流中多了一部分来自于负债的支出。负债项目包括：房贷、车贷、消费分期等。对于大多数买了刚需住房的人来说，房子只能算是他们的“负债”，因为带来不了正向的现金流，如果失业，他们可能会因为这些资产比穷人产生更多的压力，因为他们的开支中除了每月的生活开销，还有他的房贷、车贷。

富人的现金流

富人和穷人以及中产阶级最大的区别就是：富人的现金流，更多的来自他们的资产项，也就是所谓的“税后收入”，而不是工资。

这也与Robert 对财富的定义相匹配：

财富：一个人没有工作后能生活多久的能力

对于实现了财务自由的富人来说，这个时间就是无限长，因为他们拥有足够多的资产，为他们创造足够支出的现金流收入，如果收入减去支出还有盈余，他们的资产就会不断增加。

合理的消费观

想要像富人那样更多的积累资产，拥有正向的现金流，培养合理的消费观，最小化支出+负债很重要。

富人购买资产，穷人购买负债

重要的不是挣了多少，而是能留下多少；

身边经常有人在说，越有钱的人越抠门，还有人总抱怨自己的老板，如何俭省成本，苛待员工。

其实不是富人抠门，而是富人深知，最小化支出，才能有更多的钱用于购买资产，产生更多的正向现金流。

富人赚的比你多，花的比你少

作者Robert 提倡 享受要与财富匹配 ，先把收入用于买入资产，用资产项的得利买想要的东西。

也就是要自律消费。

因为消费一定属于支出和负债，不要追求与自身资产不匹配的、不必要的虚荣和表层物质，不要被近几年消费升级的宣传所影响，网红带货、短视频即时营销、直播...资本市场越鼓励消费，说明资本市场从消费获利越大。

税收与公司

除了消费，赋税也是每个上班族不可避免的一部分。

中产阶级在承担着沉重的税负，尤其是那些受过良好教育、高收入的中产阶级。

这个观点似乎与普遍的认知有所出入，普遍的观点都认为富人应该缴纳更多的税让穷人受益，但事实上是这样的吗？

这要从税收的历史讲起。

英国和美国在早期是不需要纳税的，只有一些因战争而临时收的税，称为“纳捐”。

直到1874年，英国规定纳税是国民义务，1913年，美国将征收所得税，纳入宪法。

其后虽然有过冲突和争议，但是英国和美国都花了几乎50年来培养公民缴纳所得税的意识。

最初只针对富人收税，但是随着国家发展，政府规模扩大，就需要征收更多的税以维持平衡运营。以致中产阶级也要被征税，且税收范围不断向穷人扩展。

表面上来看，税收对富人和中产阶级是公平的。但实际上，有关企业的法律知识，给予了富人远超出穷人和中产阶级的优势。

原因在书中也有提及：

因为政府需要利用法制，刺激企业主和投资者创造更多的工作机会和住房，这些刺激政策降低了富人的赋税。

因此，了解更多法律和财务知识的富人，总有办法从赋税中脱身，用Robert 的原话来说，就是：只要你拥有一种合法资产，我就可以找出以企业的形式提供的好处和保护，这也就是赋税最终落到中产阶级身上的原因。

这种税收状况和解释，在中国也是基本适用的。

因此，公司可以帮助富人避税，公司，并不一定是实体意义上的公司，不一定是有公司名称的办公楼、厂房，可以只是一份没有精神和灵魂的法律文件

拥有公司的富人：挣钱～支出～缴税

为公司工作的人：挣钱～缴税～支出

了解更多的财务、法律知识，利用合理的方式避税，也是穷人和富人的区别。

财商

想要积累资产，除了要最小化支出和负债，用合理的方式避税之外，更重要的是，我们要懂得如何让自己的收入，换来更多的资产，Robert 把这种能力称为财商。

财商由四个方面构成：

1、会计－－财务知识，这是非常重要的技能，你管理的钱越多，越需要精确，否则这大厦就会倒下来！财务知识能帮你读懂财务报表，借助这种能力，你还能分辨业务的优势和劣势。

2、投资－－钱生钱的科学，投资涉及策略和方案，右脑做的事，或者说是创造。

3、了解市场－－供给与需求的科学，这要求了解受感情驱动的市场的“技术面”，市场的另一个因素是“基本面”，或者说一项投资的经济意义。一项投资究竟有无意义最终取决于当前的市场状况。

4、法律－－它可以帮助你有效运营一个进入会计、投资和市场领域的企业并实现爆炸性增长，了解税收优惠政策和公司法律的人能比雇员和小业主更快致富，这就像一个人在走，而另一个人却在飞，若从长远看这种差距会更大。

踏实的学习上面的四个知识，提升财商，才能积累更多资产，让自己的每一块钱收入都能夜以继日的替自己工作，产生复利。

勇气

除了合理的消费观和财商，勇气也是影响我们致富的一个重要因素。

我们一定是不断的摔倒才学会骑自行车的，我从就没见过一球都不失的高尔夫球手，也从来没见过不曾伤心过的恋人，更没见过从来不亏钱的富人，但是我却遇到过很多从来没有在投资活动中亏掉一毛钱的穷人。

Robert 认为，我们应该克服对亏钱和失败的恐惧，为了获得更多的选择和机会而勇于冒险。

因为惧怕风险和失败而止步不前，待在舒适圈，就一定会失去成功的机会。

我们都听过“不要把鸡蛋放在一个篮子里”的经验，但是如果你的鸡蛋本来就很少，还只追求低风险，那只会让你的财富值止步不前，永远实现不了跃迁。

储蓄，是一种很常见的低风险投资，但是 Robert 认为，储蓄不一定是资产，储蓄不但ROI（投资回报率）低，不一定能跑赢通货膨胀，更重要的是，储蓄会使我们失去投资增值的机会。

买房，对于很多普通人来说，也是牵动人生的一大“投资”，依照短期的国情来看，也是一项稳定不会亏损的投资，但是房子一定是资产吗？虽然 Robert 本人的财务自由，有相当一部分是依靠投资，但是他认为，房子不一定是资产。

区分房子是资产还是负债，根据前文说的方法其实很简单，如果你买房是刚需住房，那么你的房子无法给你带来正向现金流，反而会消耗你和家人前十几年（全款买房）的积蓄，或者后几十年（贷款买房）的劳动剩余价值，是“从你口袋拿钱出去”的负债。

持续学习是最大的投资

Robert 一生做了无数的投资抉择，有的给他带来了大量的财富和持续的正向现金流，但是他坚定地认为，持续学习才是他收益最高的一项投资。

书中有多处描述，都印证了这一观点：

人生是一场无知与觉醒的斗争

人最大的财富是所受的教育

钱不能解决一切问题，只有知识才能解决问题并创造财富

Robert 认为，我们不应该单纯为了赚钱和稳定的生活而工作，应该更多的关注事业而不是职业，关注长远的发展而不是眼下的工资。

他在实现财务自由之前，没有遵循“穷爸爸”的建议：长期从事在一个稳定的岗位，而是积极的投身于多种跨行业的工作，对于他来说，不同的工作经验，有助于他掌握更多维的知识，这些知识都对他实现财务自由，起到了关键作用。

全世界到处都是才华横溢、极具天赋的人，但是只有天赋是不够的

越极度专业化的人才，价值范围越有限

不光是持续学习，Robert 更加强调的是横向发展。

除非你是所在行业金字塔最顶端的人，否则过度局限的认知，会阻碍你的发展，局限你的人生。

之前跟朋友聊天，他说过一句话我十分认同，也和作者的观点十分契合：我们无法赚到超出自己认知的钱，我们所赚的每一分钱都是我们对这个世界认知的变现。

做一个“T型”人才，斜杠青年，有自己专业的领域，也要有宽阔的认知面，才能离成功更近。

克服本能

无论是自律消费，还是持续学习，都需要我们拥有坚定而强大的内心。

前几天看新闻看到了博纳影业副总裁跳楼的消息，有一个知乎回答令我印象十分深刻：

很多人向上看，只能看到富贵和纸醉金迷。可是真正一步步向上走，才会发现越往上越暗流汹涌。重回平凡的路被堵死，只能咬牙继续向上。在我们用奋斗的勇气和不服输的精神向上爬的过程中，别忘了打磨自己的心，让心变得无坚不摧。

一切成功的前提，都需要我们有足够的自控力，让思想控制情感，让思考先于情感反应，要克服对失败的恐惧，克服懒惰，克服自负。

打磨好自己的心，才能在上升时顺风而行，在下落时稳住脚步，不落入万丈深渊。

反思

其实看完这本书会发现，这不是一本急功近利的财富指南，因为我们不可能因为读一本书，就实现财富自由。
但是至少我们知道了，在每一份支出之前，应该有更冷静、自律的判断，不被短暂的享受和营销影响，在每一份收入之后，应该更合理的分配投资和支出。
读完这本书，也不仅仅给我带来了对“金钱”的改观，除了致富，想要在其他领域做的更好，持续学习、自律、扩展认知，都是必修课。

结合谈谈对Vue中nextTick的理解

Wed, 10 Jun 2020 00:00:00 GMT

带着问题看这篇文章

tick这个单词有点抽象,应该怎么理解?
通过nextTick包装的回调,到底何时执行?
nextTick存在的意义是什么?

event loop 中任务执行顺序

同步代码执行，直至调用栈清空
microtask：调用栈清空后，优先执行所有的microtask，如果有新的microtask，**继续执行新microtask，**直至microtask queue清空（微任务）
task queue：执行task queue第一个任务，后续的task暂不处理（宏任务）
每当调用栈清空后，重复2-3步骤

（关于 Event Loop的细节,我写过一篇很详细的总结试图解释清楚Javascript Event Loop。）

微任务与宏任务

根据event loop的执行机制,微任务的调度优先级比宏任务高.

微任务异步API:Promise.then,MutationObserver

宏任务异步API:setTimeout,MessageChannel,postMessage,setImmediate

Vue中nextTick的实现

vue中的 nextTick 实现在 util 模块的单个文件中，代码总共100多行：

// src\core\util\next-tick.js

import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'

const callbacks = []
let pending = false

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

let timerFunc

// nextTick行为利用了微任务队列，微任务队列可以通过原生Promise.then或MutationObserver访问到。
// MutationObserver具有更广泛的支持，但是在iOS> = 9.3.3中的UIWebView中，在触摸事件处理程序中触发时会发生错误。触发几次后，它将完全停止工作
// 因此，如果原生Promise可用，优先使用Promise：

if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    // 在有问题的UIWebViews中，会出现奇怪的状态：微任务队列中有回调但是不被清空，直到浏览器有其他任务，例如处理计时器
    // 因此此处使用一个空计时器，来强制触发微任务队列执行
    if (isIOS) setTimeout(noop)
  }
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // setImmediate,宏任务,但是相比 setTimeout 是个更好的选择
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // setTimeout 0 宏任务
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

源码中, Vue.nextTick/vm.$nextTick 的具体逻辑：

定义一个 callbacks 数组，用于存储 nextTick 接口传来的回调函数们
定义一个 flushCallbacks 方法，用于遍历执行 callbacks 数组中的所有回调函数
调用 timerFunc 方法，将 flushCallbacks 方法作为回调任务，添加到异步队列
timerFunc由环境决定，微任务优先，宏任务作为折衷方案， Promise.then > MutationObserver > setImmediate > setTimeout 0

一句话总结：将回调作为异步任务，添加到(微/宏)任务队列，在当前调用栈清空后再执行。

对nextTick这个词的理解

对于tick我的理解是:每次从调用栈开始有函数帧，直到调用栈被清空为止的过程，这个过程可能是：

页面初始加载时同步脚本执行的过程
也可能是任何一个异步任务回调执行的过程

对于nextTick(cb)：回调函数cb不在当前调用栈执行期间立即执行，而是被立即添加在任务队列中，在当前调用栈清空后执行。

使用nextTick的目的：必须等待当前调用栈的后续代码执行完，才能执行回调，例如这种情况:回调函数中,需要依赖上一个调用栈操作后的某些状态。

举个例子：

画一个 echarts 图表，希望根据数据的长度来动态调整图表的宽度

..
<template>
	<div id="chart" :style='{width:chartWidth,height:"200px"}'
</template>

...
this.chartWidth = getWidthByData(data)
this.nextTick(()=>{
	let chart= echarts.init(document.getElementById('chart'))
	chart.setOption({...})  //echarts渲染
})

宽度属性chartWidth存在vue data中，由于vue data是响应式的，变更data值后，div#chart的宽度并不是立即变更的，中间存在一系列过程：

chartWidth 属性上的 descriptor setter 向其依赖的(vue组件的renderWatcher)发布更新
watcher 的更新也是一个异步过程（queueWatcher，通过nextTick来调度）

因此在chartWidth变更后，对应的dom宽度不是立即更新的，此时如果立即执行echarts的渲染工作，会导致echarts不能按照最新宽度来渲染。

Javascript & 异步机制

Mon, 08 Jun 2020 00:00:00 GMT

带着问题看这篇文章

我们写的各种回调什么时候执行？按照什么顺序执行？
setTimeout(cb,0)和Promise.resolve().then(cb)谁的回调先执行？
Javascript的单线程是如何实现异步并发的？
Event Loop到底是如何调度任务的？
如何利用RAF优化性能？
下面这段代码输出是什么？回答不对的朋友，看完这篇文章也许你的思路就会清晰~

console.log(1);
setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3);
  });
});
new Promise((resolve, reject) => {
  console.log(4);
  resolve(5);
}).then((data) => {
  console.log(data);
});
setTimeout(() => {
  console.log(6);
});
console.log(7);

// 结果：1475236

JS Runtime 的几个概念

call stack 调用栈

定义：调用栈是浏览器的JavaScript解释器追踪函数执行流的一种机制，函数调用形成了一个由若干帧组成的栈。（栈的特点是后进先出）
作用：通过调用栈，我们能够追踪：哪个函数正执行；执行的函数体中又调用了哪个函数；以及每一帧的上下文+作用域
机制：
- 每调用一个函数，就把该函数添加进调用栈并执行
- 如果正在调用的函数还调用了其他函数，把新函数也添加到调用栈中，立即执行
- 执行完毕后，解释器会将函数清除出栈，继续执行当前执行环境下剩余的代码
- 当分配的调用栈被占满时，会引发“Stack Overflow堆栈溢出”错误

heap 堆

堆一大块内存区域（通常是非结构化的)，对象被分配在堆中

task queue 消息队列

JS运行时包含了一个消息队列，每个消息队列关联着一个用于处理这个消息的回调函数。（队列的特点是先进先出）

当调用栈为空时，event loop会消息队列中的下一个消息
被处理的消息被移出队列，
消息被作为参数调用与之关联的回调函数
同时为该函数调用向调用栈添加一个新的栈帧
调用栈再次为空时，event loop会重复1-4步骤

通常，task queue中的任务被称为：macrotask 宏任务.

以下几种异步API的回调属于宏任务：

setTimeout
MessageChannel
postMessage
setImmediate

Single Thread 单线程

单线程 = 单调用栈 = one thing at a time，不能并发，一次只能做一件事
为什么单线程能实现异步和并发？
因为单线程指的是js runtime
而浏览器和Node提供了API，使我们可以调用其他线程去做并发的异步任务，例如网络请求、DOM、setTimeout

Non-blocking 非阻塞

blocking：阻塞，是指浏览器在等待耗时长的代码(eg.网络请求,I/O)期间，不能处理任何其他事情，包括用户响应。
解决阻塞的方法：异步任务
异步任务怎么实现的？依赖的就是异步API和event loop事件循环
JavaScript的事件循环模型与许多其他语言不同的一个非常有趣的特性是，它永不阻塞，所以当一个应用正等待一个异步任务时，它仍然可以处理其它事情，比如用户输入。（由于历史原因有一些例外，如 alert 或者同步 XHR，但应该尽量避免使用它们，例外的例外也是存在的（但通常是实现导致的错误而非其它原因）。

不被抢占

每个消息被完整的执行后，其他消息才会被执行。

优点：当一个函数执行时，它不会被抢占，只有在它运行完毕后才会去运行其他代码，才能修改这个函数操作的数据。

缺点：当一个消息需要太长时间才能处理完，浏览器就无法处理用户交互,eg.滚动和点击，这也是性能较差的网页“卡顿现象”的原因。

因此良好的操作方式是：缩短单个消息处理时间，在可能的情况下尽量将一个消息裁剪成多个消息。以保证浏览器 60 frames per second 的流畅渲染，即每个消息处理时间 < 1000ms/60=16ms，

Event Loop 事件循环

event loop是一个执行模型，在不同的地方有不同的实现。浏览器和NodeJS基于不同的技术实现了各自的Event Loop。

浏览器的Event Loop模型是在html5的规范中明确定义的，具体的实现由浏览器厂商来做。
NodeJS的Event Loop是基于libuv实现的。可以参考Node的官方文档以及libuv的官方文档。

浏览器EventLoop运行机制（不考虑microtask）

所有同步任务都在主线程上执行，形成一个call stack调用栈
可以通过浏览器API调用运行在其他线程的异步任务
主线程之外，存在一个待处理消息的消息队列task queue。每一个消息都关联着一个用以处理这个消息的回调函数。
当主线程调用栈中的所有同步任务执行完毕，系统就会读取task queue，取最先进的消息作为参数，将其关联的回调函数放入主线程调用栈中执行

添加消息

浏览器中，如果一个事件有事件监听器，事件被触发后，一个消息就会被添加到消息队列中。
除了事件，浏览器提供的其他API，例如setTimeout、xhr等异步任务，都会在任务结束后向消息队列添加消息

setTimeout(fn,n)

setTimeout 中的第二个参数n是指消息被加入消息队列的最小延迟
因此，不是保证回调在n毫秒内必须执行，而是保证回调在n毫秒之后被添加到消息队列，具体什么时候执行，取决于消息队列中待处理的消息和调用栈中已有的函数。
零延迟：setTimeout 0 的作用：将回调立即放入消息队列，而不是0s内立即执行

debug 一个 demo

// demo
function bar() {
  debugger;
  console.log("bar");
  foo();
}
function foo() {
  debugger;
  console.log("foo");
  setTimeout(function () {
    debugger;
    console.log("setTimeout");
  }, 1000);
}
(function all() {
  debugger;
  console.log("anounymous");
  bar();
})();

原理图

知识延伸：webWorker & 跨运行时通信

每个 WebWorker 、跨域的 **iframe 、**浏览器不同窗口都有各自的运行时，即都有各自的 call stack 、heap、queue。
不同的运行时，可以通过 postMessage 方法来通信。

postMessage：

// eg. 当一个窗口可以获得另一个窗口的引用时，例如targetWindow = window.opener

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow:其他窗口的引用：

iframe的contentWindow
执行window.open返回的窗口对象
通过window.frames获取到的子frame窗口对象

message：要发送到其他窗口的数据，会被结构化克隆算法序列化

targetOrigin：用来指定哪些窗口能接收到消息事件

transfer：一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

结构化克隆算法：

用于克隆复杂对象

不能克隆：Error、Symbol、Function对象、DOM节点

不能克隆：属性的描述符、RegExp对象的 lastIndex字段、原型链上的属性

Transferable对象：

一个抽象接口，代表可以在不同可执行上下文中传递的对象。（抽象：没有定义任何属性和方法）

不同执行上下文：例如主线程和webworker之间。

ArrayBuffer 、MessagePort 和 ImageBitmap 实现于此接口。

接收消息：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  // event.data：传递来的对象
  // event.origin：消息发送方窗口的origin
  // event.source：对消息发送窗口的引用
}

UI Rendering Task & 性能优化

浏览器渲染 - Rendering Task步骤

requestAnimationFrame API(在chrome，火狐，符合WEB标准)
style calculation 计算样式
layout 计算布局
paint 实际渲染像素数据
requestAnimationFrame API(在edge，safari)

render blocking 渲染阻塞

具体来讲，如果js runtime 的 call stack 一直不能清空，例如event loop将一个耗时的回调放进了call stack，会导致浏览器主线程被占用，无法执行render相关的工作，用户交互的事件也被添加在消息队列等待调用栈清空得不到执行，因此无法响应用户的操作，造成阻塞渲染的“卡顿”现象。

60FPS

在event loop处理消息队列时，我们提倡要缩短单个消息处理时间，在可能的情况下尽量将一个消息裁剪成多个消息，rendering task 可以在消息之间执行，以保证保证UI Rendering调用的频率能达到 60 frames per second （UI Rendering Task执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。），即每次event loop处理消息执行回调所占用的时间小于 16.67 毫秒。

demo1:

看下面这段代码，先 append 一个元素再设置display=none去隐藏这个元素，不必担心这个元素会闪现，因为这两行代码会在某一次event loop中执行，只有这两行代码执行完，并且清空了当前调用栈，才有可能执行下一次UI Render task

document.body.appendChild(el);
el.style.display = "none";

demo2:

下面这段代码，重复的显示隐藏一个元素，看起来开销很大，但其实在RenderingTask期间，只会取最终结果来渲染，

button.addEventListener ('click,()=>{
box style. display='none';
	box style. display ='block';
	box style. display ='none';
	box style. display ='block';
	box style. display='none';
	box style. display ='block';
	box style. display ='none';
	box style. display ='block';
	box style. display ='none';
})

requestAnimationFrame

简称RAF，是一个web api，要求浏览器在下一次重绘之前调用指定的回调函数，通常用于执行动画
通过RAF，使浏览器可以在单次回流和重绘中优化处理并发动画，每次UI刷新之前执行RAF，使动画帧率更高
当requestAnimationFrame() 运行在后台标签页或者隐藏的<iframe> 里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命

demo1：requestAnimationFrame优化动画的一个例子

// 使用RAF
function callback() {
  moveBoxForwardOnePixel();
  requestAnimationFrame(callback);
}
callback();

// 使用setTimeout
function callback() {
  moveBoxForwardOnePixel();
  setTimeout(callback, 0);
}

效果：

demo2：用RAF控制动画执行顺序，需求是box元素的水平位置变化：1000→500

button addEventListener ('click,()=>{
	box.style.transform = 'translateX(1000px)'
	box.style.transition= 'transform 1s ease-in-out'
	box.style.transform = 'translateX(500px)'
})

//由于上述代码会一起执行，
//因此渲染时，1000px会被忽略，浏览器会取500作为最终值，在下一帧渲染，
//因此上述代码的效果是：元素位移0->500

//换一种写法
button addEventListener ('click,()=>{
	box.style.transform = 'translateX(1000px)'
	box.style.transition= 'transform 1s ease-in-out'

	requestAnimationFrame(()=>{
		box.style.transform = 'translateX(500px)'
	})
})
// 上述代码，1000的初始值是有效的，
//但是在下一次的rendering task期间，由于RAF先执行，因此500将1000覆盖
//最终渲染的效果还是元素位移：0->500

//如何令500在下下一次渲染再生效？嵌套调用RAF
button addEventListener ('click,()=>{
	box.style.transform = 'translateX(1000px)'

	requestAnimationFrame(()=>{
		requestAnimationFrame(()=>{
			box.style.transition= 'transform 1s ease-in-out'
			box.style.transform = 'translateX(500px)'
		})
	})
})

可视化：event loop和rendering

理想的状态

setTimeout的浪费

间隔调用setTimeout的效果：导致浪费

以前的动画仓库的处理方式：setTimeout(animFrame, 1000/60)

但是这种处理方式不稳定，可能会不准确，因为

RAF的稳定有序状态

MicroTask 微任务

微任务，microtask，也叫jobs。

微任务异步类型

一些异步任务执行完成后，其回调会依次进入microtask queue，等待后续被调用，这些异步任务包括：

Promise.then
MutationObserver
process.nextTick (Node独有)
Object.observe

⭐event loop运行机制(含microtask)

event loop中任务的执行顺序：

同步代码执行，直至调用栈清空
microtask：调用栈清空后，优先执行所有的microtask，如果有新的microtask，**继续执行新microtask，**直至microtask queue清空
task queue：执行task queue第一个任务，后续的task暂不处理
每当调用栈清空后，重复2-3步骤

两个重点：

微任务阻塞浏览器：如果执行微任务期间，不停的有新的微任务，会导致浏览器阻塞
微任务的执行会因为JS堆栈的情况有所不同，要根据调用栈是否清空去判断微任务是否会执行。

一个直观的例子：

Promise.resolve().then(() => {
  console.log("microtask 1");
});
Promise.resolve().then(() => {
  console.log("microtask 2");
});
console.log("sync code");
setTimeout(() => {
  console.log("macro task 1");
  Promise.resolve().then(() => {
    console.log("microtask 3");
  });
}, 0);
setTimeout(() => {
  console.log("macro task 2");
}, 0);

//结果：
//sync code 同步代码优先执行
//microtask 1  同步代码执行完后，调用栈清空，优先执行 microtask
//microtask 2  同上
//macro task 1  调用栈清空，microtask queue清空，此时可以执行一个位于队首的macro task，执行期间新增一个microtask
//microtask 3  调用栈清空后，由于存在microtask，因此优先执行microtask
//macro task 2  最后执行macro task，清空task queue

流程图

demo1：调用栈未清空，不执行microtask

在控制台中执行一段代码，会当做同步代码来处理。listener1执行后，微任务队列+1，但是因为是同步执行的代码，所以会立即执行listener2，微任务队列+1，所以顺序是listener1,listener2,microtask1,microtask2

demo2:调用栈清空后，microtask 优先于 macro task执行

同步执行两个setTimeout，会将 listener1和listener2加入到task queue，同步代码执行就结束。先执行listener1，将microtask1加入微任务队列，listener1执行完后，调用栈清空，即使这时候task queue还有listener2，也会先执行所有微任务，将所有微任务清空后，再执行listener2，因此输出顺序是 listener1,microtask1,listener2,microtask2

demo3：同demo2

用户点击事件

由于点击事件会被添加到task queue，因此，这个 demo3 的结果和 demo2 结果相同

demo4：同demo1

js调用click()事件

由于是在代码中手动执行click，所以会同步执行两个listener，因此demo4和demo1结构相同。

demo5：micro 优先于 macro执行

demo6：综合实例

// 浏览器中执行
console.log(1);
setTimeout(() => {
  console.log(2);// callback2，setTimeout属于宏任务
  Promise.resolve().then(() => {
    console.log(3)// callback3，Promise.then属于微任务
  });
});
new Promise((resolve, reject) => {
  console.log(4)// 这里的代码是同步执行的
  resolve(5)
}).then((data) => {
  console.log(data);// callback5，Promise.then属于微任务
})
setTimeout(() => {
  console.log(6);// callback6，setTimeout属于宏任务
})
console.log(7);

// 结果：1475236

// 逻辑：
147是同步执行，同步代码执行完后的queue：
	task queue：callback2，callback6
	microtask：callback5
此时调用栈已清空，优先执行微任务callback5，调用栈清空
再执行callback2，调用栈清空
此时的queue：
	task queue：callback6
	microtask：callback3
优先执行微任务callback3，调用栈清空
最后执行callback6

demo7：综合实例

console.log('main start');

setTimeout(() => {
		//cb1
    console.log('1');
    Promise.resolve().then(() => {
			//cb2
			console.log('2')
		});
}, 0);

Promise.resolve().then(() => {
		//cb3
    console.log('3');
    Promise.resolve().then(() => {
			//cb4
			console.log('4')
		});
});

console.log('main end');

//结果：
// main start，main end，3412

main start 和 main end同步执行，同步代码执行完后，调用栈清空，此时的queue：
	task queue：cb1
	microtask queue：cb3
先执行微任务cb3，执行完后，调用栈清空，此时的queue：
	task queue：cb1
	microtask queue：cb4
先执行微任务cb4，执行完后，调用栈清空，此时的queue：
	task queue：cb1
	microtask queue：空
最后执行cb1，然后执行cb2

rendering task的执行顺序 在上面的event loop执行机制中，没有提到rendering task，是因为rendering task是由浏览器自行去决定何时运行的，与当前设备的屏幕刷新率等因素相关，确定的是：

RAF 在 rendering task 初始期间执行
如果定义了多个 RAF 回调，会被加入到 Animation queue中，在UI Rendering 期间，会清空 Animation queue，与 microtask 不同的是，如果清空 Animation queue 期间，有新的 animation task 被加入到 queue 中，此次 rendering task 执行期间，不会处理新的 animation task。

macrotask、microtask、animation task的区别，可以看在下面的动图中横向对比：

参考资料

HTML规范
NodeJS Event Loop 文档
mdn相关文档
Jake Archibald在JSConf.Asia的演讲视频【In The Loop】,很值得看：
Philip Roberts在JSConf的演讲视频【What the heck is the event loop anyway】,很值得看
Philip Roberts做的Event Loop可视化网站
JS Runtime运行时 - MDN

4点起床：舒适而高效的作息方式

Thu, 21 May 2020 00:00:00 GMT

`REM` 睡眠

REM : rapid eye movement,快速眼动睡眠，是人睡眠周期的一个阶段。

REM即快速眼动睡眠睡眠阶段中，身体肌肉放松，单紧闭的眼皮下眼球在来回运动，这个阶段是联系'清醒状态'和'意识体温低下的睡眠状态'的桥梁，为人们“睡醒”做了准备。

Non-REM、NREM是非快速眼动睡眠，这个阶段是大脑休息的时间，也就是深度睡眠阶段，这个阶段是睡眠中最重要的阶段，也是睡眠效率最高的阶段。

睡眠周期

通常一个成年人的睡眠是这样的：

NREM与REM交替出现，交替一次称为一个睡眠周期
两种循环往复，每夜通常有 4~5个睡眠周期，每个周期90~110分钟。

国际睡眠医学将一个睡眠周期分为五个阶段：

入睡期
浅睡期
熟睡期
深睡期
快速眼动期：

上图是对一个睡眠周期的近似描述，W是Wake清醒状态，R是REM，N代表NREM非快速眼动睡眠,N3代表最深度的睡眠。

由图中可以看出，一个90分钟的睡眠周期中，深度睡眠大约占到了整个睡眠周期的一半以上。

依照睡眠周期来休息

我们在深睡阶段是轻易叫不醒的，如果在深睡阶段被吵醒，身体和大脑从深度睡眠中被突然拉出，通常会使身体和大脑产生不适，即使睡眠时间总和很长，也会有没睡好的感觉。

相反，如果在浅睡眠阶段，清晨的阳光照射、晨起的鸟叫都能轻易的把我们从快速眼动期唤醒，由于大脑已经经历过处在睡眠周期中间的深度睡眠，得到了休息，这个时候的清醒，身体和大脑都会感到舒适。

因此，按照睡眠周期的模式来休息至关重要。

当然，每个人的睡眠周期不可能都是严格的90分钟，因此也要掌握好自己的身体规律。

比如你入睡后一段时候，开始翻身或者容易被吵醒，这个时候很大概率就是你处在睡眠周期末尾的快速眼动阶段。

掌握自己身体的睡眠周期，同时让自己处于可以自然醒的环境，例如靠近窗边睡眠，让大自然的声音光线带着身体自然醒，就可以得到最舒适高效的睡眠。

高效的睡眠也就意味着可以在拥有舒适睡眠的同时，缩短睡眠时间，可利用的时间也就增多了，这就是书中作者所提倡的观点。

`3-8作息`

前面睡眠周期介绍了如何利用缩短睡眠时间，来提升可利用时间，而3-8作息法要介绍的，是在相同睡眠时间的情况下，如何提升可利用时间的效率。

答案就是早起。

3-8作息法是指：将一天时间分为3块，上午8小时，下午8小时，晚上8小时。也就是4点起床，下午8点休息。

为什么要早起

其实3-8模式，强调的起早，是让晚上的时间去置换早上的时间。

那么为什么要早起呢，书中用大量的篇幅介绍了早起的好处。

例如，从生理学的角度来说，人的身体会分泌两种令人“精力充沛”的荷尔蒙，肾上腺素、肾上腺皮质类脂醇，这两种荷尔蒙在早上分泌的量比晚上分泌的多，大概是3倍左右，因此早上大脑的效率比晚上的高，早上的大脑更加清醒，精力更加旺盛。

另一方面，日出而作，日落而息是人类进化几千年形成的习惯，只是到了现代，人们在夜里可以做的事情越来越多，加班的情况也越来越多，很多人的睡眠时间越来越晚，甚至有些自由工作制的公司里，很多人都是11-12的作息方式，在正午起床，在月影朦胧时才睡去，这是违背大自然和人体规律的。

当你利用睡眠周期规律，养成早睡早起的习惯后，会发现一些美妙的事情，比深夜的手机、视频、夜宵、电脑、小说更加精彩，比如：

光线、鸟叫带来的自然醒的舒适
清晨你所在城市的样貌，和形形色色早起的人
适宜的晨间光照，和空气中适宜的湿度
在空空荡荡的地铁上安然看书的舒适
...

早起能做什么

之前发朋友圈晒了一张等首发地铁的图片，有朋友问，“起那么早干什么？”

其实，一切你想做的事情，都可以放在早上完成(除了看星星看月亮这种)。

书中举了很多例子，比如

悠闲的享受早餐
散步、运动(运动有助于缓解压力)
冲热水澡
晨间社交
看书学习
发展副业
发展兴趣爱好，做内因驱动的事情
...

找不到自己早起想做的事？

书中还有一个观点令我印象深刻，如果你找不到自己想做的事情呢？

就不需要早起，或者陷入迷茫吗？

我把作者的答案摘录在这里，希望对找不到追求的人，能有所启发：

我究竟想做什么呢？

当然，我们可以埋头苦干，让自己没时间胡思乱想。但我建议大家多去受点刺激。学习、信息、人......这些都是刺激。接受的刺激越多，自然会产生这样那样的憧憬：“我想成为那样的人！”“我想做那样的工作！” 有些人能找到明确的目标，有些人则会发现目标的模糊轮廓。

无论你属于上述哪种情况，都能在不断接受刺激（我把它称为“打击”）的过程中，逐渐将自己的目标具象化，这才是重中之重。

人的一生也许都在自我探索

如何学习源码、如何高效学习一个新知识

Thu, 14 May 2020 00:00:00 GMT

什么时候看源码

对于复杂的开源项目，一上来就看源码是不合理的，可能导致效率低下，适得其反。

往往看一个开源项目源码前，我们会经历以下几个阶段：

刚接触一个开源项目，跟着官方文档，运行一些demo实例
在工作项目中应用、实践、踩坑
能够熟练使用，了解它的一些设计思想，但是还不知道设计原理

经历过以上几个阶段后，就是开始看源码的最佳时期

如何看源码

1. 检索收集信息

如果你不是一个走在行业最前端的人，那么你踩过的坑，一定有前人踩过。你想学的东西，也一定有前辈早已研究透彻。

如果一定有人走过我们要走的路，那么我们就应该利用好这个互联网大世界，在踏出征途前，先从无数优秀前辈身上，汲取一些“旅行攻略”。

不光是学习源码，对于绝大多数我们即将要做的事情来说，检索收集信息都应该是第一步，甚至要放在计划制定之前。

学习开源项目源码之前，带着它的名称 + “如何学习” 作为关键词，检索信息，对于我们程序员，甚至可以先搜一搜这个项目相关的面试题。

这有助于我们用最短的时间，去了解这个项目最值得我们学习的地方，让我们更加清楚我们想要什么；也有助于我们收集学习资料，提高学习效率。

2. 宏观了解

从全局的视角去了解整个项目，这有助于形成整体的知识结构，上来就从细微处硬啃，效率极低。

可以从以下几个方面着手：

项目的背景、项目作者亲述的背后的故事、项目纪录片
项目解决的问题
浏览代码仓库，了解其Issue报告规则、PR规则、贡献规则、开发环境...
源码的目录结构
项目的元数据。例如package.json，看看项目的依赖/脚本
构建方式，运行环境，入口，构建输出
项目的历史版本和当前版本的区别，未来的发展方向
项目的技术选型：项目的技术依赖，优化方案，类型控制，格式检查，代码规范，API接口设计，单元测试等

3. 重点切入

有了你对项目的熟练使用，有了对项目设计思想的了解，有了对项目整体的认知，那么我们就可以开始带着问题细啃源码，去了解这个项目的重点的实现原理。

比如这个项目最重要的核心思想，是如何实现的；
比如你在实践中经常踩坑的点，是如何产生的；
比如那道最高频的面试题，面试官到底想考我们什么；
比如那些你在实践中经常用到的特性，是如何实现的
...

带着这些切入点去看源码，逐一击破，最终就可以建立一个完整的知识体系。

4. 模仿实现

当掌握了项目的宏观结构 + 重点特性的实现原理后。就可以开始自己动手，尝试实现一个类似的简单小项目。

这个项目不需要完整的重复造轮子，不需要完美的关注细节，只需要把我们所学到的结构应用其中，把关键特性模仿实现即可。

这个过程有助于我们查漏补缺，在自己动手踩坑的过程当中，把学到知识融会贯通。

5. 开源贡献

当我们掌握了知识之后，根据费曼的以教为学的方法，我们最后应该做的就是输出。比如：

输出学习总结
反馈项目社区:参与共建，做开源贡献，解决issue，做插件开发

举一反三

这套方法其实适用于绝大多数知识体系的学习

Vue消息插件开发 & npm发布

Thu, 14 May 2020 00:00:00 GMT

vue-message-plugin

一个基于 Vue.js 的消息插件，按照 ElementUI / message的接口实现
插件地址
源码地址

源码目录结构

package.json配置

{
  "name": "vue-message-plugin",
  "version": "1.0.0",
  "description": "A message plugin based on Vue.js which works like ElementUI/Message.",
  "author": "scarsu <scarsu001@gmail.com>",
  "private": false,//用于公开发布
  "license": "MIT",
  "main": "dist/vue-message-plugin.js",//npm引用入口
  "repository": {//仓库
    "type": "git",
    "url": "https://www.github.com/scarsu/vue-message-plugin"
  },
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.2"
  },
  "keywords": [
    "vue",
    "toast",
    "code",
    "vue plugin",
    "message",
    "vue-message-plugin"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "html-webpack-plugin": "^2.30.1",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

主应用 vue安装插件

import Vue from "vue";
import App from "./App";
import Message from "./lib";

Vue.config.productionTip = false;
Vue.use(Message); //Vue.use用于安装插件，插件中必须包含install方法，必须在创建根实例前安装插件
/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>",
});

Message/index.js

import Message from "./src/main.js";
export default Message;

Message/src/main.js

/*
 * 参数 说明 类型 可选值 默认值
 * message 消息文字 string / VNode — —
 * type 主题 string success/warning/info/error info
 * dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean — false
 * customClass 自定义类名 string — —
 * duration 显示时间, 毫秒。设为 0 则不会自动关闭 number — 3000
 * showClose 是否显示关闭按钮 boolean — false
 * center 文字是否居中 boolean — false
 * onClose 关闭时的回调函数, 参数为被关闭的 message 实例 function — —
 * offset Message 距离窗口顶部的偏移量 number — 20
 *
 * 调用 Message 或 this.$msg 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 close 方法。
 *
 * 方法名 说明
 * close 关闭当前的 Message
 */
import message from "./main.vue";
import { isVNode } from "@/utils";

//用于export的对象
const Message = {};

let instances = [];
let seed = 0;
const types = {
  success: "success",
  info: "info",
  warning: "warning",
  error: "error",
};

//Vue插件必须包含install方法
Message.install = function (Vue) {
  const Message = Vue.component("message", message);

  Vue.prototype.$message = function (opt) {
    // 参数处理
    if (typeof opt === "string" || isVNode(opt)) {
      opt = { message: opt };
    }
    opt.id = "id" + seed++;
    opt.type = types[opt.type] || types.info;
    opt.userOnClose = opt.onClose;

    // message组件实例
    let instance = new Message({
      data: opt, //将配置选项传入给实例的data
    });

    //处理VNode类型message（使用$slots插槽分发数据
    if (isVNode(instance.message)) {
      instance.$slots.default = [instance.message];
      instance.message = "";
    }

    //挂载dom  并 实例的dom加入body中
    instance.$mount();
    document.body.append(instance.$el);

    // close方法
    instance.close = function () {
      this.show = false;
      if (this.userOnClose) this.userOnClose();
    };

    // 显示
    instance.show = true;

    // 定时隐藏
    let duration = opt.duration || 3000;
    instance.timer = setTimeout(() => {
      instance.close();
    }, duration);

    instances.push(instance);

    // 返回message组件实例
    return instance;
  };
};
export default Message;

isVNode方法

function isVNode(node) {
  //通过VNode必包含的属性componentOptions来判断
  return (
    !!node &&
    typeof node === "object" &&
    node.hasOwnProperty("componentOptions")
  );
}

Message/src/main.vue

<!--
 * 参数 说明 类型 可选值 默认值
 * message 消息文字 string / VNode — —
 * type 主题 string success/warning/info/error info
 * dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean — false
 * customClass 自定义类名 string — —
 * duration 显示时间, 毫秒。设为 0 则不会自动关闭 number — 3000
 * showClose 是否显示关闭按钮 boolean — false
 * center 文字是否居中 boolean — false
 * onClose 关闭时的回调函数, 参数为被关闭的 message 实例 function — —
 * offset Message 距离窗口顶部的偏移量 number — 20
 *
 * 调用 Message 或 this.$msg 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 close 方法。
 *
 * 方法名 说明
 * close 关闭当前的 Message
-->
<template>
  <transition name="message-fade">
      <div
        :class="[
          'message',
          `message-${type}`,
          center?'is-center':'',
          customClass]"
          :style="positionStyle"
          @mouseenter=stopTimer
          @mouseleave=startTimer
          v-if="show">
        <slot>//插槽分发v-html数据
            <span v-if="message && !dangerouslyUseHTMLString">{{message}}</span>
            <div v-else v-html="message"></div>
        </slot>
        <i v-if="showClose" @click="closeMsg" class="message-close-btn">x</i>
      </div>
  </transition>
</template>

<script>
export default{
  components: {},
  data () {  //message组件默认数据
    return {
      message: '',
      type: 'info',
      dangerouslyUseHTMLString: false,
      customClass: '',
      showClose: false,
      center: false,
      onClose: null,
      offset: 20,
      show: false,
      timer: null
    }
  },
  computed: {
    positionStyle () {
      return `margin-top:${this.offset}px`
    }
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    closeMsg () {
      this.close()
    },
    startTimer () {
      const _this = this
      this.timer = setTimeout(() => {
        _this.close()
      }, _this.duration)
    },
    stopTimer () {
      clearTimeout(this.timer)
      this.timer = null
    }
  }
}
</script>
<style scoped>
.message{
  position: relative;
  margin-top: 15vh;
  width: 30%;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  box-sizing: border-box;
  min-width: 200px;
  padding: 20px 40px;
  border-radius: 10px;
}
.is-center{
  text-align: center;
}
.message-success{
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}
.message-info{
  background-color: #edf2fc;
  border-color: #909399;
  color: #909399;
}
.message-warning{
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}
.message-error{
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #f56c6c;
}
.message-fade-enter-active,
.message-fade-leave-active {
  transition: all 0.1s ease-out;
}
.message-fade-enter-to {
  opacity: 1;
  transform: scale(1.2);
}
.message-fade-leave-to {
  opacity: 0;
  transform: scale(0.8);
}
.message-close-btn{
  position: absolute;
  right: 10px;
  top: 3px;
  cursor: pointer;
}
</style>

webpack配置

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const resolve = (dir) => path.resolve(__dirname, dir);

module.exports = {
  entry: "./src/main.js", //定义webpack的入口文件
  output: {
    //定义webpack的输出
    path: path.resolve(__dirname, "./dist"), //输出路径
    filename: "vue-message-plugin.js", //输出文件名
    libraryTarget: "umd", //把写的library打包成umd文件，把库暴露给当前使用的模块定义系统，同时适用commonJs 模块，AMD模块，也可以导出到 global 下的变量，library指定模块名或变量名
    library: "vue-message-plugin", //以库的形式导出入口文件
    umdNamedDefine: true, //在 UMD 库中使用命名的 AMD 模块
  },
  module: {
    //module选项决定了如何处理项目中的不同类型的模块
    rules: [
      //array,创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
      {
        test: /\.css$/, //rule条件：resource，请求文件的绝对路径。它已经根据 resolve 规则解析。（Rule.resource.test 的简写
        use: [
          //应用于模块的 UseEntries 列表。每个入口(entry)指定使用一个 loader。
          "vue-style-loader",
          "css-loader",
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {},
        },
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]",
        },
      },
    ],
  },
  resolve: {
    //resolve选项能设置模块如何被解析
    alias: {
      //定义 import 或 require 的别名，来确保模块引入变得更简单
      vue$: "vue/dist/vue.esm.js",
      "@": resolve("src"),
    },
    extensions: ["*", ".js", ".vue", ".json"], //自动解析确定的扩展。能够使用户在引入模块时不带扩展
  },
  devServer: {
    historyApiFallback: true, //当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
    noInfo: true, //启用 noInfo 后，「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
    overlay: true, //出现编译器错误或警告时，在浏览器中显示全屏覆盖。
    open: true, //自动打开浏览器
    port: 3100, //设置端口
    hot: true, //启用热更新
  },
  performance: {
    hints: false, //关闭提示
  },
  devtool: "#eval-source-map", //原始源代码生成 source map
};

if (process.env.NODE_ENV === "production") {
  module.exports.devtool = "#source-map"; //原始源代码生成 source map
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: '"production"',
      },
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false,
      },
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
    }),
  ]);
} else if (process.env.NODE_ENV === "development") {
  module.exports.devtool = "#eval-source-map";
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      //插件：允许在编译时(compile time)配置的全局常量
      "process.env": {
        NODE_ENV: '"development"',
      },
    }),
    new webpack.optimize.UglifyJsPlugin({
      //可以控制项目中 UglifyJS 的版本
      sourceMap: true,
      compress: {
        warnings: false,
      },
    }),
    new webpack.LoaderOptionsPlugin({
      //用于从 webpack 1 迁移到 webpack 2
      minimize: true,
    }),
    new HtmlWebpackPlugin({
      //简单创建 HTML 文件，用于服务器访问
      filename: "index.html",
      template: "index.html",
      inject: true, //注入打包的文件
    }),
  ]);
}

函数式编程

Fri, 08 May 2020 00:00:00 GMT

函数式编程

函数式编程是一种解决方案简单，功能独立，对作用域外没有任何副作用的编程范式。
INPUT -> PROCESS -> OUTPUT
函数式编程是一种基于函数计算的软件开发方法。
像数学一样，函数在编程中通过输入产生输出。
可以通过多种方式组合基本功能来构建越来越复杂的程序。
函数式编程式将程序分成小的、可测试的部分

函数式编程原则

功能独立,显式声明依赖关系

不依赖程序状态或全局变量，只依赖于传递给它们的参数进行计算

如果函数依赖于一个变量或对象，那么将该变量或对象作为参数直接传递到函数中。

不要更改变量或对象——创建新变量和对象，并在需要时从函数返回它们。
声明函数参数——函数内的任何计算仅取决于参数，而不取决于任何全局对象或变量。

有限的副作用

可以严格地限制函数外部对状态的更改导致的状态变化

在变量，数组或对象上调用一个函数，这个函数可能会改变对象中的变量或其他东西。函数式编程的核心原则之一是不改变任何东西，变化会导致错误。如果一个函数不改变传入的参数、全局变量等数据，那么它造成问题的可能性就会小很多。

在函数式编程中，改变或变更叫做mutation

这种改变的结果叫做“副作用”（side effect

理想情况下，函数应该是不会产生任何副作用的纯函数（pure function

纯函数

同一个输入永远能得到同一个输出

限制更改程序状态

避免更改保存数据的全局对象

不改变原数组的数组方法：

concat 连接数组

slice 提取数组一部分（代替splice从数组删除元素

map 迭代数组返回新数组（callback return 新元素

filter 迭代数组返回新数组（callback return true/false

reduce 是 JavaScript 所有数组操作中最通用的方法。

几乎可以用reduce方法解决所有数组处理问题。 filter和map方法不支持对数组中两个不同元素的交互。举个例子，如果你想把数组中的元素拿来比较或者相加，用filter和map是做不到的。 reduce方法允许更通用的数组处理方式，而且filter和map方法都可以当作是reduce的特殊实现。 reduce(acc，cur，idx，arr)

sort排序会改变原数组：利用concat([])返回新数组排序

var globalArray = [5, 6, 3, 2, 9];
function nonMutatingSort(arr) {
  return arr.concat([]).sort((a, b) => a - b);
}
nonMutatingSort(globalArray);

every方法，检查数组每个元素都通过检验，返回boolean

some方法，检查数组有元素通过检验，返回boolean

不改变String的方法:

split

toUpperCase

trim

+-运算

函数柯里化

arity是函数所需的形参的数量。函数Currying意思是把接受多个arity的函数变换成接受单一arity的函数。

重构函数让它接收一个参数，然后返回接收下一个参数的函数，依此类推。

//Un-curried function
function unCurried(x, y) {
  return x + y;
}

// 柯里化函数
function curried(x) {
  return function (y) {
    return x + y;
  };
}
curried(1)(2); // 返回 3

柯里化在不能一次为函数提供所有参数情况下很有用。因为它可以将每个函数的调用保存到一个变量中，该变量将保存返回的函数引用，该引用在下一个参数可用时接受该参数。下面是使用curried函数的例子：

// Call a curried function in parts:
var funcForY = curried(1);
console.log(funcForY(2)); // 打印 3

partial application的意思是一次对一个函数应用几个参数，然后返回另一个应用更多参数的函数。

//Impartial function
function impartial(x, y, z) {
  return x + y + z;
}
var partialFn = impartial.bind(this, 1, 2);
partialFn(10); // 返回 13

正则自检清单

Wed, 06 May 2020 00:00:00 GMT

资源

正则教程
正则可视化
正则实例

备忘录

正则原型`test`方法

let myString = "Hello, World!";
let myRegex = /Hello/;
let result = myRegex.test(myString);

或操作符`|`

let waldoIsHiding = "Somewhere Waldo is hiding in this text.";
let waldoRegex = /Waldo/;
let result = waldoRegex.test(waldoIsHiding);

正则标志

标志i：忽略大小写
标志g：全局匹配（多次匹配）

字符串原型方法：`match`

在字符串上使用.match()方法将返回一个数组，其中包含它匹配的字符串及其捕获组。

"Hello, World!".match(/Hello/);
// Returns ["Hello"]

通配符：`.`（点）

字符集匹配：`[]`

let vowelRegex = /[aeiou]/gi;
let result = quoteSample.match(vowelRegex);

字符集连字符：`-` 字符范围

let quoteSample = "The quick brown fox jumps over the lazy dog.";
let alphabetRegex = /[a-z]/gi;
let result = quoteSample.match(alphabetRegex);

否定字符集：`^`

/[^1-9]/g 匹配所有非数字字符

`+*?^$`

+：一次或多次
*：0次或多次
？：0次或1次
字符串开头：^
字符串结尾：$

贪婪匹配 & 惰性匹配

贪婪匹配：正则默认贪婪匹配，匹配满足表达式的最长部分
惰性匹配：匹配满足表达式的最小部分：加？

let text = "<h1>Winter is coming</h1>";
let myRegex = /<.*?1>/;
let result = text.match(myRegex);
console.log(result);

字符集

\w : [A-Za-z0-9_] 数字字母下划线
\W: [^A-Za-z0-9_] 反匹配模式
\d: [0-9] 数字
\D: [^0-9] 非数字
\s: [\r\t\f\n\v] 空格回车制表符换行换页
\S: [^\r\t\f\n\v]

匹配的数量上下限

{m,n}最少m个，最多n个
{m}指定m个
{m,}最少m个
{,n}最多n个

先行断言：在字符串中向前查找的匹配模式。

正向先行断言：会查看并确保搜索匹配模式中的元素存在，但实际上并不匹配。
用法是(?=...)，其中...就是需要存在但不会被匹配的部分。
负向先行断言：会查看并确保搜索匹配模式中的元素不存在。
用法是(?!...)，其中...是你希望不存在的匹配模式。如果负向先行断言部分不存在，将返回匹配模式的其余部分。

例子：

3 到 6 个字符且至少包含一个数字：

let password = "abc123";
let checkPass = /(?=\w{3,6})(?=\D*\d)/;
checkPass.test(password); // Returns true

至少5个字符且有连续两个数字的密码：

let sampleWord = "astronaut";
let pwRegex = /(?=\w{5,})(?=\D*\d{2}\D*)/;
let result = pwRegex.test(sampleWord);

在vscode中正则搜索“未添加scoped属性的<style>标签”

<style(?!.*scoped)

捕获组：重用子字符串

用（）来表示捕获组，匹配第一次出现的子字符串
用 \n来表示第n个捕获组，n是数字，表示第n个捕获组

let repeatStr = "regex regex";
let repeatRegex = /(\w+)\s\1/;
repeatRegex.test(repeatStr); // Returns true
repeatStr.match(repeatRegex); // Returns ["regex regex", "regex"]

字符串原型方法replace：捕获组搜索/替换

.replace()的输入首先是你想要搜索的正则表达式匹配模式，
第二个参数是用于替换匹配的字符串或用于执行某些操作的函数。
第二个参数中，可以用$n访问替换字符串中的捕获组（即用括号括起来的组）
其中n表示第n个捕获组
例子:

"Code Camp".replace(/(\w+)\s(\w+)/, "$2 $1");
// Returns "Camp Code"

去除字符串两端的空格

let hello = "   Hello, World!  ";
let wsRegex = /^\s+(\S.*\S)\s+$/;
let result = hello.replace(wsRegex, "$1");

ML15 | Python与Js模型互转

Thu, 30 Apr 2020 00:00:00 GMT

Python模型

通过 Python版 Tensorflow/ Keras生成模型
类型包括： Tensorflow Saved Model、 Keras HDF5mode等
获取：开源网站下载/算法同事提供

Javascript模型

可以在 TensorflowJs中运行的模型
类型包括： tijs layers model， tojs graph model等
获取：开源网站/通过TFJS生成/由 Python模型转化而来

为什么要互转

Python to JavaScript： JavaScript模型可以在浏览器中运行
JavaScript to Python：少见，为了在更多平台运行
JavaScript to JavaScript：分片/量化/加速

TensorFlow.js Converter

命令行转换器
依赖Python-3.6.8（可以使用Anaconda工具创建环境
在命令行指定输入输出的路径和模型格式即可
地址

JavaScript：分片/量化/加速

分片：将模型切分，提升加载速度
量化：通过牺牲一部分精度，压缩模型的大小
加速：将模型转换为tfjs_graph_model格式可以加速模型

Vue2状态管理 & Vuex总结

Thu, 30 Apr 2020 00:00:00 GMT

Vue状态管理 & Vuex

单向数据流

**state：**驱动应用的数据源；
**view：**以声明方式将 state 映射到视图；
**actions：**响应在 view 上的用户输入导致的state变化。

多组件共享状态的需求：

多个视图依赖于同一状态：传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
来自不同视图的行为需要变更同一状态：父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码

（共享状态，不仅仅是多组件读取同一状态，也包含多组件变更同一状态）

基于state的简单状态管理

在vue实例外的作用域，定义一个state对象，作为共享状态

let publicState = {};
let vm1 = new Vue({
  name: "vm1",
  data: publicState,
});
let vm2 = new Vue({
  name: "vm2",
  data: publicState,
});

简单的store模式

let store = {
  state: {
    a: "",
  },
  setStateA() {},
  clearStateA() {},
};

//把store.state放在vue实例的data里

let vm1 = new Vue({
  name: "vm1",
  data: {
    privateState: {}, //组件的私有状态
    publicState: store.state, //实例外的共有状态
  },
});

let vm2 = new Vue({
  name: "vm2",
  data: {
    privateState: {},
    publicState: store.state,
  },
});

组件们可以共享store中的状态，也可以通过actions变更状态

因为共享状态放在组件的data里，store变化也会驱动组件view变更

Vuex基本思想

把组件的共享状态抽取出来，以一个全局单例模式管理

在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

Vuex的使用&子组件注入

src/store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
});

/src/main.js

import Vue from "vue";
import store from "@/store";
import router from "@/router";
import App from "@/App";

// store作为选项传入根组件，是将$store注入所有子组件
// 子组件都可以通过this.$store访问全局store

// eslint-disable-next-line no-new
new Vue({
  el: "#app",
  store,
  router,
  render: (h) => h(App),
});

Vuex的核心思想一：state

Vuex 使用单一状态树——用一个对象（store）就包含了全部的应用层级状态。

至此它便作为一个“唯一数据源 (SSOT)”而存在。

这也意味着，每个应用将仅仅包含一个 store 实例。

单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

子组件获取state & mapState辅助函数

/src/page/home.vue

 <template>
  <div id="home">
    <div>count：{{count}}</div>
    <div>count1：{{count1}}</div>
    <div>count3：{{count3}}</div>
    <div>count4：{{count4}}</div>
    <div>count5：{{count5}}</div>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'home',
  data () {
    return {
      message: 'hello',
      localCount: 1
    }
  },
  computed: {
    // 方式1：直接从Vue原型链上获取$store
    count1 () {
      return this.$store.state.count
    },
    // 方式2：mapState方法传状态名数组
    ...mapState(['count']),
    ...mapState({
      // 方式3：mapState传对象，键为状态别名，值为状态名
      count3: 'count',
      // 方式4：mapState传对象，键为getter函数，参数是state，值为箭头函数
      count4: state => state.count,
      // 方式5：mapState传对象，键为getter函数，参数是state，值为普通函数（因为要再函数体内用this）
      count5 (state) {
        return this.localCount + state.count
      }
    })
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  }
}
</script>

Vuex核心思想二：getter

派生状态

类似于vue组件的计算属性，可以从store的state中派生出一些状态

export default new Vuex.Store({
  state: {
    todos: [
      { id: 1, desc: "test1", done: false },
      { id: 2, desc: "test2", done: true },
      { id: 3, desc: "test3", done: false },
    ],
  },
  getters: {
    //getter中可以接受其他getter作为参数
    maxTodoId(state, getters) {
      return state.todos.sort((a, b) => {
        return b.id - a.id;
      })[0].id;
    },
    doneTodoCount(state) {
      return state.todos.filter((todo) => todo.done === true).length;
    },
  },
});

通过this.$store.state.getters属性 / mapGetters访问派生状态

computed: {
  ...mapGetters(['doneTodoCount']),
  doneTodoCount2 () {
    return this.$store.getters.doneTodoCount
  }
},

getter传参：让getter返回函数

getters: {
  getTodoBySearch: (state) => (s) => {
    return state.todos.filter((todo) => {
      return (todo.id + todo.desc).indexOf(s) >= 0;
    });
  };
}

Vuex核心思想三：mutation

提交mutation

组件不能直接更改Vuex store中的状态，而是要提交(commit)变更(mutations)

export default {
  name: "home",
  data() {
    return {};
  },
  methods: {
    addTodo(e) {
      if (e.keyCode === 13 && this.model.desc) {
        this.$store.commit("addTodo", this.model.desc);
        this.model.desc = "";
      }
    },
  },
};

其中addTodo就是在store的mutation中定义的一种变更：

mutations: {
  addTodo (state, desc) {
    const maxTodoId = state.todos.sort((a, b) => { return b.id - a.id })[0].id
    const todo = {
      desc,
      id: maxTodoId + 1,
      done: false
    }
    state.todos.push(todo)
  }
}

提交载荷（Payload）

可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload）：

// src/store/index.js
mutations: {
  increment (state, payload) {

  }
}

// src/page/home.vue
let payload={a:1,b:2}
store.commit('increment', payload)

Mutation 需遵守 Vue 的响应规则

Vuex 的 store 中的状态是响应式的，

当我们变更状态时，

监视状态的 Vue 组件也会自动更新,

因此 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项

最好提前在你的 store 中初始化好所有所需属性。
当需要在对象上添加新属性时，应该
- 使用 Vue.set(obj, 'newProp', 123)
- 以新对象替换老对象。例如，利用**对象展开运算符**：
```
state.obj = { ...state.obj, newProp: 123 };
```

使用常量替代 Mutation 事件类型

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

Mutation 必须是同步函数

devtools捕捉会mutations记录，每次记录前一状态+后一状态的快照

如果mutation里是异步的函数，很可能快照捕捉时，状态还未更改

在回调函数中进行的状态的改变都是不可追踪的

因此很不利于调试

Vuex核心思想四：Action

Action与Mutation类似，不同点：

Action 提交(commit)的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

action函数的定义

//...
actions: {
  addTodo (context) {
    // 可以通过context参数去调用commit，获取state和getters
    // context区别于state（module中会讲到
    setTimeout(() => {
      context.commit('addTodo')
      // context.state
      // context.getters
    }, 1000)
  },
  addTodo2 ({ commit, state, getters }) {
    // 也可以直接用参数解构的方法获取commit，state，getters
    setTimeout(() => {
      commit('addTodo')
    }, 1000)
  }
}
//...

组件分发action（可以带载荷/参数

methods: {
  addTodo (e) {
    this.$store.dispatch('addTodo', payload)
    this.$store.dispatch({
      type: 'addTodo',
      ...payload
    })
  }
}

//action接收payload参数
//action内部也可以dispatch其他action
actions: {
  addTodo2 ({ commit, state, getters, dispatch }, payload) {
    // 也可以直接用参数解构的方法获取commit，state，getters
    setTimeout(() => {
      commit('addTodo')
			//dispatch
    }, 1000)
  }
}

组合action

action可以返回一个promise函数

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

dispatch可以处理action返回的promise，并仍然返回promise

store.dispatch("actionA").then(() => {
  // ...
});

利用await/async编写组合action更加简洁

// 假设 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ commit, dispatch }) {
    await dispatch('actionA')
    commit('gotOtherData', await getOtherData())
  }
}

Vuex核心思想五：Module

当应用较复杂时，应用所有状态集中在一个(store)对象上很臃肿

因此Vuex允许将store按模块来划分，

每个store拥有自己的state、getter、mutations、actions、子模块

// src/store/module/moduleA.js
export default {
  state: {},
  getter: {},
  mutations: {},
  actions: {}
}

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from 'module/moduleA'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    a: moduleA
  },
	...
})

模块内的局部状态state（getter mutation action获取state

对于模块内的getter、mutation函数：

接收的第一个参数：state，指向的是模块内的局部状态

getter函数接收的第三个参数是根节点状态：rootState

对于模块内的action函数:

context.state指向的也是模块的局部状态，根节点的状态为context.rootState

全局命名空间（组件获取getter mutation action

默认情况：模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

带命名空间的模块

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模块
      modules: {
        // 没加namespaced属性，所以继承父模块的命名空间
        myPage: {
          state: { ... },
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 进一步嵌套命名空间
        posts: {
          namespaced: true,

          state: { ... },
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit。

换言之，在使用模块内容（module assets，即指模块内的state、getter、mutation、action）时不需要在同一模块内额外添加空间名前缀。

所以：更改 namespaced 属性后不需要修改模块内的代码

带命名空间的模块内访问全局内容(Global Assets)

Global Assets即全局的state,getter,mutation,action

getter的第三、第四参数：rootState、rootGetters
action的context参数包含:rootState、rootGetters
全局commit、dispatch：传入参数root:true

带命名空间的模块注册全局 action

传入root选项，值为true

...
someAction:{
	root:true,
	handler:()=>{}
}
...

mapState, mapGetters, mapActions 和 mapMutations操作命名空间：

// 方法一：直接在状态名前加命名空间
computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    'some/nested/module/foo', // -> this['some/nested/module/foo']()
    'some/nested/module/bar' // -> this['some/nested/module/bar']()
  ])
}

// 方法二：也可以把共有的命名空间传给函数第一个参数
computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

//方法三：利用createNamespacedHelpers，传入命名空间，会返回已经绑定命名空间的map方法
import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

动态注册模块

在store已经实例化后，如果想添加模块，可以用registerModule方法

import Vuex from "vuex";

const store = new Vuex.Store({
  /* 选项 */
});

// 注册模块 `myModule`
store.registerModule("myModule", {
  // ...
});
// 注册嵌套模块 `nested/myModule`
store.registerModule(["nested", "myModule"], {
  // ...
});

卸载动态模块：unregisterModule（不能卸载静态模块

判断模块是否存在：hasModule

纯对象state&函数声明state

纯对象state可以通过引用被访问，造成状态对象被修改时 store 或模块间数据互相污染的问题。

因此可以和vue组件内的data一样，使用函数来声明state：

const MyReusableModule = {
  state() {
    return {
      foo: "bar",
    };
  },
  // mutation, action 和 getter 等等...
};

严格模式

在非生产环境开启严格模式，在任何尝试不通过mutation直接修改state的操作时，都会抛出错误

v-model & Vuex的state

v-model直接绑定Vuex上的state，在严格模式下会报错，因为双向绑定的机制会直接尝试修改state，而不是通过mutation，解决方法是，绑定一个设置了getter和setter的计算属性：

...
computed:{
	attr:{
		getter(){
			return this.$store.state.attr
		},
		setter(val){
			this.$store.commit('updateAttr',val)
		}
	}
}

ML14 | 声控轮播图 - 语音识别迁移学习

Wed, 29 Apr 2020 00:00:00 GMT

在浏览器中收集中文语音训练数据

html

<script src="script.js"></script>
<button onclick="collect(this)">上一张</button>
<button onclick="collect(this)">下一张</button>
<button onclick="collect(this)">背景噪音</button>
<button onclick="save()">保存</button>
<pre id="count"></pre>
<button onclick="train()">训练</button>
<br /><br />
监听开关：<input type="checkbox" onchange="toggle(this.checked)" />

import * as speechCommands from "@tensorflow-models/speech-commands";
import * as tfvis from "@tensorflow/tfjs-vis";

const MODEL_PATH = "http://127.0.0.1:8080";
let transferRecognizer;

window.onload = async () => {
  const recognizer = speechCommands.create(
    "BROWSER_FFT", //浏览器的傅里叶变换(将声音转为声谱数据
    null,
    MODEL_PATH + "/speech/model.json",
    MODEL_PATH + "/speech/metadata.json",
  );
  await recognizer.ensureModelLoaded();

  //使用createTransfer接口创建迁移模型
  transferRecognizer = recognizer.createTransfer("轮播图");
};

window.collect = async (btn) => {
  btn.disabled = true;
  const label = btn.innerText;
  //用collectExample接口收集语音数据，传入语音命令名称，背景音名称是固定的_background_noise_
  await transferRecognizer.collectExample(
    label === "背景噪音" ? "_background_noise_" : label,
  );
  btn.disabled = false;

  //将收集的数据可视化
  document.querySelector("#count").innerHTML = JSON.stringify(
    transferRecognizer.countExamples(),
    null,
    2,
  );
};

语音训练数据的保存

window.save = () => {
  //用serializeExamples接口将收集的样例数据序列化
  const arrayBuffer = transferRecognizer.serializeExamples();
  const blob = new Blob([arrayBuffer]);
  const link = document.createElement("a");
  link.href = window.URL.createObjectURL(blob);
  link.download = "data.bin";
  link.click();
};

加载数据，用speech commands包行迁移学习，训练

window.onload = async () => {
  const recognizer = speechCommands.create(
    "BROWSER_FFT",
    null,
    MODEL_PATH + "/speech/model.json",
    MODEL_PATH + "/speech/metadata.json",
  );
  await recognizer.ensureModelLoaded();
  transferRecognizer = recognizer.createTransfer("轮播图");

  //用fetch方法从本静态服务器拿到样例数据
  const res = await fetch(MODEL_PATH + "/slider/data.bin");
  //转为arrayBuffer格式
  const arrayBuffer = await res.arrayBuffer();
  //模型加载样例数据
  transferRecognizer.loadExamples(arrayBuffer);
  //模型训练
  await transferRecognizer.train({ epochs: 30 });
  console.log("done");
};

轮播图html

html

<script src="script.js"></script>
监听开关：<input type="checkbox" onchange="toggle(this.checked)" />

<style>
  .slider {
    width: 600px;
    overflow: hidden;
    margin: 10px auto;
  }
  .slider > div {
    display: flex;
    align-items: center;
  }
</style>
<div class="slider">
  <div>
    <img
      loading="lazy"
      decoding="async"
      src="https://cdn.pixabay.com/photo/2019/10/29/15/57/vancouver-4587302__480.jpg"
      alt=""
      width="600"
    />
    <img
      loading="lazy"
      decoding="async"
      src="https://cdn.pixabay.com/photo/2019/10/31/07/14/coffee-4591159__480.jpg"
      alt=""
      width="600"
    />
    <img
      loading="lazy"
      decoding="async"
      src="https://cdn.pixabay.com/photo/2019/11/01/11/08/landscape-4593909__480.jpg"
      alt=""
      width="600"
    />
    <img
      loading="lazy"
      decoding="async"
      src="https://cdn.pixabay.com/photo/2019/11/02/21/45/maple-leaf-4597501__480.jpg"
      alt=""
      width="600"
    />
    <img
      loading="lazy"
      decoding="async"
      src="https://cdn.pixabay.com/photo/2019/11/02/03/13/in-xinjiang-4595560__480.jpg"
      alt=""
      width="600"
    />
    <img
      loading="lazy"
      decoding="async"
      src="https://cdn.pixabay.com/photo/2019/11/01/22/45/reschensee-4595385__480.jpg"
      alt=""
      width="600"
    />
  </div>
</div>

监听&控制轮播

await transferRecognizer.listen(
  (result) => {
    const { scores } = result;
    const labels = transferRecognizer.wordLabels();
    const index = scores.indexOf(Math.max(...scores));
    window.play(labels[index]);
  },
  {
    overlapFactor: 0,
    probabilityThreshold: 0.5,
  },
);

window.play = (label) => {
  const div = document.querySelector(".slider>div");
  if (label === "上一张") {
    if (curIndex === 0) {
      return;
    }
    curIndex -= 1;
  } else {
    if (curIndex === document.querySelectorAll("img").length - 1) {
      return;
    }
    curIndex += 1;
  }
  div.style.transition = "transform 1s";
  div.style.transform = `translateX(-${100 * curIndex}%)`;
};

高效使用VSCode

Tue, 28 Apr 2020 00:00:00 GMT

记录几个高光点

Setting Sync插件：使用gist，同步一切你的个性化配置(user settings,not workspace settings,workspace settings建议存在项目的代码仓库里使团队成员有统一的配置)，即使切换环境，也可以在几分钟内得到一个一模一样的完全得心应手的IDE（gist已经被墙
Project Manager插件：在侧边栏一键切换/多开工作区/项目，只需要一个简单的配置文件
侧边栏建议放在右侧，放在左侧时，侧边栏的隐藏/显示，会使整个代码区移动

视频讲的很细很全，不做赘述。很多有用的tips

ML13 | 用tf官方的预训练模型-语音识别

Tue, 28 Apr 2020 00:00:00 GMT

语音识别

模型接受声音信息，输出分类信息
声音在计算机里是声谱图，因此也可以使用卷积神经网络

加载预训练语音识别模型(tf官网的模型)

开本地静态服务器，获取语音识别模型文件
使用tfjs-models的speech-commands包加载模型 (tfjs-models是tf官方的模型库)

进行语音识别

html

<script src="script.js"></script>
<style>
  #result > div {
    float: left;
    padding: 20px;
  }
</style>
<div id="result"></div>

// 引入tf-models库提供的语音命令npm包
import * as speechCommands from "@tensorflow-models/speech-commands";

//本地静态文件服务器地址
const MODEL_PATH = "http://127.0.0.1:8080/speech";

window.onload = async () => {
  // speechCommands文档：
  // https://github.com/tensorflow/tfjs-models/tree/master/speech-commands
  const recognizer = speechCommands.create(
    "BROWSER_FFT", //傅里叶变换
    null,
    MODEL_PATH + "/model.json",
    MODEL_PATH + "/metadata.json",
  );

  //加载模型
  await recognizer.ensureModelLoaded();

  //显示模型能识别的语音类型
  const labels = recognizer.wordLabels().slice(2);
  const resultEl = document.querySelector("#result");
  resultEl.innerHTML = labels
    .map(
      (l) => `
        <div>${l}</div>
	`,
    )
    .join("");

  //浏览器监听语音
  recognizer.listen(
    (result) => {
      const { scores } = result;
      const maxValue = Math.max(...scores);
      //拿到分类中 可能性最大的单词
      const index = scores.indexOf(maxValue) - 2;
      //突出显示
      resultEl.innerHTML = labels
        .map(
          (l, i) => `
        <div style="background: ${i === index && "green"}">${l}</div>
        `,
        )
        .join("");
    },
    {
      overlapFactor: 0.3, //识别频率
      probabilityThreshold: 0.9, //准确度阈值，超过0.9的准确度 就执行参数一的函数
    },
  );
};

效果

ML12 | 基于迁移学习的图片分类-商标识别

Mon, 27 Apr 2020 00:00:00 GMT

迁移学习

是什么：把已训练好的模型参数迁移到新的模型来帮助新模型训练
为什么：深度学习模型参数多，从头训练成本高
怎么做：删除原始模型的最后一层，基于此截断模型的输出训练一个新的（通常相当浅的）模型

加载商标训练数据并可视化

商标训练素材
在本地为素材建立静态http服务器

hs data --cors

编写JS脚本加载训练图片及其标签

// index.html
<script src="script.js"></script>
<input type="file" onchange="predict(this.files[0])" />
<button onclick="download()">下载模型</button>

// data.js
const loadImg = (src) => {
  return new Promise((resolve) => {
    const img = document.createElement("img");
    img.crossOrigin = "anonymous";
    img.src = src;
    img.width = 224; //以mobileNet为截断模型，其接收图片尺寸为224
    img.height = 224;
    img.onload = () => reslove(img);
  });
};

// 返回Promise
export const getInputs = async () => {
  const loadImgs = [];
  const labels = [];
  for (let i = 0; i < 30; i += 1) {
    ["android", "apple", "windows"].forEach((label) => {
      const imgP = loadImg(
        `http://127.0.0.1:8080/brand/train/${label}-${index}.jpg`,
      );
      loadImgs.push(imgP);
      labels.push([
        label === "android" ? 1 : 0,
        label === "apple" ? 1 : 0,
        label === "windows" ? 1 : 0,
      ]);
    });
  }
  const inputs = await Promise.all(loadImgs);
  return {
    inputs,
    labels,
  };
};

// script.js
import * as tf from "@tensorflow/tfjs";
import * as tfvis from "@tensorflow/tfjs-vis";
import { getInputs } from "./data";
import { img2x, file2img } from "./utils";

const MOBILENET_MODEL_PATH =
  "http://127.0.0.1:8080/mobilenet/web_model/model.json";
const NUM_CLASSES = 3;
const BRAND_CLASSES = ["android", "apple", "windows"];

window.onload = async () => {
  const { inputs, labels } = await getInputs();
  // console.log([inputs,labels])

  //将加载的图片素材可视化
  const surface = tfvis
    .visor()
    .surface({ name: "输入示例", styles: { height: 250 } });
  inputs.forEach((img) => {
    surface.drawArea.appendChild(img);
  });
};

可视化训练图片：

加载预训练好的模型Mobilenet

//加载预训练好的模型Mobilenet
const mobilenet = await tf.loadLayersModel(MOBILENET_MODEL_PATH);

//mobilenet的方法，给出其神经网络的概览
mobilenet.summary();

定义截断模型

//获取中间层
const layer = mobilenet.getLayer("conv_pw_13_relu");

//定义一个截断模型truncatedMobilenet
const truncatedMobilenet = tf.model({
  inputs: mobilenet.inputs,
  outputs: layer.output,
});

定义双层的迁移模型

//定义一个模型
const model = tf.sequential();

//添加一个flatten层（将截断模型提取的高维特征提取成一维向量，这一层没有参数，起转换作用
model.add(
  tf.layers.flatten({
    inputShape: layer.outputShape.slice(1),
  }),
);

//添加一个全链接层：用于训练我们的商标图片
model.add(
  tf.layers.dense({
    units: 10,
    activation: "relu",
  }),
);

//添加一个全链接层：用于做多分类
model.add(
  tf.layers.dense({
    units: NUM_CLASSES,
    activation: "softmax",
  }),
);

//设置损失函数：分类交叉熵损失函数，优化器为adam
model.compile({ loss: "categoricalCrossentropy", optimizer: tf.train.adam() });

先用截断模型训练数据，转为可以用于迁移模型的数据

//训练数据 先经过截断模型，转为可以用于迁移模型的数据
const { xs, ys } = tf.tidy(() => {
  const xs = tf.concat(
    inputs.map((imgEl) => truncatedMobilenet.predict(img2x(imgEl))),
  );
  const ys = tf.tensor(labels);
  return { xs, ys };
});

训练迁移模型

//训练迁移模型
await model.fit(xs, ys, {
  epochs: 20,
  callbacks: tfvis.show.fitCallbacks({ name: "训练效果" }, ["loss"], {
    callbacks: ["onEpochEnd"],
  }),
});

预测

window.predict = async (file) => {
  const img = await file2img(file);
  document.body.appendChild(img);
  const pred = tf.tidy(() => {
    const x = img2x(img);
    const input = truncatedMobilenet.predict(x);
    return model.predict(input);
  });

  const index = pred.argMax(1).dataSync()[0];
  setTimeout(() => {
    alert(`预测结果：${BRAND_CLASSES[index]}`);
  }, 0);
};

模型的保存和加载

保存：把训练好的模型保存成文件或者 local storage变量

window.download = async () => {
    await model.save('downloads://model');
};

加载：从文件或者 local storage中加载模型
原因：无需重复训练，便于复用到其他应用中

ML11 | 使用预训练模型图片分类

Sun, 26 Apr 2020 00:00:00 GMT

预训练模型是什么

预先训练好的模型，无需训练，即可预测
在Tensorflow.js中可以调用Web格式的模型文件

MobileNet模型

一种卷积神经网络模型,能识别1000种物体图片
模型文件小，响应速度块，准确度略低

引入模型文件

为资源启动本地静态资源服务器(文件位于本地代码仓库/data下)

hs data --cors

引入资源

const MOBILENET_MODEL_PATH = 'http://127.0.0.1:8080/mobilenet/web_model/model.json';

引入物体类型

import { IMAGENET_CLASSES } from './imagenet_classes';

用tfjs加载模型

//用tf的loadLayersModel加载模型
const model = await tf.loadLayersModel(MOBILENET_MODEL_PATH);

前端输入带预测数据

html

<script src="script.js"></script>
<input type="file" onchange="predict(this.files[0])" />

使用模型进行预测

// ./util.js
export function file2img(f) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(f);
    reader.onload = (e) => {
      const img = document.createElement("img");
      img.src = e.target.result;
      img.width = 224;
      img.height = 224;
      img.onload = () => resolve(img);
    };
  });
}

// ./script.js

window.predict = async (file) => {
  //从文件转换为htmlElement
  const img = await file2img(file);
  document.body.appendChild(img);
  const pred = tf.tidy(() => {
    //tidy优化webGl内存
    const input = tf.browser
      .fromPixels(img) //转换为tensor
      .toFloat() //整数转为浮点数
      .sub(255 / 2) //归一化
      .div(255 / 2)
      .reshape([1, 224, 224, 3]); //一个图片的格式
    return model.predict(input); //预测
  });

  const index = pred.argMax(1).dataSync()[0];

  // setTimeout 0 使ui不被脚本阻塞
  setTimeout(() => {
    alert(`预测结果：${IMAGENET_CLASSES[index]}`);
  }, 0);
};

ML10 | 训练卷积神经网络识别手写数字

Sat, 25 Apr 2020 00:00:00 GMT

加载MNIST数据集

MNIST:巨大的训练集雪碧图,以手写数字图片组成
资源文件位置

/js-ml-code/data/mnist
  mnist_images.png
  mnist_labels_uint8

给资源文件建立服务器供解析脚本访问

hs data --cors

其中--cors表示允许跨域访问

加载20组数据

import * as tf from "@tensorflow/tfjs";
import * as tfvis from "@tensorflow/tfjs-vis";
import { MnistData } from "./data";

window.onload = async () => {
  const data = new MnistData();
  await data.load(); //加载资源
  const examples = data.nextTestBatch(20); //获取20组验证集数据
  console.log(examples);
};

打印出的examples：
tensorflow的splice api
用tensorflow的api和canvas显示出20组图片

const surface = tfvis.visor().surface({ name: "输入示例" });
for (let i = 0; i < 20; i += 1) {
  //截取出单个图片：从第1维的第i项+第二维的第1项开始截取，第一维截取长度是1，第二维截取长度是784
  //console.log(examples.xs.slice([i, 0], [1, 784]))

  //tf.tidy：用于优化webGl内存，防止tensor数据量过大导致内存泄漏

  //tf.browser.toPixels：转换成浏览器能识别的像素格式，传入二位参数就是黑白图片，三维就是彩色的

  //tensor.reshape：tensor格式转换
  const imageTensor = tf.tidy(() => {
    return examples.xs.slice([i, 0], [1, 784]).reshape([28, 28, 1]); //将一维数组转换成三维黑白图片格式
  });

  const canvas = document.createElement("canvas");
  canvas.width = 28;
  canvas.height = 28;
  canvas.style = "margin: 4px";
  await tf.browser.toPixels(imageTensor, canvas);
  surface.drawArea.appendChild(canvas);
}

显示效果：

卷积神经网络

为什么要用卷积神经网络

图片数据量大，运算量大，例如一个200*200像素的彩色图片：200*200*3=120,000
卷积神经网络能模拟人类的视觉处理流程，高效提取特征

卷积神经网络的结构

卷积层

image kernels网站了解图像卷积核
图像卷积核是一个小的矩阵，用于施加一些效果，例如在Photoshop中可能会看到的效果，例如模糊，锐化，勾勒出轮廓或压花。它们还用于机器学习中的“特征提取”，这是一种确定图像最重要部分的技术。在这种情况下，该过程通常被称为“卷积”
图片上的3X3的小矩阵，就是用于卷积以提取图像特征的图像卷积核
使用多个卷积核(filter/kernel)对图像进行卷积操作，提取多种特征并组合
卷积层有权重，需要训练，其权重就是卷积核

池化层

优化层
最大池化层用于提取最强的特征
扩大感受视野，减少计算量
池化层是固定的，不需要训练

dense全链接层

作为输出层
作为分类器
有权重，需要训练

构建卷积神经网络代码

const model = tf.sequential();
//添加一个二位卷积层
model.add(
  tf.layers.conv2d({
    inputShape: [28, 28, 1],
    kernelSize: 5, //卷积核的大小是5X5的矩阵
    filters: 8, //应用8种图像卷积核
    strides: 1, //移动步长，每一个像素单元都进行卷积操作
    activation: "relu", //激活函数，移除掉无用的特征（特征<0就废弃
    kernelInitializer: "varianceScaling", //可以不设置，设置了可以加快收敛速度
  }),
);

//最大池化层
model.add(
  tf.layers.maxPool2d({
    poolSize: [2, 2], //尺寸是2X2
    strides: [2, 2], //移动步长，每隔两个像素单元进行一次卷积操作
  }),
);

// 重复上述两个层
model.add(
  tf.layers.conv2d({
    kernelSize: 5,
    filters: 16, //需要提取更多特征
    strides: 1,
    activation: "relu",
    kernelInitializer: "varianceScaling",
  }),
);
model.add(
  tf.layers.maxPool2d({
    poolSize: [2, 2],
    strides: [2, 2],
  }),
);

//flatten层用于将多维的特征数据，转换为一维的分类数据，传入dense层
model.add(tf.layers.flatten());

model.add(
  tf.layers.dense({
    units: 10, //最终输出0-9十个分类
    activation: "softmax",
    kernelInitializer: "varianceScaling",
  }),
);

训练模型

//训练参数
model.compile({
  loss: "categoricalCrossentropy", //交叉熵损失函数
  optimizer: tf.train.adam(), //优化器
  metrics: ["accuracy"], //准确度度量
});

//训练集数据
const [trainXs, trainYs] = tf.tidy(() => {
  const d = data.nextTrainBatch(1000);
  return [d.xs.reshape([1000, 28, 28, 1]), d.labels];
});

//验证集数据
const [testXs, testYs] = tf.tidy(() => {
  const d = data.nextTestBatch(200);
  return [d.xs.reshape([200, 28, 28, 1]), d.labels];
});

//训练
await model.fit(trainXs, trainYs, {
  validationData: [testXs, testYs],
  batchSize: 500,
  epochs: 50,
  callbacks: tfvis.show.fitCallbacks(
    { name: "训练效果" },
    ["loss", "val_loss", "acc", "val_acc"],
    { callbacks: ["onEpochEnd"] },
  ),
});

训练效果：

使用模型预测识别canvas绘制数字

html:

<script src="script.js"></script>
<canvas width="300" height="300" style="border: 2px solid #666;"></canvas>
<br>
<button onclick="window.clear();" style="margin: 4px;">清除</button>
<button onclick="window.predict();" style="margin: 4px;">预测</button>

const canvas = document.querySelector("canvas");

canvas.addEventListener("mousemove", (e) => {
  if (e.buttons === 1) {
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(255,255,255)";
    ctx.fillRect(e.offsetX, e.offsetY, 25, 25);
  }
});

//黑底画板
window.clear = () => {
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0, 0, 300, 300);
};

clear();

进行预测：

window.predict = () => {
  const input = tf.tidy(() => {
    return tf.image
      .resizeBilinear(
        //转换图像tensor尺寸
        tf.browser.fromPixels(canvas), //canvas转换为tensor
        [28, 28], //转换成28*28
        true,
      )
      .slice([0, 0, 0], [28, 28, 1]) //canvas图片是彩色图片，通过slice转换为黑白图片
      .toFloat() //训练数据进行过归一化，因此预测值也要归一化
      .div(255) //归一化
      .reshape([1, 28, 28, 1]); //和神经网络第一层的输入格式统一
  });
  const pred = model.predict(input).argMax(1);
  alert(`预测结果为 ${pred.dataSync()[0]}`);
};

总结：这一节有两个难点，一是卷积神经网络的构建，重在理解图像卷积核;二是图像与tensor格式的转换，需要多加练习与斟酌;
本地训练结果正确率大概70%，可以通过增加训练集数据和训练次数来提升效果

ML09 | 欠拟合&过拟合

Fri, 24 Apr 2020 00:00:00 GMT

欠拟合

数据过于复杂，但是神经网络模型过于简单

无论训练多久，训练损失始终降不下去

过拟合

模型过于复杂，把训练集噪声数据都拟合进去

过拟合损失曲线，红色代表验证集，蓝色代表训练集

实操模拟欠拟合&过拟合

加载带有噪音的二分类数据集（训练集与验证集）
使用不同神经网络演示过拟合&欠拟合
过拟合应对法：早停法、权重衰减、丢弃法

加载带有噪音的二分类数据集（训练集与验证集）

脚本原理

生成正态分布(高斯分布)的样本数据

function normalRandom(mean = 0, variance = 1) {
  let v1, v2, s;
  do {
    v1 = 2 * Math.random() - 1;
    v2 = 2 * Math.random() - 1;
    s = v1 * v1 + v2 * v2;
  } while (s > 1);

  let result = Math.sqrt((-2 * Math.log(s)) / s) * v1;
  return mean + Math.sqrt(variance) * result;
}

正态分布两边低的数据看作噪音数据，中间高的数据视为正常数据

通过调整方差调整噪音量

用脚本生成带有噪音的二分类数据集

import * as tf from "@tensorflow/tfjs";
import * as tfvis from "@tensorflow/tfjs-vis";
import { getData } from "./data";

window.onload = async () => {
  const data = getData(200, 3);
};

可视化数据集

tfvis.render.scatterplot(
  { name: "训练数据" },
  {
    values: [
      data.filter((p) => p.label === 1),
      data.filter((p) => p.label === 0),
    ],
  },
);

使用不同神经网络演示过拟合

const data = getData(200, 2);

tfvis.render.scatterplot(
  { name: "训练数据" },
  {
    values: [
      data.filter((p) => p.label === 1),
      data.filter((p) => p.label === 0),
    ],
  },
);

const model = tf.sequential();

//第一层隐藏层
model.add(
  tf.layers.dense({
    units: 10,
    inputShape: [2], //长度为2的一维数组
    activation: "tanh",
  }),
);

//输出层
model.add(
  tf.layers.dense({
    units: 1,
    activation: "sigmoid",
  }),
);

//设置损失函数&优化器
model.compile({
  loss: tf.losses.logLoss,
  optimizer: tf.train.adam(0.1),
});

const inputs = tf.tensor(data.map((p) => [p.x, p.y]));
const labels = tf.tensor(data.map((p) => p.label));

await model.fit(inputs, labels, {
  validationSplit: 0.2,
  epochs: 200,
  callbacks: tfvis.show.fitCallbacks(
    { name: "训练效果" },
    ["loss", "val_loss"],
    { callbacks: ["onEpochEnd"] },
  ),
});

过拟合应对法：早停法

在训练出现过拟合时及时手动停止训练

过拟合应对法：权重衰减法(设置L2正则化

将过于复杂的模型权重降低

model.add(
  tf.layers.dense({
    units: 10,
    inputShape: [2], //长度为2的一维数组
    activation: "tanh",
    kernelRegularizer: tf.regularizers.l2({ l2: 1 }), //设置权重衰减
  }),
);

过拟合应对法：丢弃法

在隐藏层和输出层之间添加一个丢弃层

//添加丢弃层，降低训练集复杂度
model.add(tf.layers.dropout({ rate: 0.9 }));

Notion为什么能让我放弃手帐

Sun, 12 Apr 2020 00:00:00 GMT

今天在逛今日热榜的时候，看到了一篇知乎的文章“我的最后一款笔记应用-Notion”，是种草notion的。

一两年前notion刚火的时候，因为被其极简可爱的颜值吸引，我试用过一次，那时候我已经是“有道云笔记”的深度用户了，备份类、笔记类、小应用类、电子书类、代码类全都放在有道云笔记上，开了年会员加持，容量大、网速稳定、体验感功能性都没有缺陷，觉得notion仅仅适合做笔记、做管理，并不适合我从有道云笔记转型，而且刚刚起步的产品，还有这很多细节上体验不好的地方。

直到今天，notion这款应用又重新进入我的视野，我被吸引了。

原因是，近两年来，我一直在尝试用手帐的方式去做自我管理：每年都要换本子，重新set up年目标、年总结、影单、书单、学习路径、愿望清单、资产、习惯、体重等等的追踪记录，每个月也要做set up的工作，包括月封面、月历、周历、每日记录......

即使中间我从普通手帐，转型到了最简洁的Bullet Journal，差别也仅仅是风格变成了极简，不需要花哨的涂涂画画，但也需要耗时耗精力的精心维护，花了很多时间在重复的工作：重复的画track表格、画年历月历、每年新建一些需要长期维护的项目（例如愿望清单、书单影单都不适合以年为维度记录，我更倾向于认为这些是需要以人生为维度去记录积累的），还需要每天带着一堆文具和厚厚的一个本子。

低效、冗余、耗精力这些弊端都一直是我的心头草，仅仅是靠着对手帐的兴趣才维持了两年时间。

两年后再接触到notion，又有了新的体验，这两年notion团队做出了卓越的努力，不断的优化更新，让当初新露头角毛毛糙糙的notion，在用户体验上有了华丽变身，更细致，更贴近用户，客户端也全端兼容了。

当然，对于我来说，notion的亮点不光在于颜值和用户体验，更重要的，是它的“模块化”的思想，设计新颖又实用的“数据库”模式，文档（Notion Page）之间的灵活链接，以及对markdown的友好支持。

模块化思想，把整个文档拆分成“块”（block），可以随意拖动排版，所有“块”都支持30多种媒体类型，包括文字、标题、多种list、文档链接（Notion Page）、团队成员、日期/提醒、图片视频、地图、Github Gist片段、数据库链接等等，这些特性让Notion既灵活又功能丰富。

数据库模式，可以在一张数据表上保留所有数据记录。以表格、看板、画廊、日历等视图展现，一次创建，多处引用。例如创建一张待办事项表，就可以通过简单的引用数据表+新增视图+筛选，展现出“今日待办事项、团队协作看板、待办日历”等视图。例如创建一张财务收支表，可以展现出“年收入支出、月收入支出、支出类别占比”等视图，这些特性让Notion既高效又细致入微。举个栗子：以下的三张表其实都是同一张数据源。

页面之间的灵活链接，使Notion跳出了“以文件夹格式逐层管理“的固定模式，用户完全可以创建一张灵活排布的目录Page，任意设计分类、排版、跳转。例如我的手帐主页：

最后，我的示例和观点，只展示出了星星点点的用法，还有更多有意思的用法，等待开发～

这是我的邀请链接,欢迎注册使用Notion

注：关于手账的意义：

自我管理，自我规划，自律
记录、温习回忆
自省
记录、调节情绪，解压
用意识控制生活，而非本能

Devtools 老司机养成 - 番外篇 - Devtools中的”VM“

Mon, 06 Apr 2020 00:00:00 GMT

引言

What are those strange and mysterious scripts titled "[VM](XXXX " and where do they come from?

what's vm(xxxx)

VM has no special meaning. It's a dummy name to help us to distinguish code which are not directly tied to a file name, such as code created using eval and friends.

为了标识不能和具体文件直接关联的脚本的虚拟名称，并不是真正的文件，例如 eval 方法所执行的脚本、匿名函数，脚本会被抛入Chrome调试器虚拟机中

Devtools 老司机养成 - 第七篇- Memory 内存

Sun, 05 Apr 2020 00:00:00 GMT

内存 && 内存泄露

内存占用：

allocate 分配内存(eg 声明变量
使用内存
release 释放内存

内存泄漏：

内存泄露-Memory Leak：内存被占用后无法被 release，且无法被垃圾回收器回收
内存泄漏会引起性能问题，且时间越久越严重，因为被占用且无法回收的内存只会增加不会减少
垃圾回收-Garbage Collect-GC：浏览器收回内存。浏览器决定何时进行垃圾回收。回收期间，所有脚本执行都将暂停。因此，如果浏览器经常进行垃圾回收，脚本执行就会被频繁暂停

造成内存泄露常见原因

fogotten timer被遗忘的计时器：例如调用 setInterval()方法一定要加结束条件
Dettached HTMLElement分离的 dom 节点：在 dom 被移除后，dom 变量仍然存在

内存监控 1-Task manager 任务管理器

chorme 浏览器 -> task manager 任务管理器工具中，可以监控每个 tab 页的 js 内存占用大小

Memory 列表示原生内存。DOM 节点存储在原生内存中。如果此值正在增大，则说明正在创建 DOM 节点。
JavaScript Memory列表示 JS 堆。此列包含两个值。实际大小表示页面上的对象正在使用的内存量。如果此数字在增大，要么是正在创建新对象，要么是现有对象正在增长。

内存监控 2-Devtools Performance 面板

在Performance面板记录性能时，勾选memory即可在分析结果中看到 memory 占用情况

//示例1:正常的内存占用与GC

var x = [];

function grow() {
  for (var i = 0; i < 10000; i++) {
    document.body.appendChild(document.createElement("div"));
  }
  x.push(new Array(1000000).join("x"));
}

setInterval(grow, 100);

//示例2:不可被GC的内存泄漏

function grow() {
  // for (var i = 0; i < 10000; i++) {
  //     document.body.appendChild(document.createElement("div"));
  // }
  // x.push(new Array(1000000).join("x"));
  var ul = document.createElement("ul");
  for (var i = 0; i < 10; i++) {
    var li = document.createElement("li");
    ul.appendChild(li);
  }
  detachedTree = ul;
}

setInterval(grow, 1000);

内存监控 3-Devtools Memory 面板

如上图所示，在右侧三种内存分析模式选择一种后，即可点击左上角record开始记录内存

Heap snapshot堆快照，记录当前时间点内存中页面 js 对象和 dom 节点的分配情况
Allocation instrumentation on timeline按时间轴记录内存，可以选记录内存分配调用栈(可以帮助定位到具体分配内存的源码)
Allocation sampling使用抽样方法记录内存分配。具有最小的性能开销，可用于长时间运行的操作。提供了由 JavaScript 执行堆栈细分的良好近似分配。

左上角的垃圾桶图标Collect garbage是强制执行一次垃圾回收，内存监控的最佳实践是在监控内存前执行一次强制垃圾回收
利用上述示例 2 代码，执行时间线 Memory 分析：

扩展

内存相关术语
深入内存分析

Devtools 老司机养成 - 第六篇 Performance 性能面板

Sun, 29 Mar 2020 00:00:00 GMT

Performance面板概览

performance 面板可以用于分析运行时性能(运行时强调的是与页面加载性能相区分)
以隐身模式打开网页（隐身模式可确保 Chrome 以干净的状态运行。例如，排除扩展对性能测量的影响
Junky Animation demo ：性能测试 demo
视图 overview：

RAIL 模型

RAIL 模型是一种性能模型，定义了四个维度的性能分析指标
Response：在100 毫秒以内响应（例如从点按到绘制）
Animation：每秒生成 60 帧，每个帧的工作（从 JS 到绘制）完成时间小于 16 毫秒,达到人眼顺滑（例如滚动拖动都是动画类型）（因为浏览器需要花费时间将新帧绘制到屏幕上，只有 10 毫秒来执行代码）
Idle：利用空闲时间完成推迟的工作（要实现第一条 response 在 100ms 内响应，Main 主线程 JS 工作应该小于 50ms，剩余的时间将主线程的控制从 js 返回给浏览器执行其像素管道、对用户输入作出反应等，因此最佳实践是将 js 的工作分成不大于 50 毫秒的块,如果用户开始交互，优先级最高的事项是响应用户。
Load：在 1000 毫秒以内呈现内容（无需完整加载，启用渐进式渲染，将非必需的加载推迟到空闲时间段
通过 performance 面板，可以得到这四个维度的分析数据

控制区

点击录制按钮或者开始录制并刷新页面按钮,可以在控制区下方得到全部性能分析结果
其中除了最下方的详细信息窗格以外，分析结果都是以时间为轴
可以在 overview 窗格拖动鼠标，选择某段时间的分析结果
滚动鼠标滚轮，缩放/移动选中事件
在火焰图窗格，按住shift，滚动鼠标滚轮，可以上下
在火焰图窗格，也可以直接左右拖动图表
或者用W A S D按键控制缩放移动
Disable JavaScript samples默认情况，在Main主线程的火焰图中，会详细记录 js 函数之间的调用栈，可以开启此选项禁用调用栈记录
Enable advanced paint instrumentation启用高级绘图工具，可以在分析结果的Frames中的每一帧的详细结果中看到Layer选项卡，其中有选中帧的详细图层信息；也可以在Main主线程火焰图中选中绿色的Paint事件，在最底部详细信息的Paint Profile选项卡中，看到详细的页面绘制过程分析
Collect garbage控制器最右的垃圾桶图标，是强制执行垃圾回收，对于监控内存比较有用

FPS 图表 - Frames Per Seconds

FPS 图表中，绿色代表帧率高低，参考RAIL模型，帧率>=60 时，用户能体验的顺滑的网页
红色出现代表有掉帧情况

CPU 图表

CPU 图表中，不同的颜色代表不同事件对 CPU 的占用，颜色信息如图

当 CPU 长时间被占满，就是当前网页性能需要优化的信号

SCREENSHOTS

鼠标在FPS,CPU,NET图表悬浮时，会展示出鼠标对应时间点的网页截屏，左右移动鼠标可以看到网页变化的重播效果

HEAP

在 HEAP 图表中可以看到 JS 内存占用情况，与下方的 memory 窗格中的JS Heap相对应
在 Memory 窗格还可以看到 Document 文档、Nodes DOM 节点、监听器、GPU 内存的习份内存统计

Frames

点击三角箭头展开Frames区域，鼠标悬浮/点击绿色方块，可以看到该特定帧的帧率和渲染耗时，当 FPS 低于 60，表明当前帧的渲染效率较低

FPS 仪表工具

通过more -> more tools -> Rendering 或者 ctrl+shift+p -> rendering 打开Rendering面板

启用FPS meter，即可看到的页面实时帧率

Mian

点击三角箭头展开Main区域，可以看到主线程上事件的火焰图
x 轴是时间，每一块代表一个事件，y 轴代表堆栈，事件的上下堆叠，代表上层事件引发/调用了下层事件

通过调用堆栈，可以找出导致低性能的事件及其源码位置
当事件块出现红色三角，可以点击三角查看该事件的性能相关警告信息，并定位到引起警告的代码

点击Animation Frame Fired事件，可以在最下方Summary窗格查看触发动画事件的详细信息，点击Initiator后的reveal链接，会高亮到引起动画事件的事件

性能相关扩展

网页性能-性能模型/加载/渲染/审计/优化
the-anatomy-of-a-frame - 一个帧的剖析
常见的时间线事件参考

浏览器并发请求数

现象：同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞。
原因：基于端口数量和线程切换开销的考虑，浏览器不可能无限量的并发请求。
导致：有大量请求的站点，响应较慢，因为并发请求会被阻塞。
解决方法：
1. 用不同域名（hash domain，cookie free）例如知乎的图片都是放在zhiimg.com域名下获取的。 cookie free是指，例如知乎主站zhihu.com域名下有很多cookie，换成zhihuimg.com请求图片时，就不会把zhihu上的cookie发过去，减小所需带宽。
2. 减少请求数雪碧图合并压缩css/js（另一个原因是为了减少重绘）利用Cache-Control等缓存静态资源，在更新静态资源时使用不同url或文件名带上版本懒加载，出现再加载

别做正常的傻瓜：让你的每一个行为都得到最优解

Fri, 27 Mar 2020 00:00:00 GMT

简介

作者：奚恺元（Christopher K.Hsee）生长于中国上海，后旅美求学，1993年获耶鲁大学博士学位，现为芝加哥大学商学院终身教授（chair professor）。

他是当代最有成就的行为决策学研究者之一，其研究涉及心理学、行为经济学，管理学、市场学以及幸福学等诸多领域。

他的著作在许多国际期刊上发表，2002年诺贝尔经济学奖得主卡尼曼教授在他的获奖致辞中还特别提到了奚教授的研究贡献。

在北美和中国，他被许多一流大学邀请做过演讲。并广受好评，奚教授有十多年的管理教学经验，他在芝加哥大学开设的管理决策课程备受欢迎。

这本书是豆瓣8.1的行为决策学入门书籍。

通过心理学原理、一些实验数据，指出了常人会犯的一些决策错误，以及如何达到决策理性，让你的每一个行为都得到最优解。

TL; DR —— 先看总结

这是我从3月28号开始，用了接近两个月时间看完的一本书。

总体来说，这本书并没有很强的系统性，不需要建立知识体系，比较适合碎片阅读。

书中十几章内容，分别介绍了不同的决策误区，误区背后的心理学原理，以及如何应对。

书中介绍的一些理论，比如人类心理账户及其对行为的影响、消费决策只应该考虑成本=>价值、边际效应递减、适应性偏见、第一印象相关的定位偏见、联合评估与单独评估的选择...都能对实际生活中的决策起到实际性的、可行的理论指导。

书中介绍的决策误区，都是常人会有的，因为从原理上来看，是人类的本性使然。

但是如果能了解这些误区，知道自己可能犯的错误，就能及时的检视自己，从而做出更多理性的决策。

所以总结来说，这本书还是值得一看的✨。

1. 10元等于两个5元吗? —— 心理账户&决策一致性

心理账户对行为的影响在我们的日常生活中，经常需要做各种各样的决策，在做决策的时候，我们总是为求做到理性，以尽可能地使我们的收益最大化。如何成为一名理性的决策者呢？一名理性的决策者究竟需要具备怎样的基本素质呢？
由于心理账户的存在，正常人常有一些误区：
1. 将等价的钱，根据来源/时间/用途不同，打上不同标记
2. 赌场盈利效应：赢来的钱更倾向于高风险投资
3. 把赢来的钱消费掉，把赚来的钱存起来
4. 大钱小花，小钱大花
心理账户，导致了行为决策不具有一致性
应该：让钱在不同心理账户之间流通
应该：等价的钱，不因为来源/时间/用途不同而打上不同标记

2. 你会买没用的东西吗? —— 消费决策的误区

消费决策中常见的误区我们购买一样东西，衡量是该物品给我们带来的效用和它的价格，然后看是不是值得购买，可是在我们做购买决策的时候，往往会受到交易效用偏见、比例偏见和适应偏见的影响，从而做出不理性的消费决策行为。
做交易决策的无关参考值：
- 参考价-实际价格
- 优惠比例
- 历史促销价格
做决策，不应受到成本->价值外的其他任何因素影响
不因为成本过高而不买有价值的东西，也不因为成本低而买不需要的东西

3. 坚持到底一定是胜利吗? —— 沉没成本

沉没成本：已经无法收回的支出
沉没成本误区人们在决定是否去做一件事的时候，不仅是看这件事对自己有没有好处，而且也看过去已经在这件事情上面有过投入，很多人去挽回已经发生却无法挽回的所谓的成本而做出很多不理性的行为。
应该及时止损
应该根据将来会不会有好处做决策
不让沉没成本困住前进的步伐
保本是错误观念

4. 你有自知之明吗？ —— 过于自信与自知

知人者智，知己者明

绝大多数人，都有过于自信的问题，很多时候，人们并不如自己想象的那么优秀。
做出好的决策，不光要有知识，还要有“知识的知识”，也就是自知：知道自己的知识有哪些局限，哪些是准确的，哪些的需要质疑的
证实偏见：为自己的观点找理由，只关注自己观点一致的证据，不关注不收集与自己决策相对立的证据
过于自信的一个例子：不上相，潜台词就是“我本人长得很美丽，只是照片没有把这些体现出来”，但是事实上，照片是真实的，你本人就是和照片上一样丑

过于自信的优点：

使人积极开心
产生“自我实现预言”效应，即产生良性的心理暗示，引导好的结果
过于自信的人，不会太拘泥于细节，善于抓住问题的大方向

过于自信的缺点：

规划误区：过于自信，对问题或任务轻视，导致延期等规划不合理的问题
对自己的金融知识与判断过于自信会导致在金融市场过于频繁交易（越频繁交易，损失越大
打无准备之仗，松懈，持侥幸心理

应该怎么做：

避免证实偏见，为自己决策的对立面寻找证据，两相比较

5. 你会习以为常吗？—— 适应性偏见

适应性：人类对外界的刺激，会随着时间的推移而减弱。（是普遍存在的现象
适应性偏见：人类低估自己的适应性，从而高估某些事情在一段时间后对自己的影响。
适应性偏见例子：人类以为物质条件的提升，会给自己带来长久的快乐，但其实很快就会适应。

三类难以适应的东西：

极端的东西
人际比较
变化

如何对待适应性偏见:

了解自己对物质性东西的适应性
不要对物质看得过重，有过高期望
多关注精神和心灵层面的东西

6. 存银行还是买股票? —— 风险决策

数学期望值 = 选项的价值✖选项的概率

期望值理论：做决策时，选期望值最大的选项

风险中性：期望值相同的情况，对风险大小无所谓
风险规避：期望值相同的情况，偏好于风险小收益小
风险喜好：期望值相同的情况，偏好与风险大收益大

效用：指消费者从某商品中得到的满足感（主管衡量）

边际效用递减：一种普遍规律，随消费的增多，消费者从每个单位产品的消费中得到的效用逐渐递减。（与上一章所讲的适应性有一定关联）

风险规避与边际效用递减：边际效用递减是风险规避的理论依据

期望效用理论：

选择效用最大的选项
计算方法：某选项的效用 ✖ 概率
效用的计算：由于边际递减规律，其计算可以选择求根函数，把选项的价值作为参数

前景理论：最贴合现实中人类的选择

在得到时，倾向于风险规避
在失去时，倾向于风险喜好
参照点的不同，会影响人类对于得失的判断
通常遵循：损失规避（下一章会讲到）

三种风险决策的理论依据：

期望值理论（由于边际效用递减而不准确）
期望效用理论（最为理性）
前景理论（最贴近现实中人类的风险决策的理论）

7. 损失100元和得到100元，哪个对你影响更大? —— 损失规避

损失规避：同样的东西，失去它所经历的痛苦程度，大于得到它所经历的高兴程度：|U(-x)|>>|U(x)|（得失不对称性）

投资决策的两个心理账户问题：

短时间内评价一个账户的盈亏（不要频繁查看投资账户）
把股票账面上的损失，和股票下跌变现的损失，划分到不同的心理账户

赋予效应：同样的东西，得到时觉得不值钱，拥有了再放弃时就会感到其重要性（eg.无条件退款的营销策略就是利用了这个效应）

安于现状：由于赋予效应，人们把现在拥有的东西加上了很高的价值，不愿意做决策去改变现状

语义效应：用不同语义描述同一件事时，就会做出不同的决策，把一件事描述成“得”或“失”，可以有效的改变人们的选择

8. 损失100元和没有得到100元，那个让你更心痛? —— 未得收益

未得收益和直接损失，从理性的角度来看是一样的，未得收益应该得到重视
盗版知识产品=>也是对知识产权所有者未得收益的损害

9. 谈判中应该让对方先开价吗？ —— 定位调整偏见

定位效应：你对某人某事的第一印象就是一种可以定位的 “锚”(anchor)，一旦定下来，后面接受的信息通常会受到这个锚的影响，这种影响很多情况下是不被察觉的。即使你会根据新的信息来调整自己的判断，但这种调整往往是不充分的，最后你的判断仍然很难逃出第一印象的圈子。
定位调整：大部分判断和决策都建立在不完整的信息基础上，通常我们会先找到一个相关联的信息，再根据这个信息去对决策进行调整。这个过程就是定位调整。通常由于受到定位效应的影响，定位调整是不充分的。
怎么避免：首先意识到自己可能会受到定位效应的影响，再去判断我们的定位调整够不够充分。
“先入为主”的营销策略：商家将单品单价开的很高，再给出所谓的优惠。这个很高的价格就是一个锚，被定很高的位置，商家知道消费者会把这个价格往下调整，但是这个调整通常是不充分的，因此给了商家盈利的空间。
谈判中利用定位效应：
1. 争取先开价
2. 开价越极端越好
3. 在开价之前先提醒对方所开的价是荒唐的，给对方谈价空间

10. 你的孩子会长多高? —— 违背概率规律

集合规律：条件越多，交集越小
先验概率：不因为眼前的信息而忽视客观分布
赌徒谬论：好运和坏运不是交替发生的，是依照概率发生的
中值回归规律：极端事物随时间发展都有往中值回归的趋势
可获得性误区：人们总是对易获得的、突出的信息印象深刻，所以认为其是普遍现象
反向调整法：做判断前，检视自身的可获得性误区，了解自己的局限性，扩展信息获取渠道，尝试做出调整

11. 多一定比少好吗？ —— 联合评估 & 单独评估

联合评估：有参照物，特征被发现、对比、评估，容易找到有价值的、真正值得对比的特征
单独评估：无参照物；易受到一些容易评价&不重要的因素影响；易受极端案例影响而忽视统计数据
不要过度追求联合评：很多东西在我们的生活中的使用场景，都是单独评估
奚式相亲原则：
- 优势在联合评估时更突出
- 敌强我弱；敌强我强 => 单独评估
- 敌弱我弱；敌弱我强 => 联合评估

12. 抓住老鼠的一定是好猫吗？ —— 结果偏见

通常情况，过程是难以衡量的，过程的信息不一定可靠，而结果是鲜明可靠的。我们应该尽量基于可靠的信息来做决策
但结果并不是最好的评价因素，因为通常情况，过程是可控的，结果往往有很多不确定因素
如何解决：给过程添加更多记录和监督机制

13. 钱越多越幸福吗？ —— 财富与幸福

财富的多少和幸福的程度并不成正比

不增加财富却可以增加幸福感的一些原则：

好事一起享受不如分开享受（依据边际效应递减
坏事分开忍受不如一起忍受（依据边际效应递减
大好事小坏事分开经历不如一起经历（负面效应会被正面效应所冲淡
大坏事小好事一起经历不如分开经历（正面效应才不会被负面效应的痛苦所淹没
好事晚说不如早说（等待好事的过程是多巴胺活跃的过程
坏事早说不如晚说（等待坏事的过程是最消磨人意志的
静止的好事不如变动的好事（依据人的适应性规律，并不能为相同的物质方面的东西快乐很久
变动的坏事不如静止的坏事（原理同上

Devtools 老司机养成 - 第五篇- Network 面板

Sun, 22 Mar 2020 00:00:00 GMT

概览

默认情况下，只要 DevTools 处于打开状态，DevTools 就会在 Network 面板中记录所有网络请求。
左上红点按钮：停止记录网络请求
第二个按钮：清空请求记录
录像按钮：页面加载时捕获屏幕截图
过滤按钮：显示/隐藏过滤条件行
View 中的两个按钮：第一个是切换请求列表中每行的显示样式（大小请求行），第二个是显示/隐藏瀑布图
Group By Frame：是否根据不同的 frame 分类显示请求
Preserve Log：保存显示跨页面的加载请求
Disable Cache：禁用浏览器缓存，模拟新用户打开页面的体验
Offline 是模拟断网离线的状态，其后的下拉框可以选择模拟其他网络状况，比如 2G,3G

筛选请求

filter 文本框中可输入请求的属性对请求进行过滤，多个属性用空格分隔
支持过滤的属性：
- domain。仅显示来自指定域的资源。可以使用通配符字符 (*) 纳入多个域。例如，*.com 将显示来自以 .com 结尾的所有域名的资源。 DevTools 会使用其遇到的所有域填充自动填充下拉菜单。
- has-response-header。显示包含指定 HTTP 响应标头的资源。 DevTools 会使用其遇到的所有响应标头填充自动填充下拉菜单。
- is。使用 is:running 可以查找 WebSocket 资源。
- larger-than。显示大于指定大小的资源（以字节为单位）。将值设为 1000 等同于设置为 1k。
- method。显示通过指定 HTTP 方法类型检索的资源。 DevTools 会使用其遇到的所有 HTTP 方法填充下拉菜单。
- mime-type。显示指定 MIME 类型的资源。 DevTools 会使用其遇到的所有 MIME 类型填充下拉菜单。
- mixed-content。显示所有混合内容资源 (mixed-content:all)，或者仅显示当前显示的资源 (mixed-content:displayed)。
- scheme。显示通过未保护 HTTP (scheme:http) 或受保护 HTTPS (scheme:https) 检索的资源。
- set-cookie-domain。显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。 DevTools 会使用其遇到的所有 Cookie 域填充自动填充下拉菜单。
- set-cookie-name。显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。 DevTools 会使用其遇到的所有 Cookie 名称填充自动填充下拉菜单。
- set-cookie-value。显示具有 Set-Cookie 标头并且值与指定值匹配的资源。 DevTools 会使用其遇到的所有 Cookie 值填充自动填充下拉菜单。
- status-code。仅显示 HTTP 状态代码与指定代码匹配的资源。 DevTools 会使用其遇到的所有状态代码填充自动填充下拉菜单。
例如：mime-type:image/gif larger-than:1K 显示大于一千字节的所有 GIF
Hide Data URLs：隐藏 data 类型的 url

瀑布图

瀑布图按时间线展示所有请求
可以用鼠标拖动选中一段时间，只查看改时间线内的请求
瀑布图中有两条竖线，一条蓝色，代表DOMContentLoaded事件发生的事件，一条红色代表load事件发生的时间点

分析请求/请求列表

重播请求：右键点击 Requests 表格中的请求 -> Replay XHR
讲请求复制为 Fetch 代码 -> Copy As Fetch
手动清除浏览器缓存：右键点击 Requests 表格中的任意位置 -> 选择 Clear Browser Cache
手动清除浏览器 Cookie：右键点击 Requests 表格中的任意位置 -> 选择 Clear Browser Cookies
自定义列表中展示的列

请求行排序，默认按照瀑布图 start time 升序排序，即请求发起的时间点：

每条请求，可以看到网络请求以及被清华求资源的全部信息：
- 请求的一般信息：url、HTTP 方法(GET POST 等)、状态码、ip 地址
- 请求相关：请求头、Initiator、Priority
- 响应相关：响应头、响应内容
Initiator：请求的来源/发起者。parser：一般来自解析器解析到的 html 页面内的请求；script：来自脚本文件的请求。鼠标悬浮到 Initiator 列中的文件名上，可以看到发起当前请求的堆栈轨迹，点击文件名，可以定位到直接发起请求的代码
两个 size：在 size 列中，有两个数值，上面的较小值代表下载到的资源的大小，下面的较大值是资源解压后的大小。（例如在 Content-Encoding 中可以看到的 gzip 和 br）
按住shift鼠标悬浮在请求行上，变绿色的行是当前行的发起者，红色的行是当前行的依赖项。

Priority：High,Highest,Low。根据时间线中的蓝线和红线（DOMContentLoaded 和 load），以及请求的优先级，可以从结果的角度观察浏览器的加载流程。

Websocket

在 network 的 filter 条件后，选择ws类型的请求，即可看到所有 Websocket 请求
在请求详情的 Message 栏中，可以看到 wensocket 全双工通信中客户端接收和发送的信息

Color Code：瀑布图中的几种颜色与代码

Queueing 排队，请求未发出，正在等待。浏览器在以下情况下对请求排队：
- 存在更高优先级的请求。
- 此源已打开六个 TCP 连接，达到限值。仅适用于 HTTP/1.0 和 HTTP/1.1（在 HTTP1 下浏览器一次最允许 6 个 TCP 连接，超出 6 个，就要 queue 排队)(优化 web 性能->避免 queue->合并资源请求）
- 浏览器正在短暂分配磁盘缓存中的空间
Stalled/Blocking 停滞/阻塞，请求仍未发出。请求可能会因 Queueing 中描述的任何原因而停止。
DNS Lookup dns 查找，浏览器正在解析请求的 IP 地址，每次有指向新 domian 的请求时，会有 dns 查找的时间消耗。
Proxy negotiation 代理协商。浏览器正在与代理服务器协商请求。
initial connection/connecting 正在初始化连接或正在连接，包含 tcp 的三次握手的时间
SSL 完成 SLL 握手所需要的时间
Request sent/senting 正在发送请求，发请求所占的时间，通常只有几分之一毫秒。
ServiceWorker Preparation。浏览器正在启动 Service Worker。
Request to ServiceWorker。正在将请求发送到 Service Worker。
Waiting (TTFB)。浏览器正在等待响应的第一个字节。 TTFB 表示 Time To First Byte（至第一字节的时间）。此时间包括 1 次往返延迟时间及服务器准备响应所用的时间。
Content Download。浏览器正在接收响应。
Receiving Push。浏览器正在通过 HTTP/2 服务器推送接收此响应的数据。
Reading Push。浏览器正在读取之前收到的本地数据。

Devtools 老司机养成 - 第四篇Sources源文件面板

Sun, 15 Mar 2020 00:00:00 GMT

概览

Debug : 在源代码面板中可以设置断点来调试 JavaScript ，比 console.log()调试更快速高效
Devtools as IDE : 通过 Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器

七种断点类型

行断点：代码运行到当前行之前暂停执行

在源代码添加debugger关键字
或者
点击Sources面板中的源代码的行号

条件行断点：当满足条件时才会触发该断点

右击Sources面板中的源代码的行号
选择“Add conditional breakpoint”

DOM 断点

即Elements面板提及过的三种DOM断点：
- 节点属性断点
- 节点删除断点
- 子树变更断点

XHR/Fetch 断点

在页面发出XHR或Fetch请求前加断点

Event Listener 事件监听断点

可以在所有类型的事件函数被出发前加断点

Exception 异常断点

Function 函数断点

把想调试的函数名作为参数，调用debug()函数，可以在每次执行该函数前暂停执行代码

Debug

函数调用栈 Call Stack：Call Stack 是 time traveling 的，即点击栈中的任一节点，当前的作用域和局部变量等信息，都会模拟至该节点执行时的状态

全局作用域 Global ，局部作用域 Local ，闭包作用域 Closure

step over next function
step into next function
step out current function
step (与 step over/into 的区别就是，step 会优先尝试 step into，当没有可步入的代码时，就会执行 step over)

long resume：恢复执行，并将断点停用 500ms

Continue to here：继续执行至此行

Restart Frame：重新执行函数调用堆栈中的某一帧

行断点内的多个箭头：行内断点（行内的，可 step into 的执行点

Devtools Nodejs debug

node 执行 js 文件，文件名前加--inspect 标志，启用浏览器 nodejs 调试

点击 devtools 中，左上角的 devices mode 右侧的绿色按钮，即可启用 node 服务端中的脚本调试
更多相关

BlackBox

BlackBox 的用途：

“BlackBox Script”可以在调试中忽略某些脚本(此处的 BlackBox 为动词)，在 Call Stack 堆栈中会将该脚本隐藏，单步调试时也不会步入脚本中的任何函数
```
function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}
```
例如以上代码的 A 行，调用的是第三方库的 doFancyStuff 函数

如果我确认该第三方库没有 bug

就可以 BlackBox 整个第三方库的 js 脚本，在调试中跳过这些代码的执行
三种添加 BlackBox 的方法：

在源代码窗格右键，选择"BlackBox Script"
在 Call Stack 中右键某一帧，选择"BlackBox Script"
在设置中的 Blackboxing 面板添加正则表达式匹配文件名

Workspace：Devtools as IDE 将更改持久化

在 sources 左侧的面板中选择Filesystem，点击Add folder to workspace，将你本地运行的站点的相关源文件添加到 Devtools 的工作区，会自动识别 Page 下和工作区下相对应的文件，在 devtools 更改文件并保存，即持久化保存（目前只支持自动识别，不支持添加映射）
绿标文件：成功的映射到本地的文件，在 Styles 和 Sources 中的文件名前，都会添加绿色圆点作为标识
目前 Devtools 已经支持 sass/scss、UglifyJS、Grunt、Coffescript、Closure 等等，暂时还不支持 webpack，和其他现代的复杂框架，如 react
所有sources面板的文件，都可以右键选择local modifications，查看所有更改
对 DOM 树的更改不会持久化至 html 文件：因为 dom 的最终表现，受到 html、css、javascript 的共同影响，DOM 树 !== HTML，因此可以在 sources 中直接更改 html 文件并保存

Source Map

组合/压缩 css,js 文件是常见的性能优化方案，但是会对开发调试造成困扰
Source Map 用于将生产代码映射至源代码，Chrome 和 firefox 都内置了对 Source Map 的支持
在 Chorme devtools 中，settings -> preferen -> sources 中，选中Enable Javascript source maps和Enable CSS source maps
source map 映射信息存在 json 对象中，保存在 .map 文件中，可以由编译程序添加注释//# sourceMappingURL=/path/to/script.js.map至生产文件末尾，也可以由服务端在响应头中添加X-SourceMap: /path/to/script.js.map，将 map 文件与生产文件对应。更多关于 source map 的介绍

Local Overrides

用于覆盖网络请求: 在source/page右键save for override或直接edit，保存的文件都被存储到overrides 指定目录(按照域名建立文件夹). 这种改写是临时的
在 Sources 面板左侧选择 Overrides，指定 DevTools 应保存更改的目录，当在 DevTools 中进行更改时，DevTools 会将修改后的文件的副本保存到所选的本地目录中，重新加载页面时，DevTools 提供本地修改的文件，而不是请求的网络资源。
与 Workspace 相似的，不支持保存对 DOM 树的更改，需要直接更改 html 源文件。
只能指定一个目录
断点debug 时，实时修改文件，然后保存后会恢复到第一个断点，不用重新刷新

Snippets 代码片段

在 Sources 面板左侧选择 Snippets，或crlt shift p输入 snippet 打开 Snippets 面板，可以创建并保存常用的代码片段，和用 gist 类似
snippets 中，选中代码并ctrl enter，或点击右下角的执行按钮，即可执行代码片段

Content scripts

这部分脚本是浏览器插件的脚本，在特定网页的上下文中运行。（与插件运行在服务端的脚本，页面上引用的脚本，页面上 script 中的内嵌脚本都不同
插件在服务端的脚本可以访问所有 WebExtension JavaScript API，但它们无法直接访问网页内容。
Content scripts 只能访问 WebExtension API 的一小部分，但它们可以使用消息传递系统与后台脚本进行通信，从而间接访问 WebExtension API。
如果有浏览器插件相关的工作，可以更深入研究，不赘述。

Devtools 老司机养成 - 第三篇-Console 面板

Sun, 08 Mar 2020 00:00:00 GMT

概览

Console 面板是浏览器的控制台，也是 Devtools 的灵魂。

可以通过设置->Show Console drawer或者Esc 快捷键让 Console 在每个面板都能显示。

message

在 console 中，可以看到来自浏览器/代码的五种类型的信息：
- user message
- error
- warning
- info
- verbose
相同的消息默认是堆叠的，可以通过 ctrl+shift+p 输入 time 命令或者设置中找到timestamps命令，给消息加上时间戳
通过选项Log XMLHttpRequest选择是否输出所有 XMLHttp 请求日志(可以监控页面所有 ajax 请求定位其代码调用栈)
通过Hide network选择显示/隐藏网络请求的错误信息(例如 GET xxx 404)
通过Preserve log选择保留历史记录，即刷新页面后是否还显示先前的消息

javascript 实时执行环境

console 除了能输出调试信息，也是一个 javascript 实时执行环境。
可以直接在这里输入任何全局变量名/内置对象名/函数名，会得到相应的值输出;在调试环境下的断点内，可以获取局部变量值
右键选Store as global variable，可以将输出值存储为一个临时的全局变量
双击对象的属性值，可以直接更改这个对象（持久化的更改,因为 console 存储下来的是对象的引用）
console 中输出的 dom 元素 -> 右键 -> reveal in elements：快速定位到元素面板中的当前元素

选择执行环境

可以通过左上的下拉列表，选择不同的执行环境

top 是最外层的顶级页面,其他的是 iframe 子页面

默认情况下

子 frame 中：

(window === self) === self.window;
//top.window是顶级页面top的全局变量window

top frame 中：

(((window === self) === self.window) === top) === top.window;

console 中的`$`符号：

可以通过$0，获取当前在 Elements 面板所选中的元素节点
如果 $ 在当前页面没被占用，可以用来替代 document.querySlector 方法使用
$$ 是 document.querySelectorAll 方法的更佳替代，因为 document.querySelectorAll 返回的是 nodeList(NodeList)，而$$能直接返回数组(Array)
$_可以引用上一次执行的结果
如果需要使用 npm 的包，可以安装 Console Importer 插件，用$i方法引入 npm 中的库

console 下的方法：

除了被用烂了的console.log()（当然 console.log 也有特别一点的用法）
console 对象还有 console.error/clear/debug/count/time/table/tarce 等等方法
直接在 console 中输入 console，可以看到 console 对象下的所有方法
例如 console.table(obj)可以把你的对象以可视化的表格形式进行输出
例如可以使用 console.time()和 console.timeEnd()方法来测量时间差
另:console 命令行还内置了一些 API 方法，例如 queryObjects(),可以返回指定类型的对象下所有的实例化的对象

queryObjects(Object); //返回所有object对象
queryObjects(Function); //返回所有函数
queryObjects(Array); //返回所有数组

monitor(function)方法来追踪函数调用信息，当函数被执行，会输出追踪信息
monitorEvents(el,eventType)方法来追踪事件

Devtools 老司机养成 - 第二篇-Elements 面板

Sun, 01 Mar 2020 00:00:00 GMT

界面概览

使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS

Inspect Mode

快捷键 ctrl shift c/点击面板左上角的按钮，进入元素选择模式

在新版本 chrome 中，选择元素时会显示更多元素信息

Device Mode 设备模式

模拟不同尺寸移动端设备下，网页的表现。
是自适应网页调试利器。
内置/可配置既有设备属性，例如 iphone/ipad
支持调试媒体查询 media-query。

DOM 树

在元素面板左侧是当前页的 DOM 树

在 DOM 树中你可以：

直接增/删/改/复制/拖放移动 DOM 元素，查看实时效果(非持久化)
添加元素断点(节点移除断点，属性变更断点，子树变更断点)
模拟元素 focus/hover/actice 等状态
选中元素后通过右键“Scroll into view”突出显示当前元素在页面的位置
按快捷键h来快速隐藏/显示元素当前元素及其后代元素(原理是 visibility 设为 hidden,不影响其他元素,不引起重绘)
按住 alt 键点击 dom 元素前的箭头：全部折叠/展开当前元素及其后代元素

Styles

在面板右侧 Styles 窗格中：

会显示节点的各级样式
每级样式的来源
每条样式属性是否命中
可以直接增/删/改元素样式，查看实时效果(非持久化)

color picker

在样式窗格中，devtools 给所有颜色属性值前添加了 color picker 工具
按住 shift 点击色块，快速切换颜色格式 rgb/hsl/hex

page colors：color picker 中会列出页面所有的颜色
material colors：color picker 中会列出 google 设计推荐色系

Computed

在 Styles 右侧的 Computed 窗格中可以查看：

元素的盒模型(双击值可编辑)
元素所有样式的计算后最终值(即最终实际应用到元素的值)
点开每一条最终值，可以看到所有该条样式的规则，以及代码来源
勾选show all选项，会同时列出元素继承 / 默认样式

Event Listeners

在 Event Listeners 窗格中，可以看到元素的事件监听器
例如"load","DOMContentLoaded","click"等，以及每个事件对应的事件处理函数

在源代码中加 行 debugger 断点，或者debug(函数)断点(Sources 面板会提及这两种断点)，是需要代码维护成本的，有时候还会忘记删除；

或者你想调试别人开发的你不拥有源码的网页；

这些时候可以利用 Event Listeners 窗格快速定位当前元素被绑定的所有的事件函数代码并调试。

DOM Breakpoints

在面板右侧 DOM Breakpoints 中，可以查看元素断点

相应的在左侧 DOM 树右键点击元素，可以给元素添加断点

元素断点有三种类型：属性变更，子树变更，节点删除

例如添加“node removal”断点，就会在有代码移除当前节点时，在当前行代码执行前暂停执行，并自动转换到 Sources 面板，以便做进一步调试

Properties

Properties 面板会列出元素 DOM 底层相关属性

Accessibility(可访问性)

在辅助功能树中查看元素的位置(可访问性树/无障碍树是 DOM 树的子集。它只包含来自 DOM 树的元素，这些元素可以展示在屏幕阅读器中页面的内容。
查看元素的 ARIA 属性(ARIA 属性确保屏幕阅读器具有所需的所有信息，以便正确表示页面的内容。
查看元素的计算辅助功能属性(某些辅助功能属性由浏览器动态计算。可以在“ 辅助功能”窗格的“ 计算属性”部分中查看这些属性

Devtools 老司机养成 - 第一篇Devtools介绍

Sun, 23 Feb 2020 00:00:00 GMT

web devtool 历史

view-source + alert 调试法
Live DOM Viewer
Firebug

Chrome相关介绍

Chromium

是谷歌的开源项目，由开源社区维护。

国产的所有 “双核浏览器”，都是基于 Chromium 开发的，甚至 Chrome 也是基于它。

我们下载的 Chromium 浏览器都是其源码未经修改的直接编译版本。

Chromium 的内核版本比 Chrome 明显领先，新的技术都是先在 Chromium 上应用。

几乎每天都在进行更新;

Chrome

基于 Chromium，但是它是闭源的！
所以有这样的一种说法：谷歌把核心技术都保留在了之家的 Chrome 中。

支持了一些商业的收费插件，这些是不会出现在开源软件中的： H.264编码、mp3编码

Chrome 内置了 Flash，Chromium 需要额外安装

据说?在网页渲染方面 Chrome 也悄悄有一些特别的优化。

集成了更多的谷歌服务（RanBinNuan），同时也有更多的限制，比如目前使用 Chrome 需要一定手段才能安装非商店的扩展，一旦被发现还会永远禁用，但 Chromium 就没有这些限制！

Dev Canary Stable Beta

是Chrome的四个版本：

Stable 稳定版（几月一次更新）
Beta 测试版（1 月一次更新）
Dev 开发者版（1 星期一次更新）
Canary 金丝雀版（脚步几乎同步 Chromium，天天更新）图标采用了特别的土豪金版神奇宝贝球。

新版发布速度递增新功能数量递增稳定性递减

Chrome Devtools 界面概览

Tips and Tricks

快捷键：ctrl shift p：执行命令
快捷键：ctrl p：打开文件
快捷键：esc：显示/隐藏 drawer(第二行面板
快捷键：ctrl shift c：选择元素
more -> focus debugee：切换至正在被调试的页面
more -> more tools：全部面板
无痕模式打开网页 —> 更纯净的调试环境，无扩展代码干扰
实验性功能：

    打开url     chrome://flags/
    搜索dev
    打开Experimental Extension APIs开关
    在settings中找到experiments可以找到相关实验性功能
    shift按七次，显示隐藏的实验性功能（比如terminal

金丝雀版 chrome - Canary - 开发者专用的每日更新版
开发者版 chrome - Dev - 开发者专用的每周更新版

Devtools 入门

Sun, 16 Feb 2020 00:00:00 GMT

web devtool 历史

view-source + alert 调试法
Live DOM Viewer
Firebug

Chrome相关介绍

Chromium

是谷歌的开源项目，由开源社区维护。

国产的所有 “双核浏览器”，都是基于 Chromium 开发的，甚至 Chrome 也是基于它。

我们下载的 Chromium 浏览器都是其源码未经修改的直接编译版本。

Chromium 的内核版本比 Chrome 明显领先，新的技术都是先在 Chromium 上应用。

几乎每天都在进行更新;

Chrome

基于 Chromium，但是它是闭源的！
所以有这样的一种说法：谷歌把核心技术都保留在了之家的 Chrome 中。

支持了一些商业的收费插件，这些是不会出现在开源软件中的： H.264编码、mp3编码

Chrome 内置了 Flash，Chromium 需要额外安装

据说?在网页渲染方面 Chrome 也悄悄有一些特别的优化。

集成了更多的谷歌服务（RanBinNuan），同时也有更多的限制，比如目前使用 Chrome 需要一定手段才能安装非商店的扩展，一旦被发现还会永远禁用，但 Chromium 就没有这些限制！

Dev Canary Stable Beta

是Chrome的四个版本

Stable 稳定版（几月一次更新）
Beta 测试版（1 月一次更新）
Dev 开发者版（1 星期一次更新）
Canary 金丝雀版（脚步几乎同步 Chromium，天天更新）图标采用了特别的土豪金版神奇宝贝球。

新版发布速度递增
新功能数量递增
稳定性递减

Chrome Devtools 界面概览

；

Tips and Tricks

快捷键：ctrl shift p：执行命令
快捷键：ctrl p：打开文件
快捷键：esc：显示/隐藏 drawer(第二行面板
快捷键：ctrl shift c：选择元素
more -> focus debugee：切换至正在被调试的页面
more -> more tools：全部面板
无痕模式打开网页 —> 更纯净的调试环境，无扩展代码干扰
实验性功能：

    打开url     chrome://flags/
    搜索dev
    打开Experimental Extension APIs开关
    在settings中找到experiments可以找到相关实验性功能
    shift按七次，显示隐藏的实验性功能（比如terminal

金丝雀版 chrome - Canary - 开发者专用的每日更新版
开发者版 chrome - Canary - 开发者专用的每周更新版

Elements 面板

使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS

Inspect Mode

快捷键 ctrl shift c/点击面板左上角的按钮，进入元素选择模式

在新版本 chrome 中，选择元素时会显示更多元素信息

Device Mode 设备模式

模拟不同尺寸移动端设备下，网页的表现。
是自适应网页调试利器。
内置/可配置既有设备属性，例如 iphone/ipad
支持调试媒体查询 media-query。

DOM 树

在元素面板左侧是当前页的 DOM 树

在 DOM 树中可以：

直接增/删/改/复制/拖放移动 DOM 元素，查看实时效果(非持久化)
添加元素断点(节点移除断点，属性变更断点，子树变更断点)
模拟元素 focus/hover/actice 等状态
选中元素后通过右键“Scroll into view”突出显示当前元素在页面的位置
按快捷键h来快速隐藏/显示元素当前元素及其后代元素(原理是 visibility 设为 hidden,不影响其他元素,不引起重绘)
按住 alt 键点击 dom 元素前的箭头：全部折叠/展开当前元素及其后代元素

Styles

在面板右侧 Styles 窗格中：

会显示节点的各级样式
每级样式的来源
每条样式属性是否命中
可以直接增/删/改元素样式，查看实时效果(非持久化)

color picker

在样式窗格中，devtools 给所有颜色属性值前添加了 color picker 工具
按住 shift 点击色块，快速切换颜色格式 rgb/hsl/hex

page colors：color picker 中会列出页面所有的颜色
material colors：color picker 中会列出 google 设计推荐色系

Computed

在 Styles 右侧的 Computed 窗格中可以查看：

元素的盒模型(双击值可编辑)
元素所有样式的计算后最终值(即最终实际应用到元素的值)
点开每一条最终值，可以看到所有该条样式的规则，以及代码来源
勾选show all选项，会同时列出元素继承 / 默认样式

Event Listeners

在 Event Listeners 窗格中，可以看到元素的事件监听器
例如"load","DOMContentLoaded","click"等，以及每个事件对应的事件处理函数

在源代码中加 行 debugger 断点，或者debug(函数)断点(Sources 面板会提及这两种断点)，是需要代码维护成本的，有时候还会忘记删除；

或者你想调试别人开发的你不拥有源码的网页；

这些时候可以利用 Event Listeners 窗格快速定位当前元素被绑定的所有的事件函数代码并调试。

DOM Breakpoints

在面板右侧 DOM Breakpoints 中，可以查看元素断点

相应的在左侧 DOM 树右键点击元素，可以给元素添加断点

元素断点有三种类型：属性变更，子树变更，节点删除

例如添加“node removal”断点，就会在有代码移除当前节点时，在当前行代码执行前暂停执行，并自动转换到 Sources 面板，以便做进一步调试

Console 面板

Console 面板是浏览器的控制台，也是 Devtools 的灵魂。

可以通过设置->Show Console drawer或者Esc 快捷键让 Console 在每个面板都能显示。

message

在 console 中，可以看到来自浏览器/代码的五种类型的信息：
- user message
- error
- warning
- info
- verbose
相同的消息默认是堆叠的，可以通过 ctrl+shift+p 输入 time 命令或者设置中找到timestamps命令，给消息加上时间戳
通过选项Log XMLHttpRequest选择是否输出所有 XMLHttp 请求日志(可以监控页面所有 ajax 请求定位其代码调用栈)
通过Hide network选择显示/隐藏网络请求的错误信息(例如 GET xxx 404)
通过Preserve log选择保留历史记录，即刷新页面后是否还显示先前的消息

javascript 实时执行环境

console 除了能输出调试信息，也是一个 javascript 实时执行环境。
可以直接在这里输入任何全局变量名/内置对象名/函数名，会得到相应的值输出;在调试环境下的断点内，可以获取局部变量值
右键选Store as global variable，可以将输出值存储为一个临时的全局变量
双击对象的属性值，可以直接更改这个对象（持久化的更改,因为 console 存储下来的是对象的引用）
console 中输出的 dom 元素 -> 右键 -> reveal in elements：快速定位到元素面板中的当前元素

选择执行环境

可以通过左上的下拉列表，选择不同的执行环境

top 是最外层的顶级页面,其他的是 iframe 子页面

console 中的`$`符号：

可以通过$0，获取当前在 Elements 面板所选中的元素节点
如果 $ 在当前页面没被占用，可以用来替代 document.querySlector 方法使用
$$ 是 document.querySelectorAll 方法的更佳替代，因为 document.querySelectorAll 返回的是 nodeList(NodeList)，而$$能直接返回数组(Array)
$_可以引用上一次执行的结果
如果需要使用 npm 的包，可以安装 Console Importer 插件，用$i方法引入 npm 中的库

console 下的方法：

除了被用烂了的console.log()（当然 console.log 也有特别一点的用法）
console 对象还有 console.error/clear/debug/count/time/table/tarce 等等方法
直接在 console 中输入 console，可以看到 console 对象下的所有方法
例如 console.table(obj)可以把你的对象以可视化的表格形式进行输出
例如可以使用 console.time()和 console.timeEnd()方法来测量时间差
另:console 命令行还内置了一些 API 方法，例如 queryObjects(),可以返回指定类型的对象下所有的实例化的对象

queryObjects(Object); //返回所有object对象
queryObjects(Function); //返回所有函数
queryObjects(Array); //返回所有数组

monitor(function)方法来追踪函数调用信息，当函数被执行，会输出追踪信息
monitorEvents(el,eventType)方法来追踪事件

Sources 源文件面板

在 Sources 面板你可以：

Debug : 在源代码面板中可以设置断点来调试 JavaScript ，比 console.log()调试更快速高效
Devtools as IDE : 通过 Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器

七种断点类型

行断点：代码运行到当前行之前暂停执行

在源代码添加debugger关键字
或者
点击Sources面板中的源代码的行号

条件行断点：当满足条件时才会触发该断点

右击Sources面板中的源代码的行号
选择“Add conditional breakpoint”

DOM 断点

即Elements面板提及过的三种DOM断点：
- 节点属性断点
- 节点删除断点
- 子树变更断点

XHR/Fetch 断点

在页面发出XHR或Fetch请求前加断点

Event Listener 事件监听断点

可以在所有类型的事件函数被出发前加断点

Exception 异常断点

Function 函数断点

把想调试的函数名作为参数，调用debug()函数，可以在每次执行该函数前暂停执行代码

Debug

函数调用栈 Call Stack：Call Stack 是 time traveling 的，即点击栈中的任一节点，当前的作用域和局部变量等信息，都会模拟至该节点执行时的状态

全局作用域 Global ，局部作用域 Local ，闭包作用域 Closure

step over next function
step into next function
step out current function
step (与 step over/into 的区别就是，step 会优先尝试 step into，当没有可步入的代码时，就会执行 step over)

long resume：恢复执行，并将断点停用 500ms

Continue to here：继续执行至此行

Restart Frame：重新执行函数调用堆栈中的某一帧

行断点内的多个箭头：行内断点（行内的，可 step into 的执行点

Workspace：Devtools as IDE 将更改持久化

在 sources 左侧的面板中选择Filesystem，点击Add folder to workspace，将你本地运行的站点的相关源文件添加到 Devtools 的工作区，会自动识别 Page 下和工作区下相对应的文件，在 devtools 更改文件并保存，即持久化保存（目前只支持自动识别，不支持添加映射）
绿标文件：成功的映射到本地的文件，在 Styles 和 Sources 中的文件名前，都会添加绿色圆点作为标识
目前 Devtools 已经支持 sass/scss、UglifyJS、Grunt、Coffescript、Closure 等等，暂时还不支持 webpack，和其他现代的复杂框架，如 react
所有 sources 面板的文件，都可以右键选择local modifications，查看所有更改
对 DOM 树的更改不会持久化至 html 文件：因为 dom 的最终表现，受到 html、css、javascript 的共同影响，DOM 树 !== HTML，因此可以在 sources 中直接更改 html 文件并保存

Network 面板

默认情况下，只要 DevTools 处于打开状态，DevTools 就会在 Network 面板中记录所有网络请求。
左上红点按钮：停止记录网络请求
第二个按钮：清空请求记录
录像按钮：页面加载时捕获屏幕截图
过滤按钮：显示/隐藏过滤条件行
View 中的两个按钮：第一个是切换请求列表中每行的显示样式（大小请求行），第二个是显示/隐藏瀑布图
Group By Frame：是否根据不同的 frame 分类显示请求
Preserve Log：保存显示跨页面的加载请求
Disable Cache：禁用浏览器缓存，模拟新用户打开页面的体验
Offline 是模拟断网离线的状态，其后的下拉框可以选择模拟其他网络状况，比如 2G,3G

筛选请求

filter 文本框中可输入请求的属性对请求进行过滤，多个属性用空格分隔
支持过滤的属性：
- domain。仅显示来自指定域的资源。可以使用通配符字符 (*) 纳入多个域。例如，*.com 将显示来自以 .com 结尾的所有域名的资源。 DevTools 会使用其遇到的所有域填充自动填充下拉菜单。
- has-response-header。显示包含指定 HTTP 响应标头的资源。 DevTools 会使用其遇到的所有响应标头填充自动填充下拉菜单。
- is。使用 is:running 可以查找 WebSocket 资源。
- larger-than。显示大于指定大小的资源（以字节为单位）。将值设为 1000 等同于设置为 1k。
- method。显示通过指定 HTTP 方法类型检索的资源。 DevTools 会使用其遇到的所有 HTTP 方法填充下拉菜单。
- mime-type。显示指定 MIME 类型的资源。 DevTools 会使用其遇到的所有 MIME 类型填充下拉菜单。
- mixed-content。显示所有混合内容资源 (mixed-content:all)，或者仅显示当前显示的资源 (mixed-content:displayed)。
- scheme。显示通过未保护 HTTP (scheme:http) 或受保护 HTTPS (scheme:https) 检索的资源。
- set-cookie-domain。显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。 DevTools 会使用其遇到的所有 Cookie 域填充自动填充下拉菜单。
- set-cookie-name。显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。 DevTools 会使用其遇到的所有 Cookie 名称填充自动填充下拉菜单。
- set-cookie-value。显示具有 Set-Cookie 标头并且值与指定值匹配的资源。 DevTools 会使用其遇到的所有 Cookie 值填充自动填充下拉菜单。
- status-code。仅显示 HTTP 状态代码与指定代码匹配的资源。 DevTools 会使用其遇到的所有状态代码填充自动填充下拉菜单。
例如：mime-type:image/gif larger-than:1K 显示大于一千字节的所有 GIF
Hide Data URLs：隐藏 data 类型的 url

瀑布图

瀑布图按时间线展示所有请求
可以用鼠标拖动选中一段时间，只查看改时间线内的请求
瀑布图中有两条竖线，一条蓝色，代表DOMContentLoaded事件发生的事件，一条红色代表load事件发生的时间点

分析请求/请求列表

重播请求：右键点击 Requests 表格中的请求 -> Replay XHR
手动清除浏览器缓存：右键点击 Requests 表格中的任意位置 -> 选择 Clear Browser Cache
手动清除浏览器 Cookie：右键点击 Requests 表格中的任意位置 -> 选择 Clear Browser Cookies
自定义列表中展示的列

请求行排序，默认按照瀑布图 start time 升序排序，即请求发起的时间点：

每条请求，可以看到网络请求以及被清华求资源的全部信息：
- 请求的一般信息：url、HTTP 方法(GET POST 等)、状态码、ip 地址
- 请求相关：请求头、Initiator、Priority
- 响应相关：响应头、响应内容
Initiator：请求的来源/发起者。parser：一般来自解析器解析到的 html 页面内的请求；script：来自脚本文件的请求。鼠标悬浮到 Initiator 列中的文件名上，可以看到发起当前请求的堆栈轨迹，点击文件名，可以定位到直接发起请求的代码
两个 size：在 size 列中，有两个数值，上面的较小值代表下载到的资源的大小，下面的较大值是资源解压后的大小。（例如在 Content-Encoding 中可以看到的 gzip 和 br）
按住shift鼠标悬浮在请求行上，变绿色的行是当前行的发起者，红色的行是当前行的依赖项。

Priority：High,Highest,Low。根据时间线中的蓝线和红线（DOMContentLoaded 和 load），以及请求的优先级，可以从结果的角度观察浏览器的加载流程。

Color Code：瀑布图中的几种颜色与代码

Queueing 排队，请求未发出，正在等待。浏览器在以下情况下对请求排队：
- 存在更高优先级的请求。
- 此源已打开六个 TCP 连接，达到限值。仅适用于 HTTP/1.0 和 HTTP/1.1（在 HTTP1 下浏览器一次最允许 6 个 TCP 连接，超出 6 个，就要 queue 排队)(优化 web 性能->避免 queue->合并资源请求）
- 浏览器正在短暂分配磁盘缓存中的空间
Stalled/Blocking 停滞/阻塞，请求仍未发出。请求可能会因 Queueing 中描述的任何原因而停止。
DNS Lookup dns 查找，浏览器正在解析请求的 IP 地址，每次有指向新 domian 的请求时，会有 dns 查找的时间消耗。
Proxy negotiation 代理协商。浏览器正在与代理服务器协商请求。
initial connection/connecting 正在初始化连接或正在连接，包含 tcp 的三次握手的时间
SSL 完成 SLL 握手所需要的时间
Request sent/senting 正在发送请求，发请求所占的时间，通常只有几分之一毫秒。
ServiceWorker Preparation。浏览器正在启动 Service Worker。
Request to ServiceWorker。正在将请求发送到 Service Worker。
Waiting (TTFB)。浏览器正在等待响应的第一个字节。 TTFB 表示 Time To First Byte（至第一字节的时间）。此时间包括 1 次往返延迟时间及服务器准备响应所用的时间。
Content Download。浏览器正在接收响应。
Receiving Push。浏览器正在通过 HTTP/2 服务器推送接收此响应的数据。
Reading Push。浏览器正在读取之前收到的本地数据。

DOMContentLoaded 和 load 事件

DOMContentLoaded — 浏览器已经完全加载了 HTML，DOM 树已经构建完毕，但是像是 <img loading="lazy" decoding="async"> 和样式表等外部资源可能并没有下载完毕。
load — 浏览器已经加载了所有的资源（图像，样式表等）。
beforeunload/unload -- 当用户离开页面的时候触发。
更多

Performance 性能面板

performance 面板可以用于分析运行时性能(运行时强调的是与页面加载性能相区分)
以隐身模式打开网页（隐身模式可确保 Chrome 以干净的状态运行。例如，排除扩展对性能测量的影响
Janky Animation demo ：性能测试 demo
视图 overview：

RAIL 模型

RAIL 模型是一种性能模型，定义了四个维度的性能分析指标
Response：在100 毫秒以内响应（例如从点按到绘制）
Animation：每秒生成 60 帧，每个帧的工作（从 JS 到绘制）完成时间小于 16 毫秒,达到人眼顺滑（例如滚动拖动都是动画类型）（因为浏览器需要花费时间将新帧绘制到屏幕上，只有 10 毫秒来执行代码）
Idle：利用空闲时间完成推迟的工作（要实现第一条 response 在 100ms 内响应，Main 主线程 JS 工作应该小于 50ms，剩余的时间将主线程的控制从 js 返回给浏览器执行其像素管道、对用户输入作出反应等，因此最佳实践是将 js 的工作分成不大于 50 毫秒的块,如果用户开始交互，优先级最高的事项是响应用户。
Load：在 1000 毫秒以内呈现内容（无需完整加载，启用渐进式渲染，将非必需的加载推迟到空闲时间段
通过 performance 面板，可以得到这四个维度的分析数据

控制区

点击录制按钮或者开始录制并刷新页面按钮,可以在控制区下方得到全部性能分析结果
其中除了最下方的详细信息窗格以外，分析结果都是以时间为轴
可以在 overview 窗格拖动鼠标，选择某段时间的分析结果
滚动鼠标滚轮，缩放/移动选中事件
在火焰图窗格，按住shift，滚动鼠标滚轮，可以上下
在火焰图窗格，也可以直接左右拖动图表
或者用W A S D按键控制缩放移动
Disable JavaScript samples默认情况，在Main主线程的火焰图中，会详细记录 js 函数之间的调用栈，可以开启此选项禁用调用栈记录
Enable advanced paint instrumentation启用高级绘图工具，可以在分析结果的Frames中的每一帧的详细结果中看到Layer选项卡，其中有选中帧的详细图层信息；也可以在Main主线程火焰图中选中绿色的Paint事件，在最底部详细信息的Paint Profile选项卡中，看到详细的页面绘制过程分析
Collect garbage控制器最右的垃圾桶图标，是强制执行垃圾回收，对于监控内存比较有用

FPS 图表 - Frames Per Seconds

FPS 图表中，绿色代表帧率高低，参考RAIL模型，帧率>=60 时，用户能体验的顺滑的网页
红色出现代表有掉帧情况

CPU 图表

CPU 图表中，不同的颜色代表不同事件对 CPU 的占用，颜色信息如图

当 CPU 长时间被占满，就是当前网页性能需要优化的信号

SCREENSHOTS

鼠标在FPS,CPU,NET图表悬浮时，会展示出鼠标对应时间点的网页截屏，左右移动鼠标可以看到网页变化的重播效果

HEAP

在 HEAP 图表中可以看到 JS 内存占用情况，与下方的 memory 窗格中的JS Heap相对应
在 Memory 窗格还可以看到 Document 文档、Nodes DOM 节点、监听器、GPU 内存的习份内存统计

Frames

点击三角箭头展开Frames区域，鼠标悬浮/点击绿色方块，可以看到该特定帧的帧率和渲染耗时，当 FPS 低于 60，表明当前帧的渲染效率较低

Main

点击三角箭头展开Main区域，可以看到主线程上事件的火焰图
x 轴是时间，每一块代表一个事件，y 轴代表堆栈，事件的上下堆叠，代表上层事件引发/调用了下层事件

通过调用堆栈，可以找出导致低性能的事件及其源码位置
当事件块出现红色三角，可以点击三角查看该事件的性能相关警告信息，并定位到引起警告的代码

点击Animation Frame Fired事件，可以在最下方Summary窗格查看触发动画事件的详细信息，点击Initiator后的reveal链接，会高亮到引起动画事件的事件

性能相关扩展

网页性能-性能模型/加载/渲染/审计/优化
the-anatomy-of-a-frame - 一个帧的剖析
常见的时间线事件参考

给UI看的WEB字体指南

Sun, 02 Feb 2020 00:00:00 GMT

WEB中的字体

前言

某天，隔壁新来的漂亮UI小妹妹又优雅的丢给你一个压缩包，你满心欢喜的解压

才发现又是新页面的需求

然后你摸了摸光亮的脑门，捋了捋稀疏的鬓角，吭哧吭哧开始画页面...

咦？pingfangsc medium,pingfangsc bold,pingfangsc light...??
(同理可换成 sans serif，microsoft yahei)

常用windows的你傻傻分不清楚小妹妹选定的mac字体

这是同一个字体吗？font-weight还要写吗？不写的话win上显示就不一样了呀...

于是你只能再打开小妹妹的聊天面板，码下一大段话“不同系统默认字体不一样...巴拉巴拉...web安全字体...备选字体集...字体文件包”

然后在你的小本本上，画上第1025个圈圈，记录并预测下，到底还要跟多少UI做好字体交易...

虽然你会为跟小妹妹进行了一次深入性的技术沟通 而心情大好，但是

终将有一天，你的耐心会消耗殆尽，然后把这篇文章，丢到部门UI群

从那以后，UI小妹妹们...

...

给你授予了“最矫情的技术没有之一”的称号 并 丢了更多pingfangsc给你🐶

WEB 安全字体

不同操作系统内置的字体是不同的，甚至差异很大，例如：

win7和mac下，只有十种字体重合，Windows XP中甚至没有其中的Palatino 和Trebuchet MS字体.....

因此为了兼容性考虑，最安全的字体有：

Arial
Courier New
Georgia
Times New Roman
Verdana
...
随着操作系统的发展更新，这个数据也不是最准确的，可选的可能比上面五个多一些，请以实际测试为准

备选字体组合

当不确定网页用户电脑上是否有某种字体时，可以使用字体组合，提供备选的字体：

font-family: "Times New Roman", Times, serif;

备选的意思可以参考备胎，就是：

当浏览器在系统中找不到第一种字体时，会自动去使用第二种，依次类推...

自定义字体

如果对某种不通用字体有刚需，可以使用自定义字体。

UI需要提供字体的woff和eot格式源文件（需要考虑文件太大会影响网页加载）
前端需要在css中自定义@font-face（不用担心浏览器兼容性）

至于为什么是woff和eot：

TureTpe(.ttf)格式:
 .ttf字体是Windows和Mac系统的最常见的字体，是一种RAW格式，不为网站优化

OpenType(.otf)格式：
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能

Web Open Font Format(.woff)格式：
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离

Embedded Open Type(.eot)格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体

SVG(.svg)格式：
.svg字体是基于SVG字体渲染的一种格式

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

不同浏览器对不同字体文件格式的兼容性也不同：

总结来说：eot(供ie使用) + woff(供其他现代浏览器使用)是最佳组合，如果要兼容更多老版本浏览器/移动端浏览器可以加上ttf或svg）

定义font-face语法：

@font-face {
      font-family: <YourWebFontName自定义的字体名>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
}

/*source：字体文件路径*/
/*format：字体文件格式 eg. ttf,otf,woff,eot,svg...*/

/*示例*/
   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot'); /* IE9兼容模式 */
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* 现代浏览器 */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* 老版本 iOS */
   }

总结

UI最好就用最安全的几种通用字体
如果想用不通用的字体
- 要么：提供备选字体
- 要么：提供字体文件(eot+woff+[svg/ttf])，且要考虑选择字体源文件体积较小的字体

ML08 | 多分类问题训练：IRIS鸢尾花分类问题

Thu, 09 Jan 2020 00:00:00 GMT

多分类问题

手写数字分类：10种分类
图片分类：成千上万种分类
多种特征：需要多层神经网络
多种分类输出：需要在输出层加softMax函数

鸢尾花（iris）分类问题

著名的数据集，诞生了很久，被无数科学家用来验证自己的算法
三种分类(输出)：山鸢尾，变色鸢尾，Virginica鸢尾
四种特征(输入)：花瓣长、宽、花萼长、宽

加载IRIS数据集（训练集与验证集）

用脚本生成IRIS数据集：训练集+验证集

//生成：训练集特征，训练集标签，验证集特征，验证集标签（数据类型为tensor）
  const [xTrain,yTrain,xTest,yTest] = getIrisData(0.15);
  xTrain.print();
  yTrain.print();
  xTest.print();
  yTest.print();
  console.log(IRIS_CLASSES);

打印结果：

定义模型结构：带有softMax激活函数的多层神经网络

初始化一个神经网络模型

//初始化模型
  const model = tf.sequential();

为模型添加两个层
设计层的神经元个数、inputShape、激活函数

//添加隐藏层：全链接层
  model.add(tf.layers.dense({
    units:10, //10个神经元，超参数
    inputShape:[xTrain.shape[1]],
    activation:'sigmoid',
  }));
//添加输出层：全链接层
  model.add(tf.layers.dense({
    units:3,  //必须是输出类别的个数
    // inputShape:[yTrain.shape], //除了第一层以外 都不需要设计inputShape，会根据上一层的输出自动设计
    activation:'softmax', //softmax 激活函数 适用于多种分类输出层
  }));

交叉熵损失函数

交叉熵损失函数 Cross-Entropy：是LogLoss对数损失函数的多分类版本，都用于度量分类神经网络模型的性能。
当分类数为2时，交叉熵损失=对数损失。

定义损失函数、优化器、准确度度量

  //设置损失函数，增加训练过程中的“准确度”度量
  model.compile({
    loss:'categoricalCrossentropy',
    optimizer: tf.train.adam(0.1),
    metrics: ['accuracy']
  });

训练模型并可视化

//训练并可视化
  await model.fit(xTrain,yTrain,{
    epochs:100,
    validationData:[xTest,yTest],
    callbacks:tfvis.show.fitCallbacks(
      {name:''},
      ['loss','val_loss','acc','val_acc'],
      {callbacks:['onEpochEnd']},
    ),
  })

训练过程：

模型多分类预测

window.predict = (form)=>{
    const input = tf.tensor([[
      form.a.value * 1,
      form.b.value * 1,
      form.c.value * 1,
      form.d.value * 1,
    ]]);

    debugger;
    const pred = model.predict(input);
    pred.print();
    alert(`预测结果${IRIS_CLASSES[pred.argMax(1).dataSync(0)]}`);
  }

ML07 | XOR回归训练：多层神经网络

Tue, 07 Jan 2020 00:00:00 GMT

XOR 异或逻辑回归

不是线性问题
需要多层神经网络+激活函数来解决

Google Playground网站

用TFJS写的可视化学习机器学习的网站

加载XOR数据集

//调脚本接口生成模拟数据
const data = getData(400);
console.log(data);

模拟数据数据结构：

//可视化
tfvis.render.scatterplot(
    { name: "XOR训练数据" },
    {
        values: [
            data.filter(p => p.label === 1),
            data.filter(p => p.label === 0)
        ]
    }
);

可视化结果

定义模型结构：多层神经网络

初始化一个神经网络模型
为模型添加两个层：隐藏层+输出层
设计层的激活函数、inputShape、神经元个数

//初始化一个 sequential model
    const mdoel = tf.sequential();

    //添加一个隐藏层（全连接层）
    mdoel.add(
        tf.layers.dense({
            units: 4,
            inputShape: [2], //只有第一层需要设置inputShape
            activition: "relu"
        })
    );

    //添加一个输出层（全连接层）
    model.add(
        tf.layers.dense({
            units: 1,
            activition: "sigmoid" //需要输出[0,1]之间的概率所以选sigmoid
        })
    );

定义模型的损失函数和优化器

//定义模型的损失函数和优化器
model.compile({
    loss: tf.losses.logLoss,
    optimizer: tf.train.adam(0.1)
});

训练模型并预测

训练数据转换为tensor

//训练数据转换为tensor
const inputs = tf.tensor(data.map(p => [p.x, p.y]));
const labels = tf.tensor(data.map(p => p.label));

训练模型并可视化训练过程

//训练
await model.fit(inputs, labels, {
    epochs: 10,
    callbacks: tfvis.show.fitCallbacks({ name: "XOR训练过程" }, ["loss"])
});

训练过程
进行预测

//预测
window.predict = form => {
    const pred = model.predict(
        tf.tensor([[form.x.value * 1, form.y.value * 1]])
    );
    alert(`预测结果：${pred.dataSync()[0]}`);
};

预测结果

ML06 | 逻辑回归训练

Mon, 06 Jan 2020 00:00:00 GMT

逻辑回归简介

解决分类问题，输出一个概率[0,1]

加载二分类数据集

使用脚本生成二分类数据集

//利用脚本生成400组二分类数据
  const data = getData(400);
  console.log(data);

数据结构如图：

可视化二分类数据集(散点图)

//可视化为散点图
  tfvis.render.scatterplot(
    {name:'二分类逻辑回归 训练数据'},
    {
      values:[
        data.filter(p=>p.label === 1),
        data.filter(p=>p.label === 0),
      ]
    }
  )

可视化效果：

定义模型结构:带有激活函数的单个神经元

初始化一个sequential神经网络模型

//添加一个sequential神经网络模型
  const model = tf.sequential();

为模型添加层，设计层的神经元个数、inputShape、激活函数(model.add)

//为模型添加一个 dense全链接层（点乘 偏置 激活函数 适合用于二分类回归）
  model.add(tf.layers.dense({
    units:1,  //神经元个数
    inputShape:[2], //输入的tensor的shape：长度为2的一维数组
    activation:'sigmoid', //sigmoid这种激活函数的曲线y值范围始终在[0,1]
  }));

对数损失函数 Log Loss

利用wiki.fast.ai人工智能教学网站，理解对数损失函数
对数损失函数:用于测量预测值在[0,1]的分类模型的性能
如下图为：标签为1的预测值的对数损失函数曲线，预测越接近真实值1，损失越小，越接近0 ，损失越大：

用TFJS API设置损失函数为：LogLoss(`model.compile`)

//设置损失函数为：LogLoss 对数损失函数
  model.compile({loss:tf.losses.logLoss});

设置超参数，训练模型(`model.fit`)

//设置超参数 训练模型
  await model.fit(inputs, labels,{
    batchSize:40,
    epochs:50,
    callbacks:tfvis.show.fitCallbacks(
      {name:'训练过程'},
      ['loss']
    )
  })

训练过程截图：

预测

编写前端界面输入待预测数据
使用训练好的模型进行预测(model.predict)

<form action="" onsubmit="predict(this);return false;">
  x: <input type="text" name="x" /> y: <input type="text" name="y" />
  <button type="submit">预测</button>
</form>

window.predict = (form) => {
  const pred = model.predict(tf.tensor([[form.x.value * 1, form.y.value * 1]]));
  alert(`预测结果：${pred.dataSync()[0]}`);
};

输入2，2 预测结果：

ML05 | 归一化

Sun, 05 Jan 2020 00:00:00 GMT

归一化:

将大数量级特征转化到较小的数量级下，通常是[0,1]或[-1,1]

为什么要归一化：

绝大多数TensorFlow.js的模型都不是给特别大的数设计的
将不同数量级的特征转换到统一数量级，避免某个特征影响过大

归一化任务实例-身高体重预测：

准备身高体重数据，可视化

//模拟标签和特征
  const heights=[150,160,170,180];
  const weights=[40,50,60,70];

  //可视化数据
  tfvis.render.scatterplot(
    {name:'身高体重预测'},
    {values:heights.map((x,i)=>({x,y:weights[i]}))},
    {
      xAxisDomain:[140,190],
      yAxisDomain:[30,80],
    }
  )

用TFJS的API归一化数据

//将数据转换为tensor 并归一化
  const inputs = tf.tensor(heights).sub(150).div(30);
  const labels = tf.tensor(weights).sub(40).div(30);
  inputs.print();
  labels.print();

归一化后数据：

训练模型并预测

//创造一个连续模型
  const model = tf.sequential();
  model.add(tf.layers.dense({units:1,inputShape:[1]})); //添加一个全连接层（点乘权重+偏置）
  model.compile({loss:tf.losses.meanSquaredError,optimizer:tf.train.sgd(0.1)});  //设置:损失函数为均方误差MSE,优化器为随机梯度下降SGD,学习速率为0.1，学习率是一个需要调整优化的超参数

  await model.fit(inputs, labels, {
    batchSize: 4, //批量训练的数据集大小（超参数，需要不断调整试验）
    epochs: 100, //迭代实验次数（超参数，需要不断调整试验）
    callbacks: tfvis.show.fitCallbacks({ name: "训练过程" }, ["loss"])
  });

  //将待预测数据190转为Tensor,用训练好的模型进行预测
  const output = model.predict(tf.tensor([190]).sub(150).div(30));
  output.print();

将结果反归一化为正常数据

//将输出的Tensor反归一化并转为普通数据并显示
  alert(`如果身高是190cm，预测体重为${output.mul(30).add(40).dataSync()}kg`);

预测结果：

上述例子中，归一化的关键步骤就是：

减去 min（最小值）
除以 diff（最大值最小值的差）

反归一化的关键步骤就是归一化的反操作：

乘以 diff
加上 min

ML04 | 线性回归训练

Thu, 02 Jan 2020 00:00:00 GMT

线性回归是什么

一种统计分析方法
用于确定两种(或以上)变量间相互依赖的定量关系
eg.身高体重预测(两种变量)、房价预测(多变量)

操作步骤

准备、可视化：训练数据
用TensorFlow.js的API构建一个简单的神经网络
训练模型并预测

前置条件

最新版本chrome
代码编辑器（eg.VSCODE
基础的前端、神经网络知识

准备、可视化：训练数据（实操）

准备线性回归训练数据(特征、标签)
使用tfvis可视化训练数据(tfvis是一个神经网络可视化库)

<!-- linear-regression/index.html-->
<script src="script.js"></script>

// linear-regression/script.js
import * as tfvis from "@tensorflow/tfjs-vis";

window.onload = () => {
  const xs = [1, 2, 3, 4]; //input
  const ys = [1, 3, 5, 7]; //output

  tfvis.render.scatterplot(
    { name: "线性回归训练数据" },
    { values: xs.map((x, i) => ({ x, y: ys[i] })) },
    { xAxisDomain: [0, 5], yAxisDomain: [0, 9] },
  );
};

-- bash
parcel li*/*.html

可视化效果

定义单个神经元的神经网络模型

初始化一个神经网络模型(model)
为模型添加层(layer)
设计层的神经元个数和inputShape

import * as tfjs from "@tensorflow/tfjs";
import * as tfvis from "@tensorflow/tfjs-vis";

window.onload = () => {
  const xs = [1, 2, 3, 4]; //input
  const ys = [1, 3, 5, 7]; //output

  tfvis.render.scatterplot(
    { name: "线性回归训练数据" },
    { values: xs.map((x, i) => ({x, y:ys[i]})) },
    {xAxisDomain:[0,5],yAxisDomain:[0,9]}
  );

  const model = sf.sequential();  //创造一个连续模型
  model.add(tf.layers.dense({units:1,inputShape:[1]})); //添加一个全连接层（点乘权重+偏置）
};

损失函数：均方误差（MSE-MeanSquaredError）

利用google ML playground 理解损失函数与均方误差：
损失函数用于计算预测值与实际值差距

均方误差（meanSquaredError）是一种损失函数

在TensorFlow.js中设置损失函数

import * as tfjs from "@tensorflow/tfjs";
import * as tfvis from "@tensorflow/tfjs-vis";

window.onload = () => {
  const xs = [1, 2, 3, 4]; //input
  const ys = [1, 3, 5, 7]; //output

  tfvis.render.scatterplot(
    { name: "线性回归训练数据" },
    { values: xs.map((x, i) => ({x, y:ys[i]})) },
    {xAxisDomain:[0,5],yAxisDomain:[0,9]}
  );

  const model = sf.sequential();  //创造一个连续模型
  model.add(tf.layers.dense({units:1,inputShape:[1]})); //添加一个全连接层（点乘权重+偏置）
  model.compile({loss:tf.losses.meanSquaredError})  //设置损失函数为均方误差MSE
};

优化器：随即梯度下降（SGD）

利用google ML playground 理解优化器与随机梯度下降：
迭代试错：

梯度下降法：

在TensorFlow.js中设置优化器

import * as tfjs from "@tensorflow/tfjs";
import * as tfvis from "@tensorflow/tfjs-vis";

window.onload = () => {
  const xs = [1, 2, 3, 4]; //input
  const ys = [1, 3, 5, 7]; //output

  tfvis.render.scatterplot(
    { name: "线性回归训练数据" },
    { values: xs.map((x, i) => ({x, y:ys[i]})) },
    {xAxisDomain:[0,5],yAxisDomain:[0,9]}
  );

  const model = sf.sequential();  //创造一个连续模型
  model.add(tf.layers.dense({units:1,inputShape:[1]})); //添加一个全连接层（点乘权重+偏置）
  model.compile({loss:tf.losses.meanSquaredError,optimizer:tf.train.sgd});  //设置:损失函数为均方误差MSE,优化器为随机梯度下降SGD
};

训练模型并可视化训练过程

将训练数据转为tensor
训练模型
用tfvis可视化训练过程

import * as tf from "@tensorflow/tfjs";
import * as tfvis from "@tensorflow/tfjs-vis";

window.onload = async () => {
  const xs = [1, 2, 3, 4]; //input
  const ys = [1, 3, 5, 7]; //output

  tfvis.render.scatterplot(
    { name: "线性回归训练数据" },
    { values: xs.map((x, i) => ({x, y:ys[i]})) },
    {xAxisDomain:[0,5],yAxisDomain:[0,9]}
  );

  const model = tf.sequential();  //创造一个连续模型
  model.add(tf.layers.dense({units:1,inputShape:[1]})); //添加一个全连接层（点乘权重+偏置）
  model.compile({loss:tf.losses.meanSquaredError,optimizer:tf.train.sgd(0.1)});  //设置:损失函数为均方误差MSE,优化器为随机梯度下降SGD,学习速率为0.1，学习率是一个需要调整优化的超参数

  const inputs = tf.tensor(xs);
  const labels = tf.tensor(ys);

  await model.fit(inputs, labels,{
    batchSize: 4, //批量训练的数据集大小（超参数，需要不断调整试验）
    epochs:100, //迭代实验次数（超参数，需要不断调整试验）
    callbacks:tfvis.show.fitCallbacks(
      {name:'训练过程'},
      ['loss'],
    )
  });

};

批量处理size设置为1，训练初期会有明显抖动

批量处理size设置为4，训练曲线比较平滑

进行预测

将待预测数据转为Tensor
用训练好的模型进行预测
将输出的Tensor转为普通数据并显示（模型的输入输出都是模型）

  const output = model.predict(tf.tensor([5])); //将待预测数据5转为Tensor,用训练好的模型进行预测
  output.print();
  console.log(output.dataSync()); //将输出的Tensor转为普通数据并显示

贫穷的本质：我们为什么摆脱不了贫穷读书输出

Thu, 02 Jan 2020 00:00:00 GMT

简介

作者[印度]阿比吉特·班纳吉（Abhijit V.Banerjee）、[法]埃斯特·迪弗洛（Esther Duflo）
两位作者深入五大洲多个国家的穷人世界，调查贫困人群最集中的18个国家和地区，从穷人生活的多个方面，探寻贫穷真正的根源
该书用九章大篇幅，从营养、健康、教育、生育、风险管理、贷款、存款、创业、政治参与等九个方面探讨穷人的生存、选择和突围，以及援助、制度对穷人的意义。
为什么穷人吃不饱饭还要买电视？
为什么他们的孩子即使上了学也不爱学习？
为什么他们放着免费的健康生活不去享受，却要自己花钱买药？
为什么他们能创业却难以守业？
为什么大多数人认为小额信贷、穷人银行没什么效用？

这本书太难啃了，未完待续

State of JS | 2019年度javascript行业报告

Tue, 31 Dec 2019 00:00:00 GMT

作者前言

stateofjs网址
2018年，我第一次关注stateofjs调查，目的是通过真实数据，更真实广泛的了解Javascript生态圈的变化，便于自己对于主流技术的了解和自检。
2018的调查，20,268参与者中，只有75位中国地区开发者，比例是0.37%。
今年，我也参与到了调查当中，提供了一份我的数据。
今年总共有21,717位开发者参与调查，其中有247位中国地区的开发者，比例是1.3%。
中国地区开发者比例，说明这个调查并不能反映中国地区的Javascript真实发展状况，但是比例的增加从侧面说明了中国开发者正在向国际靠拢，希望有越来越多的中国开发者能跨越国界，走向世界技术圈
⭐今年的报告，有一项新增的数据，引起了我的关注，就是Javascript开发者信息源，这是我根据报告数据整理出来的Javascript开发者信息源聚合链接，这项数据有助于我们时刻关注Javascript社区的主流信息

数据来源

今年增加了一项参与调查途径的分布图 个人认为，这一项数据，对于我们了解前端主流信息源和社交渠道有一定的参考价值

调查参与者国家分布图：

调查参与者薪资分布图：

调查参与者开发经验分布图：

调查参与者所属公司体量分布图：

调查参与者性别分布图：

概览

JavaScript 特性

这是今年新增的一项数据
Javascript是一个不停更新的语言，每年都有新的Ecmascript版本发布，从箭头函数到解构，过去几年中添加的新特性现在已成为我们编写JavaScript不可或缺的一部分。
因此，从今年开始，除了开发Javascript使用的工具外，增加了这项数据：JavaScript编写方式：所使用的模式，语法和特性

语法

语言

数据结构

浏览器API

其他特性

JavaScript Flavors

可以编译成 javasript 代码的各种语言/语法规范/javascript 超集

前端框架 Front-end Frameworks

数据层 Data Layer

后端框架 Back-end Frameworks

测试 Testing

移动端/客户端 Mobile & Desktop

函数库 Utility Libraries

编辑器 Text Editors

js 开发者使用的浏览器

构建工具 Build Tools

js 开发者使用的其他语言 Other Languages

信息源（NEW*）

这是新年调查新增的一项数据
这项数据显示了调查者依赖的信息源,包括博客和杂志、网站和课程、播客
点击此处查看这些信息源的链接

开发者的感受

“Javascript 正在往正确的方向发展”

“当下构建 Javascript app 过于复杂惹”

“Javascript 被过度使用”

“我喜欢构建 JavaScript 应用程序”

“我希望 JavaScript 成为我的主要编程语言”

“JavaScript 生态系统变化太快”

年度之最

被采用最多的特性: Arrow Function

箭头函数是本年度使用最多的JavaScript功能，拥有97.8％的用户使用它。 > promise > 扩展运算符

使用最多的技术: React

React是今年使用最多的技术，拥有16099个用户。 > Express > Redux

满意度最高: Jest

有96.4％的用户愿意再次使用它，Jest再次证明了它不是在开玩笑。 > GraphQL > Cypress

最感兴趣: GraphQL

听说过GraphQL的开发人员中有89.6％希望学习它。那是很重要的兴趣！ > Jest > Apollo

最广泛的信息源: Stack Overflow

拥有17942个用户的Stack Overflow是今年使用最多的资源。 > MDN > CSS Tricks

黑马奖: Svelte

斯维尔特（Svelte）在今年的调查中首次亮相，我们迫不及待想知道它的去向 > Next.js > Stencil

总结

stateofjs团队在总结中说：

You know how you sometimes start tweaking a few lines of code here and there, then realize a couple functions could use some refactoring, and then one things leading to another you find yourself a few days later in the process of setting up a brand new stack complete with a database and GraphQL API?

This is what happened to us this year. And while it resulted in quite a few stressful evenings as we tried to wrap this up and release the State of JavaScript 2019 results in, well, 2019; it also means we now have a much more powerful and flexible stack to collect and analyze data going forward.

“你有时候会在这里那里调整几行代码,然后发现有几个函数可以重构,然后一个变更引发另一个变更，几天后你发现重构的过程中，用上了数据库和GraphQL API，建立了一个全新的技术栈...”

这是今年发生在他们身上的故事，使用数据库和GraphQL重构，使得整个stateofjs项目的开发、数据收集、数据分析等工作，更加灵活、更加强大。他们的重构将有助于分析所有那些掀起波澜的新工具的发展历程，例如 Svelte，Stencil，Nest 或 Flutter...

无论前端社区不断向你扔出多少奇怪名字的库，跟紧stateofjs的调查，及时自检，总归不会掉队😘😆

信息源聚合 | 2019年度Javascript社区

Mon, 30 Dec 2019 00:00:00 GMT

2019年度Javascript社区-信息源聚合

排名有先后，依据是StateOfJs调查
整理了一份可以在浏览器直接导入的👉书签文件

Blogs & Magazines

CSS Tricks
Dev.to
JavaScript Weekly
Smashing Magazine
David Walsh Blog
SitePoint
CoDrops
Daily JS
Best Of JS
Echo JS
Medium
Kent C. Dodds
Twitter
Overreacted
Reddit
Hacker News
Alligator.io
Habr
freeCodeCamp
2ality
Scotch
Node Weekly
Hackernoon
The Ember Times
React Status
Frontend Focus
Angular In Depth
Web.dev
Web Development Reading List
ESNext News
The Changelog
Pony Foo
Robin Wieruch
Wes Bos

Podcasts

Syntax
The Changelog
Front End Happy Hour
JavaScript Jabber
Full Stack Radio
Shop Talk Show
JS Party
CodePen Radio
JAMStack Radio
Modern Web
The Web Platform Podcast
CodePen
React Podcast
Software Engineering Daily
Ladybug Podcast
Real Talk JavaScript
The Undefined Podcast
Веб-стандарты
Elm Slack
Soft Skills Engineering Podcast
Frontend Weekend
Elm Town
The Odin Project
Developer Tea
Command Line Heroes
Adventures in Angular
Toolsday
Coding Blocks
Egghead.io
Kent C. Dodds
EmberMap
.NET Rocks
Views on Vue
Reason Town
Hipsters Ponto Tech
DevMode.fm
Fun Fun Function

ML03 | Tensor-张量简介

Sun, 29 Dec 2019 00:00:00 GMT

什么是Tensor

张量
是向量和矩阵向更高维度的推广
相当于多维数组

0维张量

1维张量

2维张量

2 维张量

3维张量

Tensor和机器学习有什么关系？

Tensor符合神经网络的数据结构
神经网络每一层要存N维数据
N层的For循环运算

Tensor的运算十分符合神经网络的运算

eg.用TensorFlow.js提供的点乘dotAPI能够简化复杂的for循环运算：

ML02 | TensorFlow.js简介

Thu, 26 Dec 2019 00:00:00 GMT

TensorFlow.js是什么

js实现的机器学库
可以在node.js/浏览器环境中使用机器学习技术，这意味着有更好的实时性和交互性
著名的TensorFlow是用Python实现的

TensorFlow.js能干什么

运行现有的模型（算法工程师已经训练好的模型）
重新训练现有模型
使用javascript开发机器学习模型

demo

tfjs的各种例子

在浏览器安装tfjs

新建一个html，script标签引入

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>

npm包安装，用import引入，用parcel/webpack构建

npm i @tensorflow/tfjs

在Node.JS安装tfjs

安装带有原生C++绑定的TensorFlow.js(推荐，底层是C++，速度快，但是安装麻烦)
安装纯Javascript版本，性能较差
使用require方式引用之前npm安装的@tensorflow/tfjs，直接用node运行当前js，一样可以在node中使用到tfjs，但是会提示：

============================
Hi there.
Looks like you are running TensorFlow.js in Node.js.
To speed things up dramatically, install our node backend, whi
ch binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================

因此要使用npm i @tensorflow/tfjs-node命令来安装后端版本tfjs，但是直接安装会报错，要先安装以下依赖：npm i node-gyp windows-build-tools@4.0.0 -g
node-gyp是node和计算机底层交互时经常要用到的包，在windows直接安装这个包也需要一些依赖，例如安装visual studio、python，因此windows-build-tools@4.0.0这个包就是用来解决其依赖问题的。
安装完后端版本tfjs@tensorflow/tfjs-node后，即可直接通过require引入使用

ML01 | 机器学习&神经网络简介

Wed, 25 Dec 2019 00:00:00 GMT

大纲

理论知识：机器学习、神经网络、 Tensorflow. js
经典案例：线性回归、逻辑回归、XOR、IRS、手写数字识别、商标识别、语音识别
神经网络模型：从单个神经元到深度神经网络
神经网络模型算法：MSE/Log/ Cross Entropy Sigmoid/Relu/Softmax， SGD/Adam
炼丹最佳实践：归化、欠（过）拟合、可视化、度量
模型的迁移学习、保存、加载、转换

为什么要学机器学习

可以做一些很酷的事情,tensorflow.js官网列出了一些已经训练好的，开箱即用的模型

例如，BodyPix：实时分割人的身体和身体部位

图像分类, 文本恶意检测, 语音指令识别, ...

机器学习是什么

数据 + 经验 -> 优化算法

对能通过经验自动改进算法的研究
用数据或者以往的经验，来优化计算机程序的性能标准

机器学习例子：线性回归

只包括一个自变量和一个因变量，且二者的关系可用一条直线近似表示，这种回归分析称为一元线性回归分析。

如果回归分析中包括两个或两个以上的自变量，且因变量和自变量之间是线性关系，则称为多元线性回归分析。

机器学习例子：逻辑回归

输入连续的（多个）值，输出0-1之间的概率，可以用于解决分类/是非判断问题

例子：图片分类、语音助手

为什么要用机器学习

有些问题无法用编写代码规则的方法来解决，例如图片识别。
获取数据比编写规则更容易
GPU等计算能力显著提升（上世纪神经网络就已发明，但是受限于计算机计算能力，得不到发展

机器学习如何运作

神经网络
决策树、支持向量机、贝叶斯分类器、强化学习

什么是神经网络

人工神经网络
一种运算模型（输入输出的映射）
由大量的节点（神经元）之间相互连接构成

神经网路包括：一个输入层，若干隐藏层，一个输出层。
每条线的权重可能不同

神经元、权重、偏置、激活函数

每个神经元里都存储着若干权重wight、偏置bias和一个激活函数activation
输入权重 + 偏置，经过激活函数得到输出
激活函数：用于添加非线性变换

神经网络的训练是什么？

给大量输入输出，算出神经网络里所有神经元的权重、偏置，然后给定新的输入，可以算出新的输出

机器学习中的术语

==特征==：输入
==标签==：输出
训练集：大量输入输出

如何训练

初始化：随便生成一些weight，bias
计算损失：给定特征，计算出标签，得到其与真实标签的差距
优化：微调weight和bias，使损失变小

前向传播

将训练数据的特征（输入）送入网络，得到标签（输出）

反向传播

计算损失并优化

如何计算损失

损失函数：均方误差、对数损失、交叉熵...

（了解损失函数原理即可，可以从第三方库调用。eg.TensorFlow.js）

如何优化

优化器：随即梯度下降SGD、Adam

（了解损失函数原理即可，可以从第三方库调用。eg.TensorFlow.js）

@https://www.bilibili.com/video/BV1AE411T7p7

被讨厌的勇气：一切的人际烦恼都可以用8个字来释怀

Sat, 09 Nov 2019 00:00:00 GMT

关注当下

决定人生的不是经历本身，而是个体赋予经历的意义
愤怒、悲伤等情绪并非失控，而是为操控他人或逃避问题的“手段”
人生非直线，是否抵达目的地不重要，过程本身即是意义。关注当下，不应该纠结过去或焦虑未来

一切烦恼源于人际关系

不要自卑，自卑感源于主观比较而非客观事实，若将不要自卑感变为逃避努力的借口
不要有靠炫耀权利、炫耀名牌去获得优越感，这是用虚假优越感掩盖自卑
不要与他人比较，与“理想自我”比较，而非与他人竞赛；
学会课题分离：划分责任边界，“结果最终由谁承担就应该由谁负责”。不干涉他人，也不被他人干涉，即使有人讨厌你，那也是别人的课题
横向关系取代纵向关系：摒弃表扬/批评等纵向操控手段，建立“虽不同但平等”的横向关系。例如用“谢谢”代替表扬，表达对贡献的感激而非评价
自我接纳：诚实地接受做不到的事，并朝可改变的方向努力；
信赖他人：无条件信任他人，不惧背叛（背叛是他人的课题）；
重视贡献：通过为共同体做贡献感知价值，即使贡献无形（如家庭主妇的付出）

ES6编程风格&最佳实践

Wed, 06 Nov 2019 00:00:00 GMT

块级作用域

let完全取代var
let和const优先const:
- 函数式编程思想，运算不改变值，只是新建值
- 防止了无意间修改变量值所导致的错误
- 有利于将来的分布式运算
- JavaScript 编译器会对const进行优化，所以多使用const，有利于提高程序的运行效率

字符串

静态一律用单引号/反引号
动态使用反引号
不使用双引号

解构赋值

从数组取值给变量时，优先用数组解构
函数参数是对象属性，优先用对象解构
函数有多个返回值时，优先用对象解构

对象

单行定义的对象，最后一个成员不以逗号结尾；多行定义的对象，最后一个成员要以逗号结尾
对象尽量静态化，一旦定义就不要随意添加属性。非要加，就用 Object.assign 方法
对象有动态属性名：用属性名表达式 [表达式]
对象的属性和方法，尽量用简洁表达式，易于书写和描述

数组

拷贝数组：用 ... 扩展运算符
类数组对象转数组：用Array.from方法

函数

立即执行函数：用箭头函数
匿名函数：用箭头函数
简单的、单行的、不会复用的函数：用箭头函数
用箭头函数取代Function.prototype.bind
不再用 _this/that/self/sf去绑定this
不在函数体内用 arguments变量，用rest运算符...代替
用默认值语法设置函数参数

Map和Object

只有模拟现实世界的对象时，采用Object
只需要key:value数据结构时，就用Map

Class和prototype

尽量用Class取代需要prototype的操作，更易书写和便于理解
用extends实现继承，更简单，不会使instanceof运算有风险

Module

Module语法使ES的标准写法
用import代替require
用export代替module.exports
如果模块只有一个输出值，就用default,否则别用
export default和export不要混合使用
模块输出的函数，函数名首字母应该用小写

使用ESLint

安装 ESLint
安装 Airbnb 等语法规则，以及 import、a11y、react 等插件
在项目的根目录下新建一个.eslintrc文件，配置 ESLint

自控力：即时反馈&延迟折扣

Thu, 19 Sep 2019 00:00:00 GMT

《自控力》介绍

“斯坦福大学广受欢迎的心理学课程”
总结意志力/欲望的现象
分析意志力/欲望的生理心理精神学原理
找出提升自控力/控制欲望的对策

思维导图

意志力的本质

我要的力量：行动
我不要的力量：抵制
我想要的力量：目标

意志力的生理特征

意志力像肌肉一样有限制。
意志力被消耗，会导致失控。
意志力从早到晚，逐渐减弱——把需要意志力的事情放在早上（意志力最强的时候）做。
饥饿/疲惫/紧张会影响意志力。
意志力可以训练：在一些小事上持续自控会提升整体的意志力

增强意志力的生理方法

运动：坚持运动，能提升意志力
睡眠：睡眠是对能量的恢复，早上的意志力最强
放松：压力会消耗意志力
呼吸等待：做失控决定前深呼吸，告诉自己等待几分钟再去做
训练：通过持续性的小事自控来训练意志力
动力：找出“我想要”的动力，让它环绕在你的生活的角角落落

引起“失控”的几种心理

自我感觉良好会让自己更易纵容。
把进步当作放纵的接口：前进一小步，后退两大步
透支成就感：向未来赊账

多巴胺 & 欲望vs幸福

多巴胺：让人产生欲望，而不是快乐

人脑的多巴胺系统，与快感中心不是同一个部分。
多巴胺系统刺激人原始动力系统的一部分。
使人产生欲望，预见快感，追逐欲望，而不是真正使人快乐。
过量的多巴胺：上瘾

欲望 != 幸福

没有欲望不幸福，欲望过多使人失控。
好欲望-》产生动力-》促进意志力
坏欲望-》屈服于诱惑-》失控
所以要合理利用欲望，分清“欲望”和“幸福”

多巴胺系统的特点

对新鲜事物/未知奖励敏感
对多样性敏感

多巴胺对策

“多巴胺化”：把不喜欢的东西和能促进多巴胺的事联系起来。
“鱼缸奖励法”：完成目标时，抽取未知的不同的奖励，而不是小儿稳定的奖励。

压力带来的“失控负循环”

打破循环的方法

及时止损，不要破罐子破摔
“自我谅解”，而不是加深自责加深压力促进循环
“行动”而不是“发誓改变”，不要满足于指定计划，这种满足感来源于“对想象中未来成就感的透支”
用有效的方式解压↓

有效的解压方式

运动
培养爱好
社交
音乐
阅读
牢牢记住以上方式解压后愉悦的心情

现代 vs 未来

`即时反馈`&`延迟折扣`

多巴胺系统使人乐于追求即时反馈
眼前的“小奖励” 比 “未来的大奖励” 更有诱惑力
延迟折扣：需要等待时间越久的奖励，诱惑力越低

抵制即时反馈

拉开与诱惑的距离：时间 & 空间
“10分钟法则”：决定放纵前，先等待10分钟（利用延迟折扣，诱惑力会降低
放大未来的奖励，降低折扣率，让想要的未来离自己更近，例如把偶像/目标贴在经常能看到的地方

缩小“现在的自己” 与“未来的自己”的差距

不要高看未来的自己
不要一切都拖到未来去做

意志力会传染

人生来就具有社会性：不可能脱离社会生存，要与他人产生联系

`社会认同感`

“自豪”，“惭愧”等社会性情绪，会促进人的自控
让自己相信“大多数人都自控”，“自控是个社会规范”，更有利于自控

`镜像神经元`的行为：

无意识的模仿他人
情绪传染
自控力传染

对策

增强免疫力
坚定自我
远离不自控人群

讽刺性反弹

“我不要”的神经学原理

大脑的“操作系统”：消耗能力去自控（耗能高）
大脑的“监控系统”：充满了“不要xxx”的警告（自动机制，耗能很低）

当人的精力不足时，1、2失去平衡，不断的执行2，不断的想起不能做的事情，却没有足够的能量去执行1去抵制，就会导致失控

讽刺性反弹的结果

“我不要”的力量，有时候会产生相反的效果
通过“抑制想法”来抵抗诱惑，可能会适得其反
越压抑人的本能，越容易适得其反

对策

了解认知偏见：认知偏见：想起xx的次数多，容易让人对xx的真实性产生误判。要知道自己不断想起的事情不一定是真的，不一定是对的
放弃控制内心的感受，坦率的面对与接受，关注自己的想法与感受，去理解分析，判断真实性的对错
直面自身的欲望，但不去行动：对内接受自我，对外控制行为
把“我不要”转为“我想要”效果更好。

注：书中列出的观点，大多数都有实验数据支撑，都是很有趣的实验，建议亲自阅读

刻意学习：如何持续行动

Mon, 19 Aug 2019 00:00:00 GMT

书的主旨 : 持续行动 + 持续学习

为什么要持续行动

为了成长

生而为成长，在这个变化万千的时代，不进则退。

跳出困境，重构现在与未来

现状有多痛苦，过往有多不堪，持续行动就该有多深。
“悟已往之不谏，知来者之可追”，我们的原生家庭、出身条件、容貌身体发肤、以及过去的种种，都是不可变的默认参数，只能靠当下的行动，去改变未来的轨迹。

正确的自我认知

拒绝自我感动

正是因为做得少，才容易“感动”，自欺欺人。
提前透支快感：为自己定下宏大的目标，并为之沾沾自喜，提前透支着目标达成的快感，真正要开始做事便耐不住寂寞开始放弃

拒绝“强及时反馈”

我们与外界互动，通常渴望强及时反馈，得不到变容易焦虑、急躁。
强及时反馈对复杂系统是不起作用的:

复杂系统	行为	强及时反馈
人的身体系统	跑一次步	变瘦变健康
大海	撒一泡尿	变脏

不要过度依赖技巧

投机取巧是追求强即时反馈的表现
过度追逐技巧的人，往往缺乏行动量
能用思路解决的问题，尽量不用技巧。从全局的层面看问题，理清逻辑思路，而不是抓住某个细节投机取巧

不要标榜/贴标签，去行动

通过标榜自己是谁，给自己贴标签，并且能马上得到本来要经过努力做成事才嗯那个得到的反馈，就不会再踏实的做事了。
通过“宣称”自己写作、在GRE、在奋斗，快速透支大量快感，往往时不会他是做事的。

不要自我迷恋，高估自己

不要做事无巨细的完美主义者：等到把所有的因素都准备完美再开工。不如先把一部分事情做起来。
制定计划时，总是雄心勃勃，透支着未来的成就感，高估自己的能力，往往开始正真做事的时候，更容易放弃。

放大格局

人是一种容易短视的动物，因为我们的圈子往往比整个世界小的太多太多微乎其微，这种短视会带来认知偏差，让我们做出错误的判断
时不时跳出自己的圈子，主动接触外界信息，不要过度相信自己的认知，是提升格局的关键

成长系统

如何行动

松散到紧凑

建立合理的作息
坚定的坚持下去

耐得住寂寞：没有成就感也要行动

持续行动的要义就在于持续，不要以任何理由打破自己定下的原则
不依靠透支未来的成就感，作为坚持下去的动力

克服拖延

五分钟内能做完的事，现在立即做。五分钟做不完的，现在开始做一部分。

放大对未来的感知

提前完成任务，而不是到deadline
不要高估自己的能力，低估自己完成任务所需的时间
时刻警醒自己，让自己感知着未来不完成任务带来的后果

早起是拓宽增量

更高效的利用时间，有两个途径。一是“存量优化”，在现有的作息时间中，更高效的利用时间。二是“拓宽增量”，也就是增加可支配的时间。
对于大多数人来说，“存量优化”是很难的，也是有瓶颈的，因此“拓宽增量”是更好的选择。
“拓宽增量”意味着压缩睡眠时间，起的更早显然比睡的更晚对身体更有利，并且清晨的时光，更以利用。

投资资源（时间+金钱）

首先，投资自己是一种收益最高的投入，不能因为惜钱，而去绕弯路，去用时间换钱
其次，投资自己不光意味花钱，花钱只是获得了更好的资源，真正的成长，需要你投入时间去持续行动

信息分级，对海量信息抗压

面对海量的信息，不因噎废食，直接切断所有的信息源
不自我焦虑，培养抗压能力，克服“永远刷不完的小红点”带来的焦虑不安
形成对信息分级的系统，主动的对信息分级，知道自己想要什么

关于n阶行动计划

阶数	时长	特点
一	10^1 = 10天，一个周	瓶颈在于执行力，行动系统有问题
二	10^2 = 100天，三个月	瓶颈在于学习系统和格局，有一定执行力，但是需要完善学习系统，升华格局
三	10^3 = 1000天，三年	时间足够长，能够见到真正的对复杂系统的改变，形成了思维惯性和依赖路径，瓶颈在于创新、重构、与时俱进
...	...	...

关于1000天持续行动计划

开局阶段：0-300天

认清自我，了解现状，认清现实，找出“我能做的”和“我想做的”之间的差距
仅能完成任务，倒逼自己

中盘持续阶段：200-600天

补足不全，缩短“我能做的”和“我想做的”之间的差距
能每天完成任务，并在其基础上有所进步

突破创新阶段：600-1000天

突破现有的固定模式，打破思维惯性
根据环境的改变，做出新的规划，升华行动

希望你看完，能做点什么

断舍离：物品的价值在于使用而不在于拥有

Mon, 05 Aug 2019 00:00:00 GMT

断舍离是什么

断舍离是一种，通过收拾物品来了解自己，整理自己，让人生更舒适的方法

‌如何做到断舍离

断（行为）:断绝要进入自己家里/生活里/脑海里的不需要的东西
舍（行为）:舍弃自己的世界里既有的破烂（clutter）
离（状态）:脱离对物品的执念，使自己处于游刃有余的自在空间

‌用湖泊比喻生活

断:对上游留下来的东西进行筛选，对生活入口有把控/筛选能力
舍:让不需要的东西流出

这样才能让生活保持新鲜，清静。

‌断舍离的灵魂一问

自己 当下 是否需要？

断舍离的主角:自己
断舍离的时间轴:当下

‌断舍离vs收纳

断舍离是对进入/留存在自己世界中的物品进行筛选（先）

收纳是对已有物品的整理（后）

通过先达到断舍离的状态，让自己的生活从加法走向减法，让自己陷于收纳整理的时间更少，让生活更轻松自在

‌为什么我们的生活里满是杂物

捡便宜，通过消费满足物欲，这也新奇，那也想买，买来新鲜感一过就闲置（物欲泛滥，对物品有执念）
执念于过去，念旧，舍不得（时间轴错位）
囤积癖，对未来过度忧虑，“万一以后会用到”，但实际概率很小（时间轴错位）
不想收拾不想改变（懒）

‌断舍离是令人愉悦的

通过断舍物品，完成自我发现，自我肯定的过程

物品的真正价值

任何物品都需要被使用，这才是它本身价值的体现。我们需要的东西其实并没有那么多，而留在身边的应该是最少量最好用的。

‌“拥有物品”是个伪命题

人的生命是有限的，一切有形的东西都是虚幻的，人心也是不断变化的。

物品只应该是我们追求人生幸福感的工具，而不是一种拥有/维护/收纳/处理的累赘。

因此“物品被使用的时候才是发挥价值的时候”，物品当下应该在需要他的地方，而不应该是闲置。

七、五、一总量限制原则

七:柜子等看不见的收纳物品装备只能放满七成，空出来的三成空间成为物品出入的通道，这样会让人有收拾整齐的欲望和心情。

五:看得见的收纳只放五成，主要作用于看得见的位置，比如置物架，茶几等等，比如商场高级的商品，摆放位置较零散。

一:通常用于装饰墙之类的，例如美术馆的画展，名画都单独挂在一面墙，显示了这幅画的重要性，营造了高端的感觉。

总量限制替换原则：当收纳超出七五一原则时，就需要考虑限制总量不变，替换现有的物品或者限制新入的物品

‌单一动作原则

收纳，要让（经常使用的）物品依赖尽量少的动作就能拿出来

‌自立原则

收纳尽量避免堆叠，立体放置可以让下面的/里面的物品更便于取出

如何与情绪相处

Tue, 09 Jul 2019 00:00:00 GMT

从人性上来说，我们倾向于保护自我最脆弱的部分

伤痛、需求未被满足、罪恶、耻辱会激发我们痛苦、恐惧、愤怒的情绪，这是人类天生的保护机制

我们无法控制自己的本能，但是应该学会接受、正视、了解我们的感觉和情绪，

去发现并解决情绪背后激发情绪的问题，而不是去任由情绪发泄

如何追求快乐

Tue, 09 Jul 2019 00:00:00 GMT

有很多快乐是放纵的快乐，是降低了人性尊严的快乐，而越能体现人性尊严的快乐，越是一种高级的快乐。

追求高级的快乐并不意味着放弃低级的快乐，但是如果你的眼目永远只关注地下，你永远不知道向上看有多么的快乐。

——罗翔

I don't need dollar bills to have fun

——【Cheap Thrills】 Sia

降低欲望、培养兴趣

享受平静才是生活的真谛

“上次我去一个朋友家玩，看到他们客厅里摆着一张很长的桌子。朋友说，每到周末，两个大人，一个孩子，还有两只猫都会围在这个桌子旁，家里很安静，只有书页翻动和画笔接触纸张的细微声音。”

为什么要趁年轻多学习

Tue, 09 Jul 2019 00:00:00 GMT

原文

爆炸性压力才能带来爆炸性进步

每次我状态低迷的时候，我都会看看这个视频，视频18分钟，如果你懒得看，我简述一下：

演讲者是许峰源先生，他出身一个非常贫穷的家庭，整个家庭，靠的是父亲踩着三轮车出去卖豆腐微薄的收入支撑着。

这不是一个烂仔逆袭的故事，因为从小看到了生活艰苦的一面，许峰源一直很努力想考上台大法律系，因为成为律师才有高收入，才能改变家庭的现状。

不幸的是，在他上大学的时候，父亲却查出了舌癌晚期，只剩一年左右的时间，为了让父亲在临终前看到自己的孩子成才，许峰源用了极短的时间通过了司法考试，成为了一名律师，让父亲看到了自己的律师证，才安然去世。

祸不单行，很快许峰源的母亲也查出了患有肺腺癌，一种扩散很迅猛的癌症，为了让母亲有一个安享晚年的环境，许峰源在23岁的时候，毅然辞职创业，白天在律师事务所打拼，晚上做培训，最终让母亲住上了好房子，接受更好的治疗，然后平静地送走了母亲。

前半生，许峰源先生为之奋斗的两个对象都走了，迷茫了一阵子之后，他依然没有放弃努力，而是选择了实现自我，成为了一名作家。

再烂的牌也得打下去，这就是人生

别让任何人打乱你的人生节奏

Tue, 09 Jul 2019 00:00:00 GMT

每个人的人生都不同

"Not everything that counts can be counted，and not everything that's counted truly counts"

"并不是每件算出来的事，都有意义；也不是每件有意义的事，都能被算出来" ——爱因斯坦

@https://www.bilibili.com/video/BV1WW411F7Hx

建立自己的价值体系

世人觉得瘦才是美，你就要以健康为代价过度减肥；世人觉得大眼睛双眼皮才是美，你就要花钱在脸上动刀；世人觉得肤白才是美，你无法改变就去否定自己；世人觉得出身决定地位，你就要否定自己和父母；

不要再活在别人的价值体系下，

不要再被这个世界灌输好与坏，

自己亲身去感受、去体验、去思考，

什么是真的好与坏

就是不想努力怎么办

Tue, 09 Jul 2019 00:00:00 GMT

我就想做一个安于现状的人

就想利用上班赚钱过好自己的小日子

就想平凡的过完一生

我就是不想拼命奋斗，拼命努力，拼命内卷

不可以吗？

当然可以，每个人的追求不同，淡泊名利，平静一生，真正能做到的话，是一种很高的人生境界。

但是你做出这种决定，就要考虑其带来的结果

你能做到真正的“淡泊名利”吗？

当别人用光鲜亮丽的服装、车子、房子包装和提升自己的生活品质时，你能做到不羡慕吗

当别人在马尔代夫浮潜、在阿尔卑斯滑雪、在土耳其滑翔、在富士山脚泡温泉喝清酒，你能做到不羡慕吗

你身边的人生活品质都比你高得时候，你会不会后悔

你的普通收入扣除房子首付、房贷、车子、奶粉钱之后你还足够安稳吗

如果不买房，你可以做到一生租房，并容忍一生到老不断的搬家吗

你的普通收入能让你匹配上你心仪的另一半吗

你的现状能维持你一生的稳定平凡吗？你能对抗人生所有的风险吗

你可以为自己的一生、父母后半生、孩子前半生的大大小小的健康问题买单吗

如果你有了孩子，你作为爸爸/妈妈，能给孩子最好的教育吗

如果你深刻的考虑了这些问题，都能得到坚定的答案，那么安于现状，不拼命努力，也没什么不好

每个人的人生都不同，人生的路也没有对错之分，只是路上的酸甜苦辣，你需要独自承担

JavaScript开发者应懂的33个概念

Mon, 01 Jul 2019 00:00:00 GMT

简介

原文链接

本篇文章是参照 @leonardomso 创立，英文版项目地址在这里。

调用堆栈
原始类型
值类型和引用类型
隐式, 显式, 名义和鸭子类型
== 与 ===, typeof 与 instanceof
this, call, apply 和 bind
函数作用域, 块级作用域和词法作用域
闭包
map, reduce, filter 等高阶函数
表达式和语句
变量提升
Promise
立即执行函数, 模块化, 命名空间
递归
算法
数据结构
消息队列和事件循环
setTimeout, setInterval 和 requestAnimationFrame
继承, 多态和代码复用
按位操作符, 类数组对象和类型化数组
DOM 树和渲染过程
new 与构造函数, instanceof 与实例
原型继承与原型链
Object.create 和 Object.assign
工厂函数和类
设计模式
Memoization
纯函数, 函数副作用和状态变化
耗性能操作和时间复杂度
JavaScript 引擎
二进制, 十进制, 十六进制, 科学记数法
偏函数, 柯里化, Compose 和 Pipe
代码整洁之道

1. 调用堆栈

文章

:book: Call Stack — MDN
:book: [译] JavaScript 如何工作：对引擎、运行时、调用堆栈的概述 —— 掘金
:book: [译] 理解 JavaScript 中的执行上下文和执行栈 —— 掘金
:book: 这一次，彻底弄懂 JavaScript 执行机制 —— 掘金
:book: 解读 JavaScript 之引擎、运行时和堆栈调用 —— 开源中国
:book: Tasks, microtasks, queues and schedules —— Jake Archibald
:book: Tasks, microtasks, queues and schedules（译） —— 掘金

视频

:tv: What is the event loop anyway? —— 腾讯视频(英文字幕)
:tv: Understanding The JavaScript Call Stack, Event Queue, Event Table, & Event Loop —— Bilibili
:tv: JS 中的变量提升、堆栈内存及闭包详解 —— Acfun
:tv: 事件循环模型 —— PHP 中文网
:tv: Javascript: the Call Stack explained — Coding Blocks India
:tv: The JS Call Stack Explained In 9 Minutes — Colt Steele
:tv: JavaScript Execution Stack — Codecademy
:tv: What is the Call Stack? — Eric Traub
:tv: The Call Stack — Kevin Drumm
:tv: Understanding JavaScript Execution — Codesmith
:tv: Call Stack & Event Loop — movies com

2. 原始类型

文章

:book: 原始数据 —— MDN
:book: [译]JavaScript 是怎样编码数字的 —— SegmentFault
:book: 每一个 JavaScript 开发者应该了解的浮点知识 —— 颜海镜
:book: JavaScript 标准参考教程(基本语法之数值) —— 阮一峰
:book: The Secret Life of JavaScript Primitives —— Angus Croll

视频

:tv: javascript 六种数据类型 —— 慕课网
:tv: javascript 视频教程(数据类型) —— PHP 中文网
:tv: JavaScript Reference vs Primitive Types — Academind
:tv: JavaScript Primitive Types — Simon Sez IT
:tv: Javascript Primitive and Reference Types — Baljeet Singh
:tv: Value Types and Reference Types in JavaScript — Programming with Mosh
:tv: JavaScript Primitive Data Types — Avelx
:tv: Everything you never wanted to know about JavaScript numbers — Bartek Szopka

3. 值类型和引用类型

文章

:book: ECMAScript 引用类型 —— W3school
:book: js 中的值类型和引用类型的区别 —— 博客园
:book: JavaScript 的值传递和引用传递 —— FunDebug
:book: Primitive Types & Reference Types in JavaScript —— Bran van der Meer
:book: JavaScript: Passing by Value or by Reference —— CSDN
:book: js 值引用和值复制 —— SegmentFault
:book: js- 引用和复制(传值和传址) —— CSDN

视频

:tv: Javascript Pass by Value vs Pass by Reference — techsith
:tv: JavaScript Value vs Reference Types — Programming with Mosh

4. 隐式, 显式, 名义和鸭子类型

文章

:book: ECMAScript 类型转换 —— W3school
:book: JavaScript 的怪癖 1：隐式类型转换 —— justjavac
:book: JavaScript 运算符规则与隐式类型转换详解 —— 掘金
:book: 聊一聊 JS 中的隐式类型转换 —— SegmentFault
:book: 有趣的 JavaScript 隐式类型转换 —— 博客园
:book: JavaScript 显式类型转换与隐式类型转换 —— CSDN
:book: 你不知道的 JavaScript（中卷）强制类型转换 —— 简书
:book: 你懂 JavaScript 嗎？#8 強制轉型 —— cythilya
:book: 动态类型语言和鸭子类型 —— 曾探
:book: Nominal & Structural Typing —— flow
:book: What exactly is Type Coercion in Javascript? —— stackoverflow
:book: You Don't Know JS: Types & Grammar —— github

视频

:tv: javascript 隐式转换 —— 慕课网
:tv: Javascript 基础加强-类型转换 —— 黑马程序员

5. == vs ===, typeof vs instanceof

文章

:book: JavaScript 中的相等性判断 —— MDN
:book: js 中 == 和 === 的区别 —— 掘金
:book: == vs === in Javascript —— CSDN
:book: 深入理解 javascript 之 typeof 和 instanceof —— CSDN
:book: JavaScript 的 typeof 的用途 —— justjavac
:book: 一张图看懂 Function 和 Object 的关系及简述 instanceof 运算符 —— 掘金
:book: 浅谈 instanceof 和 typeof 的实现原理 —— 掘金
:book: typeof 和 instanceOf 的区别

6. this, call, apply 和 bind

文章

:book: Javascript 的 this 用法 —— 阮一峰
:book: 学会 JS 的 this 这一篇就够了，根本不用记 —— 简书
:book: [译] this（他喵的）到底是什么 — 理解 JavaScript 中的 this、call、apply 和 bind —— 掘金
:book: this、apply、call、bind —— 掘金
:book: 使用 call、apply 和 bind 解决 js 中烦人的 this，事件绑定时的 this 和传参问题 —— 博客园
:book: call、apply 和 bind 的原生实现 —— github

视频

:tv: JavaScript 关于 this 关键字解释 —— 爱奇艺
:tv: JS 关于作用域闭包和 this 的综合面试题 —— 百度视频
:tv: js 面向对象闭包数组 12.函数中的 this —— 乐视视频
:tv: 1.3.10-this 指向及 this 应用 —— 乐视视频
:tv: 珠峰培训 JavaScript 开发课程：关于 this 关键字、闭包作用域 —— 网易云课堂

7. 函数作用域, 块级作用域和词法作用域

文章

:book: 变量作用域与解构赋值 —— 廖雪峰
:book: 学习 Javascript 闭包（Closure） —— 阮一峰
:book: JavaScript 中词法作用域、闭包与跳出闭包 —— SegmentFault
:book: JavaScript 深入之词法作用域和动态作用域 —— 掘金
:book: 深入理解闭包之前置知识 → 作用域与词法作用域 —— 掘金
:book: What is lexical scope? —— stackoverflow
:book: You Don't Know JS: Scope & Closures —— Kyle Simpson

8. 闭包

文章

:book: 闭包 —— MDN
:book: ECMAScript 闭包（closure）—— w3school
:book: 学习 Javascript 闭包（Closure） —— 阮一峰
:book: 闭包 —— 廖雪峰
:book: 一次性搞懂 JavaScript 闭包 —— 简书
:book: JavaScript 闭包 —— SegmentFault
:book: js 匿名自执行函数中闭包的高级使用 —— 掘金
:book: 高效使用 JavaScript 闭包 —— 掘金
:book: 深入理解 JavaScript 原型与闭包 —— 王福朋

视频

:tv: JavaScript 闭包和闭包面试题 —— 爱奇艺
:tv: js 面向对象闭包数组 11.闭包 —— 乐视
:tv: 白贺翔_函数(闭包) —— 乐视

9. map, reduce, filter 等高阶函数

文章

:book: 高阶函数 —— 廖雪峰
:book: ES5 中新增的 Array 方法详细说明 —— 张鑫旭
:book: 一张图看懂 JavaScript 中数组的迭代方法：forEach、map、filter、reduce、every、some —— 掘金
:book: Transducing（上）－《JavaScript 轻量级函数式编程》 —— SegmentFault
:book: JavaScript 函数式编程（三） —— @BuptStEve

10. 表达式和语句

文章

:book: js 表达式与语句 —— 博客园
:book: JS 表达式和语句的区别 —— SegmentFault
:book: JavaScript 中的表达式（expression）和语句/声明（statement） —— CSDN
:book: 重讀 Axel 的 Javascript 中的 Expression vs Statement 一文 —— SegmentFault
:book: Expressions versus statements in JavaScript —— Dr. Axel

11. 变量提升

文章

:book: JavaScript 变量提升 —— 菜鸟教程
:book: ES6 变量作用域与提升：变量的生命周期详解 —— 掘金
:book: [翻译] JavaScript Scoping and Hoisting —— SegmentFault
:book: JavaScript Scoping and Hoisting —— Ben Cherry

12. Promise

文章

:book: 使用 promises —— MDN
:book: Promise —— MDN
:book: Promise — 廖雪峰
:book: JavaScript Promise：去而复返 —— 司徒正美
:book: (上面的原文)JavaScript Promise：简介 —— Web Fundamentals
:book: 1 分钟读完《10 分钟学会 JavaScript 的 Async/Await》 —— justjavac
:book: JavaScript Promise 迷你书（中文版）
:book: JavaScript 进阶之路——认识和使用 Promise，重构你的 Js 代码 —— 博客园

视频

:tv: Promise 入门 —— 慕课网

13. 立即执行函数, 模块化, 命名空间

文章

:book: Javascript 模块化编程（一）：模块的写法 —— 阮一峰
:book: javascript 模块化编程-详解立即执行函数表达式 —— 简书
:book: Javascript 的匿名函数与自执行 —— 掘金
:book: 前端模块化——技术选型 —— SegmentFault
:book: 谈谈 Js 前端模块化规范 —— SegmentFault
:book: 函数声明与函数表达式的区别 —— 伯乐在线

14. 递归

文章

:book: 求解释 js 递归 —— SegmentFault
:book: JavaScript 中的递归 —— 掘金
:book: 递归（上）－《JavaScript 轻量级函数式编程》 —— 掘金
:book: 递归（下）－《JavaScript 轻量级函数式编程》 —— 掘金
:book: 尾调用和尾递归 —— 掘金
:book: 几个经典递归问题用 js 实现 —— CSDN
:book: 递归函数的几个例子 —— CSDN

15. 算法

文章

:book: 十大经典排序算法总结（JavaScript 描述） —— 掘金
:book: 在 JavaScript 中学习数据结构与算法 —— 掘金
:book: JS 中可能用得到的全部的排序算法 —— 掘金
:book: JS 家的排序算法 —— 简书
:book: 前端常见算法的 JS 实现 —— SegmentFault
:book: 前端面试中的常见的算法问题 ——蒲小花的博客

视频

:tv: Javascript 实现二叉树算法 —— 慕课网

16. 数据结构

文章

:book: 来我们浅谈一下 js 的数据结构 —— 简书
:book: JavaScript 中的算法与数据结构 —— 简书
:book: 学 JS 必看-JavaScript 数据结构深度剖析 —— 大道至简的博客
:book: js 中基础数据结构数组去重问题 —— 掘金

视频

:tv: :tv: JavaScript 数据结构-运算符 —— 乐视

17. 消息队列和事件循环

文章

:book: 并发模型与事件循环 —— MDN
:book: JavaScript 运行机制详解：再谈 Event Loop —— 阮一峰
:book: 深入理解 JavaScript 事件循环 —— 博客园
:book: 深入浅出 Javascript 事件循环机制 —— 知乎
:book: JS 事件循环机制（event loop）之宏任务、微任务 —— SegmentFault
:book: JavaScript：彻底理解同步、异步和事件循环 —— SegmentFault
:book: 从浏览器多进程到 JS 单线程，JS 运行机制最全面的一次梳理 —— 掘金

18. setTimeout, setInterval 和 requestAnimationFrame

文章

:book: Window setTimeout() 方法 —— 菜鸟教程
:book: Window setInterval() 方法 —— 菜鸟教程
:book: 关于 setTimeout —— 掘金
:book: 你不知道的 Javascript：有趣的 setTimeout —— 掘金
:book: 原来你是这样的 setTimeout —— 掘金
:book: setTimeout() 和 setInterval() 本质区别在哪里？ —— SegmentFault
book: window.requestAnimationFrame —— MDN
:book: requestAnimationFrame 知多少？ —— 博客园
:book: CSS3 动画那么强，requestAnimationFrame 还有毛线用？ —— 张鑫旭
:book: 「JavaScript 定时器」setInterval、setTimeout 和 requestAnimationFrame 浅析 —— SegmentFault
:book: 翻译：setInterval 与 requestAnimationFrame 的时间间隔测试 —— SegmentFault
:book: 阿里前端面试题：requestAnimationFrame 实现类似 setInterval 的计时器 —— SegmentFault

视频

:tv: setTimeout 和 setInterval —— 优酷

19. 继承, 多态和代码复用

文章

:book: JS 面向对象编程之：封装、继承、多态 —— 博客园
:book: Javascript 的继承与多态 —— 简书
:book: js:面向对象编程，带你认识封装、继承和多态 —— 掘金
:book: JavaScript 中的“多继承” —— 掘金
:book: 代码复用模式 —— github
:book: 深入理解 JavaScript：代码复用模式(推荐篇) —— 汤姆大叔
:book: 深入理解 JavaScript：代码复用模式(避免篇) —— 汤姆大叔

20. 按位操作符, 类数组对象和类型化数组

文章

:book: 按位操作符 —— MDN
:book: 类数组对象 —— MDN
:book: 类型化数组 —— MDN
:book: JavaScript ArrayBuffer 浅析 —— 博客园

21. DOM 树和渲染过程

文章

:book: 如何创建一个 DOM 树 —— MDN
:book: HTML DOM 节点 —— W3school
:book: DOM 概述 —— 阮一峰
:book: 《JavaScript 闯关记》之 DOM（上）—— 掘金
:book: 《JavaScript 闯关记》之 DOM（下）—— 掘金
:book: 掌握 DOM 操作 —— 掘金
:book: 操作 DOM —— 廖雪峰
:book: 原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的 —— 掘金

视频

:tv: DOM 探索之基础详解篇 —— 慕课网
:tv: DOM 事件探秘 —— 慕课网
:tv: jQuery 基础(二)DOM 篇 —— 慕课网
:tv: JS 操作 DOM 对象属性和方法 —— 爱奇艺

22. new 与构造函数, instanceof 与实例

文章

:book: 构造函数与 new 命令 —— 阮一峰
:book: Javascript 面向对象编程（二）：构造函数的继承 —— 阮一峰
:book: 完整原型链详细图解(构造函数、原型、实例化对象) —— CSDN
:book: JavaScript 中构造函数与 new 操作符的实例详解 —— PHP 中文网
:book: 构造函数、实例、原型、原型链之间的关系 —— CSDN
:book: 深入理解 JS—instanceof 和原型链 —— CSDN
:book: 前端基础进阶（九）：详解面向对象、构造函数、原型与原型链 —— 简书
:book: js 用 new 实例化对象与直接调用的 this 的区别 —— 简书
:book: JavaScript 并非所有的东西都是对象 —— justjavac
:book: JavaScript instanceof 运算符深入剖析 —— IBM

视频

:tv: 改良版的构造函数 —— 乐视

23. 原型继承与原型链

文章

:book: 继承与原型链 —— MDN
:book: 构造函数、原型与原型链 —— github
:book: 原型及原型链 —— github(1269 Star)
:book: 理清 javascript 中的面向对象(一) 原型继承 —— SegmentFault
:book: JavaScript：继承和原型链(译) —— justjavac
:book: 三张图搞懂 JavaScript 的原型对象与原型链 —— 博客园
:book: 一张图让你搞懂 JavaScript 的继承与原型链 —— CSDN
:book: JS 高级--原型链(一看就懂，但 18 岁以下请绕道) —— CSDN
:book: 原型继承 —— 廖雪峰
:book: JS 原型链与继承别再被问倒了 —— 掘金
:book: 征服 JavaScript 面试系列：类继承和原型继承的区别 —— 掘金
:book: JavaScript 深入之从原型到原型链 —— 冴羽
:book: 深入理解 JavaScript 原型与闭包 —— 王福朋

视频

:tv: JS 高级-07-原型链继承 —— 乐视
:tv: JS 原型对象和原型链简介 —— 腾讯视频

24. Object.create 和 Object.assign

文章

:book: Object.create —— MDN
:book: Object.assign —— MDN
:book: Object.create vs Object.assign —— 慕课网手记
:book: JS 中的 Object.assign()、Object.create()、Object.defineProperty() —— CSDN
:book: es6 中 object.create()和 object.assign() —— 风信子博客
:book: Object-Assign-Deep —— github

25. 工厂函数和类

文章

:book: 类 —— MDN
:book: 类和实例 —— 廖雪峰
:book: Javascript 定义类（class）的三种方法 —— 阮一峰
:book: 【译】ES6 的工厂函数 —— 掘金
:book: JavaScript 创建对象之单例、工厂、构造函数模式 —— 掘金

26. 设计模式

文章

:book: JavaScript 设计模式 —— 掘金
:book: 学用 JavaScript 设计模式 —— 极客学院
:book: [面试专题]JS 设计模式 —— SegmentFault
:book: JavaScript Patterns 中译本 —— github

视频

:tv: HTML5 课程大纲 2-11JS 设计模式

27. Memoization

文章

:book: JavaScript Memoization —— 司徒正美
:book: memoization 提升递归效率 —— 博客园
:book: 如何提升 JavaScript 的递归效率 —— 51CTO
:book: JavaScript 高级技巧 Memoization —— SegmentFaut

28. 纯函数, 函数副作用和状态变化

文章

:book: 纯函数(Pure Function) —— React.js 小书
:book: JavaScript Functional Programming：纯函数 —— 宁皓网
:book: js 函数的副作用分析 —— 脚本之家
:book: 如何使用纯函数式 JavaScript 处理脏副作用 —— 掘金
:book: 原生 JavaScript 实现 state 状态管理系统 —— 博客园
:book: JavaScript 函数式编程 —— @BuptStEve

29. 耗性能操作和时间复杂度

文章

:book: 时间复杂度 O(log n) 意味着什么？ —— 掘金
:book: 算法的时间复杂度和空间复杂度 —— 掘金
:book: 算法（一）时间复杂度 —— 掘金
:book: Big O Search Algorithms in JavaScript —— Bradley Braithwaite
:book: Time Complexity Analysis in JavaScript — Jennifer Bland

30. JavaScript 引擎

文章

:book: javascript 引擎 —— 百度百科
:book: V8(JavaScript 引擎) —— 百度百科
:book: 图解搞懂 JavaScript 引擎 Event Loop —— 掘金3
:book: V8 JavaScript 引擎：高性能的 ES2015+ —— justjavac
:book: 10 分钟理解 JS 引擎的执行机制 —— SegmentFaut
:book: V8 javascript 引擎 —— 博客园

31. 二进制, 十六进制, 十进制, 科学记数法

文章

:book: 二、八、十、十六进制转换(图解篇) —— 博客园
:book: JavaScript 读写二进制数据 —— 掘金

视频

:tv: 二进制、十进制、十六进制互相转化很难吗？ —— 百度视频

32. 偏函数, 柯里化, Compose 和 Pipe

文章

:book: Javascript 函数式编程之偏函数 —— CSDN
:book: JavaScript 专题之偏函数 —— SegmentFault
:book: 柯里化和偏函数有什么区别？ —— SegmentFault
:book: Javascript 偏函数与柯里化 —— CSDN
:book: 柯里化(curry) —— JS 函数式编程指南
:book: 代码组合(compose) —— JS 函数式编程指南
:book: 关于 javascript 函数式编程中 compose 的实现 —— SegmentFault
:book: 实现 compose 的五种思路 —— SegmentFault
:book: JavaScript 函数式编程之函数组合函数 compose 和 pipe 的实现 —— SegmentFault
:book: JavaScript 轻量级函数式编程-第 4 章:组合函数 ——掘金
:book: JavaScript 函数式编程（二） —— @BuptStEve

33. 代码整洁之道

文章

:book: [译] JavaScript 代码整洁之道 —— 边城
:book: Javascript 编程风格 —— 阮一峰
:book: 重构 - 代码整洁之道 —— 掘金
:book: 让你的代码更简短，更整洁，更易读的 ES6 小技巧 —— 掘金
:book: Web 前端：11 个让你代码整洁的原则 —— 伯乐在线
:book: Clean Code concepts adapted for JavaScript —— ryanmcdermott