最近在知乎上看到的一個提問做前端技術(shù)方案選型的時候,你是怎么做決策的究飞?想起一年來自己所做的項目置谦,全都是一個人在做選型堂鲤,能力也在一步步中培養(yǎng)起來。
最重要的是看項目需求媒峡,決定前端技術(shù)方案選型
大大小小的項目做過很多瘟栖,就拿一些做過的項目來舉例吧
1:pc端網(wǎng)站
剛剛?cè)ス灸菚邮志W(wǎng)站的時候谅阿,后臺是用wordpress搭建的半哟,php語言支持,網(wǎng)頁部分用的是jQuery+bootstrap签餐,只能在wordpress后臺進(jìn)行管理寓涨,修改部分前端代碼,不是很方面氯檐。遇到pc端的網(wǎng)站戒良,一般都是套用模板
模板之家:網(wǎng)頁模板,網(wǎng)站模板,DIV+CSS模板,企業(yè)網(wǎng)站模板下載-模板之家
源碼之家:源碼之家 - 提供最新免費網(wǎng)站源碼下載!
這兩個網(wǎng)站上的資源較多冠摄。
2:當(dāng)網(wǎng)站被黑
由于后臺管理的疏忽和缺乏糯崎,導(dǎo)致公司官網(wǎng)被黑,總監(jiān)開了緊急會議河泳,既然沒有懂php的人才(之前的項目是找外包做的)沃呢,宕機過程中客戶來源也在不斷的流失,三天之內(nèi)乔询,找一個網(wǎng)站模板先代替使用
這個模板既適用移動端又適用于pc端網(wǎng)站樟插,就是一套官網(wǎng),適應(yīng)多個終端
這個時候竿刁,前端技術(shù)方案選型黄锤,我就想到要使用響應(yīng)式布局
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗,而且隨著目前大屏幕移動設(shè)備的普及食拜,用“大勢所趨”來形容也不為過鸵熟。隨著越來越多的設(shè)計師采用這個技術(shù),我們不僅看到很多的創(chuàng)新负甸,還看到了一些成形的模式流强。
在源碼之家源碼之家 - 提供最新免費網(wǎng)站源碼下載!找到了一套公司企業(yè)官網(wǎng)呻待,響應(yīng)式布局打月,分別在手機上測試了一下,適配性做的很好蚕捉,拋開移動端的加載性能在網(wǎng)絡(luò)比較卡的時候跳轉(zhuǎn)頁面稍微慢一點之外奏篙,其他的都符合需求。
這套框架是用amazeui框架寫的,Amaze 妹子 UI 中國首個開源 HTML5 跨屏前端框架
3:后臺管理系統(tǒng)bootstrap admin+jquery+layui
公司的主要業(yè)務(wù)在于做一套后臺管理系統(tǒng)秘通,通過用戶的操作为严,但是是基于上一個項目所開發(fā)的代碼繼續(xù)寫,要求扁平化肺稀,看上去風(fēng)格偏向于年輕化第股,AdminLTE和bootstrap admin 模板都很適應(yīng),本來想著更換一套模板话原,重新寫夕吻,將之前的項目棄之不用,但又覺得太浪費時間稿静,為何不理理清楚之前的項目代碼梭冠,雖然有些模塊雜亂且多余沒有條理,改起來別人的項目真的很頭疼....
關(guān)于layui改备,有兩句話想說
一開始不打算用這個框架的控漠,但是隨著業(yè)務(wù)的增多,我們知道在bootstrap里面悬钳,Bootstrap 模態(tài)框(Modal)插件盐捷,模態(tài)框(Modal)是覆蓋在父窗體上的子窗體。通常默勾,目的是顯示來自一個單獨的源的內(nèi)容碉渡,可以在不離開父窗體的情況下有一些互動。子窗體可提供信息母剥、交互等滞诺。
在具體項目要求中,新增一個彈窗环疼,彈窗里面信息過多习霹,寫在一個jsp頁面里面顯然太過于雜亂,若是這個彈窗里面加載地圖的一些信息炫隶,會出現(xiàn)莫名其妙沒有辦法解決的bug淋叶,無奈之下,只好引入Layer框架
Layui 是一款采用自身模塊規(guī)范編寫的情懷型前端UI框架,遵循原生HTML/CSS/JS的書寫與組織形式,門檻極低,拿來即用伪阶。
https://www.layui.com/
4:微信公眾號的開發(fā)weUI
之前沒有接觸過移動端的開發(fā)煞檩,尤其是微信公眾號,特此拿出來比較了一下栅贴,還寫了一篇文章斟湃,最終為了求穩(wěn),選擇了weUI
技術(shù)選型檐薯,移動端最常用的四個框架對比之后
移動端最常用的四個框架 - CSDN博客?blog.csdn.net
5:小程序開發(fā)
17年年底桐早,小程序突然火起來了,公司要求開發(fā)一款自己的小程序,于是研究了一個星期哄酝,花了一個星期的時間開發(fā),由于項目只有十個左右的簡單界面祷膳,沒有使用框架
在此之前陶衅,也分析了一下小程序的開發(fā)選型,微信小程序常見的UI框架/組件庫總結(jié)
想要開發(fā)出一套高質(zhì)量的小程序直晨,運用框架搀军,組件庫是省時省力省心必不可少一部分,隨著小程序日漸火爆勇皇,各種不同類型的小程序也漸漸更新罩句,其中不乏一些優(yōu)秀好用的框架/組件庫。
微信小程序常見的UI框架/組件庫總結(jié)?www.reibang.com
6:下一個移動端項目敛摘,技術(shù)選型Vue.js + vue-router +webpack
一直在學(xué)習(xí)vue门烂,但是一直不敢使用在公司項目里面,怕會踩到坑導(dǎo)致進(jìn)度變慢兄淫,不做沒有把握的事情屯远,隨著業(yè)余時間對這個技術(shù)的練習(xí),發(fā)現(xiàn)真的是好處多多
優(yōu)點:
1\. 簡單:官方文檔很清晰捕虽,比 Angular 簡單易學(xué)慨丐。
2\. 快速:異步批處理方式更新 DOM。
3\. 組合:用解耦的泄私、可復(fù)用的組件組合你的應(yīng)用程序房揭。
4\. 緊湊:~18kb min+gzip,且無依賴晌端。
5\. 強大:表達(dá)式 & 無需聲明依賴的可推導(dǎo)屬性 (computed properties)捅暴。
6\. 對模塊友好:可以通過 NPM、Bower 或 Duo 安裝斩松,不強迫你所有的代碼都遵循 Angular 的各種規(guī)定伶唯,使用場景更加靈活。
總結(jié):vue 綜合了angualr和react的優(yōu)點惧盹,是國人寫的框架乳幸,易上手,輕量級钧椰,受到廣泛的應(yīng)用粹断。(逃...)
前端的框架和知識點,很多嫡霞,也很雜亂瓶埋,在這些知識點中,選出最接近自己項目需求的技術(shù)棧,才是最重要的