Life like a box of chocolate – Page 2

分区概念

wee / November 13, 2020 / Life like a box of chocolate

全局唯一标识分区表 GUID Partition Table，缩写：GPT

是一个实体硬盘的分区表的结构布局的标准。它是可扩展固件接口（UEFI）标准（被Intel用于替代个人计算机的BIOS）的一部分，被用于替代BIOS系统中的一32bits来存储逻辑块地址和大小信息的主引导记录（MBR）分区表。对于那些扇区为512字节的磁盘，MBR分区表不支持容量大于2.2TB（2.2×10¹²字节）^[1]的分区，然而，一些硬盘制造商（诸如希捷和西部数据）注意到这个局限性，并且将他们的容量较大的磁盘升级到4KB的扇区，这意味着MBR的有效容量上限提升到16 TiB。这个看似“正确的”解决方案，在临时地降低人们对改进磁盘分配表的需求的同时，也给市场带来关于在有较大的块（block）的设备上从BIOS启动时，如何最佳的划分磁盘分区的困惑。GPT分配64bits给逻辑块地址，因而使得最大分区大小在2⁶⁴-1个扇区成为可能。对于每个扇区大小为512字节的磁盘，那意味着可以有9.4ZB（9.4×10²¹字节）或8 ZiB个512字节（9,444,732,965,739,290,426,880字节或18,446,744,073,709,551,615（2⁶⁴-1）个扇区×512（2⁹）字节每扇区）^[1][2]。

在MBR硬盘中，分区信息直接存储于主引导记录（MBR）中（主引导记录中还存储着系统的引导程序）。但在GPT硬盘中，分区表的位置信息储存在GPT头中。但出于兼容性考虑，硬盘的第一个扇区仍然用作MBR，之后才是GPT头。

主引导记录（Master Boot Record，缩写：MBR），又叫做主引导扇区，是计算机开机后访问硬盘时所必须要读取的首个扇区，它在硬盘上的三维地址为（柱面，磁头，扇区）＝（0，0，1）。在深入讨论主引导扇区内部结构的时候，有时也将其开头的446字节内容特指为“主引导记录”（MBR），其后是4个16字节的“磁盘分区表”（DPT），以及2字节的结束标志（55AA）。因此，在使用“主引导记录”（MBR）这个术语的时候，需要根据具体情况判断其到底是指整个主引导扇区，还是主引导扇区的前446字节。

QA 测试

wee / July 30, 2020July 30, 2020 / Life like a box of chocolate

react Universal rendering

wee / June 8, 2020August 22, 2020 / Life like a box of chocolate

** PWA

* Redux

* Combine the Express router with React Router

*** Create a test environment

*** (Try to) code split

你不知道的 JS

wee / April 6, 2020August 26, 2020 / Life like a box of chocolate

// counter.js
let counter = 10;
export default counter;

// index.js
import myCounter from "./counter";

myCounter += 1;

console.log(myCounter);

引入的模块是只读的: 你不能修改引入的模块。只有导出他们的模块才能修改其值。当我们给myCounter增加一个值的时候会抛出一个异常： myCounter是只读的，不能被修改

delete操作符返回一个布尔值： true指删除成功，否则返回false. 但是通过 var, const 或 let 关键字声明的变量无法用 delete 操作符来删除。

name变量由const关键字声明，所以删除不成功:返回 false. 而我们设定age等于21时,我们实际上添加了一个名为age的属性给全局对象。对象中的属性是可以删除的，全局对象也是如此，所以delete age返回true.

var b = 10;
(function b(){
    b = 20;
    console.log(b); 
})();
打印的是 function b（）{b=20; console.log(b)};
// 关于作用域 立即执行函数b， 函数变量名称b 的作用域只局限在这个函数内，
// 在非匿名自执行函数中，函数变量为只读状态无法修改；

3 BFC block formatting context

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部

只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 特性及应用

同一个 BFC 下外边距会发生折叠（比如 Margin 重合会折叠）
BFC 可以包含浮动的元素（它将清除浮动）
BFC 可以阻止元素被浮动元素覆盖 （浮动元素会遮盖普通文挡流, 不会遮盖BFC元素）

让nginx上的静态网页在访问的时候没有html后缀

wee / March 3, 2020 / Life like a box of chocolate

location ^~ /translate/ {   //定位URL中translate文件夹下的静态文件

        if (!-e $request_filename){   //通过访问时添加后缀来隐藏URL中的后缀
           rewrite ^(.*)$ /$1.html last;
           break;
        }
        root /var/www/html;
        index index.html index.nginx-debian.html;
        try_files $uri $uri/ =404;
    }

浏览器header 安全策略

wee / February 29, 2020August 13, 2020 / Life like a box of chocolate

strict-transport-security

link

x-frame-options

已广泛支持的非官方标准

HTTP 响应头是用来给浏览器指示允许一个页面可否在 <frame> ,<iframe> , <embed> 或者 <object> 中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免 clickjacking 攻击。

X-Frame-Options: deny 
X-Frame-Options: sameorigin  
X-Frame-Options: allow-from https://example.com/

x-content-type-options

HTTP 消息头相当于一个提示标志，被服务器用来提示客户端一定要遵循在 Content-Type 首部中对 MIME 类型的设定，而不能对其进行修改。这就禁用了客户端的 MIME 类型嗅探行为，换句话说，也就是意味着网站管理员确定自己的设置没有问题。就是阻止不可执行的 MIME 类型转变为可执行的 MIME 类型

X-Content-Type-Options: nosniff
nosniff
下面两种情况的请求将被阻止：
请求类型是"style" 但是 MIME 类型不是 "text/css"，
请求类型是"script" 但是 MIME 类型不是 JavaScript MIME 类型。

X-XSS-Protection

响应头是 Internet Explorer，Chrome 和 Safari 的一个特性，当检测到跨站脚本攻击 (XSS)时，浏览器将停止加载页面。若网站设置了良好的 Content-Security-Policy 来禁用内联 JavaScript (‘unsafe-inline’)，现代浏览器不太需要这些保护，但其仍然可以为尚不支持 CSP 的旧版浏览器的用户提供保护。

X-XSS-Protection: 0
X-XSS-Protection: 1
X-XSS-Protection: 1; mode=block
X-XSS-Protection: 1; report=<reporting-uri>

0禁止XSS过滤。
1启用XSS过滤（通常浏览器是默认的）。如果检测到跨站脚本攻击，浏览器将清除页面（删除不安全的部分）。
1;mode=block启用XSS过滤。如果检测到攻击，浏览器将不会清除页面，而是阻止页面加载。
1; report=<reporting-URI> (Chromium only)启用XSS过滤。如果检测到跨站脚本攻击，浏览器将清除页面并使用CSP report-uri指令的功能发送违规报告

使用 WithStyles 来扩充你的属性

wee / January 7, 2020 / Life like a box of chocolate

//不推荐
const styles = (theme: Theme) => createStyles({
  root: { /* ... */ },
  paper: { /* ... */ },
  button: { /* ... */ },
});

interface Props {
  // 未被注入样式的属性
  foo: number;
  bar: boolean;
  // 被注入样式的属性
  classes: {
    root: string;
    paper: string;
    button: string;
  };
}

//推荐：
import { WithStyles, createStyles } from '@material-ui/core';

const styles = (theme: Theme) => createStyles({
  root: { /* ... */ },
  paper: { /* ... */ },
  button: { /* ... */ },
});

interface Props extends WithStyles<typeof styles> {
  foo: number;
  bar: boolean;
}

react 动画

wee / November 15, 2019 / Life like a box of chocolate

CSS 动画
React-transition-group – 它是一个附加组件，用于实现基本的 CSS 动画和过渡动画。
react-animations – React-animations 实现 animate.css 的所有动画，且简单易用！
**React Reveal -**这是 React 的动画框架。
TweenOne – ant.design 里用于动画的库
动画链接

Decorator

wee / August 22, 2019August 22, 2019 / Life like a box of chocolate

就是把类作为参数传给装饰器函数
[cc lang=”js”]
@frozen class Foo {
@configurable(false)
@enumerable(true)
method() {}

@throttle(500)
expensiveMethod() {}
}

//装饰器可以用来装饰整个类

@testable
class MyTestableClass {
// …
}

function testable(target) {
target.isTestable = true;
}

MyTestableClass.isTestable // true
[/cc]

前面的例子是为类添加一个静态属性，如果想添加实例属性，可以通过目标类的prototype对象操作。
[cc lang=”js”]function testable(target) {
target.prototype.isTestable = true;
}

@testable
class MyTestableClass {}

let obj = new MyTestableClass();
obj.isTestable // true[/cc]

[cc lang=”js”]@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}[/cc]

按需加载，异步代码分割

wee / August 6, 2019May 7, 2021 / Life like a box of chocolate

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')