GitHub網(wǎng)站上包含了目前所有與web開(kāi)發(fā)相關(guān)的內(nèi)容，提供一站式服務(wù)。這里有框架，有演示，包羅萬(wàn)象，可能沒(méi)有什么是你找不到的。但這也是問(wèn)題所在——其中有很多有趣的東西，但也許你永遠(yuǎn)不會(huì)知道，原因就在于GitHub上可用的存儲(chǔ)庫(kù)實(shí)在太多。

[[319284]]

所以，小芯決定在此介紹一些GitHub上比較流行的存儲(chǔ)庫(kù)，其中每個(gè)存儲(chǔ)庫(kù)都至少擁有30000顆星星。

1、 Realworld

首先要推薦的存儲(chǔ)庫(kù)是Realworld，其創(chuàng)造者稱之為“演示應(yīng)用程序之母”。這個(gè)說(shuō)法自然很大膽，但卻不夸張。

Realworld是Medium.com的一個(gè)典型翻版(沒(méi)錯(cuò)，可能就是你正在瀏覽的這個(gè)平臺(tái)!)。不僅如此，Realworld允許開(kāi)發(fā)者在不同的前端和后端實(shí)現(xiàn)之間進(jìn)行選擇，甚至可以將兩者結(jié)合。

Vue.js+Node/Express或React/Redux+Rust，都能搞定!

通過(guò)Realworld，開(kāi)發(fā)者會(huì)發(fā)現(xiàn)，同一個(gè)社交軟件卻可以用任何不同的流行語(yǔ)言或框架進(jìn)行建構(gòu)，這不神奇嗎?

2、You Don’t Know JS Yet

這一存儲(chǔ)庫(kù)實(shí)際上是一套十分流行的系列叢書(shū)，作者為Kyle Simpson，以筆名Getify廣為人知。這套書(shū)深入探討了JavaScript的機(jī)制，涵蓋了以下內(nèi)容：

• 開(kāi)始著手
• 作用域和閉包
• 對(duì)象和類(lèi)
• 類(lèi)型和語(yǔ)法
• 同步和異步
• ES.Next及其他

這套書(shū)的優(yōu)點(diǎn)在于對(duì)讀者完全開(kāi)放!這絕對(duì)是關(guān)于JavaScript最好的系列叢書(shū)之一，它也幫助筆者理解了JavaScript的真正含義。即使你認(rèn)為自己很懂JavaScript，也應(yīng)該好好讀這套書(shū)，你一定會(huì)得到意外的收獲!

3、 Airbnb JavaScript Style Guide

學(xué)習(xí)JavaScript最合理的途徑

Airbnb JavaScript Style Guide是最常見(jiàn)也比較流行的風(fēng)格指南之一，可以幫助開(kāi)發(fā)者編寫(xiě)更好的JS代碼，在團(tuán)隊(duì)合作中或者在與ESLint結(jié)合時(shí)特別實(shí)用。

下面是來(lái)自文件中的一個(gè)示例，使用了const而非var：

// bad 
var a = 1; 
var b = 2; 
 
// good 
const a = 1; 
const b = 2; 

4、 Storybook

Storybook 是一個(gè)用于UI組件的開(kāi)發(fā)環(huán)境。它允許開(kāi)發(fā)者瀏覽組件庫(kù)，查看每個(gè)組件的不同狀態(tài)，并交互式地開(kāi)發(fā)和測(cè)試組件，同時(shí)支持React、Vue、Angular、React Native、Ember、Web等眾多組件!

Storybook的運(yùn)行獨(dú)立于應(yīng)用程序。這就允許開(kāi)發(fā)者單獨(dú)開(kāi)發(fā)UI組件，從而提高組件的重用性、可測(cè)試性和開(kāi)發(fā)速度。開(kāi)發(fā)者可以快速構(gòu)建，而不必?fù)?dān)心與特定應(yīng)用程序之間的依賴關(guān)系。

5、HTML5 Boilerplate

HTML5Boilerplate是一個(gè)專業(yè)的前端模板，也是網(wǎng)絡(luò)上比較流行的前端模板之一。它可以幫助開(kāi)發(fā)者建立快速、耐用、適應(yīng)性強(qiáng)的網(wǎng)站或應(yīng)用程序，微軟、NASA和耐克等公司都在使用。

以下是HTML5 Boilerplate的一些重要特征：

• 配置HTML5。
• 設(shè)計(jì)時(shí)考慮到漸進(jìn)增強(qiáng)。
• 包括：Normalize.css、jQuery和Modernizer。
• 通過(guò)配置提高網(wǎng)站的性能和安全性。
• 占位符CSS媒體查詢。
• 默認(rèn)打印樣式，性能優(yōu)化。
• 谷歌通用分析工具平臺(tái)的優(yōu)化版本。

6、Node.js Best Practices

這一存儲(chǔ)庫(kù)廣泛整合了有關(guān)Node.js開(kāi)發(fā)的各種優(yōu)秀實(shí)踐，它目前由80多個(gè)優(yōu)秀實(shí)踐、樣式指南和架構(gòu)技巧組成。

其中包含以下內(nèi)容：

• 項(xiàng)目結(jié)構(gòu)實(shí)踐
• 錯(cuò)誤處理實(shí)踐
• 代碼風(fēng)格實(shí)踐
• 測(cè)試和總體質(zhì)量實(shí)踐
• 投入生產(chǎn)實(shí)踐
• 安全性實(shí)踐
• 效果實(shí)踐

這無(wú)疑是一個(gè)優(yōu)秀的存儲(chǔ)庫(kù)，包含了眾多信息。如果想嘗試Node.js開(kāi)發(fā)，這一存儲(chǔ)庫(kù)會(huì)是不錯(cuò)的選擇!

7、Front-End Checklist

在啟動(dòng)web應(yīng)用程序之前，你是否問(wèn)過(guò)自己其中需要包含哪些東西?需要進(jìn)行哪些測(cè)試?Front-End Checklist中就涵蓋了這些!

以下所列對(duì)大多數(shù)項(xiàng)目來(lái)說(shuō)都是必須的，其架構(gòu)方式如下：

• 標(biāo)題
• HTML
• 網(wǎng)絡(luò)字體
• CSS
• 圖像
• JavaScript
• 安全
• 性能
• 可實(shí)現(xiàn)性
• SEO
• 翻譯

以下是來(lái)自蘋(píng)果網(wǎng)站應(yīng)用MetaData的示例：

<!-- Apple Touch Icon (atleast 200x200px) --> 
<link rel="apple-touch-icon" href="/custom-icon.png"> 
   
<!-- To run web application in full-screen --> 
<meta name="apple-mobile-web-app-capable"content="yes"> 
   
<!-- Status Bar Style (see Supported Meta Tags below for available values)--> 
<!-- Has no effect unless you have the previous meta tag --> 
<meta name="apple-mobile-web-app-status-bar-style"content="black"> 

8、NW.js

NW.js是一個(gè)基于Chromium和node.js的應(yīng)用程序運(yùn)行時(shí)。在NW.js上，開(kāi)發(fā)者可以用HTML和JavaScript編寫(xiě)本地應(yīng)用程序。它還允許開(kāi)發(fā)者直接從DOM調(diào)用Node.js模塊，形成一種編寫(xiě)本地應(yīng)用程序的新方法，對(duì)任何Web技術(shù)都適用。

以下為它的主要功能：

• 使用現(xiàn)代HTML5、CSS3、JS和WebGL編寫(xiě)應(yīng)用程序。
• 完全支持Node.js API及其所有第三方模塊。
• 性能良好：Node和WebKit運(yùn)行在同一線程中。
• 易于打包和分發(fā)應(yīng)用程序。
• 可在Linux、Mac OS X和Windows上使用。

9、fullPage.js

Alvaro Trigo提供的fullPage.js是一個(gè)簡(jiǎn)單易用的存儲(chǔ)庫(kù)，它允許開(kāi)發(fā)者創(chuàng)建SPA(單頁(yè)應(yīng)用程序)和橫向滑塊，可用于Vue、React和Angular，對(duì)移動(dòng)設(shè)備完全響應(yīng)。

開(kāi)發(fā)者可在開(kāi)源項(xiàng)目中自由使用這一存儲(chǔ)庫(kù)，但如果想在商業(yè)環(huán)境中使用，則必須購(gòu)買(mǎi)許可證。

這一存儲(chǔ)庫(kù)非?？犰?，值得一看!

希望大家能夠在自己的項(xiàng)目中或在其他地方使用以上存儲(chǔ)庫(kù)。