Article 八月 19, 2019

使用nvm來管理nodejs吧!

Words count 1.8k Reading time 2 mins.

nodejs 已經是前端開發必備工具,例如:啟動本機伺服器、許多框架或套件的依賴等等。但是最大的問題是,每個框架或套件對於 nodejs 的版本要求不同。以目前遇到的困難來說,目前同時維護 angularjs...

Read article

Article 六月 17, 2019

Angular與Electron共舞

Words count 3.2k Reading time 3 mins.

比你想像的更容易

如果你有能力寫網站,就寫得出桌面應用程式。 Electron 是個用 JavaScript、HTML 及 CSS 等網頁技術開發原生應用程式的框架。鳥事它都包了,專注在你的核心功能吧。

Electron官網簡單明瞭寫下框架的威力,開發桌面應用程式,你只需要專注在網頁三大巨頭JavaScriptHTMLCSS,其他的 Electron 都包了。因此在此就示範如何使用 Angular 搭配 Electron 快速建立一個簡單的桌面應用程式吧!

1.首先先建立 angular...

Read article

Article 六月 17, 2019

寫在NodeJS之前02-什麼是V8引擎

Words count 599 Reading time 1 mins.

人類只看得懂自然語言,而機器只看得懂二進位的機器語言。如何讓機器看得懂使用自然語言撰寫的 javascript ,就需要 javascript 引擎轉換成機器看得懂的二進位機器語言,而 V8 引擎就是眾多 javascript 引擎其中之一的引擎,目前由 google 維護。Chrome 目前就是使用 V8 引擎。

除了 V8 引擎之外,還有其他知名的引擎,例如:

  • Quantum 引擎 (Firefox 使用)
  • Nitro (Safari 使用)
  • Chakra (IE 使用,脈輪的意思,印度...
Read article

Article 六月 10, 2019

寫在NodeJS之前01-什麼是非同步和非阻塞輸入輸出

Words count 1.3k Reading time 1 mins.

同步阻塞:

以在飲料店點飲料為例子,你向店員點了一杯珍珠奶茶(假設店員只有一位),付了錢之後,你不讓出你的位置到旁邊去給下一位客人點飲料,而是站在原地,一直死命地盯著店員,看他有沒有好好地做你的珍珠奶茶,你也沒有辦法做其他事情,直到店員做好你的珍珠奶茶拿給你為止。(同步:你的飲料做完之後才能做別人的飲料;阻塞:死命盯著看,不能做別的事情)

同步非阻塞:

同樣以剛剛的例子為例,同樣點了一杯飲料之後,不讓出你的位置到旁邊給下一位客人點飲料,站在原地死命地盯著店員,看他有沒有好好地做你的珍珠奶茶。不過這次...

Read article

Article 六月 10, 2019

寫在NodeJS之前-為什麼要選擇NodeJS

Words count 479 Reading time 1 mins.

在使用 NodeJS 之前,必須先問問自己為什麼使用 NodeJS?NodeJS 有什麼優點?
維基百科關於 NodeJS 有這樣的介紹:

Node.js 採用 Google 開發的 V8 執行程式碼,使用事件驅動、非阻塞和非同步輸入輸出模型等技術來提高效能,可最佳化應用程式的傳輸量和規模。

整理一下 NodeJS 的優點是:

  • 採用 Google 開發的 V8 執行程式碼
  • 使用事件驅動
  • 非阻塞和非同步輸入輸出模型

因為這三個優點,讓 NodeJS 可以提高效能,可最佳化應用程式的傳輸量與...

Read article

Article 六月 08, 2019

強制結束nodemon的小技巧

Words count 359 Reading time 1 mins.

在開發express的應用程式的時候,nodemon是一個非常方便好用的開發工具。可以隨時監聽專案的變化,如果專案有變化的時候,可以自動重新打包執行,免去重複下指令的動作。但是常常遇到一個問題,在執行nodemon的時候,如果沒有正常程序關閉nodemon的時候,就算command line已經關閉,nodemon還是會持續在背景執行,port就會一直被占用,無法釋出。之前一直無法解決port被占用的問題,只好重新開機。但是這樣一直重開機,不是一個非常好的辦法,查了好久,終於找到一個關閉nodemon...

Read article

Article 五月 20, 2019

擴充Angular的pipe

Words count 1.8k Reading time 2 mins.

angular的pipe是非常好用的東西 (在angularjs類似的東西稱為filter,不過還是有差異),可以在不改變原始資料的情況下,調整資料顯示的樣子。

angular裡面已經內建多種好用的pipe,例如:處理時間的DatePipe、處理字母大小寫的UpperCasePipe,LowerCasePipe、處理貨幣的CurrencyPipe

雖然有內建那麼多好用的pipe,總是有不敷使用想要自己定義一個或是想要在原本的pipe上增加更多功能。針對第一種,可以自己新增一個pipe;針對第二種...

Read article

Article 三月 10, 2019

如何偵測使用者的裝置是否為行動裝置

Words count 4.5k Reading time 4 mins.

如何為不同裝置的使用者量身打造專屬的頁面?一般而言以解析度作為判斷的依據。如果裝置的寬度大於或小於某個解析度就會切換至不同的模式。例如:bootstrap判斷的解析度斷點以576(xs)768(sm)992(md)三種大小來分別判斷為手機、平板、電腦三種裝置。這樣的做法有個缺點:假設使用者使用電腦時將頁面的寬度縮小至992以下,頁面因為判斷到觸發的斷點而切換至平板模式。可是今天有個需求是這樣,部分的功能我只對手機的使用者開放或隱藏,也就是說:不論電腦或平板的使用者將頁面如何縮放,即使判斷到手...

Read article

Article 一月 03, 2019

如何解決IE無法使用promise的問題

Words count 824 Reading time 1 mins.

今天還是關於IE的問題。promise是javascript es6中處理異步事件非常好用且非常重要的方法。如果沒有promise,就得花費人生大把時光去處理煩人的異步事件。(雖然現在有更好用的rxjs去處理,但不可諱言,promise還是一個很重要的方法)。可惜的是,這麼好用的方法IE不支援。

IE不支援promise怎麼辦?當所有方法用盡之後,自幹才是最後一個選擇,在自幹之前,別人一定也遇過相同的問題,一定會有別人提供的好方法、好解法。在決定要動手之前,先去找找別人做過的方法,可以為自己省...

Read article

Article 十二月 31, 2018

如何解決在IE使用中文字當作參數為亂碼的問題

Words count 1.4k Reading time 1 mins.

最近又踩到一個IE的地雷,雖然不是很困難的問題,但是是一個非常容易誤觸的地方,記錄下來,避免之後又掉進一樣的地雷

這是一個很簡單的autocomplete的程式,使用者打關鍵字之後,將關鍵字當作參數送出到後端,取得關鍵字搜尋之後的結果,更新覆寫下拉選單

如附圖,當我打「走」,就會把 「走」字轉成參數送出去查詢,API就會回傳關鍵字的結果,並且將結果綁定到下拉選單上面,讓使用者選取。

因此這個程式基本上長這樣(已經省略掉與這次主題無關的內容)

// 關鍵字搜尋
getAutoComplete(keyword...
Read article
Load more
0%