前言

前端側(cè)重于人機(jī)交互和用戶體驗(yàn)，后端側(cè)重于業(yè)務(wù)邏輯和大規(guī)模數(shù)據(jù)處理碗殷。理論上精绎，面向用戶的產(chǎn)品里，所有問題（包括產(chǎn)品锌妻、設(shè)計(jì)、后端、甚至看不見的問題）的表現(xiàn)形式猎贴，都會暴露在前端崭添，而只有部分問題（數(shù)據(jù)問題、計(jì)算問題吭历、安全問題等）暴露在后端擎浴，這就意味著前端起到了至關(guān)重要的承載和連接作用。

前端技術(shù)的更新日新月異毒涧；前端框架的技術(shù)選型百家爭鳴贮预；視覺審美的潮流不斷更替；可視化效果酷炫無比契讲；用戶的運(yùn)營體系逐漸精細(xì)化仿吞；適老化、無障礙化捡偏、青少年人群的訴求浮出水面唤冈；智能設(shè)備的升級和適配無窮無盡。所有的這一切银伟，對前端領(lǐng)域和前端同學(xué)就一個(gè)要求：要折騰你虹，愛折騰绘搞，反復(fù)折騰。

一傅物、前端開發(fā)流程

需求評審

一般在做需求評審時(shí)夯辖，PRD里只有交互稿，尚未有視覺稿董饰。需要在評審結(jié)束并達(dá)成一致后蒿褂，再輸出視覺稿。

1卒暂、需求分析：需求點(diǎn)逐一討論啄栓、需求合理性、交互評審也祠、邏輯梳理昙楚，以及可能遺漏的部分。

提示：邏輯梳理的過程很花時(shí)間诈嘿，貫穿開發(fā)始末桂肌。

2、涉及渠道/環(huán)境：

渠道和環(huán)境永淌，往往是需求盲點(diǎn)崎场，也是影響技術(shù)選型和開發(fā)進(jìn)度的關(guān)鍵因素。

• App：App原生頁面遂蛀、App內(nèi)嵌H5谭跨、App內(nèi)嵌小程序。

• 小程序：技術(shù)棧視角：小程序原生頁面李滴、小程序內(nèi)嵌H5螃宙、App內(nèi)嵌小程序。

• 普通H5：微信H5所坯、M站（即普通瀏覽器環(huán)境）

• B端：運(yùn)營管理平臺等等

3谆扎、可行性分析：是否有技術(shù)上的實(shí)現(xiàn)難點(diǎn)，是否有其他的依賴條件芹助。

數(shù)據(jù)來源：哪些是調(diào)接口堂湖，哪些是做成可配置，哪些是前端寫死状土；可配置的部分无蜂，是前端讀取，還是接口讀取然后返給前端蒙谓。提示：可配置的靈活性與風(fēng)險(xiǎn)正相關(guān)斥季。

異常流設(shè)計(jì)：容錯(cuò)、容災(zāi)累驮、兜底酣倾、降級舵揭、回退機(jī)制、風(fēng)險(xiǎn)可控躁锡。prd一般只寫了正常流的邏輯午绳，異常流往往需要研發(fā)同學(xué)配合做全盤考慮。

6稚铣、需求變更：如有需求不明確、改需求墅垮、加需求惕医、砍需求、加時(shí)間算色、改時(shí)間抬伺、加人力等等，需要提前預(yù)判風(fēng)險(xiǎn)灾梦。

視覺評審

1峡钓、進(jìn)度跟進(jìn)：視覺稿是分批交付，還是一次性給到若河？這是要首先考慮的能岩。

按照歷史經(jīng)驗(yàn)，前端項(xiàng)目進(jìn)度的延誤萧福，有一半的概率依賴于視覺稿的進(jìn)度拉鹃；因?yàn)橐粋€(gè)新頁面的開發(fā)，前端有30%~50%的工作在做頁面構(gòu)建鲫忍。

2膏燕、視覺稿的文件格式：

• Sketch 原型設(shè)計(jì)軟件：.sketch 格式。一般用來畫視覺稿悟民。

• Figma 原型設(shè)計(jì)軟件：.fig 格式坝辫。

• Axure 原型設(shè)計(jì)軟件：：.rp 格式。Axure 一般用來畫交互稿射亏。如果是輸出高保真的視覺稿近忙，推薦用 Sketch 或 Figma。

• Photoshop 軟件： .psd 格式智润。專門做圖片處理银锻。當(dāng)然，有些CP外包人員的技能單一做鹰，喜歡用PS輸出視覺稿击纬。

• Adobe Illustrator 軟件（簡稱AI軟件）：.ai格式。制作矢量圖钾麸。

• Adobe After Effects（AE） 軟件：.aep 格式更振。制作動(dòng)畫炕桨。

備注：Sketch 是Mac平臺獨(dú)有的原型設(shè)計(jì)軟件，最為知名和常見肯腕。Figma 是最近比較火的全平臺原型設(shè)計(jì)軟件献宫，有取代 Sketch 的趨勢。

【劃重點(diǎn)】交付視覺稿時(shí)实撒，需要視覺同學(xué)輸出“帶尺寸標(biāo)注”的視覺規(guī)范文件姊途。

3、檢查需求：是否覆蓋需求和交互設(shè)計(jì)中的全部設(shè)計(jì)點(diǎn)知态。

4捷兰、檢查視覺規(guī)范：

• 樣式和配色，是否符合頁面和產(chǎn)品的整體風(fēng)格负敏。

• 尺寸規(guī)范：移動(dòng)端的視覺稿寬度是750px贡茅。

• 排版、對齊其做、一致性顶考。推薦閱讀書籍《寫個(gè)大家看的設(shè)計(jì)書》，了解基本的設(shè)計(jì)原則妖泄。

• 字體：字號大芯匝亍（一般是12px以上，特別小的是10px以上）蹈胡、字重（注意bold屬性值為700）甚负，以及有哪些特殊字體。尤其要注意字體的版權(quán)問題审残。

5梭域、哪些圖是前端構(gòu)建，哪些圖是寫死圖片資源搅轿，哪些是可配置病涨；可配置的圖中，需要把每個(gè)元素做拆解璧坟，這個(gè)元素是合并到背景圖中既穆，還是單獨(dú)切圖，還是讀取數(shù)據(jù)雀鹃。

6幻工、切圖格式：png（透明格式）、jpg

切圖的圖片大小黎茎，不要太大囊颅。移動(dòng)端的大圖（比如幕簾彈窗的背景圖）建議不超過50kb，小圖建議不超過20kb。圖片在上傳之前踢代，可以先在 https://tinypng.com/ 上進(jìn)行壓縮盲憎。

7、復(fù)雜圖形胳挎、動(dòng)畫的實(shí)現(xiàn)難度和實(shí)現(xiàn)方式饼疙，技術(shù)評估。詳見接下來要講的「技術(shù)選型」慕爬。

排期評估

1窑眯、排期一般包含這幾個(gè)要素：

• 開發(fā)時(shí)間：視覺構(gòu)建時(shí)長、接口文檔（接口協(xié)議）交付時(shí)間医窿、前后端聯(lián)調(diào)時(shí)間磅甩、自測時(shí)間

• 轉(zhuǎn)體驗(yàn)時(shí)間

• 轉(zhuǎn)測時(shí)間

• 上線時(shí)間（以及，需確認(rèn)業(yè)務(wù)投放時(shí)間）

2留搔、評估排期時(shí)更胖，要根據(jù)視覺稿排期铛铁，不要根據(jù)交互稿排期隔显。這是首先要強(qiáng)調(diào)的。一個(gè)新頁面的開發(fā)饵逐，前端有30%~50%的工作在做頁面構(gòu)建括眠。 只看交互稿的話，無法評估真實(shí)的開發(fā)工作量倍权。

3掷豺、前端開發(fā)工作包括：概要設(shè)計(jì)、視覺構(gòu)建薄声、邏輯代碼当船、前后端聯(lián)調(diào)、自測默辨、轉(zhuǎn)體驗(yàn)德频。每一項(xiàng)都要單獨(dú)拆解后評估時(shí)間，加在一起就是整體的排期缩幸。

4壹置、排期時(shí)，要考慮其它的依賴因素：比如視覺稿延期表谊、需求不明確钞护、接口進(jìn)度、測試進(jìn)度爆办，當(dāng)然最重要的是上線進(jìn)度难咕。緊急項(xiàng)目，經(jīng)常是根據(jù)上線時(shí)間倒推開發(fā)排期。

5步藕、即將進(jìn)入開發(fā)階段后惦界，與測試部門協(xié)調(diào)測試資源，確認(rèn)轉(zhuǎn)測時(shí)間咙冗；大型項(xiàng)目&重點(diǎn)項(xiàng)目沾歪，需要在需求評審階段，提前知會測試部門雾消，讓其預(yù)留時(shí)間灾搏。

6、如果自己有在并行開發(fā)其他項(xiàng)目立润，則排期時(shí)需要給自己預(yù)留 buffer狂窑。并行開發(fā)兩個(gè)項(xiàng)目是家常便飯；但桑腮，這個(gè)項(xiàng)目在測試時(shí)泉哈，往往很難抽身去做別的項(xiàng)目，因?yàn)闀恢北粶y試童鞋牽制破讨。

7丛晦、開發(fā)排期：如果開發(fā)排期有變更，需要立即周知其他相關(guān)人員提陶，尤其是要評估測試排期的風(fēng)險(xiǎn)烫沙。測試排期比開發(fā)排期 更難變更。

技術(shù)選型

技術(shù)選型千變?nèi)f化隙笆，百家爭鳴锌蓄。這里需要列出你所在部門的常用技術(shù)選型，并非市面上的技術(shù)棧羅列撑柔。

1瘸爽、頁面開發(fā)框架：

（1）多端頁面：（小程序原生頁面、H5）

• Taro 框架（基于 React技術(shù)棧）

注2：有些業(yè)務(wù)铅忿，一開始只做H5剪决，后來迭代時(shí)，要求做小程序原生頁面辆沦。這一點(diǎn)也要納入需求評估昼捍。

（2）H5頁面：Vue.js 框架、React 框架

（3）App端：

• Android端開發(fā)語言：Kotlin（新）肢扯、Java（老）

• iOS端開發(fā)語言：Swift（新）妒茬、Objective-C（老）

（4）B端開發(fā)，UI框架：

• React 技術(shù)棧：Ant Design（簡稱Antd）

• Vue 技術(shù)棧：Element蔚晨、Ant Design Vue

• 較簡單的CSS響應(yīng)式框架：Bootstrap

（5）Node.js后端開發(fā)框架：

• Koa：新一代 Node.js 框架乍钻。

• Egg.js：Egg 是在Koa基礎(chǔ)上進(jìn)一步封裝的企業(yè)級Web開發(fā)框架肛循。

• Express：比較老的Node.js 框架。

2银择、CSS預(yù)處理器：SASS

3多糠、復(fù)雜圖形、動(dòng)畫的實(shí)現(xiàn)難度和實(shí)現(xiàn)方式浩考，技術(shù)評估：

• gif 動(dòng)圖：盡量不用夹孔。因?yàn)槲募螅倚Ч：?/p>

• CSS3 動(dòng)畫：適合簡單的析孽、有規(guī)律的動(dòng)畫搭伤。舉例：擺動(dòng)的魚、京喜工廠

• Canvas：Canvas 動(dòng)畫袜瞬、小程序分享圖采用 Canvas 繪制

• 3D動(dòng)畫：WebGL（Three.js 是 WebGL 的綜合庫）常見案例：太陽系

• 游戲框架：Cocos 引擎

概要設(shè)計(jì)

• 需求背景及資源

• 風(fēng)險(xiǎn)評估

• 技術(shù)選型

• 項(xiàng)目結(jié)構(gòu)設(shè)計(jì)

• 主要功能點(diǎn)邏輯設(shè)計(jì)

• 可擴(kuò)展可復(fù)用設(shè)計(jì)

• 依賴接口

• 工作量拆解和排期

開發(fā)環(huán)節(jié)

1怜俐、代碼設(shè)計(jì)：

（1）目錄結(jié)構(gòu)設(shè)計(jì)、代碼風(fēng)格

（2）公共組件邓尤、工具類設(shè)計(jì)：確保可復(fù)用拍鲤、高內(nèi)聚低耦合的原則。哪些可以復(fù)用京喜平臺的公共組件汞扎，哪些需要自己單獨(dú)寫 components季稳、utils。

（3）彈窗設(shè)計(jì)：如果一個(gè)頁面有多個(gè)彈窗佩捞，建議先設(shè)計(jì)一個(gè)抽象的彈窗基類绞幌。設(shè)計(jì)彈窗時(shí)蕾哟，需要考慮的是：

• 設(shè)計(jì)原則：易擴(kuò)展一忱、復(fù)用性強(qiáng)

• 避免重復(fù)代碼

• 避免同一時(shí)間出現(xiàn)多個(gè)彈窗

• 彈窗的位置要嚴(yán)格居中（不能因?yàn)槠聊怀叽绲拇笮∽兞耍瑢?dǎo)致彈窗位置不居中）

• 處理滾動(dòng)穿透這個(gè)頑疾谭确。

2帘营、視覺構(gòu)建：

（1）后端在開發(fā)接口時(shí)，前端做視覺構(gòu)建逐哈；視覺構(gòu)建完成后芬迄，前端根據(jù)接口文檔的定義，通過 mock 數(shù)據(jù)的方式調(diào)接口昂秃，寫前端邏輯禀梳；待接口開發(fā)完成后，可進(jìn)入前后端聯(lián)調(diào)階段肠骆。

（2）建議前端童鞋學(xué)會自己切圖算途，可控程度更高，也能減少溝通成本蚀腿。學(xué)會基本的 PS嘴瓤、Sketch操作就行扫外，做一名合格的前端切圖仔。

（3）對于規(guī)則的樣式和動(dòng)畫廓脆，建議用代碼實(shí)現(xiàn)筛谚，而不是圖片。圖片會降低頁面的打開性能停忿，且大屏都顯示效果比較模糊驾讲。

（4）切圖的尺寸要求：100%寬度以 750px 為準(zhǔn)。

（5）像素級還原視覺稿：推薦使用 Snipaste 截圖軟件席赂，按F1截圖蝎毡，F(xiàn)2貼圖，然后調(diào)整貼圖的透明度為50%氧枣，將貼圖與前端頁面進(jìn)行像素級比對沐兵。

3、業(yè)務(wù)邏輯實(shí)現(xiàn)：

（1）建議先用思維導(dǎo)圖便监，梳理業(yè)務(wù)邏輯扎谎，再著手寫代碼。思維導(dǎo)圖有利于理清邏輯烧董、事后復(fù)盤毁靶、高效給他人講解，一目了然逊移。重要的是思想预吆，而不是用哪一款工具更酷。

（2）在調(diào)用接口時(shí)胳泉，要明確前端自己的安全邊界：假設(shè)接口字段異常時(shí)拐叉，前端需要有自己的降級措施，不能完全依賴和信任字段扇商，導(dǎo)致讓頁面直接白屏凤瘦、交互異常、甚至掛掉案铺。

（3）除了完成產(chǎn)品要求的業(yè)務(wù)邏輯之外蔬芥，還要時(shí)刻考慮異常流的設(shè)計(jì)和容災(zāi)。

（4）很多前端童鞋在做需求時(shí)控汉，有個(gè)習(xí)慣是不喜歡細(xì)看prd笔诵，只對著交互稿和視覺稿進(jìn)行開發(fā)。這樣做雖然省事姑子，但有三道手續(xù)不能少：

• 開發(fā)前乎婿，一定要再和產(chǎn)品童鞋過一遍prd細(xì)節(jié)；

• 開發(fā)過程中壁酬，隨時(shí)和產(chǎn)品童鞋反復(fù)溝通確認(rèn)次酌；

• 開發(fā)到80%時(shí)恨课，自己對照prd，只字不差地閱讀岳服，看看是否有遺漏的地方剂公。

4、非功能性需求吊宋。業(yè)務(wù)代碼寫完后纲辽，還有很多細(xì)節(jié)需要打磨。比如：

• 不同渠道的分享場景

• ppms 配置檢查：運(yùn)營配置端要做校驗(yàn)璃搜；是給產(chǎn)品運(yùn)營用的拖吼，配置要盡量人性化。

• 添加埋點(diǎn)：曝光上報(bào)这吻、點(diǎn)擊上報(bào)吊档、呼吸上報(bào)

• 監(jiān)控上報(bào)、測試上報(bào)唾糯、badjs上報(bào)

• 重復(fù)代碼精簡

• 去掉 console.log怠硼、debugger 等多余的代碼

• 圖片、字體等靜態(tài)資源壓縮

• 常見的性能優(yōu)化：骨架屏（按需）移怯、圖片懶加載香璃、圖片預(yù)加載、防抖節(jié)流舟误、長列表滾動(dòng)到可視區(qū)域動(dòng)態(tài)加載

• 用戶體驗(yàn)完善：返回定位葡秒、滾動(dòng)穿透

• 屏幕適配

• 小程序代碼瘦身

• 容災(zāi)演習(xí)

5、代碼提交：

• 先 git pull嵌溢，再 git push眯牧，減少代碼沖突。

• commit粒度要盡量細(xì)

• commit之前堵腹，一定要diff代碼炸站，確認(rèn)每一行改動(dòng)星澳，以免提交不必要的改動(dòng)疚顷。

• Commit Message 常用格式：feat、fix禁偎、docs腿堤、merge

• 如合并代碼時(shí)遇到?jīng)_突，一定要先解決完沖突后再提交代碼如暖。如沖突部分涉及到其他人的代碼笆檀，一定要找到對應(yīng)同學(xué)一起解決。

6盒至、自測：

• 對照prd酗洒，查漏補(bǔ)缺士修。

• 在真機(jī)上體驗(yàn)頁面，而不是在模擬器上樱衷。

• 寫一部分測試用例棋嘲，加快后續(xù)的測試進(jìn)度。前面梳理的思維導(dǎo)圖矩桂，其實(shí)就是測試的最佳素材沸移。

產(chǎn)品體驗(yàn)

1、在真機(jī)體驗(yàn)侄榴，而不是在模擬器上雹锣。最好是 iOS和 Android 都要對比體驗(yàn)。

2癞蚕、體驗(yàn)時(shí)蕊爵，記錄整理各種 todolist：

• 需求待確認(rèn) list：一些小的、風(fēng)險(xiǎn)可控的需求點(diǎn)桦山，可以在體檢階段在辆，集中向產(chǎn)品童鞋提出。

• 開發(fā)未完成 list：有哪些尚未完成的部分度苔，需要和產(chǎn)品童鞋交代清楚匆篓。

• 已知 bug list

• 體驗(yàn)問題 list：邊體驗(yàn)，邊記錄產(chǎn)品反饋的問題寇窑，并在稍后同步給測試童鞋鸦概。

• 依賴項(xiàng) list：接口、視覺切圖甩骏、真實(shí)的測試環(huán)境等等窗市。

代碼評審/代碼review

代碼 review 可以在測試期間進(jìn)行。

review順序：

• 業(yè)務(wù)核心邏輯

• 編碼規(guī)范

• 關(guān)鍵位置饮笛、容易踩坑的地方咨察，需要注釋詳細(xì)

• 系統(tǒng)保障（監(jiān)控、容災(zāi)降級）

• 系統(tǒng)安全和風(fēng)險(xiǎn)

• 用戶體驗(yàn)

視覺走查

視覺走查 可以在測試期間進(jìn)行福青。

視覺童鞋都有像素眼摄狱，即便是一兩個(gè)像素的區(qū)別，他們都能瞧出來无午。所以媒役，建議前端童鞋加強(qiáng)自測，努力做到像素級還原視覺稿宪迟。

推薦前端童鞋使用 Snipaste 截圖軟件酣衷，按F1截圖，F(xiàn)2貼圖次泽，然后調(diào)整貼圖的透明度為50%穿仪，將貼圖與前端頁面進(jìn)行像素級比對席爽。

測試環(huán)節(jié)

1、建議加強(qiáng)自測質(zhì)量啊片。進(jìn)入測試階段后拳昌，測試童鞋會進(jìn)行一輪冒煙測試，如果質(zhì)量不合格钠龙，將會被打回炬藤，這就很尷尬了。

2、整理自測、測試秒啦、發(fā)布時(shí)需要的主流程checkList村刨，每次迭代時(shí)都能用上。

轉(zhuǎn)測郵件的基本元素，包括但不僅限于：

• prd鏈接、視覺稿鏈接

• 頁面鏈接

• 項(xiàng)目相關(guān)人員

• 數(shù)據(jù)配置系統(tǒng)

• host 代理

• 接口文檔

• 概要設(shè)計(jì)、前端開發(fā)整理（如果有的話）

• 測試用例（如果有的話）

• 核心業(yè)務(wù)邏輯梳理（如果有的話）

• 體驗(yàn)問題列舉

• 測試重點(diǎn)建議

• 風(fēng)險(xiǎn)點(diǎn)評估

3陵像、測試童鞋提的bug單，開發(fā)同學(xué)需要在 XX 小時(shí)內(nèi)處理完成寇壳，否則會被QA催醒颖。

4、需要控制bug單數(shù)量壳炎，否則會被追責(zé)復(fù)盤泞歉。同類問題，建議測試童鞋合并到同一個(gè)bug單中匿辩。

5腰耙、測試管理系統(tǒng) 是所有人處理bug 流程的平臺，不是讓測試童鞋隨便記錄個(gè)人問題的铲球。所以要提醒測試童鞋挺庞，明確該問題是bug，再提單稼病；不是bug选侨，要么不提，要么在溝通后駁回溯饵。

發(fā)布方案

• 發(fā)布順序：一般是先發(fā)后端侵俗，再發(fā)前端

• 依賴項(xiàng)是否準(zhǔn)備就緒：配置的數(shù)據(jù)、配置項(xiàng)等

• 是否會對線上業(yè)務(wù)丰刊、線上數(shù)據(jù)造成影響

• 本地環(huán)境、dev環(huán)境增拥、gamma環(huán)境啄巧，均要做好驗(yàn)證寻歧。

• 回退機(jī)制

• 發(fā)布 checkList

上線確認(rèn)

• 發(fā)布完成后，需要輸出上線確認(rèn)郵件

• 觀察頁面體驗(yàn)秩仆、頁面性能表現(xiàn)

• 觀察監(jiān)控?cái)?shù)據(jù)码泛、業(yè)務(wù)調(diào)用量

• 總結(jié)復(fù)盤

二、前端工程化

Git 版本管理

1澄耍、前端代碼倉庫 git 分支規(guī)范：

[圖片上傳失敗...(image-e34aa6-1659516415184)]

[圖片上傳失敗...(image-33900e-1659516415184)]

2噪珊、Commit Message 的格式，只允許使用以下10種標(biāo)識齐莲，最常見的是 feat和 fix ：

• feat: 新功能

• fix: 修補(bǔ) Bug

• docs: 文檔

• style: 格式變更痢站，不影響代碼的運(yùn)行

• refactor: 重構(gòu)（既不是新增功能，也不是修改 bug 的代碼變動(dòng)）

• test: 增加測試

• chore: 構(gòu)建過程或輔助工具的變動(dòng)

• up: 不屬于上述分類時(shí)选酗，可使用此類別

• merge: 用于 merge branch阵难，需要手寫 commit message 的情況

• revert: 用于撤銷之前的 commit

3、業(yè)務(wù)分支芒填，命名規(guī)范：（建議一定加上日期）

• 特性分支：feature_xxx_YYMMDD

• 緊急bug修復(fù)分支：hotfix_xxx_YYMMDD

• 小程序發(fā)布分支（自動(dòng)生成）：release_YYMMDD

代碼規(guī)范

• 代碼格式化：Prettier

• 代碼格式檢查：ESLint

CSS預(yù)處理器

• SASS（用得較多）

• Less

• PostCSS

包管理

• 包管理工具：npm（最常見）呜叫、yarn

• cnpm、nvm殿衰、nrm常用命令

編譯構(gòu)建

• webpack（最常見）

• Vite

• Gulp

• Babel：ES6語法轉(zhuǎn)為ES5語法

小程序工程化

[圖片上傳失敗...(image-d2c888-1659516415184)]

• 小程序工程化探索

• 京喜小程序最佳實(shí)踐：我是如何寫超大型小程序代碼的

測試相關(guān)

• 編寫測試用例代碼

• 單元測試

• 自動(dòng)化測試

三朱庆、前端核心知識

前端入門核心知識點(diǎn)

瀏覽器

• Web標(biāo)準(zhǔn)：結(jié)構(gòu)標(biāo)準(zhǔn)（HTML）、表現(xiàn)標(biāo)準(zhǔn)（CSS）闷祥、行為標(biāo)準(zhǔn)（JS）

• 瀏覽器分為兩部分：渲染引擎（即：瀏覽器內(nèi)核）椎工、JS 引擎

• 瀏覽器的工作原理：重繪和重排、V8引擎

• App的WebView容器蜀踏，相當(dāng)于瀏覽器维蒙，可以內(nèi)嵌H5網(wǎng)頁

HTML5

• 語義化標(biāo)簽：<header>、<article> 果覆、<footer>等颅痊。

• 多媒體標(biāo)簽：<audio>、<video>

• 更強(qiáng)的本地存儲能力和設(shè)備兼容性：indexDB局待、HTML5 APP cookie

• 三維斑响、圖形及特效：SVG、Canvas钳榨、WebGL

• 更有效的實(shí)時(shí)連接：WebSocket舰罚、Server-Sent Events

• 無障礙體驗(yàn)

CSS、CSS3

• CSS盒模型薛耻、BFC

• 浮動(dòng)营罢、定位（絕對定位和相對定位）

• flex 布局

• 圣杯布局、雙飛翼布局

• 選擇器：后代選擇器、交集選擇器饲漾、并集選擇器蝙搔、偽類選擇器

• 2D轉(zhuǎn)換：移動(dòng)translation、旋轉(zhuǎn)rotate考传、縮放scale

• 3D轉(zhuǎn)換：透視 perspective吃型、3D移動(dòng) translate3d、3D旋轉(zhuǎn) rotate3d僚楞、3D呈現(xiàn) transform-style

• CSS3動(dòng)畫：animation

• CSS hack

• Retina 屏幕的 1px 像素勤晚，如何實(shí)現(xiàn)

JS基礎(chǔ)

• ES6語法：嚴(yán)格模式、箭頭函數(shù)泉褐、Promise赐写、Symbol數(shù)據(jù)類型、Set 和Map數(shù)據(jù)結(jié)構(gòu)

• ES6轉(zhuǎn)ES5

• JS數(shù)據(jù)類型轉(zhuǎn)換兴枯、隱式類型轉(zhuǎn)換

• 內(nèi)置對象及其方法

• 數(shù)組的各種方法：map血淌、filter、every财剖、reduce等

• 事件機(jī)制悠夯、原型繼承、立即執(zhí)行函數(shù)

• DOM操作躺坟、虛擬 DOM 的 diff 算法

• BOM瀏覽器操作

• 事件冒泡機(jī)制：捕獲階段沦补、目標(biāo)階段、冒泡階段咪橙。

• 異步編程：Ajax夕膀、Promise、async await

• SessionStorage和LocalStorage美侦、Cookie

• 迭代器Iterator和生成器Generator

• Web Socket

• 異步編程

• 單線程

• Canvas圖像繪制

• svg 動(dòng)畫

JS 高級

• JS 三座大山：原型與原型鏈产舞、作用域及閉包、異步和單線程

• 作用域鏈菠剩、類易猫、繼承、原型繼承

• this的指向和綁定規(guī)則

• 深拷貝和淺拷貝

• 防抖和節(jié)流

• Promise的宏任務(wù)和微任務(wù)

• 瀏覽器的重排和重繪

• 手寫 Promise的整個(gè)邏輯和API：resolve具壮、reject准颓、then、catch棺妓、finally攘已、allSettled、race any

• 高階函數(shù)

• 事件委托

• call怜跑、apply样勃、bind

• arguments 偽數(shù)組

• 函數(shù)柯里化

• 模塊化：CommonJS、AMD、CMD彤灶、ESModule

• JS高階語法：Iterator 迭代器看幼、Decorator 生成器

• JS 高階語法：Decorator批旺、Proxy/Reflect幌陕、MutationObserver、 對象屬性描述符汽煮、Object.assign搏熄、Object.freeze、Object.seal

• JS 內(nèi)存泄漏暇赤、JS垃圾回收算法

• TypeScript 類型檢查

• Vue.js心例、React.js源碼解析

• Vue.js、React.js的狀態(tài)管理：Vuex鞋囊、Redux止后、Redux Toolkit、React Hooks溜腐、zustand

• V8引擎源碼

Node.js

• 回調(diào)函數(shù)

• 時(shí)間驅(qū)動(dòng)機(jī)制

• 模塊化

• 函數(shù)

• 路由

• 全局方法

• 文件系統(tǒng)

Web 安全

• 跨域問題译株、同源策略、JSONP

• CORS

• XSS

• CSRF

頁面形式

• 多端自適應(yīng)布局

• SPA單頁應(yīng)用

• PWA（Progressive Web App）：小程序的鼻祖

四挺益、前端框架

每個(gè)框架和工具歉糜，都有自己的約束、價(jià)值和最佳實(shí)踐望众。

JS框架

• Vue.js

• React.js

• Svelte（輕量級框架匪补，最近比較火）。

• angular（逐漸淘汰）

對比：

• vue ：聲明式編程烂翰，數(shù)據(jù)驅(qū)動(dòng)的思想

• React：函數(shù)式編程夯缺。如果你要改變數(shù)據(jù)，那么必須調(diào)用api去改甘耿。

在vue 中踊兜，幾乎給你想要的全部給你了；而react 追求的更多的是自力更生棵里。

CSS框架润文、組件庫（B端常用）

• React 技術(shù)棧：Ant Design（簡稱Antd）

• Vue 技術(shù)棧：Element、Ant Design Vue

• 簡單的CSS響應(yīng)式框架：Bootstrap

• Tailwind CSS（最近比較火）

• Vant Weapp：輕量級的移動(dòng)端（含H5殿怜、小程序）組件庫

知識庫框架

• Vuepress（基于 Vue.js典蝌，推薦）

• Docusaurus（基于 React.js，推薦）

• GitBook

• docsify：可制作簡易的 wiki 文檔头谜。案例：掘墓人的 Wiki

補(bǔ)充：知識庫框架骏掀，首先推薦 Vuepress 和 Docusaurus，功能強(qiáng)大，成熟穩(wěn)定截驮。

API 文檔框架

• TypeDoc：將TypeScript項(xiàng)目生成 html笑陈、markdown等文檔。

• storybook：用于搭建UI組件的知識庫葵袭『祝可在線預(yù)覽UI組件的樣式和交互效果。

跨端框架

• Flutter（最近比較火）：Flutter 的Dart開發(fā)語言坡锡，可以編譯為 ARM 64蓬网、x86 和 JavaScript 代碼

• ReactNative（逐漸沒落）：App、Web端

• Taro：小程序鹉勒、H5

桌面應(yīng)用開發(fā)框架

• Electron 框架帆锋。案例：VS Code軟件就是用 Electron 開發(fā)的。

Electron 非常流行禽额，也被大量公司使用锯厢，也有很多成功軟件，比如 VS Code脯倒、Facebook Messager实辑、Twitch、Microsoft Teams 等盔憨。Electron 雖然上手容易徙菠，但問題也很明顯，就是慢郁岩、吃內(nèi)存和大婿奔，Electron 吃內(nèi)存是因?yàn)榇虬?Chromium 吃內(nèi)容，同時(shí)一個(gè) Hello World 編譯后就要 120M+ 问慎。

VS Code萍摊、chrome、小程序開發(fā)者工具如叼，本質(zhì)上都是運(yùn)行的 chrome 內(nèi)核冰木。所以你會發(fā)現(xiàn)，這三個(gè)軟件都很占內(nèi)存笼恰，都很卡踊沸。我將其稱之為“前端頭痛三劍客”。

前端可視化框架社证、圖表庫

• ECharts：百度的開源圖表庫逼龟。

• D3.js：可視化 js 庫。

• Three.js：基于原生 WebGL 封裝運(yùn)行的三維引擎追葡。太陽系案例 #

• Cocos 引擎：游戲動(dòng)畫開發(fā)框架腺律。

• 白鷺引擎：H5游戲引擎奕短，一套完整的H5游戲解決方案。白鷺引擎的所在公司已在2022年初破產(chǎn)匀钧，不建議使用翎碑。

編輯器框架

• wangEditor：國內(nèi)很流行

• TinyMCE：國外很火

• ueditor：百度的開源框架。比較老之斯，逐漸沒落日杈。

• Monaco Editor：VS Code的在線版

Node.js 框架

• Koa：新一代 Node.js 框架。

• Egg.js：Egg是在Koa基礎(chǔ)上進(jìn)一步封裝的企業(yè)級Web開發(fā)框架吊圾。

• Express：比較老的Node.js 框架达椰。

服務(wù)端渲染框架

• Next.js （基于React.js）

• Nuxt.js （基于Vue.js）

前端測試框架

• Mocha：JS 測試框架翰蠢。

• Tiga：跨端（H5项乒、小程序）項(xiàng)目的自動(dòng)化測試 SDK。凹凸實(shí)驗(yàn)室出品梁沧。

五檀何、前端性能優(yōu)化

性能分析工具

• 控制臺的瀑布圖 Waterfall

• 控制臺的 performance工具：日常開發(fā)過程中觀察分析運(yùn)行時(shí)的性能表現(xiàn)

• 控制臺的 LightHouse ：跑分、輸出性能報(bào)告廷支，分析性能

• WebPageTest網(wǎng)站：評估網(wǎng)站性能

• Performance 這個(gè)API：實(shí)時(shí)動(dòng)態(tài)測量性能

性能參數(shù)

• 首屏?xí)r間 = 白屏?xí)r間 + 渲染時(shí)間频鉴。預(yù)解析、預(yù)加載恋拍、預(yù)渲染垛孔、懶加載、懶執(zhí)行施敢。

• FPS幀率

• 性能的測量標(biāo)準(zhǔn)：RAIL 模型

• 弱網(wǎng)環(huán)境周荐，耗時(shí)對比

瀏覽器渲染優(yōu)化

• 了解渲染過程、關(guān)鍵渲染路徑

• 減少重排和重繪

• 用戶從輸入url到頁面加載顯示完成僵娃，經(jīng)歷了哪些過程

JavaScript 優(yōu)化

• JS資源優(yōu)化：按需加載概作、編譯打包、解析執(zhí)行默怨、異步加載

• V8引擎工作原理讯榕、性能優(yōu)化原理

• 防抖和節(jié)流

• 無限滾動(dòng)列表：做節(jié)點(diǎn)回收

• 骨架屏 skeleton：減少布局移動(dòng)

• 時(shí)間分片：把一個(gè)運(yùn)行時(shí)間比較長的任務(wù)分解成一塊一塊比較小的任務(wù)，分塊去執(zhí)行匙睹，減少用戶的卡頓感

• JS內(nèi)存管理

資源優(yōu)化

• 資源的壓縮與合并：減少http請求數(shù)量愚屁；減少請求資源的大小痕檬；使用 http緩存

• HTML優(yōu)化：減少iframe的使用霎槐；避免節(jié)點(diǎn)的深層次嵌套；避免使用table布局

• CSS優(yōu)化：降低CSS對頁面渲染的阻塞谆棺，盡早加載CSS栽燕；利用GPU渲染CSS動(dòng)畫罕袋；使用 contain屬性，減少布局和繪制的消耗時(shí)間

• 圖片優(yōu)化：使用CSS3碍岔、SVG浴讯、IconFont代替圖像；圖片懶加載 lazy loading蔼啦；圖片的預(yù)加載榆纽；漸進(jìn)式圖片；響應(yīng)式圖片捏肢；使用 base64 代替小于8kb的圖奈籽。

• 字體優(yōu)化：字體閃動(dòng)問題；使用特殊字體時(shí)鸵赫，建議動(dòng)態(tài)加載網(wǎng)絡(luò)字體

• 異步加載第三方資源：第三方資源不可控會影響頁面的加載和顯示

構(gòu)建優(yōu)化

• tree shaking衣屏、代碼拆分（Code Splitting）

• 代碼壓縮混淆

• 打包時(shí)，避免對不變的庫重復(fù)構(gòu)建辩棒。

網(wǎng)絡(luò)傳輸優(yōu)化

• 啟用Gzip對資源進(jìn)行壓縮

• CDN傳輸：靜態(tài)資源全部放CDN上狼忱，使用戶可就近獲取所需內(nèi)容，大幅減小光纖傳輸距離一睁。

• 避免重定向：301钻弄、302 重定向會降低響應(yīng)速度

• dns預(yù)解析：使用dns-prefetch 提前解析域名，提高資源加載速度者吁。在訪問以圖片為主的網(wǎng)站時(shí)窘俺，DNS預(yù)解析可以讓加載時(shí)間減少5%左右。

• PWA复凳，Service worker

• SSR 服務(wù)端渲染/Node直出

六瘤泪、前端工具和資源

前端文檔

• MDN 官方文檔：https://developer.mozilla.org/zh-CN/docs/Web

前端社區(qū)

• GitHub

• stackoverflow

• 掘金

JS 學(xué)習(xí)資源

• 現(xiàn)代 JavaScript 教程：https://zh.javascript.info/

• 阮一峰 JS教程：https://wangdoc.com/javascript/

• 阮一峰 ES6教程：https://es6.ruanyifeng.com/

• TypeScript 入門教程：https://github.com/xcatliu/typescript-tutorial

• Node.js學(xué)習(xí)指南：https://blog.poetries.top/node-learning-notes/

JS 代碼規(guī)范

1、Airbnb JavaScript Style Guide：

• 英文原版：https://github.com/airbnb/javascript

• 中文版：https://github.com/lin-123/javascript

2染坯、clean code JavaScript：

• 英文原版：https://github.com/ryanmcdermott/clean-code-javascript

• 中文版1：https://github.com/alivebao/clean-code-js

• 中文版2：https://github.com/beginor/clean-code-javascript

前端刷題

• 前端進(jìn)階之道：https://yuchengkai.cn/

CSS 學(xué)習(xí)資源

• CSS靈感：https://github.com/chokcoco/CSS-Inspiration

• CSS的各種實(shí)現(xiàn)效果：https://lhammer.cn/You-need-to-know-css/#/

• css_tricks：https://github.com/QiShaoXuan/css_tricks

• 按需定制 CSS 動(dòng)畫效果：https://github.com/QiShaoXuan/css_tricks

字體相關(guān)資源

• 360字體版權(quán)查詢：https://fonts.safe.#/

• 最全的免費(fèi)可商用字體-效果預(yù)覽：https://wordshub.github.io/free-font/index.html

• 常見的免費(fèi)字體：http://zenozeng.github.io/Free-Chinese-Fonts/

抓包工具

• Whistle：https://wproxy.org/whistle/

兼容性查看工具

• Can I use（前端API兼容性查看）：https://caniuse.com/

圖片相關(guān)工具

• 圖片壓縮：https://tinypng.com/

• 圖片壓縮：https://docsmall.com/

• 生成代碼截圖：https://carbon.now.sh/

設(shè)計(jì)工具

• 墨刀：原型設(shè)計(jì)工具均芽。網(wǎng)址：https://modao.cc/

• 藍(lán)湖：一款產(chǎn)品文檔和設(shè)計(jì)圖的在線協(xié)作平臺。網(wǎng)址：https://lanhuapp.com

• PxCook（像素大廚）：高效易用的自動(dòng)標(biāo)注工具单鹿。軟件下載鏈接：https://www.fancynode.com.cn/pxcook

• 即時(shí)設(shè)計(jì)掀宋、稿定、master go

流程圖工具

• ProcessOn：https://www.processon.com/

大綱筆記

• 幕布：https://mubu.com

• 飛書-思維筆記

markdown 編輯器

• typora

• VS Code

代碼編輯器

• VS Code

• Sublime Text

七仲锄、前端書籍推薦

JS經(jīng)典書籍

• 紅寶書：《JavaScript高級程序設(shè)計(jì)》

• 小黃書：《你不知道的JavaScript》上劲妙、下冊

• 犀牛書：《JavaScript權(quán)威指南》

• 綠皮書：《javascript語言精粹與編程實(shí)踐》

JS進(jìn)階

• 《前端開發(fā)核心知識進(jìn)階》

• 《JavaScript 二十年》

• 《JavaScript 悟道》

• 《深入理解現(xiàn)代JavaScript》

• 《JavaScript忍者秘籍》

• 《編寫可維護(hù)的JavaScript》

• 《了不起的JavaScript工程師：從前端到全端高級進(jìn)階》

• 《javascript設(shè)計(jì)模式與開發(fā)實(shí)踐》

• 《WebKit技術(shù)內(nèi)幕》

• 《JavaScript啟示錄》

CSS

• 《CSS世界》

• 《CSS新世界》

• 《CSS揭秘》

• 《精通 CSS》

Vue.js

• 《Vue.js設(shè)計(jì)與實(shí)現(xiàn)》

• 《深入淺出Vue.js》

Node.js

• 《深入淺出Node.js》

• 《Node.js：來一打 C++ 擴(kuò)展》

數(shù)據(jù)結(jié)構(gòu)和算法

• 《計(jì)算之魂》

• 《大話數(shù)據(jù)結(jié)構(gòu)》

• 《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法》

后端

• 《領(lǐng)域驅(qū)動(dòng)設(shè)計(jì)》

• 《推薦系統(tǒng)實(shí)踐》

• 《數(shù)據(jù)密集型應(yīng)用系統(tǒng)設(shè)計(jì)》

• 《代碼精進(jìn)之路：從碼農(nóng)到工匠》

項(xiàng)目管理和認(rèn)知

• 《人月神話》

• 《黑客與畫家》

• Joel Spolsky的書：《軟件隨想錄》《Joel 說軟件》《Joel 談優(yōu)秀軟件開發(fā)方法》

• 《鳳凰項(xiàng)目》

• 《持續(xù)交付2.0》

• 《Google軟件工程》

• 《軟技能：代碼之外的生存指南》

• 《重來3：跳出瘋狂的忙碌》

• 《程序員的思維修煉》

• 《管理的常識》

產(chǎn)品

• 《啟示錄》

• 《結(jié)網(wǎng)》

• 《人人都是產(chǎn)品經(jīng)理》

• 《用戶體驗(yàn)要素》

• 《有效需求分析》

• 《產(chǎn)品邏輯之美：打造復(fù)雜的產(chǎn)品系統(tǒng)》

• 《微信背后的產(chǎn)品觀》

• 《俞軍產(chǎn)品方法論》

• 《決勝B端——產(chǎn)品經(jīng)理升級之路》

• 《給產(chǎn)品經(jīng)理講技術(shù)》

• 《精益數(shù)據(jù)分析》

• 《產(chǎn)品經(jīng)理面試寶典》

• 《體驗(yàn)引擎：游戲設(shè)計(jì)全景探秘》

設(shè)計(jì)

• 《設(shè)計(jì)心理學(xué)》四冊

• 《用戶體驗(yàn)要素》

• 《點(diǎn)石成金》

• 《寫給大家看的設(shè)計(jì)書》

• 《About Face 4: 交互設(shè)計(jì)精髓》

• 《設(shè)計(jì)中的設(shè)計(jì)》

• 《破繭成蝶》

• 《簡約至上：交互式設(shè)計(jì)四策略》

• 《Web表單設(shè)計(jì)：點(diǎn)石成金的藝術(shù)》

• 《觸動(dòng)人心：設(shè)計(jì)優(yōu)秀的iPhone應(yīng)用》

• 《瞬間之美：Web界面設(shè)計(jì)如何讓用戶心動(dòng)》

• 《用戶體驗(yàn)度量：收集、分析與呈現(xiàn)》

運(yùn)營

• 《運(yùn)營之光》兩冊

• 《我在一線做用戶增長》

• 《增長黑客：創(chuàng)業(yè)公司的用戶與收入增長秘籍》

• 《流量池》

• 《超級運(yùn)營術(shù)》

商業(yè)

• 《史蒂夫·喬布斯傳》

• 《浪潮之巔》

• 《贏》

• 《你憑什么做好互聯(lián)網(wǎng)：從技術(shù)思維到商業(yè)邏輯》

• 《計(jì)算廣告》

• 《詳談：左暉》

• 《在線：數(shù)據(jù)改變商業(yè)本質(zhì)儒喊，計(jì)算重塑經(jīng)濟(jì)未來》

• 《零售的哲學(xué)》

• 《我看電商》

• 《沖浪板上的公司》

• 《一本書讀懂財(cái)報(bào)》

思維和認(rèn)知

• 《學(xué)會提問》

• 《思考镣奋，快與慢》

• 《清醒思考的藝術(shù)》

• 《把時(shí)間當(dāng)作朋友》

• 《智識分子》

• 《少有人走的路》

• 《溝通的方法》

• 《我們?yōu)槭裁匆X》

八、前端總結(jié)和認(rèn)知

研發(fā)視角怀愧，如何理解需求

[圖片上傳失敗...(image-c9279e-1659516415181)]

從上面的流程圖中可以看出侨颈，產(chǎn)品經(jīng)理的交付物是什么余赢？是prd嗎？顯然不是哈垢。

產(chǎn)品經(jīng)理的工作跟設(shè)計(jì)師妻柒、工程師非常不同。人們對工程師的期望是交付有效的代碼耘分，對設(shè)計(jì)師的期望是交付視覺稿举塔。而對于產(chǎn)品經(jīng)理來說，只交付一份prd是不夠的求泰。

產(chǎn)品經(jīng)理要負(fù)責(zé)跟進(jìn)整個(gè)產(chǎn)品周期央渣，包括上線后的頁面效果和數(shù)據(jù)表現(xiàn)。編寫需求規(guī)范是一種溝通和推動(dòng)項(xiàng)目的手段渴频，但規(guī)范本身并沒有內(nèi)在的價(jià)值芽丹。很多產(chǎn)品經(jīng)理并不借助prd來交流他們的想法，他們可以用談話枉氮，還可以把想法畫在白板上志衍。也有一些產(chǎn)品經(jīng)理雖然寫了規(guī)范，但卻沒有參照執(zhí)行聊替。

前端工程師應(yīng)該具備怎樣的能力和素質(zhì)

• 技術(shù)功底、技術(shù)視野培廓、技術(shù)追求

• 除了開發(fā)業(yè)務(wù)功能外惹悄，還需要對開發(fā)規(guī)范、工程化肩钠、組件化泣港、模塊化、測試价匠、設(shè)計(jì)模式有一定的認(rèn)知和實(shí)踐

• 溝通表達(dá)能力当纱、書面表達(dá)能力、總結(jié)復(fù)盤習(xí)慣

• 全局思維踩窖、抽象思維坡氯、持續(xù)交付意識

• 項(xiàng)目一號位擔(dān)當(dāng)，團(tuán)隊(duì)協(xié)作意識

• 綜合權(quán)衡：成本洋腮、效率箫柳、質(zhì)量、風(fēng)險(xiǎn)啥供、體驗(yàn)

• 關(guān)注產(chǎn)品悯恍、設(shè)計(jì)、商業(yè)等各個(gè)領(lǐng)域伙狐。交叉學(xué)科會帶來更多創(chuàng)新涮毫。

前端認(rèn)知

1瞬欧、雖然我們絕大多數(shù)時(shí)間耗在業(yè)務(wù)開發(fā)上，但仍需要積累其他方面的沉淀罢防，做多一些有趣的黍判、可持續(xù)的事情，比如分享總結(jié)篙梢、基礎(chǔ)能力建設(shè)顷帖、研發(fā)效能提升、技術(shù)運(yùn)營建設(shè)渤滞、技術(shù)沉淀等贬墩。

2、學(xué)會提問妄呕。我們?nèi)粘Ｔ谔岢鰡栴}和解決問題時(shí)陶舞，經(jīng)常容易陷入X-Y問題，導(dǎo)致目標(biāo)不明確绪励、思路不清晰肿孵、溝通效率低下，甚至在一個(gè)完全錯(cuò)誤的方向上浪費(fèi)大量的資源疏魏、時(shí)間和精力停做。無論是在尋求幫助的人身上，還是在提供幫助的人身上大莫，都有所體現(xiàn)蛉腌。

在面對一個(gè)問題時(shí)，要理解這句話的意圖只厘、事實(shí)烙丛、情緒、期待羔味。學(xué)會提問河咽，學(xué)會答疑，都是一種智慧赋元。參考提問的智慧 忘蟹。

3、全流程跟進(jìn)们陆，持續(xù)交付寒瓦，創(chuàng)造業(yè)務(wù)價(jià)值。

4坪仇、前端的本質(zhì)是鏈接商業(yè)杂腰、設(shè)計(jì)、計(jì)算能力椅文，為用戶提供專業(yè)的人機(jī)交互體驗(yàn)喂很。

5惜颇、產(chǎn)品能力和技術(shù)能力是：判斷信息，抓住要點(diǎn)少辣，整合有限的資源凌摄，把自己的價(jià)值打包成一個(gè)產(chǎn)品進(jìn)行交付，并獲得回報(bào)漓帅。

6锨亏、部門體系的角色有很多：運(yùn)營、產(chǎn)品忙干、視覺器予、開發(fā)、測試捐迫、架構(gòu)師乾翔、leader、行銷施戴、數(shù)據(jù)分析反浓、運(yùn)維等。有些工作不是“做或者不做”的問題赞哗，而是程度的問題雷则。在注意邊界的前提下，主動(dòng)承擔(dān)懈玻、全盤思考巧婶、多一份同理心，這是能力和責(zé)任逐漸增強(qiáng)的體現(xiàn)涂乌。

7、謙遜英岭、尊重和信任湾盒，是協(xié)同作戰(zhàn)和良性合作的基礎(chǔ)。

8诅妹、組織內(nèi)罚勾，人與人的關(guān)系應(yīng)該是怎樣的？有人認(rèn)為是管理與被管理的關(guān)系吭狡，有人認(rèn)為是合作關(guān)系尖殃。而我認(rèn)為，組織內(nèi)的關(guān)系是奉獻(xiàn)關(guān)系划煮。沒有奉獻(xiàn)作為基礎(chǔ)送丰，組織關(guān)系是不成立的。組織內(nèi)的人與人之間是相互付出的關(guān)系弛秋，部門與部門是相互付出的關(guān)系器躏，上級與下級之間是相互付出的關(guān)系俐载，在這樣的相互奉獻(xiàn)關(guān)系中，組織才會真正地存在并發(fā)揮作用登失。

奉獻(xiàn)關(guān)系所產(chǎn)生的基本現(xiàn)象是：每個(gè)處于流程上的人更關(guān)心他能夠?yàn)橄乱粋€(gè)工序做什么樣的貢獻(xiàn)遏佣；每個(gè)部門都關(guān)心自己如何調(diào)整才能夠與其他部門有和諧的接口；下級會關(guān)注自己怎樣配合才能夠?yàn)樯霞壧峁┲С掷空悖霞墪笞约簽橄录壗鉀Q問題并提供幫助状婶。

能力很重要，而付出更重要馅巷。

9膛虫、優(yōu)秀的人有幾個(gè)特性：敏感、不能忍令杈、有動(dòng)手優(yōu)化的能力走敌。

10、前端側(cè)重于人機(jī)交互和用戶體驗(yàn)逗噩，后端側(cè)重于業(yè)務(wù)邏輯和大規(guī)模數(shù)據(jù)處理掉丽。理論上，面向用戶的產(chǎn)品里异雁，所有問題（包括產(chǎn)品捶障、設(shè)計(jì)、后端纲刀、甚至看不見的問題）的表現(xiàn)形式项炼，都會暴露在前端，而只有部分問題（數(shù)據(jù)問題示绊、計(jì)算問題锭部、安全問題等）暴露在后端，這就意味著前端起到了至關(guān)重要的承載和連接作用面褐。

11拌禾、前端技術(shù)的更新日新月異；前端框架的技術(shù)選型層出不窮展哭；視覺審美的潮流不斷更替湃窍；可視化效果酷炫無比；用戶的運(yùn)營體系逐漸精細(xì)化匪傍；適老化您市、無障礙化、青少年人群的訴求浮出水面役衡；智能設(shè)備的升級和適配無窮無盡茵休。所有的這一切，對前端領(lǐng)域和前端同學(xué)就一個(gè)要求：要折騰，愛折騰泽篮，反復(fù)折騰盗尸。