一個前端工程師的工作基本流程

前端coder們需要干的工作

通常一個大公司 接了一個網(wǎng)頁項目,經(jīng)常需要

需求分析 + 策劃架構(gòu) + 交互設計(UX)+ 界面設計(UI ) + 前端開發(fā) + 后端開發(fā) + 運維測試

那么我們大前端coder需要干什么呢?
總之,就是需要根據(jù)UX弄的原型圖和UI整的設計圖
去開發(fā)出網(wǎng)頁,讓上面的兩張圖變活!

制作

具體開發(fā)過程基本如下:
(這里就不考慮一些工具,比如gulp自動化構(gòu)建工具,webpack打包,vue開發(fā)框架,各種JS/CSS庫什么的,我自己都還不太會,失望臉,盡量講的通俗易懂一些,講基本的唄)

1.根據(jù)UI的界面圖進行切圖(沒錯,PSD切圖仔咯),這里切圖其實也有自動化的工具,人類的懶惰真是好東西,嘿嘿嘿。

看這小格子的,多漂(hua)亮 ( ji )

2.使用 html 對切出來的東西進行映射開發(fā),做頁面結(jié)構(gòu),看到幾個部分就對應幾個模塊,從大到小,從外到內(nèi),從公共到獨立。

3.使用 css 做樣式設計,具體分析模塊大小、位置、顏色,做盒模型等等。另外,可以分成三個組,一是重置樣式,用于修改一些不合適的默認格式。二是公共樣式,主要是頭尾以及LOGO等很多頁面都會用到的樣式;三是獨立樣式,用于只使用一次的樣式。

4.使用 JS 做交互動作,要不是有UX設計好的,我覺得每個前端coder都有一個大大的特效夢。當然,還需要根據(jù)與后端之前的討論做數(shù)據(jù)傳輸接口。

5.自己debug一下啦,如果有bug當然要改咯。

有問題郵件探討一下唄,點擊這里
我的博客鏈接,歡迎大家來參觀和提建議

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,094評論 25 709
  • 先說項目開發(fā)過程中團隊人員的分工協(xié)作。 一 人員安排 畢業(yè)至今的大部分項目都是獨立完成,雖然也有和其他同事協(xié)作的時...
    SnowflakeCloud閱讀 11,136評論 3 59
  • 今天剛剛看完這部影片,原本是不想去看的,倒不是感覺它不好,而是時間上早早的給自己做了安排,誰知道早上的一個不經(jīng)意的...
    豌豆愛荔枝閱讀 356評論 0 2
  • 大眾創(chuàng)業(yè),萬眾創(chuàng)新的政策推出以來,在政府的大力號召和推動下,各類創(chuàng)業(yè)基地、孵化園如雨后春筍般出現(xiàn),越來越多的...
    老羅雜貨鋪閱讀 699評論 3 10
  • node簡介 Node.js是一個基于Chrome JavaScript運行時建立的平臺, 用于方便地搭建響應速度...
    9I閱讀 751評論 0 50

友情鏈接更多精彩內(nèi)容