發表文章

目前顯示的是 九月, 2017的文章

Vue extends 與 mixins 的不同

圖片
photo crop from https://unpkg.com/vue@2.3.0/dist/vue.js

好久以前,大概半年前我用了 Vue Typehead 這個第三方套件,那時候就按照 readme 直接用 extends 用上,半年後我加了好多新功能,把一樣的 methods, data property 拆出去變成 mixins。

extends: VueTypeahead,
----
mixins: [ hasPager, hasSearch ],

今天在整理 code 的時候,就好奇這兩個差別是什麼,看了一下 source code,好像是一樣的作用,最後都是呼叫 mergeOptions,只是 mixins 可以帶很多個 (因為是 Array),extends 就一個。

Vue 註冊全域的 Component

網站上有很多元件非常容易重複使用,例如 Loading 狀態,Alert 文字框,無資料的狀態,分頁等 Component,既然這些元件會時不時的被使用,那為何不直接註冊成 Global Component ?!,這樣就再也不用在每一頁重新 import 一次那些常用的 component 了。

在 new 一個 Vue 之前處理好這些 import 跟 註冊 component

// main.js, 匯入所有需要註冊成全域的 component

import Paginate from 'vuejs-paginate' import Loading from './components/Loader' import EmptyStatus from './components/EmptyStatus'
// Register as global component
Vue.component('paginate', Paginate) Vue.component('loading', Loading) Vue.component('empty-status', EmptyStatus) //... new Vue({ el: '#app', .... });
接著就可以直接在 component 直接使用~

Vue-Resource finally

在 Vue / Vue-Resource 接 api 時候,前陣子有一件事一直很困擾我,那就是 Promise 沒有一個狀態讓我知道已經完成,不論 request 是否成功或失敗,我只能知道 resolve, reject, cache... ,但我希望有一個像 jQuery 的 always 一樣,能夠給我放一個 callback 在 request 完成時呼叫 (不論結果如何)。

今天看到一篇文章 (Finally the Promise.prototype.finally() is available),說 Promise 的 finally 已經在 TC39 ECMAScript Proposal 裡面,現在急要用的話可以走 polyfill,該文章有幾種 polyfill 的做法,可以參考看看。不過我看 Vue-Resource 的原始碼,已經有幫我處理過 finally 的樣子,因此我也沒有特別做 polyfill。

舉個之前為什麼需要 finally 的例子,因為在發 api 之前需要顯示 loading 轉轉轉,但是不管 api 的 http status 是 200 還是其他,在結束 ajax 之後,都應該關掉 loading 轉轉轉:

loading.show(); ProductService.getCategory() .then((res)=> { // successthis.category = res.body; loading.close();}, (res)=>{ // errorthis.category = null; loading.close();});
寫了兩次的 loading.close 感覺就很麻煩,因此有了 finally,只需要一次:

loading.show(); ProductService.getCategory() .then((res)=> { // successthis.category = res.body; }, (res)=>{ this.category = res.body; // error}).finally(() => { loading.close();});
如果有其他做法可以分享也歡迎留言~

參考:
https://s…

使用 Vue Resource 的 interceptors 處理不同的 http status code

首先你的 Vue 專案也是使用 Vue Resource 處理 http request, 再往下看~

在 SPA 因為有大量接 API 的需求,但每次都要在獨立的 component 處理不同的 http status code 狀態,實在有點麻煩,比方說遇到 api 的 status 是 401 的話,就要再寫一個 router push 到使用者登入畫面之類的 code,重複的邏輯散落在各處 page component.

因為 vue resource 有個好用的 api 叫做 interceptors,覺得他跟 Laravel 的 middleware 很相似,就是所有 request 都會經過他,做一些處理,因此可以利用 interceptors 過濾每一次 request 的狀態,假如是 401 就導到 login, 假如是 404 就導過去 not found 頁面。

確認有使用 vue resource:

import VueResource from 'vue-resource'
確認有 use 它:

Vue.use(VueResource)
在 use 之後:

Vue.http.interceptors.push((request, next) => {next((response) => { if (response.status === 401) { console.log('權限不足'); // do logoutrouter.push({ path: '/login' }); } if (response.status === 404) { router.replace({ path: '/404' }); } }); });
參考: https://stackoverflow.com/questions/37228087/vue-js-interceptor

Vue Router 實作按需加載,將 JavaScript 拆成好幾隻

圖片
一開始使用 Vue 寫 Single Page Application (SPA),頁面越來越多時,編譯出來的 build.js 越來越肥,覺得這樣 request 時 loading 蠻吃緊的,最高甚至到了 3MB 以上,雖然有 nginx 的 gzip 在前面擋著,不過還是有其他方式可以盡量減少檔案大小,因此就打算針對某些 routes 做成按需加載,也就是有走到某個頁面時,再加載該頁面的 JavaScript。

*我的專案是 Vue2 / Webpack2 / Vue-Router
1.  首先要在 routes 的 import 寫法改一下,把需要按需加載的頁面,改成 resolve require 的方式:
/* import Home from '../pages/Home' import Product from '../pages/Product' import Search from '../pages/Search' */ // 改成const Home = resolve => require(['../pages/Home'], resolve) const Product = resolve => require(['../pages/Product'], resolve) const Search = resolve => require(['../pages/Search'], resolve)
如果是 webpack2 可以寫成

const Home = () => System.import('../pages/Home')

2. 接著記得要在 webpack 的設定,加上 publicPath 的設定,這樣做當需要按需加載時,才知道網址要怎麼帶,否則網址會是錯的。output.publicPath 怎麼寫可以參考哦! 。

假如 publicPath 沒辦法 hard code 在 webpack 設定怎麼辦?  因為每個人開發機的網址可能都不同,這邊的替代方案叫做 configuring webpack public path at runtime,也就是不要把 publicPath 設定寫在 …

利用 Vue.prototype 來設定全域變數

在 Vue component 裏,隨時都有需要拿取一些設定的值,例如圖床的 domain,因為要組完整的圖片 url,例如某些功能是否要開啟,例如檔案大小的 MB 限制也要寫成設定,例如 api 的 endpoint,網址也不可能是 hard code, 也是統一透過一個設定而來。

寫成獨自的設定,不依賴後端傳設定,方便脫離後端。

我的做法是寫一隻 config,但是又需要丟進去給 Vue,
又不想直接 assing 給 window 物件 (如果要這麼公開的直接丟給 window,根本也不用寫 config.js,也很容易看到四散在各處的 window.xxx = 某個設定的值)
所以我就用了 Vue.prototype,集中管理所有跟設定有關的部分,傳給 Vue。
首先在專案的目錄的某處,放置這隻充滿設定的檔案,檔名我也叫 config.js

const CONFIG = { /** * [XSRF_TOKEN] * @description: xsrf_token * @docs: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie */XSRF_TOKEN: decodeURIComponent(document.cookie.replace(/(?:(?:^|.*;\s*)XSRF-TOKEN\s*\=\s*([^;]*).*$)|^.*$/, "$1")), /** * [API_URL] * @description: 全站發 api 的 endpoint */ API_URL: 'https://yiyingloveart.blogspot.com/demo', PHOTO_URL: 'https://static.xxxx.xxx/' } export { CONFIG };
接著在專案的主程式 以我來說是 main.js,import config 那隻檔案,另外 import 後命名為 SiteConfig. (*看個人習慣)

import { CONFIG as SiteConfig } from './config'
接著設定為 $conf,這樣做的方式跟…

在 Google custom search 加上 callback

很多人都習慣直接使用 Google 的 custom search 服務,在自己的網站上加入搜尋框。

假如現在有個需求是,想要紀錄使用者在 custom search 上搜尋的文字紀錄,方便公司做統計,什麼樣的單字是使用者特別想搜尋的,那就會需要一個 callback function 是使用者透過 custom search 後取得使用者 key 的單字。

其實官方文件有提到如何使用 callback,請參考,只是一開始我覺得官方這個範例不是很直覺。後來還是靠 stackoverflow取得 實作參考

我是使用這組解法,後來有成功~

window.__gcse = { callback: myCallback };
自定義一個 function (暫時叫 myCallback) 給 _gcse 的 callback,然後在 myCallback 記得接住 input.gsc-input 的 enter 以及 input.gsc-search-button 的 click 事件,再去取得 gsc-input 的內容值。

在 Vue 使用 SweetAlert2

圖片
本文假設你已經裝好 Vue 以及 Webpack 等設定。
首先需要安裝 sweetalert2:

npm i sweetalert2 --save-dev
在主要的程式進入點,例如: main.js (看個人摟) 做 import:

import swal from 'sweetalert2'
接著在下方定義 swalPlugin
另外把 sweetalert2 的設定指回去給 Vue.prototype.$swal
你也可以定義別的名稱,例如 Vue.prototype.$sweetalert2 之類的。

const swalPlugin = {} swalPlugin.install = function(Vue){ swal.setDefaults({ confirmButtonClass: 'btn btn-primary', cancelButtonClass: 'btn btn-default', buttonsStyling: false, showCloseButton: true}); Vue.prototype.$swal = swal; } Vue.use(swalPlugin)
setDefaults 這些設定可不是空穴來風,他只是用來設定一些全站使用 sweetalert 預設的參數,(sweetalert 官網有寫,當然在此範例裡,你也可以都不要有任何設定。)

使用 Vue.use 完成註冊之後,接下來你就可以在整個站用 this.$swal,直接這樣呼叫使用 sweetalert2 了。 例如:

this.$swal({ text: '你確定要刪除嗎', type: 'question', showCancelButton: true, confirmButtonText: '確定', cancelButtonText: '取消', }).then(function () { // 確定要做的事 }, function() { // 取消要做的事 });
這是我的 main.js 局部:


雖然好像也有好心人推出 vue sweeralert 的套件,但因為我在用的時候還…

解決 ellipsis 無法在 table-row 之下正常顯示

CSS 的 ellipsis 是用來解決限制文字長度,過長則可以幫你在字尾加上 “...”,讓你不必費心思考怎麼處理 ... ,也不須麻煩後端做字元數量計算, 參考連結

---
BTW: 但有個缺點就是只限制在文字只需要顯示最多一行的情況,多行的話則沒有辦法 (應該說辦法是有,只是還不能用 (以後可以期待 https://drafts.csswg.org/css-ui-4/#overflow-string),而且解法我也認為大多是 workaround,除非等新的 css 屬性出來,所以多行擷取字元的話還是交給強大的後端吧,JS 處理顯得有些麻煩)
---



不過問題是因為我參考了網路上 sticky-footer 的做法 (參考),因為網頁主要的 container, dispay: 是 table-row, 結果在整個網站想要使用 ellipsis 突然就沒有作用,解法是在設定 display:table 的 <body> 上 加上 table-layout: fixed 的屬性。

雖然 table-layout: fixed 這解法有點讓我不太理解 (啊...我也不曉得當初為什麼我會選擇用 table 來做 sticky-footer,大概又是趕時間的衝動 XD),下次使用 sticky-footer 時也許可以改用其他方式 (當然還是要看瀏覽器支援的程度)。