接下來讓我們看一下代碼倉庫的界面，看看界面上有哪些我們需要關(guān)注的信息和功能。重點(diǎn)看下我標(biāo)注的這些模塊，我會一一講解這些模塊的功能：Used by： 展示了這個項(xiàng)目被 github 上其他項(xiàng)目使用的次數(shù)，例如圖中的 React 是個知名的前端庫，所以使用者眾多；Watch： 點(diǎn)擊 Watch 后，相當(dāng)于你就關(guān)注了這個項(xiàng)目，那么以后要是這個項(xiàng)目有更新，你就會收到提醒；Star: 類似朋友圈點(diǎn)贊功能，你覺得這個項(xiàng)目不錯，就可以給它點(diǎn)贊；Fork: 拷貝一份項(xiàng)目到你自己的倉庫，不過如果原倉庫后面有更新，你自己的倉庫不會自動更新代碼，需要通過其他方式同步過來才行。Issues: 當(dāng)你在使用公共庫發(fā)現(xiàn)了 bug 或者有疑惑的時候，就可以在 Issues 模塊提出問題，等待倉庫作者或者其他使用了這個倉庫的開發(fā)者來解答；Pull requests: Pull request 列表，Pull request 簡稱 “PR”，意思是向這個倉庫提交代碼合并請求；描述： 之前創(chuàng)建倉庫時填寫的描述會展示在這里；commits: 代碼提交記錄；branches: 代碼分支；releases: 代碼發(fā)布的歷史版本可以在這里找到；contributors: 倉庫的貢獻(xiàn)者，只要你向這份倉庫貢獻(xiàn)過代碼，就會出現(xiàn)在這個列表里面；顏色條： 倉庫中所用到的各種代碼語言占比；Branch: 點(diǎn)擊這里可以切換不同的分支，圖中可以看到現(xiàn)在是 master 分支；New pull request： 創(chuàng)建一個代碼合并請求；Clone or download： 使用 git clone 項(xiàng)目倉庫，或者直接下載項(xiàng)目壓縮包。接下來，我會介紹上面其中幾個功能的妙用和小技巧。
網(wǎng)頁有一個最優(yōu)秀的特點(diǎn)就是它的跨平臺性，一個前端程序員寫出的頁面，既可以運(yùn)行在 Windows 的瀏覽器上、也可以運(yùn)行在 MacOS 的瀏覽器上、還可以運(yùn)行在 IOS 和安卓瀏覽器上。正是由于網(wǎng)頁所具備的優(yōu)異跨平臺性擴(kuò)展出了套殼網(wǎng)頁的這種形式，比如看起來只是個 apk 的安卓程序，點(diǎn)擊也能安裝到手機(jī)中，但實(shí)際上里面的內(nèi)容都是網(wǎng)頁…還有現(xiàn)在紅極一時的小程序，其實(shí)在很早以前小程序就已經(jīng)火起來了，但這次疫情真的是把小程序徹底推向了一個巔峰：去商場要掃小程序二維碼、坐高鐵要掃小程序二維碼、去麥當(dāng)勞要用小程序點(diǎn)餐、去景點(diǎn)參觀要用小程序預(yù)約、去看電影要用小程序訂票…那么小程序其實(shí)是和前端技術(shù)是分不開的，雖然騰訊覺得自己搞的東西不能叫HTML、CSS，取而代之的是 WX(微信)ML、WX(微信)SS… 但其實(shí)還是換湯不換藥，語法什么的都基本一致，好多東西甚至連名稱都沒改。而且我們現(xiàn)在做小程序也有那種多端小程序框架：uni-app、mpvue、taro等…這里用的都是 CSS 而不是 微信SS 。所以學(xué)會了移動端布局，不僅僅可以把學(xué)到的知識運(yùn)用到移動端的網(wǎng)頁上、還可以用到 React Native、小程序、快應(yīng)用、Weex等這些前端演變出來的技術(shù)上。
對象的屬性在訪問的時候，務(wù)必要關(guān)心屬性是否真的存在。特別是服務(wù)端返回的數(shù)據(jù)，如果碰到數(shù)據(jù)出錯，就可能造成頁面無反應(yīng)、白屏等問題：const getList = async () => { // 假裝拿了服務(wù)端的數(shù)據(jù)，并返回了 return { code: 1, data: { list: null, page: 1, count: 1111, }, };};getList() .then((res) => { // 取出數(shù)據(jù) const { data } = res; const { list, page, count } = data; list.forEach(() => { // 處理一些業(yè)務(wù) }); // 拋錯：TypeError: Cannot read property 'forEach' of null // alert 不會執(zhí)行 alert('獲取數(shù)據(jù)成功'); });上面這段代碼，執(zhí)行是會報(bào)錯的，因?yàn)?list 是 null，并不是期望的數(shù)組，這樣就導(dǎo)致了代碼無法正常執(zhí)行下去。所以在使用的時候，最好可以判斷或者處理一下不可靠的數(shù)據(jù)。// 使用 if 判斷// ...if (list) { list.forEach(() => { // 處理一些業(yè)務(wù) });} else { // ...}// ...// 提供一個默認(rèn)值const { list = [], page, count } = data;list.forEach(() => { // 處理一些業(yè)務(wù)});// ...// 提供一個默認(rèn)值const { list, page, count } = data;(list || []).forEach(() => { // 處理一些業(yè)務(wù)});// ...方法還有很多，還可以封裝一個函數(shù)專門用來取對象屬性的值，目的就是要代碼變得更加可靠，防止一些可能會造成重要后果的異常。如在 react 組件中，如果 render 函數(shù)中拋出了錯誤沒有處理，就可能導(dǎo)致組件或者頁面白屏。新的 ECMAScript 標(biāo)準(zhǔn)提供了可選鏈和雙問號操作符來更好的處理這個問題。const object = { a: { b: 2, c: { d: 3, }, },};const f = object.a?.b?.c?.d?.e?.f ?? 10;console.log(f); // 輸出：10關(guān)于這個知識點(diǎn)不再展開，可以參考 ES6+ 相關(guān)的 Wiki。簡單的說，在訪問對象屬性的時候，如果數(shù)據(jù)源不可靠，一定要做好處理異常的準(zhǔn)備。
在學(xué)習(xí) Proxy 之前，我們先來回歸一下 ES5 中的 Object.defineProperty() ，接觸過前端框架的同學(xué)應(yīng)該都知道 Vue 和 React，其中 Vue 中的響應(yīng)式數(shù)據(jù)底層就是使用 Object.defineProperty() 這個 API 來實(shí)現(xiàn)的。下面是 Object.defineProperty() 的語法。Object.defineProperty(obj, prop, descriptor)Object.defineProperty() 會接收三個參數(shù)：obj 需要觀察的對象；prop 是 obj 上的屬性名；descriptor 對 prop 屬性的描述。當(dāng)我們?nèi)ビ^察一個對象時需要在 descriptor 中去定義屬性的描述參數(shù)。在 descriptor 對象中提供了 get 和 set 方法，當(dāng)我們訪問或設(shè)置屬性值時會觸發(fā)對應(yīng)的函數(shù)。var obj = {};var value = undefined;Object.defineProperty(obj, "a", { get: function() { console.log('value:', value) return value; }, set: function(newValue) { console.log('newValue:', newValue) value = newValue; }, enumerable: true, configurable: true});obj.a; // value: undefinedobj.a = 20; // newValue: 20上面的代碼中，我們使用一個變量 value 來保存值，這里需要注意的是，不能直接使用 obj 上的值，否則就會出現(xiàn)死循環(huán)。Object.defineProperty() 是 Vue2 的核心， Vue2 在初始化時會對數(shù)據(jù)進(jìn)行劫持，如果劫持的屬性還是對象的話需要遞歸劫持。下面我們把 Vue2 中數(shù)據(jù)劫持的核心代碼寫出來。var data = { name: 'imooc', lession: 'ES6 Wiki', obj: { a: 1 }}observer(data);function observer(data) { if (typeof data !== 'object' || data == null) { return; } const keys = Object.keys(data); for (let i = 0; i < keys.length; i++) { let key = keys[i]; let value = obj[key]; defineReactive(obj, key, value); }}function defineReactive(obj, key, value) { observer(value); Object.defineProperty(obj, key, { get() { return value; }, set(newValue) { if (newValue === value) return; observer(newValue); value = newValue; } })}上面代碼的核心是 defineReactive 方法，它是遞歸的核心函數(shù)，用于重新定義對象的讀寫。從上面的代碼中我們發(fā)現(xiàn) Object.defineProperty() 是有缺陷的，當(dāng)觀察的數(shù)據(jù)嵌套非常深時，這樣是非常耗費(fèi)性能的，這也是為什么現(xiàn)在 Vue 的作者極力推廣 Vue3 的原因之一，Vue3 的底層使用了 Proxy 來代替 Object.defineProperty() 那 Proxy 具體有什么好處呢？
當(dāng)我們需要構(gòu)建一個大型的前端項(xiàng)目，里面包含幾個并列的子項(xiàng)目時，我們就可以使用yarn得 workspace 。目前國內(nèi)得許多經(jīng)典開源項(xiàng)目，如 vue、react 等，都是用得這一思路去構(gòu)建他們得項(xiàng)目。1.3.1 沒有使用workspace時，我們怎么做的在不使用 workspace 時，我們的項(xiàng)目目錄通常是這樣的projects/| project1/| |--package.json| |--node_modules/| | |--vue/|--project2| |--package.json| |--node_modules/| | |--vue/| | |--project1/其中第一個子項(xiàng)目 project1 的 package.json 配置可以簡化為：{ "name": "project1", "version": "1.0.0", "dependencies": { "vue": "1.0.0" }}第二個子項(xiàng)目 project2 的 package.json 配置可以簡化為：{ "name": "project2", "version": "1.0.0", "dependencies": { "vue": "1.0.0", "project1": "1.0.0" }}這種經(jīng)典的傳統(tǒng)使用方法，就會暴露出如上文所說的問題，總結(jié)本案例的不足點(diǎn)如下：兩個子項(xiàng)目有相同的依賴 vue ，每個子項(xiàng)目都會下載一次 vue 依賴，不僅浪費(fèi)開發(fā)效率，還占用額外空間，當(dāng)子項(xiàng)目較多時，問題更加明顯。第二個子項(xiàng)目 project2 依賴于第一個子項(xiàng)目 project2 ，而 project1 如果沒有發(fā)布到 npm 倉庫，那就得使用yarn link命令來配置依賴，非常不方便。需要使用 yarn build 構(gòu)建項(xiàng)目時，需要每個子項(xiàng)目分別構(gòu)建，不能統(tǒng)一構(gòu)建。1.3.2 使用workspace示例使用 workspace 不用安裝別的依賴，直接新建一個項(xiàng)目根目錄 projects， 初始化項(xiàng)目即可。然后修改初始化的 package.json 文件為：{ "private": true, "workspaces": ["project1", "project2"] // 也可以使用通配符設(shè)置為 ["project*"]，開源社區(qū)則都基本上使用 "workspaces": ["packages/*"] 的目錄結(jié)構(gòu)。}兩個子項(xiàng)目 project1 和 project2 如上文配置不變。在根目錄 projects 目錄下執(zhí)行 yarn install$ yarn installyarn install v1.22.0info No lockfile found.[1/4] ? Resolving packages...[2/4] ? Fetching packages...[3/4] ? Linking dependencies...[4/4] ? Building fresh packages...success Saved lockfile.? Done in 0.56s.此時查看目錄結(jié)構(gòu)如下：projects/|--package.json|--project1/| |--package.json|--project2| |--package.json|--node_modules/| |--vue/| |--project1/ -> ./project1/備注：如果需要某個特殊的 子項(xiàng)目 不受 Yarn Workspace 管理，只需在此 workspace 目錄下添加 .yarnrc 文件，并添加如下內(nèi)容禁用即可workspaces-experimental false如果想單獨(dú)添加或者移除某個子項(xiàng)目的依賴，可以使用如下命令：$ yarn workspace project1 add vue --dev$ yarn workspace project1 remove vue 以上便是 yarn 的 workspace 簡單用法。
選項(xiàng)類型默認(rèn)值描述–allowJsbooleanfalse允許編譯 JavaScript 文件–allowSyntheticDefaultImportsbooleanfalse允許從沒有設(shè)置默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入–allowUnreachableCodebooleanfalse不報(bào)告執(zhí)行不到的代碼錯誤–allowUnusedLabelsbooleanfalse不報(bào)告未使用的標(biāo)簽錯誤–alwaysStrictbooleanfalse以嚴(yán)格模式解析并為每個源文件生成 "use strict" 語句--baseUrlstring解析非相對模塊名的基準(zhǔn)目錄–charsetstring“utf8”輸入文件的字符集–checkJsbooleanfalse在 .js 文件中報(bào)告錯誤，與 --allowJs 配合使用–declaration -dbooleanfalse生成相應(yīng)的 .d.ts 文件–declarationDirstring生成聲明文件的輸出路徑–diagnosticsbooleanfalse顯示診斷信息–disableSizeLimitbooleanfalse禁用 JavaScript 工程體積大小的限制–emitBOMbooleanfalse在輸出文件的開頭加入BOM頭（UTF-8 Byte Order Mark）–emitDecoratorMetadata[1]booleanfalse給源碼里的裝飾器聲明加上設(shè)計(jì)類型元數(shù)據(jù)。查看 issue #2577 了解更多信息。–experimentalDecorators[1]booleanfalse啟用實(shí)驗(yàn)性的ES裝飾器–extendedDiagnosticsbooleanfalse顯示詳細(xì)的診斷信息–forceConsistentCasingInFileNamesbooleanfalse禁止對同一個文件的不一致的引用–help -h打印幫助信息–importHelpersstring從 tslib 導(dǎo)入輔助工具函數(shù)（比如 __extends， __rest等）–inlineSourceMapbooleanfalse生成單個 sourcemaps 文件，而不是將每 sourcemaps 生成不同的文件–inlineSourcesbooleanfalse將代碼與 sourcemaps 生成到一個文件中，要求同時設(shè)置了 --inlineSourceMap 或 --sourceMap 屬性--init初始化 TypeScript 項(xiàng)目并創(chuàng)建一個 tsconfig.json 文件–isolatedModulesbooleanfalse將每個文件作為單獨(dú)的模塊（與 “ts.transpileModule” 類似）–jsxstring“Preserve”在 .tsx 文件里支持 JSX： “React” 或 “Preserve”。–jsxFactorystring“React.createElement”指定生成目標(biāo)為 react JSX 時，使用的 JSX 工廠函數(shù)，比如 React.createElement 或 h–libstring[]編譯過程中需要引入的庫文件的列表。 可能的值為： ? ES5 ? ES6 ? ES2015 ? ES7 ? ES2016 ? ES2017 ? ES2018 ? ESNext ? ES5 ? ES5 ? ES5 ? ES5 ? ES5 ? ES5 ? DOM ? DOM.Iterable ? WebWorker ? ScriptHost ? ES2015.Core ? ES2015.Collection ? ES2015.Generator ? ES2015.Iterable ? ES2015.Promise ? ES2015.Proxy ? ES2015.Reflect ? ES2015.Symbol ? ES2015.Symbol.WellKnown ? ES2016.Array.Include ? ES2017.object ? ES2017.Intl ? ES2017.SharedMemory ? ES2017.String ? ES2017.TypedArrays ? ES2018.Intl ? ES2018.Promise ? ES2018.RegExp ? ESNext.AsyncIterable ? ESNext.Array ? ESNext.Intl ? ESNext.Symbol 注意：如果 --lib 沒有指定默認(rèn)注入的庫的列表。默認(rèn)注入的庫為： ? 針對于 --target ES5：DOM，ES5，ScriptHost ? 針對于 --target ES6：DOM，ES6，DOM.Iterable，ScriptHost–listEmittedFilesbooleanfalse打印出編譯后生成文件的名字–listFilesbooleanfalse編譯過程中打印文件名–localestring(platform specific)顯示錯誤信息時使用的語言，比如：en-us–mapRootstring為調(diào)試器指定指定 sourcemap 文件的路徑，而不是使用生成時的路徑。當(dāng) .map 文件是在運(yùn)行時指定的，并不同于 js 文件的地址時使用這個標(biāo)記。指定的路徑會嵌入到 sourceMap 里告訴調(diào)試器到哪里去找它們–maxNodeModuleJsDepthnumber0node_modules 依賴的最大搜索深度并加載 JavaScript 文件,僅適用于 --allowJs–module -mstringtarget === “ES6” ? “ES6” : “commonjs”指定生成哪個模塊系統(tǒng)代碼： “None”， “CommonJS”， “AMD”， “System”， “UMD”， "ES6"或 “ES2015”。 ? 只有 "AMD"和 "System"能和 --outFile一起使用。 ? "ES6"和 "ES2015"可使用在目標(biāo)輸出為 "ES5"或更低的情況下。–moduleResolutionstringmodule === “AMD” or “System” or “ES6” ? “Classic” : “Node”決定如何處理模塊?；蛘呤?“Node” 對于 Node.js/io.js，或者是 “Classic”（默認(rèn))–newLinestring(platform specific)當(dāng)生成文件時指定行結(jié)束符： "crlf"（windows）或 "lf"（unix）–noEmitbooleanfalse不生成輸出文件–noEmitHelpersbooleanfalse不在輸出文件中生成用戶自定義的幫助函數(shù)代碼，如 __extends–noEmitOnErrorbooleanfalse報(bào)錯時不生成輸出文件–noErrorTruncationbooleanfalse不截短錯誤消息–noFallthroughCasesInSwitchbooleanfalse報(bào)告 switch 語句的 fallthrough 錯誤。（即，不允許 switch 的 case 語句貫穿）--noImplicitAnybooleanfalse在表達(dá)式和聲明上有隱含的 any 類型時報(bào)錯–noImplicitReturnsbooleanfalse不是函數(shù)的所有返回路徑都有返回值時報(bào)錯–noImplicitThisbooleanfalse當(dāng) this 表達(dá)式的值為 any 類型的時候，生成一個錯誤–noImplicitUseStrictbooleanfalse模塊輸出中不包含 “use strict” 指令–noLibbooleanfalse不包含默認(rèn)的庫文件（ lib.d.ts ）–noResolvebooleanfalse不把 /// <reference``> 或模塊導(dǎo)入的文件加到編譯文件列表–noStrictGenericChecksbooleanfalse禁用在函數(shù)類型里對泛型簽名進(jìn)行嚴(yán)格檢查–noUnusedLocalsbooleanfalse若有未使用的局部變量則拋錯–noUnusedParametersbooleanfalse若有未使用的參數(shù)則拋錯--outDirstring重定向輸出目錄–outFilestring將輸出文件合并為一個文件，合并的順序是根據(jù)傳入編譯器的文件順序和 ///<reference``> 和 import 的文件順序決定的–skipDefaultLibCheckbooleanfalse忽略庫的默認(rèn)聲明文件的類型檢查–skipLibCheckbooleanfalse忽略所有的聲明文件（ *.d.ts ）的類型檢查--sourceMapbooleanfalse生成相應(yīng)的 .map 文件–sourceRootstring指定 TypeScript 源文件的路徑，以便調(diào)試器定位。當(dāng) TypeScript 文件的位置是在運(yùn)行時指定時使用此標(biāo)記, 路徑信息會被加到 sourceMap 里--strictbooleanfalse啟用所有嚴(yán)格類型檢查選項(xiàng)–strictFunctionTypesbooleanfalse禁用函數(shù)參數(shù)雙向協(xié)變檢查–strictPropertyInitializationbooleanfalse確保類的非 undefined 屬性已經(jīng)在構(gòu)造函數(shù)里初始化。若要令此選項(xiàng)生效，需要同時啟用 --strictNullChecks--strictNullChecksbooleanfalse在嚴(yán)格的 null 檢查模式下，null 和 undefined 值不包含在任何類型里，只允許用它們自己和 any 來賦值（有個例外， undefined 可以賦值到 void）–stripInternal[1]booleanfalse不對具有 /** @internal */ JSDoc注解的代碼生成代碼–suppressExcessPropertyErrors[1]booleanfalse阻止對對象字面量的額外屬性檢查–suppressImplicitAnyIndexErrorsbooleanfalse阻止 --noImplicitAny 對缺少索引簽名的索引對象報(bào)錯。查看 issue #1232 了解詳情。--target <br> -tstring“ES3”指定ECMAScript目標(biāo)版本 "ES3"（默認(rèn)）， "ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017" 或 "ESNext"。 注意： "ESNext" 最新的生成目標(biāo)列表為 ES proposed features–traceResolutionbooleanfalse生成模塊解析日志信息–typesstring[]要包含的類型聲明文件名列表–typeRootsstring[]要包含的類型聲明文件路徑列表--version <br> -v打印編譯器版本號–watch -w在監(jiān)視模式下運(yùn)行編譯器。會監(jiān)視輸出文件，在它們改變時重新編譯。監(jiān)視文件和目錄的具體實(shí)現(xiàn)可以通過環(huán)境變量進(jìn)行配置[1] 這些選項(xiàng)是試驗(yàn)性的
