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

手机快三官网

作者︰碧霄(xiao)中游  發布日(ri)期︰2020-03-31 09:38:14

引言

提到前端(duan)往往很多(duo)人的映像(xiang)就是入門簡單(dan),HTML、CSS加(jia)一起一個星期基本上就能大概上手,JS難一點但也能很快寫(xie)一些簡單(dan)的小(xiao)效果,在網上隨便一搜(sou)索各種特效代碼隨意用,一個新手前端(duan)也能在很短的時(shi)間里寫(xie)出炫酷的頁(ye)面效果,然而入門簡單(dan)並不(bu)意味著前端(duan)這碗飯(fan)很好吃,做慣(guan)了切圖、布局、扣特效的前端(duan)新同學在向前發展的路上越來越覺得(de)吃力,而沒(mei)有任(ren)何編程思想和軟件開發基礎很多(duo)人對前端(duan)工程化(hua)、組件化(hua)、模(mo)塊(kuai)化(hua)、MVC這些“高大上”的詞匯雲里霧里。
本文用最簡單(dan)的語言介紹一下我對工程化(hua)、組件化(hua)、模(mo)塊(kuai)化(hua)的理(li)解,面向的對象是前端(duan)新手,所以我用最好理(li)解的方式去(qu)說,難免會有很多(duo)“幼稚”的表述,請大神們輕(qing)噴。

本文重(zhong)點介紹思想不(bu)涉及過多(duo)直接的技術,如(ru)果新手同學們理(li)解了思想以後可以多(duo)多(duo)百度、谷歌去(qu)學習具體的技術,我也bu)嵩諍笮奈惱輪凶 恍┘檣芎痛蠹乙黃鷓 啊/p>

前端(duan)工程化(hua)

還記得(de)我在最早期寫(xie)前端(duan)代碼時(shi),往往一個頁(ye)面就是一個文件搞定,HTML/CSS/JS全(quan)部(bu)寫(xie)在一起,後來知道應該把結構(gou)、樣式和tou) 鞣擲耄 蟻胝饈俏醫喲chu)到最早的前端(duan)工程化(hua)的思想了,所謂前端(duan)工程化(hua)我認為就是

將前端(duan)項目當成(cheng)一項系統工程進行分析、組織(zhi)和構(gou)建(jian)從而達到項目結構(gou)清晰(xi)、分工明(ming)確、團(tuan)隊you) 夏 qi)、開發效率提高的na)康

工程化(hua)是一種思想而不(bu)是某種技術(當然為了實現工程化(hua)我們會用一些技術),這樣說還不(bu)夠具體,舉個例子來說︰

要(yao)蓋一棟(dong)an)舐? jia)如(ru)我們不(bu)進行工程化(hua)的考量那就是一上來掂(dian)起瓦刀、磚(zhuan)塊(kuai)就開干(gan),直到把大樓壘起來,這樣做往往意味著中間會出現錯誤,要(yao)推(tui)倒重(zhong)來或是蓋好以後結構(gou)有xing)侍獾 植bu)知道出現在哪(na)誰的責任(ren)甚至會在某一天轟然倒塌(ta),那我們如(ru)果用工程化(hua)的思想去(qu)做,就會先畫圖紙、確定結構(gou)、確定用料(liao)和預(yu)算(suan)以及工期,另外(wai)需要(yao)用到什麼工種多(duo)少人等等,我們會先打地基再(zai)建(jian)框架(jia)再(zai)填(tian)充(chong)牆jiao)逭庋詈蠼jian)立起來的高樓才是穩固的合規的mo) 裁吹胤匠雋宋侍 頤且材 業皆賜泛透涸鶉恕/p>

前面我說接觸(chu)最早的工程化(hua)思維就是“結構(gou)、樣式和tou) 鞣擲rdquo;,在只有若干(gan)個頁(ye)面的小(xiao)型項目我們只需要(yao)用這些簡單(dan)的做法就能把yan)金亢芎玫淖櫓zhi)起來,但是在一個大型web項目中往往有更加(jia)復雜的結構(gou)和非常多(duo)的頁(ye)面需要(yao)很多(duo)人甚至是多(duo)個團(tuan)隊you) 喜拍馨嚴(yan)金孔 輳 頤切枰yao)有更加(jia)嚴(yan)謹(jin)和復雜的工程化(hua)思維去(qu)組織(zhi)結構(gou)。從更高層(ceng)面的項目組織(zhi)來看我們要(yao)做項目的各種規範、技術選型、項目構(gou)建(jian)優(you)化(hua)等等,在代碼層(ceng)面我們還需要(yao)用到JS/CSS模(mo)塊(kuai)機、UI組件化(hua)等開發方式。

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

前端(duan)模(mo)塊(kuai)化(hua)

前面我們提到在組織(zhi)代碼的時(shi)候(hou)會用到模(mo)塊(kuai)化(hua)和組件化(hua),大家應該理(li)解到,前端(duan)工程化(hua)是一個高層(ceng)次的思想,而模(mo)塊(kuai)化(hua)和組件化(hua)是為工程化(hua)思想下相對較具體的開發方式,因此可以簡單(dan)的認為模(mo)塊(kuai)化(hua)和組件化(hua)是工程化(hua)的表現形(xing)式。

那具體什麼是模(mo)塊(kuai)化(hua)呢,還是舉簡單(dan)的例子,我們要(yao)寫(xie)一個實現A功能的JS代碼,這個功能在項目其他位置也需要(yao)用到,那麼我們就可以yuan)顏飧齬δ芸闖cheng)一個模(mo)塊(kuai)采用一定的方式進行模(mo)塊(kuai)化(hua)編寫(xie),既能實現復用mei)箍梢苑佷沃   li)在寫(xie)樣式的時(shi)候(hou),如(ru)果我們需要(yao)某種特殊的樣式,會在很多(duo)地方應用,那麼我們也bu)梢圓捎靡歡 姆絞澆SS的na)mo)塊(kuai)化(hua),具體說來,JS模(mo)塊(kuai)化(hua)方案很多(duo)有AMD/CommonJS/UMD/ES6 Module等,CSS模(mo)塊(kuai)化(hua)開發大多(duo)是在less、sass、stylus等預(yu)處理(li)器的import/mixin特性支(zhi)持下實現的mo) 嚀寮際醮蠹易孕醒 啊/p>

總體而言,模(mo)塊(kuai)化(hua)不(bu)難理(li)解,重(zhong)點是要(yao)學習相關的技術並且靈活運(yun)用。

前端(duan)組件化(hua)

前文中xing)頤翹岬焦 榧hua)也是工程化(hua)的表現形(xing)式,那麼到底什麼是前端(duan)組件化(hua)呢

頁(ye)面上的每個獨(du)立的、可視/可交互區域視為一個組件;
每個組件對應一個工程目錄,組件所需的各種資源都在這個目錄下就近維護(hu);
由(you)于組件具有獨(du)立性,因此組件與組件之間可以 自由(you)組合;
頁(ye)面只不(bu)過是組件的容(rong)器,負責組合組件形(xing)成(cheng)功能完整(zheng)的界面;
當不(bu)需要(yao)某個組件,或者想要(yao)替換組件時(shi),可以整(zheng)個目錄刪除/替換。

組件化(hua)將頁(ye)面視為一個容(rong)器,頁(ye)面上各個獨(du)立部(bu)分例如(ru)︰頭部(bu)、導ji)健 溝閫肌 啾呃浮 撞bu)等視為獨(du)立組件,不(bu)同的頁(ye)面根(gen)據內容(rong)的需要(yao),去(qu)盛(sheng)放相關組件即可組成(cheng)shang)暾zheng)的頁(ye)面。

PS︰模(mo)塊(kuai)化(hua)和組件化(hua)一個最直接的好處就是復用,同時(shi)我們也應該有一個理(li)念,模(mo)塊(kuai)化(hua)和組件化(hua)除了復用之外(wai)還有就是分治,我們能夠在不(bu)影響其他代碼的情況下按(an)需修(xiu)改(gai)某一獨(du)立的na)mo)塊(kuai)或是組件,因此很多(duo)地方我們及時(shi)沒(mei)有很強烈的復用需要(yao)也bu)梢願gen)據分治需求進行模(mo)塊(kuai)化(hua)或組件化(hua)開發。

Tag標(biao)簽︰前端(duan)  
  • 手机快三官网

About IT165 - 廣告服務 - 隱私聲明(ming) - 版(ban)權申明(ming) - 免責條款 - 網站地圖 - 網友投(tou)稿 - 聯系方式
本站內容(rong)來自于互聯網,僅(jin)供用于網絡技術學習,學習中請遵循(xun)相關法律(lv)法規
手机快三官网 | 下一页