阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

感謝站長關懷~

是的,這禮拜確實有遇到一些之前有稍微碰過卻不太熟悉的東西,也有之前沒有碰過的東西,是有些小崩潰...,但還是可以稍微跟大家分享與請教一下:
這裡有一些前期提要:公司目前的前端開發並不使用現在的主流前端框架,也沒有使用打包整合工具...(像是Webpack、Parcel這類的),JS使用JQuery,並且將JS檔案一個一個的引入網頁中。

 遇到的問題1 :CSS樣式問題

過去在自學的時候其開發方法是:在本機開發,然後在處理樣式與RWD時就是開啟Chrome 的 Dev Tools來做調整,但也有遇過在Chrome的Dev Tools中看起來將樣式都調整好了之後,部署到網路上之後換手機來查看頁面時卻發生了一些差異,這些差異可能包含滿版、間距等等,這部分我自己理解的差異可能會是有些手機會有瀏海的緣故以及Chrome與Safari之間的小差異.到新公司後發現在更多的裝置上,例如安卓手機,則存在的差異更多,包含顏色、日期時間選取器等等的樣式,因為型號真的太多了.

到這裡可以跟大家分享的以及向各位請教的:

這裡我自己有想到幾個解決的方式,第一個是最懶的方法我最想用但是我有些不知道該如何整合給其他人使用的方法,例如透過Vue cli直接在npm下載PostCSS以及Autoprefixer這樣的工具來使用,一次解決主流瀏覽器的差異,但目前我不太曉得如何在公司的開發方法下,不透過整合工具來完成這個流程.
另一個我想到的方法是加入CSS Normalize來減少各個瀏覽器在不同樣式的預設值差異,過去我們可能都有寫過非常簡易CSS reset 例如:

*{
    padding: 0;
    margin:0;
    box-sizing:border-box;
}

但這樣如果把每一個樣式的預設值全部強制歸零,可能會導致有些樣式到後來要重新寫,或許Normalize可以只是單純地減少差異(也是因為網路上有人已經整理好了XD).

 遇到的問題2 :API串接

過去我自己練習串接API的方式實在是相當簡易,我拿的是中央氣象局開放資料平台的API,所以之前很簡單的一行fetch就拿到資料了,毫無難度哈哈哈,但第一天公司需要我去切幾個版面並且串接運輸資料TDX的資料,恩...我一開始不知道要如何在JS中塞入登入資料並且拿回Token的方式.以及我要查詢的數值該如何發出.

到這裡可以跟大家分享的以及向各位請教的:

這中間我摸索了fetch的一些選項設定,這應該也適用其他的非同步請求方法,例如ajax、axios(這兩個我還沒用過,後續應該會來摸索一下axios),包含請求方法(method),header與body中的內容設定等等.

至於API該如何塞入a頁面填入查詢參數並且跳轉到b頁面顯示查詢解果,在沒有前端框架全域狀態管理的支援下,這邊則是摸索了encodeURIComponent以及decodeURIComponent這樣的函式,將要查詢的參數在a頁面進行編碼並丟入到URL中,跳轉到b頁面後再進行解碼.並fetch我要的資料.最後是有成功的,只是覺得自己像薪水小偷哈哈哈,效率並不高.

這個方法感覺並不建議應用在需要輸入有個人資料的內容中,因為編碼的方式是雙向的,資料可以編碼也可以解碼,所以....像個資這類的內容就應該不建議塞在URL中用這種方式傳輸.至於要用什麼方法,這也是我想知道的.

 遇到的問題3:不同裝置的問題

這個並非第一個樣式的問題,而是我目前覺得還沒有解的問題,就是我在網頁中需要獲取使用者的位置,因此用了navigator.geolocation 這個API,但神奇的是,在本機中都可以抓得到資料,打開Dev Tools檢查回傳的狀態碼與經緯度也都是沒有問題,但是在手機中雖然會顯示是否能夠取得使用者位置的提示,但按了同意後卻一直無法獲取資料,而且尷尬的是,我無法在手機中打開Dev Tools,所以我也不知道問題發生在哪....,過去有使用過navigator.geolocation 好像也沒有碰過這樣的問題

想跟各位請教的是,有什麼方式可以查看手機上的問題嗎?

 遇到的問題4:不同的開發方式

這個是我自己很好奇的,雖然說我知道Vue是漸進式框架,但我卻不知道該如何漸進.我理解的漸進式是,有些頁面或元件可以自行選擇要不要使用Vue開發,還是這個漸進式的意思是可以自行選擇要使用多少Vue的套件工具呢(像是要不要使用Vue Router or Vuex).
會這樣問是因爲,假如現在有一份專案一共是十個頁面,我被分到了其中五頁,另外的同事則是負責另外五頁,誠如開頭所說,假如公司既定的開發方式並不使用框架與其他整合工具,我有可能使用框架進行開發並與之合作嗎?還是我這是一個很奇怪的問題,本來就應該要統一一個開發方式?


感謝看到這邊的各位,以上有些觀念上是我這位小菜雞自己摸索的,是可能不是正確的(例如有些函式、工具的用途或使用情境),因此歡迎大家指教與討論,這是我這禮拜可以跟大家分享的啦.
謝謝~~


PS:我自學八個月的時間有摸了原生JS、CSS、Vue.js、Tailwind、SCSS這樣的工具,本來我是很想要在第一份工作多了解與強化上述工具以及多人開發GitHub的部分,我了解這些終究只是工具且我自己也沒有到非常熟,只要可以完成專案目的即可,我的實力在哪裡我也知道,但以目前公司的開發模式來說,我需要考量沒有踏上趨勢的這個問題嗎?還是我多慮呢了?

按讚的人:

共有 11 則留言

先回答最後一個問題:公司不使用現代流行工具,而是只用 jQuery
我必須說,貴公司工作方式「非常過時」,我猜團隊中的工程師年紀都比較大,風格老派
如果只是其中幾個專案這麼老派,那就算了,如果所有專案都這樣寫
對你的職業生涯「有不利影響」,長此以往,會很沒競爭力
你提到的工具 Vue.js、Tailwind、SCSS、webpack 都是現在流行且必學的工具
應該盡可能多去使用並且累積經驗
不過,第一份工作,怎樣都能學到東西,所以目前沒關係
但是大概 6-9 個月之後,當你覺得該學的都學完時,可以考慮換工作,因為確實需要跟著趨勢走

按讚的人:

我想我可能會在下班後多少撥一點時間持續使用這些工具
不然還真的會忘記
其實這個問題對我來說相當的重要
這也是我第一次發文時很想了解的點
非常感謝站長的建議

我最近也是利用下班或假日空檔學一下Tailwind,玩一玩試一試發現很好用,相見恨晚~XD

按讚的人:

回答問題三:關於 navigator.geolocation
這應該是很單純的功能,目前我看不出哪邊出錯了
這手機上有打開「GPS」功能嗎?該不會沒打開吧?
手機上那個「GPS」位置相關的圖示,有亮起來?

按讚的人:

這個我今天倒是找到了答案⋯⋯非常蠢
原來是我搜索物件的半徑設定的太小
因為電腦定位精度比較沒那麼高,之所以有搜出結果是因為電腦訂位跑掉了,然後位置跑掉了剛好還有物件被電腦搜尋到,我誤以為這個才是正確的結果,而手機定位精度較高,所以一直返回無物件…哈哈哈嗚嗚嗚,總之有找到問題並且解決了。

回答問題一:你提到的各個工具,應該通通都可以解決裝置差異的問題
關於導入方式,各種套件,通常還是會針對「純瀏覽器」環境提供導入方式,多翻閱文件找找看吧
比方說,看看這個 PostCSS,一樣可以一行導入
https://www.jsdelivr.com/package/npm/postcss

按讚的人:

我這兩天再來研究一下

回答問題二:HTTP GET 發出的請求,會出現在網址上
使用 HTTP POST,就不會出現在網址上,試試看吧
如果還是覺得不順,單獨發一篇文章,把使用情境完整描述,大家幫你看看怎麼改良

按讚的人:

回答問題四:你搞錯 PWA(Progressive Web Apps) 的意思了,你再去多查一下 PWA 的定義
你說的只是專案在不同頁面對於 Vue 導入程度的問題
你當然可以某些頁面用 Vue 寫,某些頁面只用 jQuery,這沒有問題,也算常見
但請先跟合作的同事溝通一下,大家稍微討論一下,就可以去做了

按讚的人:

我真的誤會這個意思了,感謝站長指出!
如果是我說的那個情況,那輸出的是一個index.html中包含了五個頁面的內容(用router來處理指向),是屬於SPA的應用,但同事的不是,合併在一起也是ok的嗎?

按讚的人:

有點奇怪,實務上很少看過有人這樣做
但我想了一下,理論上,這樣做,應該也是可以
網站還是能跑,應該是 OK 的


此人尚未填寫簡介。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈