前言

在 React16.8 中，新增hook功能，能夠在函數組件（Function Component）中使用 state 及其它原本在類組件才能使用的功能。今日我們來試一下怎麼把一個類組件（Class Component）使用新的 Hook 功能改寫成函數組件。

為甚麼要用函數組件

函數組件和類組件最大的區別在於語法，函數組件就是一個函數接受props作為參數，返回 React Element。

1

const Home = props => <div>Welcome, ${props.name}</div>;

而類組件則需要繼承 React.Component，並實現 render 方法。與函數組件相比，在代碼簡潔程度來說，類組件略遜一籌。

1
2
3
4
5

class Home extends React.Component {
	render() {
		return <div>Welcome, ${props.name}</div>;
	}
}

但在 React16.8 之前，函數組件一個致命的弱點，函數組件無法使用 state、refs 和生命週期鈎子，如果要使用這些功能，就必須寫成類組件。

在一些 React 的最佳實踐中推薦能使用函數組件就使用函數組件，當需要用到 state、refs 和生命週期鈎子時才改為類組件。

原因包括：

• 函數組件代碼更簡潔
• 因為沒有生命週期和狀態，函數組件更容易測試和閱讀（React16.8前）
• 更符合最佳實踐中，把組件分為展示組件（Presentation Component）和容器組件（Container Component）的理念。

要改寫的目標

可以來試試改改傳說 Antd 的組件，挑了一個相對簡單的 BackTop 組件來改。
GitHub: 點我

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

function getDefaultTarget() {
	return window;
}

export interface BackTopProps {
	visibilityHeight?: number;
	onClick?: React.MouseEventHandler<HTMLElement>;
	target?: () => HTMLElement | Window;
	prefixCls?: string;
	className?: string;
	style?: React.CSSProperties;
	visible?: boolean; // Only for test. Don't use it.
}

export default class BackTop extends React.Component<BackTopProps, any> {
	static defaultProps = {
		visibilityHeight: 400
	};

	scrollEvent: any;

	constructor(props: BackTopProps) {
		super(props);
		this.state = {
			visible: false
		};
	}

	componentDidMount() {
		const getTarget = this.props.target || getDefaultTarget;
		this.scrollEvent = addEventListener(
			getTarget(),
			"scroll",
			this.handleScroll
		);
		this.handleScroll();
	}

	componentWillUnmount() {
		if (this.scrollEvent) {
			this.scrollEvent.remove();
		}
	}

	scrollToTop = (e: React.MouseEvent<HTMLDivElement>) => {
		const { target = getDefaultTarget, onClick } = this.props;
		scrollTo(0, {
			getContainer: target
		});
		if (typeof onClick === "function") {
			onClick(e);
		}
	};

	handleScroll = () => {
		const { visibilityHeight, target = getDefaultTarget } = this.props;
		const scrollTop = getScroll(target(), true);
		this.setState({
			visible: scrollTop > (visibilityHeight as number)
		});
	};

	renderBackTop = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
		const {
			prefixCls: customizePrefixCls,
			className = "",
			children
		} = this.props;
		const prefixCls = getPrefixCls("back-top", customizePrefixCls);
		const classString = classNames(prefixCls, className, {
			[`${prefixCls}-rtl`]: direction === "rtl"
		});

		const defaultElement = (
			<div className={`${prefixCls}-content`}>
				<div className={`${prefixCls}-icon`} />
			</div>
		);

		// fix https://fb.me/react-unknown-prop
		const divProps = omit(this.props, [
			"prefixCls",
			"className",
			"children",
			"visibilityHeight",
			"target",
			"visible"
		]);

		const visible =
			"visible" in this.props ? this.props.visible : this.state.visible;

		const backTopBtn = visible ? (
			<div {...divProps} className={classString} onClick={this.scrollToTop}>
				{children || defaultElement}
			</div>
		) : null;

		return (
			<Animate component="" transitionName="fade">
				{backTopBtn}
			</Animate>
		);
	};

	render() {
		return <ConfigConsumer>{this.renderBackTop}</ConfigConsumer>;
	}
}

先分離一下關注點。這一段的代碼是執行事件的注冊和移除，相應到 Hook 的方法就是useEffect，useEffect可以返回函數，該函數將在unmount時被調用。

1
2
3
4
5
6
7
8
9
10
11

componentDidMount() {
   const getTarget = this.props.target || getDefaultTarget;
   this.scrollEvent = addEventListener(getTarget(), 'scroll', this.handleScroll);
   this.handleScroll();
  }

componentWillUnmount() {
   if (this.scrollEvent) {
      this.scrollEvent.remove();
   }
}

轉換後

1
2
3
4
5
6
7
8
9
10

useEffect(() => {
	const getTarget = this.props.target || getDefaultTarget;
	const scrollEvent = addEventListener(getTarget(), "scroll", handleScroll); // 先假設有這個方法
	handleScroll();
	return () => {
		if (scrollEvent) {
			scrollEvent.remove();
		}
	};
});

然後是這個很明顯的constructor，是用useState，useState返回一個數組，第一個元素就是state，第二個元素就是改變狀態的函數，具體可以在數組解構的時候重新命名，一般的命名習慣是xxx和setXxx，useState的實踐方法也分為兩種，一種是每一個狀態的調用一次useState，得到一組的xxx和setXxx，另一種作法是把所有狀態放在一個，只有一個state和setState。

1
2
3
4
5
6

constructor(props: BackTopProps) {
    super(props);
    this.state = {
      visible: false,
    };
  }

轉換後

1

const [visible, setVisible] = useState(false);

其它的就沒有甚麼特別了，就照抄一遍就行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

const BackTop: FunctionComponent<BackTopProps> = (props: BackTopProps) => {
   const [visible, setVisible] = useState(false);
   const handleScroll = () => {
      const { visibilityHeight, target = getDefaultTarget } = this.props;
      const scrollTop = getScroll(target(), true);
         setVisible(
            visible: scrollTop > (visibilityHeight as number),
      );
  };

   useEffect(() => {
      const getTarget = this.props.target || getDefaultTarget;
      const scrollEvent = addEventListener(getTarget(), "scroll", handleScroll);
      handleScroll();
      return () => {
         if (scrollEvent) {
            scrollEvent.remove();
         }
	};

   const scrollToTop = (e: React.MouseEvent<HTMLDivElement>) => {
		const { target = getDefaultTarget, onClick } = this.props;
		scrollTo(0, {
			getContainer: target
		});
		if (typeof onClick === "function") {
			onClick(e);
		}
	};

   const renderBackTop = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
		const {
			prefixCls: customizePrefixCls,
			className = "",
			children
		} = this.props;
		const prefixCls = getPrefixCls("back-top", customizePrefixCls);
		const classString = classNames(prefixCls, className, {
			[`${prefixCls}-rtl`]: direction === "rtl"
		});

		const defaultElement = (
			<div className={`${prefixCls}-content`}>
				<div className={`${prefixCls}-icon`} />
			</div>
		);

		const divProps = omit(this.props, [
			"prefixCls",
			"className",
			"children",
			"visibilityHeight",
			"target",
			"visible"
		]);

		const visible =
			"visible" in this.props ? this.props.visible : this.state.visible;

		const backTopBtn = visible ? (
			<div {...divProps} className={classString} onClick={this.scrollToTop}>
				{children || defaultElement}
			</div>
		) : null;

		return (
			<Animate component="" transitionName="fade">
				{backTopBtn}
			</Animate>
		);
	};

   return <ConfigConsumer>{this.renderBackTop}</ConfigConsumer>;
});

}

Why

在React 16.3版本中，React官方推出了新的生命週期方法，而有一部分舊的生命週期方法則被標記為Unsafe，該方法在React17中將會被廢棄，而今日的主角componentWillReceiveProps則是其中一個。

componentWillReceiveProps

先來看看componentWillReceiveProps是怎麼用的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

import * as React from "react";
import * as ReactDOM from "react-dom";

interface IInputProps {
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
}

interface IInputState {
  value: string;
}

class Input extends React.Component<IInputProps, IInputState> {
  public constructor(props: IInputProps) {
    super(props);

    const initialValue = props.value
      ? props.value
      : props.defaultValue
      ? props.defaultValue
      : "";

    this.state = {
      value: initialValue
    };
  }

  public UNSAFE_componentWillReceiveProps(nextProps: IInputProps) {
    if (nextProps.value !== undefined && nextProps.value !== this.props.value) {
      this.setState({ value: nextProps.value });
    }
  }

  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { onChange } = this.props;
    if (onChange) {
      // 受控
      onChange(e.target.value);
    } else {
      this.setState({ value: e.target.value });
    }
  };

  public render(): React.ReactNode {
    const { value } = this.state;
    return <input value={value} onChange={this.handleChange} />;
  }
}

const App = () => {
  const [value, setValue] = React.useState();
  return (
    <>
      <Input
        value={value}
        onChange={value => {
          setValue(value);
        }}
      />
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

getDerivedStateFromProps

getDerivedStateFromProps和componentWilLReceiveProps最大的不同就是前者靜態（static），後者是類方法，也就是getDerivedStateFromProps不能訪問this。第二個不同是調用的次數和時機。

看看這個React15版本的生命週期圖。

再看看這個React16版本比較比較。

在React15中，componentWilLReceiveProps只會在更新（Updating）的時候調用，而React16的getDerivedStateFromProps在掛載（Mounting）和更新（Updating）時都會調用，因此轉換要需要注意添加處理掛載時的邏輯。

開始轉換

可以看到在掛載時, componentWilLReceiveProps並沒有被調用，在輸入的時候（Input的input -> handleChange -> props.onChange -> App的setValue -> App的value改變 -> Input更新），componentWillReceiveProps被調用一次。

把componentWilLReceiveProps替換為getDerivedStateFromProps。

1
2
3
4
5
6
7
8
9
10
11
12

static getDerivedStateFromProps(
    nextProps: IInputProps,
    prevState: IInputState
  ) {
    if (nextProps.value !== undefined && nextProps.value !== prevState.value) {
      return {
        value: nextProps.value
      };
    } else {
      return null;
    }
  }

在第一次掛載的時候，getDerivedStateFromProps就已經被調用了一次，這時prevState就是construtor裡設置的。

在替換成getDerivedStateFromProps的時候，需要注意週用時機和次數即可。

前言

主流的爬蟲一般都是使用 Python 的 Scrapy，但對於前端工程師來說 Python 可能會有一點不習慣，那麼我們熟悉的 JavaScript 能否完成這個任務呢，答案是可以的，而且可能比 Python 更適合用於爬蟲。

原因如下：

JavaScript 異步 IO 機制適用於爬蟲這種 IO 密集型任務。JavaScript 中的回調非常自然，使用異步網絡請求能夠充分利用 CPU。
JavaScript 中的 jQuery 毫無疑問是最強悍的 HTML 解析工具，使用 JavaScript 寫爬蟲能夠減少學習負擔和記憶負擔。雖然 Python 中有 PyQuery，但終究還是比不上 jQuery 自然。
爬取結果多為 JSON，JavaScript 是最適合處理 JSON 的語言。
來源： https://zhuanlan.zhihu.com/p/53763115

目標網站

GitHub 的Trending 頁

想要的數據：

1. 項目名（repositoryName）
2. 作者（autor）
3. stars
4. 描述(description)
5. 語言（language）

使用到的庫

cheerio

Fast, flexible & lean implementation of core jQuery designed specifically for the server.
GITHUB: https://github.com/cheeriojs/cheerio

cheerio 是用來解析 HTML，他的接口跟 Jquery 基本一樣，能夠直接上手使用。用這個代替 Jquery 的原因，是因為 Cheerio 只實現了 Jquery DOM 的部分，要比 Jquery 要輕便一點。

isomorphic-fetch

> Isomorphic WHATWG Fetch API, for Node & Browserify

GITHUB: https://github.com/matthew-andrews/isomorphic-fetch

我比較習慣用 fetch 的接口，而這個 isomorphic-fetch 是可以在前、後端都可以使用的，讀者也可以選擇自己習慣的就行。

正式開始

1. 獲得 HTML

1
2

const response = await fetch(targetUrl);
const html = await response.text();

2. 解析 HTML

1

const $ = cheerio.load(html);

3. 提取所需數據

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

let data = [];

$(".Box-row").each((index, element) => {
   const repositoryNameAndAuthor = $(element)
	   .find("h1 a")
	   .text()
	   .trim();

   // 作者
   const author = repositoryNameAndAuthor.split("/")[0].trim();

   // 項目名
   const repositoryName = repositoryNameAndAuthor.split("/")[1].trim();

   // 項目描述
   const description = $(element)
   	.find("p")
   	.text()
   	.trim();

   // 語言
   const language = $(element)
   	.find('span[itemprop="programmingLanguage"]')
   	.text()
   	.trim();

   // stars
   const stars = $(element)
   	.find(".muted-link")
   	.first()
   	.text()
   	.trim();

   data.push({
   	repositoryName,
    	author,
    	description,
    	language,
    	stars
});

完整代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

const cheerio = require("cheerio");
const fetch = require("isomorphic-fetch");

const targetUrl = "https://github.com/trending";

const scrape = async () => {
	const response = await fetch(targetUrl);
	const html = await response.text();

	const $ = cheerio.load(html);

	let data = [];

	$(".Box-row").each((index, element) => {
		const repositoryNameAndAuthor = $(element)
			.find("h1 a")
			.text()
			.trim();
		const author = repositoryNameAndAuthor.split("/")[0].trim();
		const repositoryName = repositoryNameAndAuthor.split("/")[1].trim();
		const description = $(element)
			.find("p")
			.text()
			.trim();

		const language = $(element)
			.find('span[itemprop="programmingLanguage"]')
			.text()
			.trim();

		const stars = $(element)
			.find(".muted-link")
			.first()
			.text()
			.trim();

		data.push({
			repositoryName,
			author,
			description,
			language,
			stars
		});
	});

	return data;
};

scrape().then(data => console.log(data));

結果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

[
    {
        "repositoryName": "Kotlin-Pokedex",
        "author": "mrcsxsiq",
        "description": "🌀 A Pokedex app using ViewModel, LiveData, Room and Navigation",
        "language": "Kotlin",
        "stars": "343"
    },
    {
        "repositoryName": "java-design-patterns",
        "author": "iluwatar",
        "description": "Design patterns implemented in Java",
        "language": "Java",
        "stars": "54,397"
    },
    {
        "repositoryName": "chaos-mesh",
        "author": "pingcap",
        "description": "A Chaos Engineering Platform for Kubernetes",
        "language": "Go",
        "stars": "801"
    },
    {
        "repositoryName": "deeplearning-models",
        "author": "rasbt",
        "description": "A collection of various deep learning architectures, models, and tips",
        "language": "Jupyter Notebook",
        "stars": "10,903"
    },
    {
        "repositoryName": "AndroidKnowledgeSystem",
        "author": "feelschaotic",
        "description": "The most complete Android advanced route knowledge map ⭐️你想要的最全 Android 进阶路线知识图谱+干货资料收集🚀",
        "language": "JavaScript",
        "stars": "1,234"
    },
    {
        "repositoryName": "fxxkmakeding",
        "author": "xyjoey",
        "description": "",
        "language": "",
        "stars": "487"
    },
    {
        "repositoryName": "pulse-sms-android",
        "author": "klinker-apps",
        "description": "The ultimate SMS app for Android, available across all of your devices.",
        "language": "Kotlin",
        "stars": "298"
    },
    {
        "repositoryName": "nodetube",
        "author": "mayeaux",
        "description": "Open-source YouTube alternative that also supports image and audio uploads. Powered by NodeJS",
        "language": "JavaScript",
        "stars": "939"
    },
    {
        "repositoryName": "coding_challenge-25",
        "author": "zero-to-mastery",
        "description": "",
        "language": "",
        "stars": "51"
    },
    {
        "repositoryName": "computer-science",
        "author": "ossu",
        "description": "🎓 Path to a free self-taught education in Computer Science!",
        "language": "",
        "stars": "53,446"
    },
    {
        "repositoryName": "GitHubDaily",
        "author": "GitHubDaily",
        "description": "GitHubDaily 分享内容定期整理与分类。欢迎推荐、自荐项目，让更多人知道你的项目。",
        "language": "",
        "stars": "5,411"
    },
    {
        "repositoryName": "ALBERT",
        "author": "google-research",
        "description": "ALBERT: A Lite BERT for Self-supervised Learning of Language Representations",
        "language": "Python",
        "stars": "728"
    },
    {
        "repositoryName": "architect-awesome",
        "author": "xingshaocheng",
        "description": "后端架构师技术图谱",
        "language": "",
        "stars": "41,832"
    },
    {
        "repositoryName": "isocity",
        "author": "victorqribeiro",
        "description": "A isometric city builder in JavaScript",
        "language": "JavaScript",
        "stars": "1,644"
    },
    {
        "repositoryName": "dockerlabs",
        "author": "collabnix",
        "description": "Docker - Beginners | Intermediate | Advanced",
        "language": "PHP",
        "stars": "736"
    },
    {
        "repositoryName": "rhasspy",
        "author": "synesthesiam",
        "description": "Rhasspy voice assistant for Home Assistant and Hass.IO",
        "language": "HTML",
        "stars": "485"
    },
    {
        "repositoryName": "flutter",
        "author": "flutter",
        "description": "Flutter makes it easy and fast to build beautiful mobile apps.",
        "language": "Dart",
        "stars": "83,214"
    },
    {
        "repositoryName": "coding-interview-university",
        "author": "jwasham",
        "description": "A complete computer science study plan to become a software engineer.",
        "language": "",
        "stars": "95,699"
    },
    {
        "repositoryName": "tailwind-starter-kit",
        "author": "creativetimofficial",
        "description": "Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source",
        "language": "CSS",
        "stars": "318"
    },
    {
        "repositoryName": "flowy",
        "author": "alyssaxuu",
        "description": "The minimal javascript library to create flowcharts ✨",
        "language": "JavaScript",
        "stars": "5,350"
    },
    {
        "repositoryName": "awesome-python",
        "author": "vinta",
        "description": "A curated list of awesome Python frameworks, libraries, software and resources",
        "language": "Python",
        "stars": "77,646"
    },
    {
        "repositoryName": "overreacted.io",
        "author": "gaearon",
        "description": "Personal blog by Dan Abramov.",
        "language": "JavaScript",
        "stars": "4,903"
    },
    {
        "repositoryName": "spring-boot-demo",
        "author": "xkcoding",
        "description": "spring boot demo 是一个用来深度学习并实战 spring boot 的项目，目前总共包含 63 个集成demo，已经完成 52 个。 该项目已成功集成 actuator(监控)、admin(可视化监控)、logback(日志)、aopLog(通过AOP记录web请求日志)、统一异常处理(json级别和页面级别)、freemarker(模板引擎)、thymeleaf(模板引擎)、Beetl(模板引擎)、Enjoy(模板引擎)、JdbcTemplate(通用JDBC操作数据库)、JPA(强大的ORM框架)、mybatis(强大的ORM框架)、通用Mapper(快速操作Mybatis)、PageHelper(通用的Mybatis分页插件)、mybatis-plus(快速操作M…",
        "language": "Java",
        "stars": "9,139"
    },
    {
        "repositoryName": "hasskit",
        "author": "tuanha2000vn",
        "description": "HassKit is a Touch-Friendly - Zero Config App to help users instantly start using Home Assistant",
        "language": "Dart",
        "stars": "196"
    },
    {
        "repositoryName": "linux",
        "author": "torvalds",
        "description": "Linux kernel source tree",
        "language": "C",
        "stars": "84,872"
    }
]

先說結論

根據使用場景，length不一定代表數組的長度。實際上，length是指大於數組中最後一個元素的索引的32位無符號整數。

稠密數組(Dense Array) vs 稀疏數組（Sparse Array）

稠密數組是指一個數組的元素由0開始連續索引。

1
2

const denseArray = ["A", "B", "C"];
// A, B, C連續索引於0, 1, 2

顯然而見，稀疏數組就是一個不連續索引的數組

1
2

const sparseArray = ["A", , "C", "D"];
// A, C, D 分散地索引於0, 2, 3

甚麼時候length是指元素個數

當數組是稠密數組時，length是指元素個數。

1
2
3
4
5
6
7
8

const fruits = ['orange', 'apple', 'banana']; // fruits 是稠密數組
fruits.length // 3，正確的元素個數

fruits.push('mango');
fruits.length // 4，增加了一個元素

var empty = [];
empty.length // 0，空數組

甚麼時候是最後一個索引+1

當數組是稀疏數組，length等於最後一個索引加一，但不代表元素個數。

1
2
3
4
5
6

const animals = ['cat', 'dog', , 'monkey']; // animals 是稀疏數組
animals.length // 4，最後一個索引加一，但元素只有三個

var words = ['hello'];
words[6] = 'welcome'; // 這時最後的索引變成了6
words.length // 7

修改length

JavaScript允許修改length屬性，可以刪除元素或令數組變成稀疏。

1
2
3
4

const numbers = [1, 3, 5, 7, 8];

numbers.length = 3; // 修改length
console.log(numbers) // [1, 3, 5] 7和8都被刪除了

當把length設置為大於元素個數時，會令數組變成稀疏。

1
2
3
4
5

var osTypes = ['OS X', 'Linux', 'Windows'];

osTypes.length = 5; // index 4和5的元素為undefined, osTypes是稀疏

console.log(osTypes) // ['OS X', 'Linux', 'Windows', , , ]

meter

<meter>標籤定義度量衡。僅用於已知最大和最小值的度量。

1
2

<meter value="4" min="0" max="10">4 out of 10</meter>
<meter value="0.3">30%</meter>

效果如下
4 out of 10
30%

video

<video>標籤定義視頻，比如電影片段或其他視頻流。

1
2
3
4
5

<video width="320" height="240" controls>
    <source src="catMovie.mp4" type="video/mp4">
    <source src="catMovie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

效果如下

progress

<progress>標籤定義運行中的任務進度（進程）。是HTML5中的新標籤。

1

<progress value="42" max="100"></progress>

效果如下

picture

<picture>允许我们在不同的设备上显示不同的图片，一般用于响应式。也是HTML5的新元素。

1
2
3
4
5

<picture>
    <source media="(min-width: 650px)" srcset="images/logo.png">
    <source media="(min-width: 450px)" srcset="images/logo.png">
    <img src="zzz.jpg" style="width: auto;" alt="zzz">
</picture>

效果如下

wbr

<wbr>(Word Break Opportunity) 標籤規定在文本中的何處適合添加換行符。

1
2
3

<p>
    Cats are the most majestic and <wbr>graceful<wbr>animals on the planet.
</p>

效果如下

Cats are the most majestic and gracefulanimals on the planet.

output

<output>標籤作為計算結果輸出顯示(比如執行腳本的輸出)。

1
2
3
4
5

<form oninput="totalWeight.value=parseInt(catAWeight.value)+parseInt(catBWeight.value)">
    <input type="range" id="catAWeight" value="50">100
    <input type="number" id="catBWeight" value="50">
    <output name="totalWeight" for="catAWeight catBWeight"></output>
</form>

效果如下

blockquote

<blockquote>標籤定義摘自另一個源的塊引用。

1
2
3

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

效果如下

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

time

1
2

<p> My cat wakes up at <time>11:00</time> each day.</p>
<p> I have a date with my cat on <time datetime="2019-12-25 20:00">Christmas</time>.</p>

效果如下

My cat wakes up at 11:00 each day.

I have a date with my cat on Christmas.

內置類型

JavaScript有七種的內置類型：

1. 空值（null）
2. 未定義（undefined）
3. 布爾值（boolean）
4. 數學（number）
5. 字符串（string）
6. 對象（object）
7. 符號（symbol）

其中除了對象之外，其它六種統稱為基本類型。

如何進行類型判斷

使用typeof

使用typeof進行類型判斷的返回值是該類型的字符串值，返回值只能為"object"、"number"、"undefined"、"string"、"boolean"、"symbol"、"function"其中一個。可以注意到的是，這些返回值跟JavaScript的內置類型不是一一進應的。
缺少了null，而多了function。

與內置類型一一對應的就不詳細說了。重點關注null和function。

對於null比較特殊，這算一個JavaScript歷史悠久的一個Bug，是因為object的底層實現中頭三位都是0，而null的底層實現直接是全0，因此typeof在判斷null才會誤判為object。

1

console.log(typeof null); // object

function屬於object的子類型，屬於一個特例吧。

1
2
3

function a() {}

console.log(typeof a); // function

對於其它object的子類型，例如數組，都會直接返回object

1
2
3

const a = [1, 2, 3];

console.log(typeof a); // object

其它的判斷方法還有instance of、constructor、Object.prototype.toString.cal等方法，之後再詳細再說。

值和類型

JavaScript中的變量是沒有類型的。只有值才有類型，變量可以隨時持有任何類型的值。

1
2
3
4
5

let a = 42;
console.log(typeof a); // "number"

a = true;
console.log(typeof a); // "boolean"

前言

今天我們先過一過Flex的屬性的用法，再通過一個Flex的小遊戲，來深入學習Flex佈局。小遊戲連接（https://flexboxfroggy.com），在文章最後將附上參考答案。

Flex屬性

flex-direction

先說一下，在Flex佈局，會把頁面分為兩個方向，分別是主軸和交錯軸，主軸和交錯軸是通過flex-direction來決定的，flex-direction有row、column、column-reverse、row-reverse。

舉個例子，若設定了flex-direction: row，則主軸是行（水平）方向，交錯軸則是列（垂直）方向。

justify-content

這個justify-content屬性是設置上面所說的主軸的排序方向，選項有flex-start、flex-end、center、space-between、space-around。

具體它們有甚麼區別，來看看下圖。

align-items

align-items是justify-content是交錯軸版本，選項有flex-start、flex-end、baseline、center、stretch。

align-content

align-content是align-items是多行版本，選項有flex-start、flex-end、center、stretch、space-center、space-around。

內元件的屬性

在Flex中，分為外容器和內元件，外容器是在聲明display:flex的標籤，被外容器包含著的標籤則是內元件，上述所講的屬性都是用外容器上的。

而在內元件中則有以下幾個屬性可以設置，分別flex-grow、flex-shrink、flex-basis、align-self和order。

• flex-grow: 元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 0，如果設置為 0 則不會縮放。
• flex-shrink: 元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 0，如果設置為 0 則不會縮放。
• flex-basis: 元件的基準值，可使用不同的單位值。
• align-self: align-self 可以調整內元件交錯軸的對齊設定(主軸線則不能另外做設定)，且可以個別設定單一元件的值。
• order: 這是一個相當特別的屬性，可以重新定義元件的排列順序，順序會依據數值的大小排列。

Flexbox Froggy 答案

1) justify-content: flex-end;
2) justify-content: center;
3) justify-content: space-around;
4) justify-content: space-between;
5) align-items: flex-end;
6) align-items: center;
justify-content: center;
7) justify-content: space-around;
8) flex-direction: row-reverse;
9) flex-direction: column;
10) flex-direction: row-reverse;
justify-content: flex-end;
11) flex-direction: column;
justify-content: flex-end;
12) flex-direction: column-reverse;
justify-content: space-between;
13) flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
14) order: 1;
15) order: -3;
16) align-self: flex-end;
17) align-self: flex-end;
order: 1;
18) flex-wrap: wrap;
19) flex-direction: column;
flex-wrap: wrap;
20) flex-flow: column wrap;
21) align-content: flex-start;
22) align-content: flex-end;
23) flex-direction: column-reverse;
align-content: center;
24) flex-flow:column-reverse wrap-reverse;
justify-content:center;
align-content:space-between;

前言

JavaScipt和Java一樣都是由垃圾回收機制進行自動內存管理，與C/C++不同，JavaScript不需要時刻關注內存的分配和釋放問題

由於Node的出現，JavaScript已不僅僅是一門瀏覽器的腳本語言，Node極大地拓寬了JavaScript的應用場景，從客戶端延申到服務器端之後，這使得JavaScript使用者需要更加注意，在服務器端，內存管理的好壞將嚴重影響服務器的性能。

目前主流的JavaScript引擎是由Google開發的V8引擎，V8性能優秀，使Google贏得了瀏覽器大戰。因此Node亦選用了V8。

V8的垃圾回收機制

主要的垃圾回收算法

V8的垃圾回數策略主要基於分代式垃圾回收機制。分代式垃圾回收機制是指將對象按照存活時間劃歸不同的世代，不同世代之後採用不同的回收算法。之所以這樣劃分是因為在本質上沒有任何一種回收算法能勝任所有場景。

V8的內存分代主要分為新生代和老生代兩代。其中新生代是指存活時間較短的對象，老生代中的對象則存活時間較長或常駐內存的對象

新生代

在分代的基础上，新生代中的對象主要通過Scavenge算法進行垃圾回數。在Scavenge的具體採用了Cherry算法。

Cherry算法採用複制&移動的方式實現垃圾回收。它將堆內存分為兩等份，每一部份的空間稱為semispace，兩個semispace只有一個處於使用中，另一個處理閑置狀態，使用中的叫做from空間，閑置的叫做to空間。

當開始進行垃圾回收時，先檢查From空間中的存活對象，這些存活對象則會複制到To空間，而非存活的對象則會被直接釋放。然後From空間和To空間的⻆色就會調換

對象晉升

當一個對象經歷過Scavenge回收，又或者To空間的內存占用比超過限制，則該對象將會由新生代晉升至老生代。

老生代

對於老生代中的對象，V8主要採用Mark-Sweep和Mark-Compact相結合的方式進行垃圾回收。Mark-Sweep是標記清除的意思，分為標記和清除兩個步驟，和Scavenge不同，Mark-Sweep不需要把內存劃分兩等份，在標記階段，Mark-Sweep會遍歷堆中的所有對象，并標記活著的對象，在清除階段，則只會清除沒有標記的對象。

Mark-Sweep會導致內存出現碎片化的現象，當需要分配一個大對象，會觸發一次不必要的垃圾回收。這時就有Mark-Compact，它跟Mark-Sweep差不多，區別只在對象在標記為死亡後，在整理的過程中，將活動的對象往一端移動，移動完成後，直接清理掉邊界外的內存。

V8主要使用Mark-Sweep，在空間不足以對從新生代中晉升過來的對象進行分配時才使用Mark-Compact

3種垃圾回收算法的簡單對比

先簡單說兩句

相信很多朋友在剛學習Javascript都被Javascript的this弄得很混亂，由於我一開始就是學習Java先的，很自然就Java中的this代入了Javascript中，其實這是一個重大的錯誤，有人（我）說「如果上帝用七天打造這個世界，那麼Javascript就是在最後0.01秒才匆匆設計的」，現在就讓我跟大家詳細說說Javascript的this吧！

this的意義

在Java中，this是一個引用對象，引用的就是這個對象自身，在Javascript中也會有這種場景，如以下代碼的this便指向new出來的那個對象自身

1
2
3
4
5
6
7
8
9
10
11
12
13

export class People{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    
    sayHi(){
        return `Hi, My name is ${this.name} and I am ${this.age} old`;
    }
}

let patrick = new People("Patrick", 21);
console.log(patrick.sayHi()); // Hi, My name is Patrick and I am 21 old

又或者在使用Javascript的對象時，this也是指向car對象本身，但這種情況上面跟通過new關鍵字又有一些不一樣。

1
2
3
4
5
6

const car = {
    speed: "100km/h",
    introduce: function(){
        console.log(`I can run ${this.speed}`);
    }
}

在我現在的工作中，經過需要使用到React，一般在React的constructor中需要做以下這件事，就是需要bind綁定，為甚麼需要呢，不綁定會怎樣？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

export class Input extends React.Component{
    constructor(props){
        super(props);
        // here
        this.handleChange = this.handleChange.bind(this);
        
        this.state = {value: ""};
    }
    
    handleChange(value){
        this.setState({value: value});
    }
    
    render(){
        return (
        	<input value={this.state.value} onChange={this.onChange}/>
        )
    }
}

還有一種更簡單的情況，在瀏覽器打開chrome devTools，在console面版中輸入this，看看會出現甚麼東西。為甚麼會輸出window呢？

接著我跟大家解釋釋，究竟this的意義是甚麼，其實this是指運行期間的上下文，根據不同的情況有不同的綁定規則。

this的綁定規則

默認綁定

默認綁定就是最簡單的情況，在全域或者不在函數內部使this的時候，this指向的便全局變量，在瀏覽器中是window，在nodejs中便是global，默認綁定會在嚴格下失效，即嚴格模式，默認綁定的this會指向undefined。上面第四個例子便是默認綁定。

隱式綁定

當函數被調用時，若函數引用具有上下文對象，則隱式綁定會將 this 綁定到這個上下文對象。第二個例子說的就是隱式綁定，在this的綁定規則裡，最容易出錯的就是隱式綁定，來看一段代碼，最後的那兩個函數會分別返回a和surprise，這種情況叫做隱式丟失，丟失的就是this，bar是obj.foo的一個函數別名，在調用bar的時候會丟失對obj的this引用，而直接是綁定到全局的對象中。

1
2
3
4
5
6
7
8
9
10
11
12

// 非嚴格模式
this.a = "surprise"
const obj = {
    a: "a",
    foo: function(){
        return this.a;
    }
}

const bar = obj.foo;
obj.foo();
bar();

顯式綁定

顯式綁定就要為了避免隱式丟失的出現，通過apply、call和bind三個方法來顯式的綁定要調用函數內部的this，看看例子最直接，在例子就直接指定this的值，這樣可以避免出現丟失的問題，所以現在為甚麼第三個例子中React constructor需要用bind綁定一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const obj1 = {
    content: "i am object 1"
};
const obj2 = {
    content: "i am object 2"
};
const obj3 = {
    content: "i am object 3"
}
function foo(x, y ,z){
    return `${this.content} arg ${x} ${y} ${z}`;
}

// use apply
foo.apply(obj1, ["a", "a", "a"]); // i am object 1 arg a a a

// use call
foo.call(obj2, "b", "b", "b"); // i am object 2 arg b b b

// use bind
const bindedFoo = foo.bind(obj3); // i am object 3 arg c c c
bindedFoo("c", "c", "c");

new綁定

第一個例子中，我們通過一個new關鍵字「實例化」了一個對象，實際上的new過程只做了下面幾件事：

1. 創建一個新的對象
2. 將新的對象的__prototype__屬性指向函數的prototype
3. 將函數的this綁定向新的對象
4. 調用函數

注意第三步，這裡就是實際上new綁定出現的原因，因為在new關鍵字的執行過程已經把新創建的對象綁定到函數的this裡，所以在new出來的對象裡面的this在運行時是會指向這個對象的。

優先級

依次為new綁定、顯式綁定、隱式綁定、默認綁定。

Javascript中的this機制其實還有一層，就是this在prototype原型鏈上的查找，可以理解this是一個二維平面，水平方向是綁定規則，垂直方向就是prototype原型鏈和JS的各種作用域。

下期將為大家介紹Javascript的原型鏈和作用域。

本人獻醜了，大家加油～！

React

• 深入React技術棧 ★★★★★
  • PDF 密码:8al1
  • EPUB 密码:ztvf
• 深入淺出React和Redux ★★★★☆
  • PDF 密码:pzqv
• React設計模式與最佳實踐 ★★★★☆
  • PDF 密码:gybh

Javascript

• Javascript設計模式
  • PDF 密码:assn
• Javascript 權威指南第六版
  • PDF 密码:6efz

設計模式

• 設計模式之禪
  • PDF 密码:rzqa
• 設計模式 可復用面向對像軟件的基礎
  • PDF 密码:90oj
• Head First 設計模式
  • PDF 密码:tuxu

軟件工程

• Clean Code 代碼整潔之道
  • PDF 密码:hkjy
• Head First 軟件開發
  • PDF 密码:56id
• Peopleware 人件
  • PDF 密码:eqqe
• How Google Test Software
  • PDF 密码:fj2t
• 編寫有效用例
  • PDF 密码:orfr

網絡

• 圖解HTTP ★★★★☆
  • EPUB 密码:mdia
• TCP-IP詳解卷一：協議
  • PDF 密码:3kdu
• TCP-IP詳解卷二：實現
  • PDF 密码:yyda
• TCP-IP詳解卷三：TCP事務協議
  • PDF 密码:iock

NodeJS

• 深入淺出NodeJS ★★★★★
  • EPUB 密码:h5wg

Typescript

• Typesciprt Deep Dive ★★★★☆
  • EPUB 密码:h1fo

CSS

• 精通CSS第二版 ★★★☆☆
  • EPUB 密码:7wiw

深度學習

• Tensorflow 實戰Google深度學習框架
  • PDF 密码:0nse

數據分析

• 利用Python進行數據分析
  • PDF 密码:4bb3

Java

• Thinking in Java 第四版
  • 中 PDF 密码:u818
  • 英 PDF 密码:lohe
• Head First Java 中文
  • PDF 密码:h360
• 深入理解Java虛擬機
  • PDF 密码:x8hf
• Effiective Java
  • PDF 密码:4j33

計算機系統

• 深入理解計算機系統第二版
  • PDF 密码:7iys
• 計算機組成與系統結構
  • PDF 密码:7hsd
• 計算機組織與結構
  • PDF 密码:94we

網上資源、僅學習分享、侵權必刪