尤雨溪的 Live 說了哪些技術名詞？（上篇）

購買 Live 請點 這裡

以下都是我自己的理解，不是原話。

本文只列舉和解釋名詞，想聽大神的觀點還是要買 Live 。

這篇文章主要是給兩類人看：

1. 買了 Live 但是沒有聽清裡面的一些英文的人。

2. 想買 Live，但是怕買了 Live 聽不懂的人。

UDP

開場有一個 UDP 笑話。

很多前端聽不懂這個笑話。這個笑話跟另一個笑話很像：

A:「我給大家講一個笑話：從前有個太監。」

B: 下面呢？

A: 「下面沒了」

B: 哈哈

那麼這個 UDP 的笑話是什麼意思？隨便搜一下你就知道：因為UDP沒有TCP那些可靠的機制，在數據傳遞時，如果網路質量不好，就會很容易丟包。

所以這個笑話是關於丟包的……

我這麼嚴肅地解釋笑話是不是很尷尬……

框架挑選

不談場景論好壞都是耍流氓。

你要做的應該是該用 Vue 的時候用 Vue，該用 React 的時候用 React，該用 jQuery 的時候用 jQuery。

你一個都沒學會？算我沒說。

至於如何挑選框架，只有老司機會選，你首先要變成一個老司機。

組件

組件已經是各種框架的共識，你必須知道什麼是組件。組件的定義就是……一個很抽象的東西。我的理解是變形金剛合體的時候，有人組成頭部，有人組成襠部，這些人就是組件了。

每個組件可以由其他小組件組成。比如襠部可以分成柱狀組件和兩球狀組件。

至於組件的嚴格定義，並沒有。

組件的狀態（state）

一個組件可以有多種形態，比如上面的柱狀組件可以是硬直狀態，也可以是疲軟狀態。（原諒我飆車了）。

JSX V.S. 模板

Tutorial: JSX

JavaScript Templating

JSX 適合邏輯多的場景，模板適合邏輯少的場景。

Colocation

把該放在一起的東西放在一起。

跟幾年前的 HTML、CSS、JS 分離對應。

Separation of Concerns

關注點分離

前端的關注點分離就是 HTML、CSS、JS 分離。

Declarative Programming 聲明式編程

你說有啥，就有啥。

wikipedia

Imperative Programming 命令式編程

你讓我幹啥，我就幹啥。

wikipedia

義大利麵條式編程

你覺得誰的代碼爛，你就可以說誰的代碼是義大利麵條。

Spaghetti code

view = render(state)

給我一個 state（數據），我就造出一個 view（DOM）。

Virtual DOM

計算機科學領域的任何問題，都可以通過添加一個中間層來解決。

Virtual DOM 就是應用與 DOM API 之間的中間層。

Manual DOM manipulation is messy and keeping track of the previous DOM state is hard. A solution to this problem is to write your code as if you were recreating the entire DOM whenever state changes. Of course, if you actually recreated the entire DOM every time your application state changed, your app would be very slow and your input fields would lose focus.

virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree, which looks like the DOM state that you want. virtual-dom will then figure out how to make the DOM look like this efficiently without recreating all of the DOM nodes.

摘自：Matt-Esch/virtual-dom

自己寫一個 Virtual DOM 庫並不難。

Change detection 變化偵測

監聽一個對象，當對象變化時，你可以做一些事情。

Pure Component

一個 Pure Component 就是一個無副作用的函數。

React Components

onclick="clickHandler" 的問題

clickHandler 是全局變數，這很煩人。

全局變數借禍害。

狀態管理

總得來說前端對狀態管理還沒有達成共識，但又沒有特別大的分歧。

可以了解一下 Flux、Redux、MobX、Vuex 和 Rx.js（反正名字里都有一個 x）。

狀態管理主要涉及 event、state 和 view 的變化的管理，主要分歧在於 event 與 state 變化的管理方式，各種方案皆有優劣。

Paradigm

範式

由湯瑪斯·孔恩提出。在1960年之後是指在科學領域和知識論行文中的思維的方式。

就是思維方式的意思。

Immutable

Immutable object

Rx.js

RxJS

中文翻譯（未完成）

Cycle.js

Cycle.js

Elm

Elm

路由

路由就是映射。給路由一個 url，路由就可以還你一個頁面

Ember.js

Ember.js 是一個老牌的 JS 框架。

SPA

單頁面應用

Hash 模式

URI Fragment

就是 url 後面的 #xxx 這部分字元串。

History 模式

history.pushState

鉤子

What is meant by the term 「hook」 in programming?

懶載入

惰性載入

Ionic

ionicframework.com 一個讓你用 JS 寫 App 的框架。

解耦

解耦就是不相關的東西不要放在一起。

耦合性

耦合性低不一定就是好的，反例之一就是 dependency hell

BEM CSS

一種 CSS 命名方式，很容易被新手玩壞（不遵守規則）。

CSS modules

CSS Modules，新手也玩不壞。

CSS-in-JS

不寫 CSS，寫 JS，已經有幾十種方案了，選擇恐懼症的死訊。

Critical CSS

關鍵 CSS

Run time

運行期

End.

尤雨溪的 Live 說了哪些技術名詞？（中篇） - 知乎專欄

&

尤雨溪的 Live 說了哪些技術名詞？（下篇） - 知乎專欄
推薦閱讀：