15 posts tagged with "javascript"

前言​

開發 Vue專案過程當中遇過各種node環境的神秘問題。最奇怪的是本機端的 node版本和 server端完全相同，但是本機端的 npm install和 npm build是正常時，確不能保證 server端也同樣沒有問題。

我自己將常遇到的問題整理成筆記順便分享給大家。但每個人的開發環境及可能遇到的問題皆不相同，所以就僅供參考了。

一、前情提要​

本篇文章以我自己開發的一個 library - vue-component-sandbox作為範例，說明發佈 javascript程式到 npm上面所需的相關步驟及設定。

以這個範例來說，vue-component-sandbox的主程式是一個 Vue.js 的 Component，我希望除了將主程式發布到 npm上以外，還希望能建立一個簡單的展示頁面，所以我選擇用vue-cli建立專案，把主程式和展示網頁放在相同專案裡。整個專案我推上Github並使用Github Pages布署靜態的展示頁面，並將Component檔案所在的資料夾發布至npm。

依照上述需求，本文重點有二：

1. 發布至npm的相關設定及方式
2. 推上Github及布署範例網頁（Github Pages）

前言​

基於某些原因最近有在前端匯出excel檔、並且有自訂欄位樣式的需求。雖然以前就有開發過前端匯出Excel的功能，而且套件選擇也還算多實作也不難（當時是使用Export2Excel），但要自訂樣式的話我就沒做過了。

花了一段時間google發現事情似乎並沒那麼簡單。雖然說肯定是找一個套件並依api文件來實作就結束了，不會難到哪裡去；但麻煩的是網路上的資訊有些混亂，有一些教學文章又太過複雜，似乎沒看到哪個套件是比較被多數人使用並且有清晰的文件的。

花了一些時間研究，剛好找到了一個合適的套件叫 xlsx-js-style，它是使用另一個套件 SheetJS相同的API並且擴充了額外可自訂樣式的 API（SheetJS似乎沒提供樣式設定的API）。

前言​

身為使用 Vue.js的開發者，最近在研究 React.js以及 Next.js，原本以為有了使用 Vuex（和 Redux 一樣取自 Flux的概念發展出來狀態管理套件）的經驗，應該可以無痛轉移使用 Redux，但沒想到使用門檻竟然比預期的高上許多。

先是研究了 Redux，沒想到如果要打 Api還需要像是 React-Thunk之類的套件才能做非同步的操作。接著， Redux本身是一個獨立的狀態管理的套件，要怎麼跟 React溝通他也不管，所以還需要再安裝 React-Redux才能將 store和 Component做綁定。好不容易整理到一個段落了，實際開發 Next.js的時候還會有一個需求是要在 server-side從 context中取得 store又要再安裝 Next-Redux-Wrapper。前前後後含 Redux本身總共裝了四個套件，才終於達到我能開始開發 Next.js程式的最低需求。

前言​

之前使用 Vue2.x開發時又想使用 Typescript，當時遇到的困擾是… Component使用 Typescript時根本就吃不到 this的型別，所以基本上是無法直接使用的，唯一的方式也只能採用官方推薦的 Class Component寫法，會寫到覺得很生氣（？）， Class Component的寫法實在是頗不直觀。

一直到 Vue3.0推出之後，才終於徹底改善了對 Typescript的支援；但我的工作上基於某些理由，短時間內無法轉為使用 Vue3.0，所以我就來簡單研究了一下，在 Vue2.x環境下是否有使用 Typescript合適方式？

前言​

理論上 Vue3.x大多數的寫法是有向下相容 Vue2.x的寫法，所以理論上.vue檔Component的寫法只要同時符合 Vue3.x和 Vue2.x的寫法，是能夠將同一個檔案共用於兩者不同環境當中。

以下會針對幾種我遇過在這兩個環境中較大差異的部份以及解決方式做個說明。

落落長的前言​

雖然說Vue上手容易，就以我來說我剛開始學習的時候幾乎是網路上看了幾篇文章就開始寫了，但是後來就吃了很多悶虧，慢慢在各專案中累積實戰經驗之後才知道有更好的做法，並且每種做法的差異以及適用的情境…

關於組件(Component)的設計當中，資料傳遞的設計幾乎是整個Vue的程式開發中最重要的一件事情…（個人見解 XD），尤其是當團隊（或者專案中）開始考量組件的複用性、開始重視組件的開發，這件事情尤其重要。

一、單向/雙向資料流之差異及適用場景​

前一篇文章「單向傳遞」中我有提到過，我自己「體感」自製的Component大約只有百分之20是使用單向資料流傳遞的。不過在Vue中的「雙向綁定」是一大特色（雖然當初也是 抄襲 參考Angular的），當中的變化以及學問可多了。

就我自己個人的經驗，剛開始學Vue時開發自製Component大多都是使用單向綁定，對於自製的雙向綁定的用法有些困惑，隨著經驗的累積才開始慢慢掌握技巧以及合適的用法。依照我自己個人的經驗，我會把這百分之20中所適用的情境分為兩種：

1. 包裝resuse（可複用）的基本元素
2. 因程式管理需求需抽離出來的大區塊

一、範例說明​

本文是系列文當中討論「雙向綁定」的第二篇文章，在前一篇文章「Vue父子組件資料流設計 (2) 雙向綁定–通用組件」當中有介紹了兩種（我自己的經驗法則分類）會使用雙向綁定的組件類型：

1. 通用組件
2. 大組件

這是Javascript的一個經典的觀念題–「傳值」以及「傳參考」(call by value/call by reference，或者pass by value/pass by reference)，除此之外，也有人說Javascript是call by sharing（或者pass by sharing）。不過我自認我的程度還不到可以針對這些名詞做很深入的探討，但是可以用一個簡單的方式，將Javascript的這個語言特性做個整理。