什么是前端工程化淡溯、模塊化譬重、組件化

引言
提到前端往往很多人的映像就是入門簡單,HTML拒逮、CSS加一起一個星期基本上就能大概上手,JS難一點但也能很快寫一些簡單的小效果,在網上隨便一搜索各種特效代碼隨意用,一個新手前端也能在很短的時間里寫出炫酷的頁面效果,然而入門簡單并不意味著前端這碗飯很好吃,做慣了切圖、布局臀规、扣特效的前端新同學在向前發(fā)展的路上越來越覺得吃力,而沒有任何編程思想和軟件開發(fā)基礎很多人對前端工程化滩援、組件化、模塊化塔嬉、MVC這些“高大上”的詞匯云里霧里玩徊。
本文用最簡單的語言介紹一下我對工程化、組件化谨究、模塊化的理解,面向的對象是前端新手,所以我用最好理解的方式去說,難免會有很多“幼稚”的表述,請大神們輕噴恩袱。

本文重點介紹思想不涉及過多直接的技術,如果新手同學們理解了思想以后可以多多百度、谷歌去學習具體的技術胶哲。

前端工程化
還記得我在最早期寫前端代碼時,往往一個頁面就是一個文件搞定,HTML/CSS/JS全部寫在一起,后來知道應該把結構憎蛤、樣式和動作分離,我想這是我接觸到最早的前端工程化的思想了,所謂前端工程化我認為就是

將前端項目當成一項系統(tǒng)工程進行分析、組織和構建從而達到項目結構清晰、分工明確俩檬、團隊配合默契萎胰、開發(fā)效率提高的目的.

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

要蓋一棟大樓,假如我們不進行工程化的考量那就是一上來掂起瓦刀、磚塊就開干,直到把大樓壘起來,這樣做往往意味著中間會出現錯誤,要推倒重來或是蓋好以后結構有問題但又不知道出現在哪誰的責任甚至會在某一天轟然倒塌,那我們如果用工程化的思想去做,就會先畫圖紙棚辽、確定結構技竟、確定用料和預算以及工期,另外需要用到什么工種多少人等等,我們會先打地基再建框架再填充墻體這樣最后建立起來的高樓才是穩(wěn)固的合規(guī)的,什么地方出了問題我們也能找到源頭和負責人。

前面我說接觸最早的工程化思維就是“結構屈藐、樣式和動作分離”,在只有若干個頁面的小型項目我們只需要用這些簡單的做法就能把項目很好的組織起來,但是在一個大型web項目中往往有更加復雜的結構和非常多的頁面需要很多人甚至是多個團隊配合才能把項目做完,我們需要有更加嚴謹和復雜的工程化思維去組織結構榔组。從更高層面的項目組織來看我們要做項目的各種規(guī)范、技術選型联逻、項目構建優(yōu)化等等,在代碼層面我們還需要用到JS/CSS模塊機搓扯、UI組件化等開發(fā)方式。

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

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

那具體什么是模塊化呢,還是舉簡單的例子,我們要寫一個實現A功能的JS代碼,這個功能在項目其他位置也需要用到,那么我們就可以把這個功能看成一個模塊采用一定的方式進行模塊化編寫,既能實現復用還可以分而治之,同理在寫樣式的時候,如果我們需要某種特殊的樣式,會在很多地方應用,那么我們也可以采用一定的方式進行CSS的模塊化,具體說來,JS模塊化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模塊化開發(fā)大多是在less锨推、sass、stylus等預處理器的import/mixin特性支持下實現的,具體技術大家自行學習公壤。

總體而言,模塊化不難理解,重點是要學習相關的技術并且靈活運用换可。

前端組件化
前文中我們提到過,組件化也是工程化的表現形式,那么到底什么是前端組件化呢

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

組件化將頁面視為一個容器,頁面上各個獨立部分例如:頭部沾鳄、導航、焦點圖确憨、側邊欄译荞、底部等視為獨立組件,不同的頁面根據內容的需要,去盛放相關組件即可組成完整的頁面。

PS:模塊化和組件化一個最直接的好處就是復用,同時我們也應該有一個理念,模塊化和組件化除了復用之外還有就是分治,我們能夠在不影響其他代碼的情況下按需修改某一獨立的模塊或是組件,因此很多地方我們及時沒有很強烈的復用需要也可以根據分治需求進行模塊化或組件化開發(fā)休弃。

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末吞歼,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子玫芦,更是在濱河造成了極大的恐慌,老刑警劉巖本辐,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桥帆,死亡現場離奇詭異,居然都是意外死亡慎皱,警方通過查閱死者的電腦和手機老虫,發(fā)現死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來茫多,“玉大人祈匙,你說我怎么就攤上這事。” “怎么了夺欲?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵跪帝,是天一觀的道長。 經常有香客問我些阅,道長伞剑,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任市埋,我火速辦了婚禮黎泣,結果婚禮上,老公的妹妹穿的比我還像新娘缤谎。我一直安慰自己抒倚,他們只是感情好,可當我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布坷澡。 她就那樣靜靜地躺著托呕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪洋访。 梳的紋絲不亂的頭發(fā)上镣陕,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天,我揣著相機與錄音姻政,去河邊找鬼呆抑。 笑死,一個胖子當著我的面吹牛汁展,可吹牛的內容都是我干的鹊碍。 我是一名探鬼主播,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼食绿,長吁一口氣:“原來是場噩夢啊……” “哼侈咕!你這毒婦竟也來了?” 一聲冷哼從身側響起器紧,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤耀销,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后铲汪,有當地人在樹林里發(fā)現了一具尸體熊尉,經...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年掌腰,在試婚紗的時候發(fā)現自己被綠了狰住。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡齿梁,死狀恐怖催植,靈堂內的尸體忽然破棺而出肮蛹,到底是詐尸還是另有隱情,我是刑警寧澤创南,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布伦忠,位于F島的核電站,受9級特大地震影響扰藕,放射性物質發(fā)生泄漏缓苛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一邓深、第九天 我趴在偏房一處隱蔽的房頂上張望未桥。 院中可真熱鬧,春花似錦芥备、人聲如沸冬耿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽亦镶。三九已至,卻和暖如春袱瓮,著一層夾襖步出監(jiān)牢的瞬間缤骨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工尺借, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留绊起,地道東北人。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓燎斩,卻偏偏與公主長得像虱歪,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子栅表,可洞房花燭夜當晚...
    茶點故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內容

  • 用兩張圖告訴你笋鄙,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 12,723評論 2 59
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,116評論 25 707
  • 人怪瓶,總是應該往前走萧落,哪怕現在你只能看見痛苦與無望,但最終總是能夠得到足以感動自己的溫暖
    維W閱讀 173評論 0 0
  • ListView或者GridView中我們常常用到了BaseAdapter洗贰,下面一個例子來說明BaseAdapte...
    eirunye閱讀 424評論 0 2