webapp專案前端總結

2022-01-29 05:35:24 字數 2185 閱讀 5626

我負責前端頁面和邏輯,node是另乙個同事負責,前端架構由前端組長負責。

前端框架選型是開發前很重要的準備:

1. ui框架: 考慮過uikit、amazeui、bootstrap,最終選擇bootstrap+自定義樣式,主要原因公司其他專案也用的bootstrap。對我來說這三個框架我之前都沒用過,作為乙個一年經驗的前端很可笑吧,其實我覺得也沒啥,馬上學便是。

1. js庫: 考慮過jquery和zepto,最終選擇jquery

1. 前端工具: gulp,browserify,bower,less

1. node用的express,node那個同事熟悉

1. 前端模板用的swig

1. greensock動畫庫

經過乙個星期的前期準備和調研,前端基本的架子搭起來了,gulp、bower、 規範。js這一塊自動化還未準備就緒,node後台的架子也在搭建。各方進度都有不一致的地方,考慮到並行開發,我建議我先做靜態頁面,node後台繼續搞自己的,組長繼續研究架子。

這樣也好,專心寫頁面,能更專注的考慮html、css方面的東西。做完40個頁面總共花了8的工作時間(未加班),我覺得還是比較快了。

css方面從bower裡引入了bootstrap的部分less原始碼,再覆蓋一些原始碼需要修改的樣式,然後更多的是自己定義的樣式。這個過程中已經考慮了很多重用、結構、命名問題,所以前期4天的時間我的進度都很慢,因為邊寫就邊優化了,磨刀不誤砍柴工,後4天就差不多完成了30個頁面。以下是檔案結構,按照bootstrap規範:

靜態頁面寫完了,剛好組長架子、工作流這一塊也搭好了,後台也做了一些功能等待整合。

組織js用到了browserify,前後端的js邏輯都能用到require了。

專案比較緊,組長這乙個架子都還沒徹底搞懂,還是挺複雜的,之後松點了將會好好看看。

自動化帶來了更高效率的開發,監聽、打包、壓縮、iconfont、require等前期做好了配置,後面幾乎就不需要改動了,對於前端來說,這些都是必不可少的技術要求。

js這一塊,為每個頁面配置了viewname,寫在了base.html裡,所有頁面將繼承base,這一塊當然就是開始說的swig模板,相應資料夾的裡所有html檔案的js將會引入page->->index.js。

browserify把一些依賴js掛到了全域性,比如:jquery,jq-validate,jq-form,greensock。

特定的頁面配置了pageconfig,用來獲取一些資料。

觸發事件都用事件**控制,元件間通訊用trigger觸發器。

view裡:html寫好dom節點和動態引數,自動化工具會自動拼接節點生成swig前端模板,在其他js裡面就可以require了。傳入相應引數,就可以輸出到頁面了,如圖自定義popup元件和list元件很方便就能呼叫。

好像沒啥好說的,後端準備好介面,前端呼叫就行了,某些問題上需要多點溝通,保證需求理解一致。

gulp iconfont某些字型圖示殘缺,暫時icomoon手動更新

移動端 active 失效: -webkit-tap-highlight-color: transparent;

html5 video audio很多事件現代瀏覽器支援不好,特別是移動端的瀏覽器,可以用這個位址做測試

整體把控、注重命名和重用,出現覺得不合理的和需要重用的就應該優化。

如果有條件先實現靜態頁面,再最後來寫js邏輯,這樣開發應該會更快。

因為多少自己也做過設計,也知道有時候作為前端感覺設計師不放過每乙個細節讓人覺得有點累,但是我們應該尊重設計師,不要有任何抱怨因為這是他們的責任,當然我說這一點並不是我之前抱怨他們了,而是每當很忙很累的時候,看著設計師提上來的ui問題時候,我這樣激勵過自己,覺得這一點還是挺好,讓我更積極,希望大家能多換位思考。

前後端做好各自的單元測試,盡量保證自己**問題會是最少的,這樣整合成本就變得低了。

用到第三方框架和庫且不熟悉的情況下,遇到需求問題,應該首先從三方文件裡找解決需求的辦法,實在引入的三方庫沒有解決方案,再考慮自己解決。

前期約定好各種規範

專案前端技術總結

獲取select radio表單選中的值 input type radio checked val s option selected text 獲取選中的option的文字值 獲取select中option的被選中的value值 s val s option selected val js獲取se...

專案前端小結

解壓安裝 node v10.14.2 x64.msi 一直下一步。在命令列視窗 node v 檢視版本號 node v在命令列視窗 admin執行 屬性關閉快速編輯模式 安裝npm 前端伺服器庫 npm install 解壓前端專案在 projectname config 修改dev.env.js ...

前端優化 webAPP優化總結

1 減少js載入體積 很多庫能用cdn的盡量使用cdn,這樣打包出來的js體積會很小,載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui,mintui等 3 盡量放在伺服器上,盡量進行壓縮4 儘量減少網路請求數量 程式中的資料,有的能乙個介面返回的盡量乙個介面返回,不要弄太多的介面。5...