做前端技術方案選型的時候,你是怎麼做決策的?

2022-09-02 12:45:09 字數 2240 閱讀 4336

最近在知乎上看到的乙個提問做前端技術方案選型的時候,你是怎麼做決策的?想起一年來自己所做的專案,全都是乙個人在做選型,能力也在一步步中培養起來。

最重要的是看專案需求,決定前端技術方案選型

大大小小的專案做過很多,就拿一些做過的專案來舉例吧

剛剛去公司那會,接手**的時候,後台是用wordpress搭建的,php語言支援,網頁部分用的是jquery+bootstrap,只能在wordpress後台進行管理,修改部分前端**,不是很方面。遇到pc端的**,一般都是套用模板

這兩個**上的資源較多。

這個模板既適用移動端又適用於pc端**,就是一套官網,適應多個終端

這個時候,前端技術方案選型,我就想到要使用響應式布局

響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗,而且隨著目前大螢幕移動裝置的普及,用「大勢所趨」來形容也不為過。隨著越來越多的設計師採用這個技術,我們不僅看到很多的創新,還看到了一些成形的模式。

這套框架是用amazeui框架寫的,amaze 妹子 ui 中國首個開源 html5 跨屏前端框架

3:後台管理系統bootstrap admin+jquery+layui

公司的主要業務在於做一套後台管理系統,通過使用者的操作,但是是基於上乙個專案所開發的**繼續寫,要求扁平化,看上去風格偏向於年輕化,adminlte和bootstrap admin 模板都很適應,本來想著更換一套模板,重新寫,將之前的專案棄之不用,但又覺得太浪費時間,為何不理理清楚之前的專案**,雖然有些模組雜亂且多餘沒有條理,改起來別人的專案真的很頭疼....

關於layui,有兩句話想說

一開始不打算用這個框架的,但是隨著業務的增多,我們知道在bootstrap裡面,bootstrap 模態框(modal)外掛程式,模態框(modal)是覆蓋在父窗體上的子窗體。通常,目的是顯示來自乙個單獨的源的內容,可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊、互動等。

在具體專案要求中,新增乙個彈窗,彈窗裡面資訊過多,寫在乙個jsp頁面裡面顯然太過於雜亂,若是這個彈窗裡面載入地圖的一些資訊,會出現莫名其妙沒有辦法解決的bug,無奈之下,只好引入layer框架

layui 是一款採用自身模組規範編寫的情懷型前端ui框架,遵循原生html/css/js的書寫與組織形式,門檻極低,拿來即用。

技術選型,移動端最常用的四個框架對比之後

移動端最常用的四個框架 - csdn部落格​blog.csdn.net

圖示

5:小程式開發

17年年底,小程式突然火起來了,公司要求開發一款自己的小程式,於是研究了乙個星期,花了乙個星期的時間開發,由於專案只有十個左右的簡單介面,沒有使用框架

想要開發出一套高質量的小程式,運用框架,元件庫是省時省力省心必不可少一部分,隨著小程式日漸火爆,各種不同型別的小程式也漸漸更新,其中不乏一些優秀好用的框架/元件庫。

圖示

6:下乙個移動端專案,技術選型vue.js + vue-router +webpack

一直在學習vue,但是一直不敢使用在公司專案裡面,怕會踩到坑導致進度變慢,不做沒有把握的事情,隨著業餘時間對這個技術的練習,發現真的是好處多多

優點:

1\. 簡單:官方文件很清晰,比 angular 簡單易學。

2\. 快速:非同步批處理方式更新 dom。

3\. 組合:用解耦的、可復用的元件組合你的應用程式。

4\. 緊湊:~18kb min+gzip,且無依賴。

5\. 強大:表示式 & 無需宣告依賴的可推導屬性 (computed properties)。

6\. 對模組友好:可以通過 npm、bower 或 duo 安裝,不強迫你所有的**都遵循 angular 的各種規定,使用場景更加靈活。

總結:vue 綜合了angualr和react的優點,是國人寫的框架,易上手,輕量級,受到廣泛的應用。(逃...)

前端的框架和知識點,很多,也很雜亂,在這些知識點中,選出最接近自己專案需求的技術棧,才是最重要的

移動端適配是怎麼做的?

一 使用 meta viewport 在head標籤內部加入以下 改 的作用是讓當前viewport的寬度等於裝置的寬度,同時不允許使用者手動縮放 width device width 讓當前viewport的寬度等於裝置的寬度 user scalable no 禁止使用者縮放 initial sc...

移動端是怎麼做適配的?

移動端 所謂移動端,就是指移動裝置的頁面,與之相對的稱為桌面端頁面,也稱為pc端頁面 適配 適配是一種自適應方案,用來解決由於終端眾多導致的頁面尺寸問題 1 用meta標籤 在head標籤中新增meta標籤,如下 該mate標籤的屬性內容解釋如下 name viewport 命名該meta標籤 wi...

移動端是怎麼做適配的?

width device width 讓當前視口寬度等於裝置的寬度 user scalable no 禁止使用者縮放 initial scale 1.0 設定頁面的初始縮放值為1.0 maximum scale 1.0 允許使用者的最大縮放值為1.0 minimum scale 1.0 允許使用者的...