本文擴(kuò)展了我以前的文章“當(dāng)前端意味著全?！?，最初在Stripe的增量雜誌中出現(xiàn)。它建立在“大鴻溝”和“哦，我想我們現(xiàn)在是全棧開發(fā)人員”中探討的主題上。
我的前端旅程始於wordpress的style.css 。使用幾行代碼來轉(zhuǎn)換網(wǎng)站的力量令人著迷。通過HTML和CSS，我可以並且可以 - 可以 - 鼓勵(lì)購(gòu)買或社交共享。
甚至在專業(yè)前端工作之前，我都體驗(yàn)了藝術(shù)和邏輯的獨(dú)特融合。這是一種表現(xiàn)力的藝術(shù)形式，但受到溝通和業(yè)務(wù)目標(biāo)的約束。
前端發(fā)展是一個(gè)引人入勝的十字路口：
- 藝術(shù)和邏輯：創(chuàng)造性表達(dá)和技術(shù)精確度的融合。
- 商業(yè)和表達(dá)：將業(yè)務(wù)目標(biāo)與藝術(shù)設(shè)計(jì)平衡。
- 左右大腦：參與分析和創(chuàng)造性思維。
- 設(shè)計(jì)和啞光：將美學(xué)敏感性與技術(shù)專長(zhǎng)相結(jié)合。
我的教育背景反映了這種雙重性 - 計(jì)算機(jī)科學(xué)與藝術(shù)課程的融合。
“前端開發(fā)人員”一詞被廣泛理解為職稱。但是，在公司之間的角色差異很大，使職位的描述符不足。展示實(shí)用技能是關(guān)鍵。
克里斯·科伊爾（Chris Coyier）前端開發(fā)人員
儘管標(biāo)題可能有所不同，但核心重點(diǎn)仍然保持一致：瀏覽器的網(wǎng)站。
- 前端=瀏覽器
- 後端=服務(wù)器
儘管工作角色不斷發(fā)展，但這種基本的區(qū)別仍然存在。
“以瀏覽器為中心”的開發(fā)提出了獨(dú)特的挑戰(zhàn)。儘管進(jìn)行了標(biāo)準(zhǔn)化的努力，但瀏覽器的不一致仍然存在。最近的一次遭遇強(qiáng)調(diào)了這一點(diǎn) - 日期字符串在Chrome中正確解析，但在Firefox中造成了錯(cuò)誤。這是前端發(fā)展的現(xiàn)實(shí)。
除了瀏覽器差異之外，用戶行為還增加了另一層複雜性。屏幕尺寸，深色模式，顏色域，像素密度，帶寬和輸入方法（鍵盤，鼠標(biāo)，觸摸）都會(huì)影響用戶體驗(yàn)。這些注意事項(xiàng)同樣適用於桌面和移動(dòng)設(shè)備，並通過HTML電子郵件變得更加明顯。
這種眾多未知數(shù)需要從前端開發(fā)人員採(cǎi)取全面的方法。
最關(guān)鍵的方面？用戶。這是我們工作的原因。他們是我們CSS藝術(shù)的受眾，我們的小部件的潛在買家，反應(yīng)影響我們工作的個(gè)人。這些用戶正確地放置在基座上，代表了瀏覽器以外的不同景觀：不同的語言，需求，能力和緊迫水平。前端開發(fā)人員彌合了代碼和用戶之間的差距。
前端開發(fā)使我們處?kù)蹲钋把?，將我們的?chuàng)作直接與用戶聯(lián)繫起來，這是許多人感到有意義的職位。這是在考慮反應(yīng)之前。
對(duì)以用戶為中心的強(qiáng)調(diào)似乎是不言而喻的。理想情況下，從首席執(zhí)行官到實(shí)習(xí)生的公司的每個(gè)成員都應(yīng)優(yōu)先考慮用戶。但是，前端開發(fā)人員的角色是獨(dú)一無二的。當(dāng)我們編碼<button></button>，我們將交互元素直接放置在用戶的瀏覽器窗口中。調(diào)整顏色直接影響用戶的視覺體驗(yàn)。
這類似於陶瓷藝術(shù)家塑造咖啡杯。它正在將工藝應(yīng)用於數(shù)字體驗(yàn)。雖然後端開發(fā)人員可能會(huì)非常關(guān)心用戶，但正如莫妮卡·迪肯斯庫(kù)（Monica Dinculescu）恰當(dāng)?shù)刂赋龅哪菢?，他們?jīng)?！巴獍?zé)任”。
前端開發(fā)人員是瀏覽器專家。掌握HTML，CSS和JavaScript是基本的。這不是過時(shí)的教條；數(shù)十年的經(jīng)驗(yàn)證實(shí)了它的重要性。即使與預(yù)處理程序或框架一起工作，瀏覽器也最終會(huì)收到HTML，CSS和JavaScript。調(diào)試和瀏覽器優(yōu)化是關(guān)鍵職責(zé)。
儘管CSS仍然是我個(gè)人的最愛，而HTML需要不斷關(guān)注，但JavaScript值得特別檢查。它從一個(gè)簡(jiǎn)單效果的工具到整個(gè)Web堆棧中的主要語言的演變是顯著的。現(xiàn)在，只能使用JavaScript構(gòu)建整個(gè)網(wǎng)站。
JavaScript在瀏覽器中的功能超過了HTML和CSS的功能。它可以通過解析HTML創(chuàng)建的DOM（文檔對(duì)像模型）和應(yīng)用樣式的CSSOM（CSS對(duì)像模型）。
但是，這並不是完全準(zhǔn)確的。 HTML首先被解析，這是網(wǎng)站速度的關(guān)鍵方面。理想情況下，僅使用HTML提供了網(wǎng)站的基本信息和功能。
這種哲學(xué)被稱為漸進(jìn)式增強(qiáng)。雖然我為此而努力，但完美的依從性並不總是可行的。一個(gè)<button></button>可以在沒有JavaScript的情況下運(yùn)行，但是通過JavaScript添加AJAX提交會(huì)增強(qiáng)用戶體驗(yàn)。同樣，在JavaScript執(zhí)行之前，完全取決於JavaScript的元素可能不會(huì)呈現(xiàn)。有時(shí)，實(shí)用性勝過嚴(yán)格的堅(jiān)持： “只要按下按鈕，山姆。沒有人會(huì)死的?！?/em>
JavaScript的主導(dǎo)地位使其成為Web開發(fā)人員的主要重點(diǎn)，尤其是其改進(jìn)的人體工程學(xué)和強(qiáng)大的框架。馬特·穆倫維格（Matt Mullenweg）的2015年建議“深入學(xué)習(xí)JavaScript”仍然很重要。 JavaScript在前端開發(fā)中的增長(zhǎng)，尤其是在工作需求方面，是不可否認(rèn)的。
儘管網(wǎng)站統(tǒng)計(jì)數(shù)據(jù)可能顯示出使用REACT的頂級(jí)網(wǎng)站比JQuery的比例較小，但職位發(fā)布講述了一個(gè)不同的故事，這是這些數(shù)字的逆轉(zhuǎn)。
前端開發(fā)人員的實(shí)際日常任務(wù)包括：
- 將設(shè)計(jì)轉(zhuǎn)換為代碼。
- 跨設(shè)備實(shí)施響應(yīng)式設(shè)計(jì)。
- 構(gòu)建可重複使用的組件和圖案。
- 應(yīng)用語義HTML。
- 確?？稍L問性。
- 優(yōu)化網(wǎng)站性能。
即使是第一點(diǎn)本身就感覺就像是大學(xué)課程。
讓我們將其應(yīng)用於假設(shè)的網(wǎng)站：
我們的思想競(jìng)賽！
- CSS網(wǎng)格用於佈局。
- 字體優(yōu)化：子集或滿載，並處理字體變動(dòng)。
- 創(chuàng)建可重複使用的卡組件。
- 用CSS變量定義和管理配色方案或像Sass這樣的預(yù)處理程序。
- 優(yōu)先考慮屏幕讀取器的源順序。
- 優(yōu)化圖像格式（PNG，JPG，下一代格式）和ALT文本。
- 將內(nèi)聯(lián)SVG用於圖標(biāo)。
- 決定前端框架（React，Vue，Svelte）和構(gòu)建系統(tǒng)。
- 考慮CMS集成（無頭或其他）。
- 計(jì)劃互動(dòng)：重點(diǎn)狀態(tài)，過渡等
這說明了前端開發(fā)人員的思維過程。許多任務(wù)反復(fù)出現(xiàn)，但是每個(gè)項(xiàng)目的具體挑戰(zhàn)各不相同。
這使我們獲得了文章的標(biāo)題。
儘管許多任務(wù)多年來一直是工作的一部分，但新職責(zé)正在出現(xiàn)，尤其是在現(xiàn)代JavaScript框架中。組件的概念對(duì)於這些框架至關(guān)重要。組件允許為項(xiàng)目量身定制的可重複使用的抽象。
這種基於組件的體系結(jié)構(gòu)將前端開發(fā)人員提升到站點(diǎn)級(jí)架構(gòu)師。一個(gè)頁(yè)面可能由嵌套組件（卡，按鈕，圖標(biāo)，網(wǎng)格，標(biāo)頭，側(cè)欄等）組成，每個(gè)組件都有自己的邏輯和樣式。這通常涉及處理URL和路由，有效地使前端開發(fā)人員負(fù)責(zé)該網(wǎng)站的整體體系結(jié)構(gòu)。
組件很少包含硬編碼數(shù)據(jù)；它們充當(dāng)模板，通過JavaScript獲取數(shù)據(jù)。這通常涉及API（例如，帶有Apollo客戶端的GraphQl），並管理組件本身中的數(shù)據(jù)獲取和更新。這是另一個(gè)不斷擴(kuò)大的責(zé)任。
除了API數(shù)據(jù)之外，網(wǎng)站還管理內(nèi)部狀態(tài)：活動(dòng)選項(xiàng)卡，模態(tài)對(duì)話框，手風(fēng)琴狀態(tài)，錯(cuò)誤消息，分頁(yè)，滾動(dòng)位置等。有效地管理此狀態(tài)至關(guān)重要。從使用DOM作為真理的來源轉(zhuǎn)變?yōu)楦}雜的狀態(tài)管理解決方案（內(nèi)置於框架或通過第三方庫(kù)）是一個(gè)重大變化。前端開發(fā)人員現(xiàn)在負(fù)責(zé)架構(gòu)和實(shí)施此狀態(tài)管理。
強(qiáng)大的國(guó)家管理和可重複使用的組件的需求導(dǎo)致了設(shè)計(jì)系統(tǒng)的興起。從系統(tǒng)上建造組件是自然的進(jìn)步。
返回我們的設(shè)計(jì)示例：
出現(xiàn)了新的注意事項(xiàng)：
- 選擇JavaScript框架及其含義（靜態(tài)與服務(wù)器端渲染）。
- 設(shè)計(jì)數(shù)據(jù)獲?。℅raphQL API）。
- 選擇一個(gè)CMS（無頭或其他）。
- 定義必要的組件及其相互作用。
- 管理客戶端狀態(tài)。
- 實(shí)施身份驗(yàn)證。
- 利用第三方組件（例如，圖像加載器）。
這些職責(zé)被添加到設(shè)計(jì)實(shí)施，語義，可訪問性和性能優(yōu)化的現(xiàn)有任務(wù)中。前端開發(fā)所需的技能正在不斷擴(kuò)大。
這種增長(zhǎng)是由Web的擴(kuò)展驅(qū)動(dòng)的：使用情況增加，更廣泛的互聯(lián)網(wǎng)訪問，不斷增長(zhǎng)的網(wǎng)絡(luò)經(jīng)濟(jì)以及越來越強(qiáng)大的瀏覽器。
專業(yè)化變得越來越普遍。一些開發(fā)人員專注於設(shè)計(jì)和HTML/CSS，而另一些開發(fā)人員則專門研究系統(tǒng)或數(shù)據(jù)管理。儘管所有人都可能擁有“前端開發(fā)人員”，但他們的角色和職責(zé)可能會(huì)有很大差異。
我們討論網(wǎng)站開發(fā)的方式也發(fā)生了變化。 LAMP堆棧（Linux，Apache，MySQL，PHP）完全集中在後端。平均值（Mongo，Express，Angular，節(jié)點(diǎn)）引入前端技術(shù)（角，節(jié)點(diǎn)）。 Node.js的出現(xiàn)使JavaScript開發(fā)人員可以同時(shí)處理前端和後端，從而模糊了角色之間的界限。通常使用Node.js的“無服務(wù)器”體系結(jié)構(gòu)進(jìn)一步擴(kuò)展了前端開發(fā)人員的覆蓋範(fàn)圍。 Star（設(shè)計(jì)系統(tǒng)，打字稿，Apollo，React）代表完全建立在前端技術(shù)上的堆棧。
擴(kuò)大的職責(zé)可能令人生畏。感到不知所措很普遍。專業(yè)不僅可以接受，而且建議。專注於感興趣的領(lǐng)域並建立專業(yè)知識(shí)。
唯一的常數(shù)是變化。擁抱它。
?我是一名白人男性，提供了很大的優(yōu)勢(shì)。 ??2瀏覽器支持許多其他語言（HTTP，SVG，PNG等）。更廣泛的知識(shí)增強(qiáng)了能力。 ??“具有諷刺意味的是，許多WordPress站點(diǎn)不是使用客戶端JavaScript組件構(gòu)建的。 ??
以上是對(duì)前端開發(fā)人員的責(zé)任擴(kuò)大的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁(yè)開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫
Jul 07, 2025 am 12:07 AM
創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種：1.使用邊框的基本旋轉(zhuǎn)器，通過HTML和CSS實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫；2.使用多個(gè)點(diǎn)的自定義旋轉(zhuǎn)器，通過不同延遲時(shí)間實(shí)現(xiàn)跳動(dòng)效果；3.在按鈕中添加旋轉(zhuǎn)器，通過JavaScript切換類來顯示加載狀態(tài)。每種方法都強(qiáng)調(diào)了設(shè)計(jì)細(xì)節(jié)如顏色、大小、可訪問性和性能優(yōu)化的重要性，以提升用戶體驗(yàn)。
解決CSS瀏覽器兼容性問題和前綴
Jul 07, 2025 am 01:44 AM
處理CSS瀏覽器兼容性和前綴問題需理解瀏覽器支持差異並合理使用廠商前綴。 1.了解常見問題如Flexbox、Grid支持不一，position:sticky失效，動(dòng)畫表現(xiàn)不同；2.查閱CanIuse確認(rèn)特性支持情況；3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴；4.推薦使用Autoprefixer自動(dòng)添加前綴；5.安裝PostCSS並配置browserslist指定目標(biāo)瀏覽器；6.構(gòu)建時(shí)自動(dòng)處理兼容性；7.老項(xiàng)目可用Modernizr檢測(cè)特性；8.不必追求所有瀏覽器一致，確
顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(lián)塊之間有什麼區(qū)別？
Jul 11, 2025 am 03:25 AM
Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizo????ntalpadding/margins—idealforinlinetextstyling
使用CSS剪輯路徑創(chuàng)建自定義形狀
Jul 09, 2025 am 01:29 AM
使用CSS的clip-path屬性可以裁剪元素為自定義形狀，如三角形、圓形缺口、多邊形等，無需依賴圖片或SVG。其優(yōu)勢(shì)包括：1.支持circle、ellipse、polygon等多種基本形狀；2.可響應(yīng)式調(diào)整，適配移動(dòng)端；3.易於動(dòng)畫化，可結(jié)合hover或JavaScript實(shí)現(xiàn)動(dòng)態(tài)效果；4.不影響佈局流，僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意
造型與CSS不同訪問的鏈接
Jul 11, 2025 am 03:26 AM
設(shè)置訪問過鏈接的樣式能提升用戶體驗(yàn)，尤其在內(nèi)容密集型網(wǎng)站中幫助用戶更好導(dǎo)航。 1.使用CSS的:visited偽類可定義已訪問鏈接樣式，如顏色變化；2.注意瀏覽器出於隱私限制僅允許修改部分屬性；3.顏色選擇應(yīng)與整體風(fēng)格協(xié)調(diào)，避免突兀；4.移動(dòng)端可能不顯示該效果，建議結(jié)合其他視覺提示如icon輔助標(biāo)識(shí)。
如何使用CSS創(chuàng)建響應(yīng)式圖像？
Jul 15, 2025 am 01:10 AM
要使用CSS創(chuàng)建響應(yīng)式圖片，主要可通過以下方法實(shí)現(xiàn)：1.使用max-width:100%和height:auto讓圖片在保持比例的同時(shí)自適應(yīng)容器寬度；2.結(jié)合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源；3.利用object-fit和object-position控製圖片裁剪與焦點(diǎn)展示。這些方法共同確保圖片在不同設(shè)備上清晰、美觀地呈現(xiàn)。
揭開CSS單元的神秘面紗：PX，EM，REM，VW，VH比較
Jul 08, 2025 am 02:16 AM
CSS單位的選擇取決於設(shè)計(jì)需求和響應(yīng)式要求。 1.px用於固定尺寸，適合精確控制但缺乏彈性；2.em是相對(duì)單位，受父元素影響易導(dǎo)致級(jí)聯(lián)問題，rem則基於根元素更穩(wěn)定，適合全局縮放；3.vw/vh基於視口大小，適合響應(yīng)式設(shè)計(jì)，但需注意極端屏幕下的表現(xiàn)；4.選擇時(shí)應(yīng)根據(jù)是否需要響應(yīng)式調(diào)整、元素層級(jí)關(guān)係及視口依賴程度來決定，合理搭配使用可提升佈局靈活性與維護(hù)性。
什麼是常見的CSS瀏覽器不一致？
Jul 26, 2025 am 07:04 AM
不同瀏覽器對(duì)CSS解析存在差異，導(dǎo)致顯示效果不一致，主要包括默認(rèn)樣式差異、盒模型計(jì)算方式、Flexbox和Grid佈局支持程度及某些CSS屬性行為不一致。 1.默認(rèn)樣式處理不一致，解決方法是使用CSSReset或Normalize.css統(tǒng)一初始樣式；2.舊版IE的盒模型計(jì)算方式不同，建議統(tǒng)一使用box-sizing:border-box；3.Flexbox和Grid在邊緣情況或舊版本中表現(xiàn)有差異，應(yīng)多測(cè)試並使用Autoprefixer；4.某些CSS屬性行為不一致，需查閱CanIuse並提供降級(jí)
