我本身是做軟件前端開發的,以前做過兩年的網頁設計,以我個人的理解來說一點淺見好了,前端主要的工作是頁面或界面的設計制作、html切圖、動態交互等,而后端準確的說是后臺,主要工作是整個網站或者軟件的功能實現,通俗點講就是程序員,現在普遍是兩個工種分開來了,因為一個人做的話反而效率不高,如果你是想做這一行,那么我個人是建議你做程序員拉倒,雖然程序員工作量可能會比設計多,但做設計太費腦子了,程序員主要是一些邏輯性的事情,很多代碼都有現成的,大部分工作就是復制粘貼而已,而且客戶看東西首先是看前端咋樣,這就考驗設計師水平了,最后就是重點了,程序員的普遍工資要比設計高,當然,設計師也有高的,但無一不是技術過硬和工作經驗足夠的。
IT中的前端指的是:用戶可見的界面,網站前端頁面也就是網頁的頁面開發,比如網頁上的特效、布局、圖片、視頻,音頻等內容。
前端的工作內容就是將美工設計的效果圖的設計成瀏覽器可以運行的網頁,并配合后端做網頁的數據顯示和交互等可視方面的工作內容。 我們平常所說的前端,是前端開發,也叫web前端開發,從業者叫前端開發工程師,它是程序開發中重要的組成部分,主要負責軟件或者網站用戶界面的開發。
目前,前端開發用到的技術包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js、Webpack,AngularJs,ReactJs,VueJs等技術。
前端主要是考慮怎樣能讓用戶覺得用起來更舒服,考慮界面布局、交互效果、頁面加載速度等等,主要是偏向用戶看得見的部分,客戶端(pc、手機、pad)上瀏覽web。
這里介紹3個前端可視化庫,分別是Highcharts、ECharts和G2,這3個庫都可以快速完成前端網頁數據可視化,而且制圖方便、種類繁多,下面我簡單介紹一下這3個庫:
Highcharts這是一個純JS編寫的圖表庫,可以快速為Web網站添加交互式圖表,個人網站可以免費使用,支持圖表類型眾多,包括常見的散點圖、折線圖、柱狀圖、餅圖等,下面我簡單介紹一下這個庫的使用:
1.使用的話,有2種方式,一種是CDN遠程引入highcharts.js文件,一種是下載
Highcharts源碼包,本地導入,這里以第一種方法為例,直接CDN導入,測試代碼如下,官網示例,非常簡單,基本思路先創建一個div容器,然后通過JS引入圖表到容器,設置相關屬性就行:
用瀏覽器打開這個html文件,效果如下:
2.更多示例的話,可以查看官網教程https://www.highcharts.com.cn/demo/highcharts,非常詳細,各種圖表都有涉及,還可以在線編輯,使用起來非常不錯:
ECharts這個是百度開發的一個開源前端可視化庫,可以流暢的運行在移動設備和PC網頁上,數據交互性也非常不錯,而且支持個性化定制,下面我簡單介紹一下這個庫的使用:
1.首先,下載echarts.js文件,這個直接到官網上下載就行,大概也就2兆左右,如下:
2.下載完成后,就可以直接在本地html文件中引入使用了,測試代碼如下,也非常簡單,基本思路和上面highcharts差不多,先創建一個div容器,然后通過JS引入:
用瀏覽器打開這個html文件,效果如下,非常不錯:
2.更多示例的話,也可以參考官網教程,相關圖表示例非常多也很詳細,提供在線編輯查看功能,很適合初學者掌握和學習:
G2這個前端可視化庫功能和highcharts、echarts差不多,由阿里開發,制圖種類也比較多,交互性也非常好,簡單易學,可以快速完成日常大部分圖表制作,下面我簡單介紹一下這個庫的使用:
1.這里也可以通過遠程引入,然后直接創建一個div容器顯示就行,測試代碼如下,非常簡單,也是官網的入門示例:
瀏覽器打開后的效果如下,還不錯:
2.更多示例的話,也可以參考官網教程,非常詳細,各個種類的圖表都有詳細代碼和注釋,也可以在線編輯,非常適合開發者參考和學習:
目前,就分享這3個前端可視化庫吧,對于日常前端制圖來說足夠了,當然,你也可以使用d3.js庫來完成相同的制圖功能也是可以的,網上也有相關教程和資料,感興趣的話,可以搜一下,非常詳細、豐富,希望以上分享的內容能對你有所幫助吧,也歡迎大家評論、留言。