1. 程式人生 > 其它 >我的 web 前端開發技術選擇

我的 web 前端開發技術選擇

簡單介紹一下,我的 web 前端開發技術選擇。我更偏向於使用 jQuery 及其外掛、CSS3、HTML5。

先來一個表格,以下是我常用的 web 前端開發技術:

我常用的 web 前端開發技術
技術分類 web 前端技術 備註
CSS 網頁佈局 Zurb Foundation 移動優先的網格系統, 同一頁面適用於 PC 電腦, 平板, 手機
Javascript 元件 jQuery 提高 Javascript 的瀏覽器相容性,方便處理 DOM 操作、事件響應、動畫、Ajax HTTP 互動。
Javascript 元件 jQueryUI 常用 HTML 元件美化,tab、日期選擇、對話方塊、進度條、錄入自動完成、選單、標籤(tab)、提示(Tooltip)等,提供多套外觀面板可切換。
Javascript 元件 jqGrid 美化的網頁版資料表格,包括橫向滾動條、縱向滾動條、翻頁等功能,可與後端程式進行資料互動。
CSS 下拉選單 CSS3 Dropdown Menu 純 CSS3 下拉選單,未使用 Javascript, 美觀,瀏覽器相容性強。僅適用於 PC電腦。
CSS 下拉選單 CSS Responsive Menu Generator 響應式選單,可用於PC電腦、平板電腦、移動手機。

不使用 mvvm 之類的前端元件,是因為我覺得沒有必要。

mvvm 常見的宣傳,對我來說沒什麼吸引力,反而增加了技術的複雜度。

一、Javascript 操作 DOM 慢。我不覺得慢。

二、Javascript 操作 DOM 複雜。我用了 jQuery 之後,不覺得複雜。

三、mwwm 程式碼更簡潔。我覺得 jQuery 極其外掛(plugin)的程式碼更簡潔、功能更多。

四、mwwm 可以實現程式碼邏輯分層。我覺得用 Apache Velocity(或 C# 的 NVelocity) 更容易實現程式碼的前後端分層。

五、可測試性。我覺得如果只使用 jQuery 、不使用 mvvm 的程式碼,也能進行單元測試。

谷歌(Google) 公司開發了一款瀏覽器,名叫 Chrome, 宣稱"世界上最快的瀏覽器"; 谷歌(Google) 另一個團隊說,因為瀏覽器慢、所以我們開發了一個叫 Angular 的 Javascript MVVM 元件/框架。

這是怎麼回事?谷歌(Google)公司你們內部兩個團隊打一架吧,然後再對外統一口徑:Chrome 瀏覽器到底是快還是慢。

或者,把 Angular 的技術,融入到 Chrome 瀏覽器內部,那樣不是更好嗎?

用標準 javascript 的原因,在於5年前、10年前使用標準 javascript/ jQuery 自己寫的程式碼,現在還能用。而幾年前的 MVVM 程式碼(Angular/React/Vue等),現在是否還能用,很難說。mvvm 元件的升級,往往會不相容舊版本。這是一個大問題。

當然了,jQuery 版本升級時,也有一些不相容舊版本程式碼。但與 MVVM 元件/框架的向前相容性(相容舊版本)相比,jQuery 的新舊版本相容性要好很多。

CSS3 Dropdown Menu 截圖:


jQueryUI,日期選擇截圖,有中文、英文多種語言,可配置多種日期格式:



jqGrid,資料表格,有中文、英文多種語言,支援 xml/json 作為前後端資料傳輸:



CSS Responsive Menu Generator 截圖,同一個web頁面的選單,分別在電腦版、移動手機版的展現示例:

a. CSS 選單官網的原版下拉選單,PC 電腦截圖:



b. 上海折桂軟體有限公司的網站,折桂列印平臺軟體系統,PC 電腦截圖::



c. CSS 選單下拉選單,Android 手機截圖,未點開之前的狀態:



d. CSS 選單官網的原版下拉選單,Android 手機截圖,點開之後的狀態:



e. 上海折桂軟體有限公司的網站,折桂列印平臺軟體系統,Android 手機截圖,點開之後的狀態:



歡迎轉載,轉載請註明出處:傑克倫敦塵 - 部落格園 (cnblogs.com)https://www.zheguisoft.com/staff_blogs/jacklondon_chen/2022