如何設(shè)計(jì)出優(yōu)美良好結(jié)構(gòu)的網(wǎng)頁(yè)前端

凡是從事互聯(lián)網(wǎng)的人根本都會(huì)寫(xiě)幾行html，用過(guò)Word的人用Dreamweaver也能做出規(guī)整的頁(yè)面，所以大多數(shù)人會(huì)很自然地認(rèn)為“頁(yè)面的開(kāi)發(fā)沒(méi)啥技能含量，很簡(jiǎn)單”。不只有這種遍及的認(rèn)知，對(duì)從業(yè)者來(lái)說(shuō)也有許多疑問(wèn)：做頁(yè)面前端完成，沒(méi)疑問(wèn)；兼容性，小case；圖像集成，一直都在用……還能有啥疑問(wèn)？瓶頸啊、天花板啊、轉(zhuǎn)型啊、未來(lái)啊就在從業(yè)者中廣泛評(píng)論。是不是真的沒(méi)啥疑問(wèn)了呢？網(wǎng)易郵箱前端技能基地也設(shè)立好幾年了，好像有著評(píng)論不完的論題，也常常會(huì)有一些新的主意讓咱們?yōu)橹徽?。那么?yè)面開(kāi)發(fā)還有哪些需求，還要做些啥，這兒面的水有多深，讓咱們舀舀看。
在不一樣的時(shí)期對(duì)頁(yè)面前端的觀點(diǎn)好像是多變的。在互聯(lián)網(wǎng)前期的時(shí)分，小車(chē)仍是比房子貴的，燒餅和粉絲還只是用來(lái)吃的，菊花還只是用來(lái)泡茶的。那時(shí)的頁(yè)面計(jì)劃個(gè)性相對(duì)單一，對(duì)應(yīng)的頁(yè)面需求對(duì)比簡(jiǎn)單，而且其時(shí)的瀏覽器也根本是IE6的全國(guó)，javascript也只是網(wǎng)頁(yè)特效的代名詞，HTML頁(yè)面網(wǎng)站建設(shè)自身沒(méi)有致使太多人的注重，好像只需能用div甚至table加css輔佐把圖像定好位，把頁(yè)面內(nèi)容預(yù)留好就OK了，而且這種觀念存在了很長(zhǎng)一段時(shí)間。跟著頁(yè)面內(nèi)容的豐厚，計(jì)劃個(gè)性的開(kāi)展，交互雜亂性的添加，AJAX的運(yùn)用，瀏覽器的更新?lián)Q代，又讓咱們從頭對(duì)最根本的頁(yè)面自身注重起來(lái)。然后熱議的即是瀏覽器的兼容性，碰到疑問(wèn)最熱心的即是滿網(wǎng)絡(luò)查找hack，趁便再罵罵IE6、7……當(dāng)這些都做一遍后，好像又遇到了瓶頸，又開(kāi)端尋找未來(lái)。咱們就從這個(gè)期間開(kāi)端說(shuō)起。
完成作用圖是最根本的作業(yè)
把視覺(jué)稿經(jīng)過(guò)頁(yè)面代碼的方式表現(xiàn)出來(lái)包含了兩個(gè)根本訴求：1.能夠?qū)嵲诜从骋曈X(jué)稿；2.能夠經(jīng)過(guò)瀏覽器的兼容。這兩個(gè)訴求的到達(dá)需求咱們有追求細(xì)節(jié)的情緒和必定的頁(yè)面功底，能完成這兩個(gè)內(nèi)容就能夠開(kāi)端進(jìn)入頁(yè)面前端的從業(yè)者行列了，但這就代表著咱們能夠擔(dān)任頁(yè)面開(kāi)發(fā)的作業(yè)了？不，才剛剛開(kāi)端！
與計(jì)劃師的交流和項(xiàng)目的參加
交流很重要。先拋出幾個(gè)疑問(wèn)：咱們有網(wǎng)站建設(shè)沒(méi)有和計(jì)劃師討論過(guò)某些作用對(duì)低端瀏覽器烘托功率影響對(duì)比大？有沒(méi)有討論過(guò)有些作用能夠用CSS3完成然后使得構(gòu)造愈加簡(jiǎn)練明晰？有沒(méi)有在代碼和視覺(jué)中尋追求過(guò)平衡？頁(yè)面前端的開(kāi)發(fā)向根本用戶，編寫(xiě)的代碼也直接作用在瀏覽器上，咱們有義務(wù)對(duì)頁(yè)面的穩(wěn)定性和烘托功率擔(dān)任。咱們也常常碰到項(xiàng)目在全體進(jìn)展壓力下致使的計(jì)劃與頁(yè)面前端開(kāi)發(fā)同步進(jìn)行，這時(shí)更有必要盡量多地獲取項(xiàng)目信息，了解咱們還要做些啥，這些能夠協(xié)助咱們充分思考重用和構(gòu)造拓寬。
杰出的頁(yè)面構(gòu)造
頁(yè)面構(gòu)造的編寫(xiě)比方蓋房的地基建造，其好壞會(huì)直接影響到CSS代碼的質(zhì)量、js開(kāi)發(fā)、后臺(tái)開(kāi)發(fā)還會(huì)影響到今后的頁(yè)面拓寬、迭代和頁(yè)面調(diào)整。拿到視覺(jué)稿后，不要忙著著手開(kāi)端，多觀察思考。先剖析計(jì)劃，區(qū)分構(gòu)造，然后計(jì)劃構(gòu)造，編寫(xiě)代碼。特別在大型項(xiàng)目中，合理運(yùn)用模塊化的開(kāi)發(fā)不管從全體進(jìn)行仍是拓寬保護(hù)都有相當(dāng)大的優(yōu)點(diǎn)。
對(duì)于hack
許多同學(xué)在頁(yè)面開(kāi)發(fā)時(shí)上網(wǎng)查找最多的即是hack了，是不是咱們完全要依靠hack來(lái)完成頁(yè)面兼容性，答案是不是定的。咱們常常比方IE6向咱們?nèi)隽艘粋€(gè)謊，成果咱們要再撒一百個(gè)謊來(lái)圓這個(gè)謊。不否定IE6常常讓咱們口吐鮮血，但不代表咱們用更多的“謊話”來(lái)彌補(bǔ)就能夠心安理得。大多數(shù)情況下能夠經(jīng)過(guò)變換思路調(diào)整HTML構(gòu)造，或運(yùn)用一些盡管無(wú)法解釋但相對(duì)安全的css來(lái)干掉hack。誰(shuí)都無(wú)法估計(jì)運(yùn)用hack啥時(shí)分會(huì)讓咱們?cè)砸粋€(gè)大跟頭。比方觸發(fā)layout或position:relative就能夠協(xié)助處理許多IE6的疑問(wèn)。
美麗的代碼
如今許多web項(xiàng)目功能雜亂，代碼規(guī)劃也會(huì)成都做網(wǎng)站變得很無(wú)窮，怎么十分好地進(jìn)行協(xié)同開(kāi)發(fā)和保護(hù)是咱們面對(duì)的一個(gè)疑問(wèn)。需求思考完善一致的計(jì)劃，還有要養(yǎng)成杰出的代碼開(kāi)發(fā)習(xí)氣才會(huì)在面對(duì)各種情況時(shí)揮灑自如。翻閱頁(yè)面代碼，看到合理的標(biāo)簽運(yùn)用、杰出的注釋、明晰的代碼構(gòu)造、意圖精確的css不只猶如賞識(shí)一個(gè)藝術(shù)品，更為下流開(kāi)發(fā)和協(xié)同開(kāi)發(fā)降低了不小的交流本錢(qián)，咱們有啥理由不去這么做呢？舉個(gè)不和比方：div濫用是如今對(duì)比典型的一個(gè)疑問(wèn)。數(shù)數(shù)看自個(gè)運(yùn)用的標(biāo)簽有多少個(gè)呢？不一樣的語(yǔ)義都該運(yùn)用對(duì)應(yīng)的標(biāo)簽代碼，特別是HTML5供給了更豐厚的語(yǔ)義化標(biāo)簽，它們都苦苦地在等候戰(zhàn)場(chǎng)上的沖鋒號(hào)，讓咱們?nèi)ソ夥潘鼈儼桑?
無(wú)障礙頁(yè)面開(kāi)發(fā)
可拜訪性與易用性是十分片面且人性化的東西。普通人看上去上完滿出現(xiàn)的頁(yè)面在特別群體中不必定顯得那么交心。當(dāng)瞎子用讀屏軟件在頁(yè)面某個(gè)區(qū)域內(nèi)墮入循環(huán)時(shí)，咱們應(yīng)當(dāng)感到愧疚。只能說(shuō)目前國(guó)內(nèi)的網(wǎng)站對(duì)此的注重程度還遠(yuǎn)遠(yuǎn)不夠，這就需求咱們共同盡力，讓更多的人感受到咱們的熱心。>
保障功率
作為項(xiàng)目開(kāi)發(fā)中對(duì)比靠前的一環(huán)，頁(yè)面開(kāi)發(fā)也許需求盡早完成為項(xiàng)目爭(zhēng)取時(shí)間，這就需求咱們盡也許地進(jìn)步功率。“工欲善其事，必先利其器”，除了實(shí)戰(zhàn)經(jīng)驗(yàn)和代碼習(xí)氣的構(gòu)成能夠協(xié)助咱們進(jìn)步功率外，想要進(jìn)步對(duì)自個(gè)開(kāi)發(fā)的進(jìn)展掌控才干，還有許多輔佐東西能夠協(xié)助咱們進(jìn)行頁(yè)面開(kāi)發(fā)。比方運(yùn)用Less或Sass能夠協(xié)助咱們拓寬和組織CSS，大大進(jìn)步CSS的編寫(xiě)功率添加了可保護(hù)性。比方能夠經(jīng)過(guò)zen coding的自動(dòng)自動(dòng)完成和自定義代碼塊讓你能夠劍指如飛。甚至還見(jiàn)過(guò)經(jīng)過(guò)自定義輸入法的代碼塊關(guān)鍵詞來(lái)進(jìn)步開(kāi)發(fā)速度的。多多開(kāi)掘必定會(huì)找到最合適自個(gè)運(yùn)用的東西。
對(duì)于服務(wù)器的優(yōu)化
頁(yè)面開(kāi)發(fā)也需求了解服務(wù)器的優(yōu)化，盡量減小服務(wù)器負(fù)擔(dān)。比方css sprite即是一個(gè)典型減小服務(wù)器懇求數(shù)的比方。在網(wǎng)易郵箱的頁(yè)面前端開(kāi)發(fā)中咱們不停地在做著各種優(yōu)化，成都做網(wǎng)站比方一直在尋求文件巨細(xì)與服務(wù)器懇求數(shù)的平衡；為了盡也許進(jìn)步緩存利用率采用了補(bǔ)丁晉級(jí)；對(duì)class名進(jìn)行了混雜緊縮防止命名過(guò)長(zhǎng)的冗余；運(yùn)用base64減少懇求數(shù)量等等措施。這些都是歸納權(quán)衡的成果，需求思考各個(gè)方面全體優(yōu)化。因?yàn)楫?dāng)頁(yè)面拜訪量到達(dá)必定的數(shù)量級(jí)時(shí)，再小的一點(diǎn)優(yōu)化都會(huì)到達(dá)可觀的作用，再小的疑問(wèn)都也許會(huì)構(gòu)成無(wú)窮的災(zāi)難。
擁抱HTML5
這是一個(gè)充溢時(shí)機(jī)的年代，HTML5年代的降臨伴跟著移動(dòng)互聯(lián)網(wǎng)的鼓起發(fā)明了更大的時(shí)機(jī)，還有太多的東西值得咱們?nèi)W(xué)習(xí)去發(fā)現(xiàn)。 HTML5供給了豐厚的JS API接口，需求咱們?nèi)パ杏?；CSS3的艷麗招引了足夠多的眼球，需求咱們?nèi)パ杏?；移?dòng)設(shè)備上怎么開(kāi)發(fā)愈加適配的頁(yè)面，需求咱們?nèi)パ杏憽?
Stay Hungry, Stay Foolish
水是越舀越多了，卻發(fā)現(xiàn)本來(lái)下面還深不見(jiàn)底，上面的內(nèi)容越是深入研討就越會(huì)發(fā)現(xiàn)更多山川需求翻越。堅(jiān)持饑餓狀態(tài)，用雙眼去盡力發(fā)現(xiàn)開(kāi)掘，不斷豐厚技能才干找到定位，打破瓶頸，正所謂“唯有建瓴高屋方可瓜熟蒂落”。形本錢(qián)文是因?yàn)橹昂屯性u(píng)論到瓶頸的疑問(wèn)，想給自個(gè)，給頁(yè)面前端的同學(xué)一同找找定位，整理一下思路。拿蘋(píng)果CEO在斯坦福演講的一句話“Stay Hungry, Stay Foolish”和咱們共勉。

本文標(biāo)題：如何設(shè)計(jì)出優(yōu)美良好結(jié)構(gòu)的網(wǎng)頁(yè)前端
網(wǎng)頁(yè)路徑：http://www.bm7419.com/news48/171498.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、手機(jī)網(wǎng)站建設(shè)、服務(wù)器托管、ChatGPT、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)