招商加盟網站高(gāo)效便捷的(de)生成

随著(zhe)技術的(de)發展，前端開發的(de)複雜(zá)度也(yě)越來(lái)越高(gāo)，傳統開發模式總是存在著(zhe)開發效率低，維護成本高(gāo)等的(de)弊端。一個(gè)小小的(de)改動或者一個(gè)小功能的(de)增加可(kě)能會引起整體邏輯的(de)修改，造成牽一發而動全身的(de)局面。針對(duì)此弊端，其實業界早就有了(le)一些探索，我們希望一個(gè)大(dà)且複雜(zá)的(de)場(chǎng)景能夠被分(fēn)解成幾個(gè)小的(de)部分(fēn)，這(zhè)些小的(de)部分(fēn)彼此之間互不幹擾，可(kě)以單獨開發，單獨維護，而且他(tā)們之間可(kě)以随意的(de)進行組合。如同pc一樣當某個(gè)部件出現問題時(shí)，不需要将整台主機都進行維修，隻需要将壞的(de)部件拿下(xià)來(lái)，維修之後再将其組合上就可(kě)以了(le)。這(zhè)種化(huà)繁爲簡的(de)思想在後端開發中的(de)體現是微服務，而在前端開發中的(de)體現就是組件化(huà)。前端組件化(huà)逐漸成爲前端開發的(de)迫切需求，當然這(zhè)一迫切需求也(yě)逐漸成爲一種主流，一種共識，它不僅提高(gāo)了(le)前端的(de)開發效率，同時(shí)也(yě)降低了(le)維護成本。開發者們不需要再面對(duì)一堆複雜(zá)且難閱讀的(de)代碼，轉而隻需要關注以組件方式存在的(de)代碼片段。

什(shén)麽是組件化(huà)開發

簡而言之，就如同樂(yuè)高(gāo)積木(mù)一樣。樂(yuè)高(gāo)，衆所周知，是全球第四大(dà)玩具制造商。樂(yuè)高(gāo)積木(mù)，由樂(yuè)高(gāo)集團生産的(de)塑料積木(mù)。一面有凸粒，另一面有可(kě)嵌入凸粒的(de)凹槽，形狀有1300多(duō)種，每一種形狀都有12種不同的(de)顔色，以紅、黃(huáng)、藍、白、黑(hēi)爲主。可(kě)以拼插出變化(huà)無窮的(de)造型，被稱爲“魔術塑料積木(mù)”。這(zhè)就是模塊化(huà)，隻要有足夠的(de)積木(mù)，幾乎可(kě)以搭建一切。基礎的(de)前端開發似乎與樂(yuè)高(gāo)積木(mù)類似，它本身是模塊化(huà)，重複的(de)使用(yòng)标準标簽相互組合、相互嵌套，幾乎可(kě)以使所有标準的(de)招商網頁設計稿100%還(hái)原，美(měi)中不足的(de)就是工作量一直都很大(dà)。

當你用(yòng)最基礎的(de)樂(yuè)高(gāo)積木(mù)搭建一節車廂，同伴搭建一個(gè)車頭，把兩者組合在一起就是一個(gè)小火車。按商量好的(de)大(dà)小、顔色來(lái)搭建更多(duō)的(de)車廂、車頭或者其它，便可(kě)以組成一個(gè)更大(dà)的(de)世界。如果把單個(gè)車頭和(hé)車廂稱爲一個(gè)組件，這(zhè)便是組件化(huà)，在招商網頁的(de)前端開發過程中重複使用(yòng)、相同、類似的(de)部分(fēn)都可(kě)以寫成組件，如頁頭、頁腳、彈窗(chuāng)、翻頁、輪播、選項卡、回到頂部等等。

對(duì)于單個(gè)無需經常修改的(de)靜态招商頁面，模塊化(huà)和(hé)組件化(huà)并沒有什(shén)麽區(qū)别。近日快(kuài)媒商城(chéng)和(hé)36599改版的(de)前端工作，開發過程中，部分(fēn)使用(yòng)了(le)組件化(huà)。對(duì)于這(zhè)樣的(de)中大(dà)型招商網站，組件可(kě)自由組合、單獨開發、單獨測試。其中，組件的(de)獨立性、完整性，在開發過程中給我們帶來(lái)了(le)更多(duō)的(de)便利。

爲什(shén)麽要使用(yòng)組件化(huà)開發

1、方便查找錯誤。開發招商網站過程中，多(duō)個(gè)頁面同樣使用(yòng)列表組件，單個(gè)頁面出現錯誤，如圖文出現混亂，但是其它頁面顯示正常，那麽基本能判斷問題所在，這(zhè)就大(dà)大(dà)加快(kuài)了(le)錯誤排查的(de)速度。或者頁面上出現問題，可(kě)以找出可(kě)能與每個(gè)有關的(de)組件，逐個(gè)删除，直到恢複正常。這(zhè)樣就能迅速鎖定錯誤發生的(de)位置。

2、便于修改。如果有這(zhè)樣一個(gè)需求，所有招商頁面中的(de)彈窗(chuāng)都要更改字體顔色和(hé)字号。對(duì)于前端開發來(lái)講，如果一個(gè)一個(gè)頁面去修改，一個(gè)上午的(de)時(shí)間可(kě)能都不夠用(yòng)。但彈窗(chuāng)要是作爲一個(gè)組件來(lái)開發，可(kě)能幾分(fēn)鐘(zhōng)的(de)時(shí)間就可(kě)以修改完畢并上線招商了(le)。

3、便于多(duō)人(rén)開發協作。開發協作，寫讓别人(rén)看得(de)懂(dǒng)的(de)代碼是基本要求，寫讓别人(rén)看得(de)懂(dǒng)的(de)代碼可(kě)以節省大(dà)家的(de)時(shí)間、精力。在開發過程中把多(duō)個(gè)頁面相同的(de)部分(fēn)組件化(huà)，同樣可(kě)以節省大(dà)家的(de)時(shí)間和(hé)精力。多(duō)人(rén)同時(shí)開發多(duō)個(gè)頁面都有翻頁組件，這(zhè)時(shí)隻需要一位同事開發完成，封裝成組件，讓其它同事調用(yòng)就可(kě)以了(le)。

4、減少冗餘代碼。如需要新增一個(gè)帶有翻頁的(de)招商頁面，之前可(kě)能已經寫過，如果新開發需要按照(zhào)設計圖一行行代碼寫出來(lái)，這(zhè)裏面包含了(le)HTML、CSS、JS，一樣的(de)代碼每個(gè)招商頁面都有一份，多(duō)個(gè)頁面寫了(le)3份、5份、10份..……服務器也(yě)需要存儲更多(duō)的(de)文件。顯然直接使用(yòng)之前的(de)代碼更加方便一些。組件可(kě)以共用(yòng)絕大(dà)部分(fēn)代碼，開發完成之後如遇到整體修改也(yě)更加方便。

5、優化(huà)性能。組件可(kě)獨立使用(yòng)，按需加載，不包含的(de)組件的(de)CSS、JS可(kě)以不用(yòng)加載。全部加載不僅占用(yòng)帶寬，還(hái)浪費了(le)緩存資源。雖然一兩個(gè)的(de)影(yǐng)響幾乎感受不到，但這(zhè)種情況一多(duō)，就會對(duì)用(yòng)戶體驗産生明(míng)顯的(de)影(yǐng)響。

組件化(huà)如何做(zuò)

1、從設計開始。一個(gè)招商網站，在設計前期就應确定設計指導方向，根據産品特點确定一套規範模闆，便于控制質量，提高(gāo)網頁設計效率。如網頁寬度、顔色、字體字号、頁面布局、網頁栅格、間距、留白、按鈕等等，除活動專題頁外，所有的(de)招商網頁都應按照(zhào)規範來(lái)設計。

2、提取産品中的(de)共用(yòng)部分(fēn)，設計成通(tōng)用(yòng)組件。如頁頭、頁腳、彈窗(chuāng)、翻頁、輪播、選項卡、回到頂部等等，都可(kě)以單獨設計成組件。多(duō)位設計師協作，遇到相同組件直接使用(yòng)，不用(yòng)再自行設計。不少軟件都有類似功能，如Sketch的(de)Symbol功能，可(kě)以方便的(de)使用(yòng)。

3、把每個(gè)組件當成完整的(de)産品。把每個(gè)産品當成一個(gè)獨立完整的(de)産品來(lái)設計開發，考慮到各種極端狀态下(xià)的(de)使用(yòng)，如超長(cháng)、超高(gāo)、空狀态、禁用(yòng)狀态、交互等，這(zhè)樣設計開發出來(lái)的(de)組件，适用(yòng)網頁中的(de)各種環境，也(yě)可(kě)以單獨進行開發、測試。

4、制定組件的(de)組合規範。基于組件化(huà)開發的(de)組件要以招商網頁形式展現，最終将不可(kě)避的(de)出現免組件相互組合，組件的(de)間距、顔色、邊框、投影(yǐng)等都需要有相應的(de)規範。

       組件化(huà)，基于獨立、完整、自由組合，可(kě)以爲我們帶來(lái)更多(duō)便利。當然，這(zhè)不一定是最有效的(de)解決方案。目前，前端開發解決的(de)都是重用(yòng)性與運行效率，而真正要解決的(de)問題是招商網頁的(de)開發效率與維護效率，所以，招商網頁前端開發組建還(hái)有很長(cháng)的(de)路要走。

文作者：文家齊

文章(zhāng)來(lái)源：來(lái)源：創業頭條（news.8588.cn）