相距 FCC 西安第一次線下編程活動(dòng)，從 2016 年 09 月 16 日到 2017 年 03 月 12 日，半年的時(shí)間，在這個(gè)社區(qū)，發(fā)生了很多很多難忘的故事。身為小小組織者的我，也將很多成長中的“第一次”揮灑到了這里。FCC 西安，伴隨每一位開發(fā)者茁壯成長。

不是我們跟奇數(shù)過不去，反而恰巧，在第一、三、五次，活動(dòng)辦得最有意思也最具干貨。就不細(xì)細(xì)講來其中的緣由。

這次，F(xiàn)CC 西安進(jìn)高校，西安郵電大學(xué)一個(gè)新開的，很棒的大學(xué)生創(chuàng)業(yè)咖啡館里，分享編程人♀生。

freeCodeCamp西安第一次線下編程活動(dòng)體驗(yàn)
freeCodeCamp西安第三次線下編程活動(dòng)體驗(yàn)

Coffee N Code

1

Icebreaker Games。次次活動(dòng)都輪流介紹一下自己是不是不清真？能創(chuàng)新，就有不一樣的體驗(yàn)。這次分為三個(gè)小組，每個(gè)人代表自己小組來說出自己的三個(gè)愛好或特長，其中一個(gè)是假的，其余小組搶答說愛好的人的哪個(gè)愛好是假的，答對加一分，答錯(cuò)扣一分。分?jǐn)?shù)最低的小組呢，再來介紹一下自己的家鄉(xiāng)和美食饞饞大家。命運(yùn)，掌握在自己的手上。

每個(gè)人的愛好都各有所長，假的那個(gè)愛好反而更有趣和調(diào)皮。就說說我說的三個(gè)真假愛好吧，看看你能猜出來嗎？

• 喜歡讀書、編程、游戲和寫作。
• 苦瓜真好吃。
• 熟悉前端和后臺(tái)。

答案，最后揭曉。

2

不知道各位 FCC 學(xué)員曾經(jīng)、現(xiàn)在所在的大學(xué)與開源社區(qū)的合作活躍度怎么樣。只要有一雙善于發(fā)現(xiàn)的眼睛，我相信在工科學(xué)校內(nèi)，都會(huì)找到一倆個(gè)和開源社區(qū)有合作的大學(xué)生團(tuán)體吧？

我們的西郵(選址原因罷，這次參加活動(dòng)的大部分是西郵學(xué)生)，就與下圖的開源社區(qū)有過長期合作，其中，F(xiàn)CC 中文社區(qū)，便是我?guī)нM(jìn)來的。祈愿長傳。

西郵和開源社區(qū)

3

FCC 的介紹每一位 FCC 學(xué)員在自己的城市線下活動(dòng)中相信聽過很多次了。這次，切入一個(gè)主題，淺談 FCC 的 MEAN 架構(gòu)。自己學(xué)歷尚淺，參考資料外加個(gè)人感悟而訴。

MEAN = MongoDB + Express + Angular + Node.js

從上述單詞縮寫的示意可以看到， MEAN 架構(gòu)作為全 Javascript 的 Web 開發(fā)架構(gòu)，能夠端到端地開發(fā)現(xiàn)代的、全堆棧的二十一世紀(jì) Web 項(xiàng)目，有如下特點(diǎn)：

• (M)ongoDB——采用 NoSQL 的文檔數(shù)據(jù)庫，使用 JSON 風(fēng)格來存儲(chǔ)數(shù)據(jù)，甚至也是使用 JS 來進(jìn)行 sql 查詢；
• (E)xpress——基于Node的Web開發(fā)框架，提供對服務(wù)端路由的訪問；
• (A)agular——JS的前端開發(fā)框架，提供了聲明式的雙向數(shù)據(jù)綁定；
• (N)ode——基于V8的運(yùn)行時(shí)環(huán)境（JS語言開發(fā)），可以構(gòu)建快速響應(yīng)、可擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。

再對比 LAMP 技術(shù)堆棧，詳細(xì)內(nèi)容可以獨(dú)立成章，這里便不細(xì)細(xì)而談。

4

干貨，絕對的干貨。JavaScript 之正則表達(dá)式入門。以下內(nèi)容參考自慕課網(wǎng)的 JS 正則表達(dá)式。

^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$

以前，總覺得正則表達(dá)式太高端，像匯編語言一樣羞澀難懂?？吹缴厦娴倪@串正則，我知道肯定有規(guī)則可尋，但只能看懂個(gè) a-z 什么的。好了，不雞湯了，上更多的干貨。

身為開發(fā)者，我們一直在默默使用著正則。git add .這種最讓我們偷懶的 git 命令一直在使用著。如果你還沒用過，F(xiàn)CC 可以帶給你這些知識(shí)點(diǎn)。

JavaScript 中通過內(nèi)置對象 RegExg 支持正則表達(dá)式。字符串對象 String 也有相應(yīng)的正則方法。

先用常見的 string.split(',') 為例，在 FCC 上做過題的學(xué)員肯定十分熟悉這條語句，其實(shí)，string.split(',') 中的 , 會(huì)被轉(zhuǎn)做正則，效果等價(jià)于 string.split(/,/g); ，意為在全局尋找 , 并將逗號(hào)前后的字符串分別順序放入數(shù)組中。

回到 RegExg 對象中，有兩種方法實(shí)例化 RegExp 對象：字面量和構(gòu)造函數(shù)。

在下圖示例中，第二條語句 var reg = /\bis\b/g 用字面量的方式聲明了一條正則表達(dá)式規(guī)則，該規(guī)則將在全局(g, global)中匹配所有單獨(dú)存在的 is 單詞。第三條語句進(jìn)行匹配?？纯吹谒臈l語句，var reg = new RegExp('\bb\is\\b', 'g') ，實(shí)例化一個(gè) RegExp 對象并傳入相關(guān)參數(shù)觸發(fā)構(gòu)造函數(shù)，第一個(gè)參數(shù)便是正則表達(dá)式，第二個(gè)代表該規(guī)則將在全局(g, global)中匹配。

可以看到，字面量中，用 // 包裹正則表達(dá)式語句，RegExp 對象里，由于是 JS 語句，反斜線 ```本身并不代表反斜線而是轉(zhuǎn)義的意思，應(yīng)該將反斜線用自身轉(zhuǎn)義，\才代表一個(gè)反斜線，\t``` 代表一個(gè)制表符，俗稱縮進(jìn)。如下轉(zhuǎn)義常見的字符不止能在 JavaScript 中見到。

元字符

正則表達(dá)式由兩種基本字符類型組成：原意文本字符和元字符。原意文本字符很好理解，在正則表達(dá)式中，a 就是要找到 a 字母，但若是看到 [a-z] 那肯定不是匹配 [a-z] 這五個(gè)連續(xù)的字符了，意思是把 a 字母到 z 字母中所有字母組成一類，只要能匹配到這一類的任意一個(gè)就滿足匹配規(guī)則。[、] 便是元字符。

在正則表達(dá)式中有特殊含義的非字母字符有，+、?、$、^、.、|、\、(、)、{、}、[、]。如果就想用這些元字符本身的意思，$ 就是代表美元符，轉(zhuǎn)義即可：\$

字符類

剛剛提到，“在正則表達(dá)式中出現(xiàn)的 [a-z] 是把 a 字母到 z 字母中所有字母組成一類，只要能匹配到這一類的任意一個(gè)就滿足匹配規(guī)則?！?，就用到了字符類。一般情況下，正則表達(dá)式的一個(gè)字符對應(yīng)字符串的一個(gè)字符，而用 [] 來構(gòu)建一個(gè)簡單的類。^ 來創(chuàng)建一個(gè)反向類。

怎么理解呢？以下兩行代碼中，第一行將字符串中所有 a、b、c 的字符替換成 X 字符。而第二行則代表將字符串中所有不是 a、b、c 的字符替換成 X，后者便是反向類。

'a1b2c3d4'.replace(/[abc]/g, 'X');
'a1b2c3d4'.replace(/[^abc]/g, 'X');

預(yù)定義類

到了這里，[0-9] 便能輕松看懂了。但想要寫一個(gè)匹配 11 位電話號(hào)碼的規(guī)則，難道連寫十一次嗎？當(dāng)然不是，\d 便等價(jià)于 [0123456789]，d 即代表著 digit。

\d\d\d\d\d\d\d\d\d\d\d 總比 [0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9] 要好。

常見的其他預(yù)定義類還有很多： \D 等價(jià)于 [^0-9] ，剛才提到，這是反向類，用來匹配所有非數(shù)字字符。\s等價(jià)于 [\t\n\x0B\f\r]匹配空白符，\S 匹配非空白符\w 等價(jià)于 [a-zA-Z_0-9] 匹配單詞字符，包括下劃線、橫線和數(shù)字。\W匹配非單詞字符。

\d\d\d\d\d\w，匹配的是什么呢？

量詞

當(dāng) \d 出現(xiàn)多次時(shí)，完全可以用代表數(shù)量的量詞來替換，十一個(gè)\d不如一個(gè)\d{11}簡單明了。

這時(shí)，\d{20}\w\d?\w\w+\d*\d{3}\w{3,5}\d{3,} 便可以達(dá)到大道至簡的地步，用可視化工具 Regexper 來直觀表示如下。

修飾符

之前一直提到 //g 是字面量正則表達(dá)式加上 g, global 全局模式查找符合規(guī)則的文本，而全局模式是默認(rèn)關(guān)閉的。g 在這里存在，便稱作正則表達(dá)式修飾符。它可不是元字符。

其它修飾符有：i，ignore case，代表忽略大小寫，默認(rèn)是不忽略的；m，multiple lines，跳過回車符等字符，在多行文本中進(jìn)行匹配。

JavaScript 中的 RegExp() 方法

test()、exec() 以及 compile()。

• test() 方法檢索字符串中的指定值。返回值是 true 或 false。
• exec() 方法檢索字符串中的指定值。返回值是被找到的值。如果沒有發(fā)現(xiàn)匹配，則返回 null。您可以向 RegExp 對象添加第二個(gè)參數(shù)，以設(shè)定檢索。例如，如果需要找到所有某個(gè)字符的所有存在，則可以使用 g 參數(shù)。
• compile() 方法用于改變 RegExp。compile() 既可以改變檢索模式，也可以添加或刪除第二個(gè)參數(shù)。

下例代碼可以實(shí)踐這一概念。

分組

經(jīng)過正則表達(dá)式匹配到的文本不一定非得替換，有時(shí)我們還需要利用。例如用正則表達(dá)式將日期 2017-03-12 變成 03/12/2017 的格式，就需要在找出年月日的同時(shí)重新排序，這時(shí)便用的到“分組”的概念。

^(\d{4})[/-](\d{2})[/-](\d{2})$

可視化結(jié)果如下，看到了group關(guān)鍵字。

上例正則表達(dá)式匹配時(shí)，用()包住符合匹配規(guī)則的對象，這時(shí)，第一個(gè)被包住的(\d{4})是一個(gè)group，會(huì)把“年”賦值給$1，月、日便更好理解，分別為$2、$3。如何實(shí)踐？

var reg = /^(\d{4})[/-](\d{2})[/-](\d{2})$/;
var string = "2017-03-12";
string.replace(reg, '替換前：$1-$2-$3, 替換后：$2/$3/$1');

以及更多

到了這里，也僅僅是開始，正則表達(dá)式是最需要自己動(dòng)手去練習(xí)的知識(shí)點(diǎn)。還有更多的概念如正則表達(dá)式的零寬斷言、負(fù)向零寬斷言、注釋、貪婪與懶惰等就不細(xì)細(xì)說來。

5

正則官網(wǎng)實(shí)戰(zhàn)。FCC 西安社區(qū)的主頁，第一次公開到大家面前，是這個(gè)樣子，切合這次分享的內(nèi)容。并新增環(huán)節(jié)，在官網(wǎng)上利用 Chrome 開發(fā)者工具直接實(shí)戰(zhàn)，兩道題目任你挑戰(zhàn)。答案呢，直接就貼在下方了?？磁c不看，“借鑒”與否，是自己的選擇，學(xué)到內(nèi)容就好。

https://freecodecamp-xian.github.io/

6

FCC 線下編程社區(qū)不可或缺的環(huán)節(jié)，編程實(shí)戰(zhàn)！雖然線上我們可以做，但線下一起在線上做題的體驗(yàn)，你有沒有體驗(yàn)過呢？有問題，及時(shí)的互幫互助了。

End

我可能有個(gè)“假特長”，在上面的破冰活動(dòng)中，“熟悉前端和后臺(tái)”當(dāng)然是還不可能是我的真特長了。一個(gè)直奔全棧目標(biāo)、只有一年半學(xué)習(xí)時(shí)間的 Web 學(xué)徒，在“熟悉”面前，更應(yīng)謙虛為妙。也只是，略懂皮毛罷了。

FCC 西安第五次的活動(dòng)就到了這里，相比較成都社區(qū)舉辦過的 10+ 次活動(dòng)和主頁開發(fā)，相比最早成立的北京社區(qū)的整體技術(shù)更強(qiáng)性，F(xiàn)CC 西安，還有很多路要走。

在 FCC 這個(gè)新興無校園大學(xué)中，怎么畢業(yè)，就要看每個(gè)學(xué)員自己的選擇。

• Hello，我是韓亦樂，現(xiàn)任本科軟工男一枚。軟件工程專業(yè)的一路學(xué)習(xí)中，我有很多感悟，也享受持續(xù)分享的過程。如果想了解更多或能及時(shí)收到我的最新文章，歡迎訂閱我的個(gè)人微信號(hào)：韓亦樂。我的簡書個(gè)人主頁中，有我的微信個(gè)人訂閱號(hào)二維碼和 Github 主頁地址；我的知乎主頁 中也會(huì)堅(jiān)持產(chǎn)出，歡迎關(guān)注。
• 本文內(nèi)部編號(hào)經(jīng)由我的 Github 相關(guān)倉庫統(tǒng)一管理；本文可能發(fā)布在多個(gè)平臺(tái)但僅在上述倉庫中長期維護(hù)；本文同時(shí)采用【知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國際許可協(xié)議】進(jìn)行許可。