IT技術互動交流平(ping)台

一分快3官网

作者(zhe)︰碧霄中游  發布日(ri)期︰2020-02-21 20:22:14

引言(yan)

提(ti)到前端song)芏噯ren)的映(ying)像(xiang)就是入(ru)門(men)簡單(dan),HTML、CSS加一起一個星期基本上就能大概上手,JS難一點(dian)但(dan)也能很快寫(xie)一些(xie)簡單(dan)的小效果,在(zai)網上隨便一搜(sou)索各種特(te)效代(dai)碼隨意(yi)用(yong),一個新手前端也能在(zai)很短的時(shi)間里寫(xie)出炫酷的頁面效果,然而入(ru)門(men)簡單(dan)並不意(yi)味著前端這碗飯很好吃,做(zuo)慣了切圖(tu)、布局、扣特(te)效的na)岸誦巒 ?zai)向前發展的路上越來越覺(jue)得吃力,而沒有任何編程思想和軟件開(kai)發基礎很多人(ren)對前端工程化、組件化、模塊化、MVC這些(xie)“高大上”的詞匯(hui)雲(yun)里霧里。
本文用(yong)最(zui)簡單(dan)的語言(yan)介紹一下我對工程化、組件化、模塊化的理解,面向的對象是前端新手,所(suo)以我用(yong)最(zui)好理解的方式去說,難免(mian)會(hui)有很多“幼稚(zhi)”的表述,請大神(shen)們輕噴。

本文重(zhong)點(dian)介紹思想不涉(she)及過多直接的技術,如(ru)果新手同學們理解了思想以後可以多多百度(du)、谷歌去學習具體的技術,我也會(hui)在(zai)後續的文章中做(zuo)一些(xie)介紹和大家一起學習。

前端工程化

還(huai)記得我在(zai)最(zui)早(zao)期寫(xie)前端代(dai)碼時(shi),往往一個頁面就是一個文件搞定,HTML/CSS/JS全(quan)部寫(xie)在(zai)一起,後來知道應該(gai)把結(jie)構(gou)、樣式和動作分(fen)離,我想這是我接觸(chu)到最(zui)早(zao)的na)岸斯?袒 乃枷肓耍 suo)謂前端工程化我認(ren)為就是

將前端項目當成一項系統工程進(jin)行分(fen)析、組織和構(gou)建從(cong)而達到jiao)金拷jie)構(gou)清晰、分(fen)工明確、團隊配合默契、開(kai)發效率提(ti)高的目的.

工程化是一種思想而不是某chi)旨際/strong>(當然為了實(shi)現工程化我們會(hui)用(yong)一些(xie)技術),這樣說還(huai)不huai)瘓嚀澹 俑隼zi)來說︰

要蓋一棟大樓,假如(ru)我們不進(jin)行工程化的考(kao)量那(na)就是一上來掂(dian)起瓦刀、磚塊就開(kai)干,直到把大樓壘起來,這樣做(zuo)往往意(yi)味著中間會(hui)出現錯誤,要推(tui)倒重(zhong)來或(huo)是蓋好以後結(jie)構(gou)有問題但(dan)又不知道出現在(zai)哪誰的責任甚至會(hui)在(zai)某一天(tian)轟(hong)然倒塌,那(na)我們如(ru)果用(yong)工程化的思想去做(zuo),就會(hui)先畫圖(tu)紙(zhi)、確定結(jie)構(gou)、確定用(yong)料和預算以及工期,另外需要用(yong)到什(shi)麼工種多少人(ren)等等,我們會(hui)先打(da)地(di)基再建框架再填充(chong)牆體這樣最(zui)後建立起來的高樓才是穩固的合規的,什(shi)麼地(di)方出了問題我們也能找到源頭和負責人(ren)。

前面我說接觸(chu)最(zui)早(zao)的工程化思維就是“結(jie)構(gou)、樣式和動作分(fen)離”,在(zai)只有若(ruo)干個頁面的小型項目我們只需要用(yong)這些(xie)簡單(dan)的做(zuo)法就能把項目很好的組織起來,但(dan)是在(zai)一個大型web項目中往往有更加復雜(za)的結(jie)構(gou)和非(fei)常多的頁面需要很多人(ren)甚至是多個團隊配合才能把項目做(zuo)完,我們需要有更加嚴謹(jin)和復雜(za)的工程化思維去組織結(jie)構(gou)。從(cong)更高層面的項目組織來看我們要做(zuo)項目的各種規範、技術選型、項目構(gou)建優化等等,在(zai)代(dai)碼層面我們還(huai)需要用(yong)到JS/CSS模塊機、UI組件化等開(kai)發方式。

再用(yong)一句通俗的話來概括前端工程化︰前端工程化就是用(yong)做(zuo)工程的思維看待和開(kai)發自己的項目,而不再是直接擼起袖子(zi)一個頁面一個頁面開(kai)寫(xie)

前端模塊化

前面我們提(ti)到在(zai)組織代(dai)碼的時(shi)候會(hui)用(yong)到模塊化和組件化,大家應該(gai)理解到,前端工程化是一個高層次的思想,而模塊化和組件化是為工程化思想下相對較(jiao)具體的開(kai)發方式,因(yin)此可以簡單(dan)的認(ren)為模塊化和組件化是工程化的表現形式。

那(na)具體什(shi)麼是模塊化呢,還(huai)是舉簡單(dan)的例子(zi),我們要寫(xie)一個實(shi)現A功能的JS代(dai)碼,這個功能在(zai)項目其(qi)他(ta)位置也需要用(yong)到,那(na)麼我們就可以把這個功能看成一個模塊采用(yong)一定的方式進(jin)行模塊化編寫(xie),既能實(shi)現復cong)沒huai)可以分(fen)而治之,同理在(zai)寫(xie)樣式的時(shi)候,如(ru)果我們需要某chi)痔te)殊的樣式,會(hui)在(zai)很多地(di)方應用(yong),那(na)麼我們也可以采用(yong)一定的方式進(jin)行CSS的模塊化,具體說來,JS模塊化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模塊化開(kai)發大多是在(zai)less、sass、stylus等預處(chu)理器的import/mixin特(te)性支持(chi)下實(shi)現的,具體技術大家自行學習。

總體而言(yan),模塊化不難理解,重(zhong)點(dian)是要學習相關的技術並且靈(ling)活運用(yong)。

前端組件化

前文中我們提(ti)到過,組件化也是工程化的表現形式,那(na)麼到底什(shi)麼是前端組件化呢

頁面上的每個獨立的、可視/可交互區(qu)域視為一個組件;
每個組件對za)σ桓齬?棠柯跡 榧suo)需的各種資源都(du)在(zai)這個目錄下就近維護;
由(you)于組件具有獨立性,因(yin)此組件與組件之間可以 自za)勺楹希br />頁面只不huai)親榧娜 鰨 涸 楹獻榧緯曬δ芡暾zheng)的界(jie)面;
當不需要某個組件,或(huo)者(zhe)想要替(ti)換組件時(shi),可以整(zheng)個目錄刪除/替(ti)換。

組件化將頁面視為一個容器,頁面上各個獨立部分(fen)例如(ru)︰頭部、導航、焦點(dian)圖(tu)、側邊欄、底部等視為獨立組件,不同的頁面根(gen)據內容的需要,去盛放相關組件即可組成完整(zheng)的頁面。

PS︰模塊化和組件化一個最(zui)直接的好處(chu)就是復cong)茫  shi)我們也應該(gai)有一個理念,模塊化和組件化除了復cong)彌 食huai)有就是分(fen)治,我們能夠在(zai)不影響其(qi)他(ta)代(dai)碼的na)qing)況(kuang)下按需修(xiu)改某一獨立的模塊或(huo)是組件,因(yin)此很多地(di)方我們及時(shi)沒有很強(qiang)烈(lie)的復cong)眯枰 部梢願gen)據分(fen)治需求進(jin)行模塊化或(huo)組件化開(kai)發。

Tag標(biao)簽︰前端  
  • 一分快3官网

About IT165 - 廣告服務 - 隱(yin)私聲明 - 版權申(shen)明 - 免(mian)責條款 - 網站地(di)圖(tu) - 網友投稿 - 聯系方式
本站內容來自za)諢? 僅供用(yong)于網絡技術學習,學習中請遵循相關法律法規
一分快3官网 | 下一页