JavaScript

[測試] e2e 的測試方法 Day 2

前面大概敘述過 NightwatchJS 的運作方式,接著繼續來說明一些可能會有雷的地方。當然,我覺得這不是每個人都會遇到,應該是我天生比較帶賽的關係。 像是鋤頭打到自己的腳之類的事情。 運作順序 畢竟他還是 JavaScript 的關係,所以運作的方式可能會跟我們想像的有點出入。舉個例子來說, browser .verify.ok(true, '第 1 次 Verify') browser .click('button[type="submit"], function() { browser.verify.ok(

  • Hina Chen
    Hina Chen
4 min read
JavaScript

[VueJS] 重新檢視 lifecycle 與 vue-router

由於遇到了一些 Google reCAPTCHA 的狀況,所以剛好找時間來重新檢視一下 Vue 元件的生命週期這件事。其實也不是 Vue 本身的問題,但是很奇妙的是,我真的就是遇到這種狀況。 剛好複習一下也好。 Lifecycle 首先還是先複習一下官方這張說明圖片, https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram 接著回想一下我上次寫過,關於 Vue-Router 外面的那些事情。 然後我們來玩一下排列組合,在這邊只關注 剛進去 元件或是路由的情況, beforeRouteEnter beforeCreate

  • Hina Chen
    Hina Chen
4 min read
JavaScript

[JS] RegExp 參數的正確姿勢

雖然說寫了很多 JavaScript,但是還真的是頭一次遇到 global 的問題。其實也不是什麼問題,只是對於這個物件的不熟悉,所以覺得他是一個 Bug,後來才發現他是一個 Feature。 RegExp 在開始之前,我們可以先參考一下 MDN 的文件, https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions 然後可以看一下關於 Advanced Searching With Flags 的區段,

  • Hina Chen
    Hina Chen
5 min read
JavaScript

[測試] e2e 的測試方法 Day 1

上一篇解釋了虛擬碼的概念,這次直接進入撰寫測試的方法。當然,需要一點工具來輔助我們,這裡我們使用 nightwatch.js 來當作測試的框架。 如果不是使用 nightwatch.js 的人,可以左轉沒關係。 環境 萬事起頭難,建立環境這件事情最難! 雖然我們使用 nightwatch.js 來當做測試框架,但是我們還是需要具備一些基礎知識,好方便我們操作。首先,我們需要的有, 可以運行 NodeJS 的環境 可能需要安裝 Java SDK selenium-server-standalone 獨立執行檔 (*1)

  • Hina Chen
    Hina Chen
9 min read
JavaScript

[測試] e2e 的測試方法 Day 0

End-to-End 測試,是近幾年開始流行的測試方法。身為一個農夫,其實沒有寫測試也是很合理的(不是!因應開發需求,所以趕流行也得開始寫一點測試的東西,不然會不夠潮! 這篇是相當入門的火星文,如果已經是火星人,請直接 End 謝謝。 前置作業 首先,測試工具有很多,在我們討論測試工具之前,要先釐清幾件事情: 測試是什麼東西? 該怎麼把想法變成測試程式? 測試的程式該怎麼寫? 要用哪一種測試工具? 「測試」顧名思義就是一種測試(廢話,目的在於驗證結果是否 正確,我們主要的目的在於確保 那個黑盒子 能夠正常運作。也就是說,在我們定義的邏輯沒有問題的前提下,

  • Hina Chen
    Hina Chen
6 min read
VueJS

[VueJS] 關於 vue-router 外面的兩三事

最近因為某些需求,所以需要把一些動作放在 Vue 外面,但是由於 Vue 整個生命週期的關係,所以有些事情沒辦法在元件當中操作。所以就把歪腦筋動到 vue-router 身上,後來發現,很多動作還是會有些意外發生。 我們就來聊一下那些看似合理的 意外! 引言 以下皆是在 Vue 2.3/Vue-router 2.5 含以上版本測試,如果你不是該版本或以上,請斟酌服用。 Lifecycle 與 Vue-router 2.5 一開始還是要請出官方的圖來打一點預防針, https:

  • Hina Chen
    Hina Chen
5 min read
JavaScript

[Prerender] Chrome headless 應用

現行的服務裡,有 prerender.io 可以使用,不過由於他是使用 PhantomJS 來當作背後的引擎,而,偏偏我自己開機器來做的時候,常常遇到一個畫面要處理超過 1 分鐘的窘境。 所以,只好拿 Google Chrome 新推出的 --headless 來試一下水溫。 安裝 目前是使用 Ubuntu 16.04LTS 來進行安裝,在伺服器上裝 Google Chrome 挺弔詭的就是。最簡單的方式就是透過 apt-get 來安裝,

  • Hina Chen
    Hina Chen
5 min read
VueJS

[VueJS] vuex 的五十道陰影

不是那個五十道陰影,是說我也還沒看過。只是說,人在江湖跑,哪有不挨刀,總是要挨個幾刀才能算是大哥嘛(是嗎? 所以身為一個專業的菜蟲農夫,偶爾被鋤頭打到腳指頭也是很合理的(欸不對! 最近很流行作弊的表,剛好 vuex 也有一份,如果你沒看過,現在讓你看看(當然不是我整理的,網路上神人很多。 https://vuejs-tips.github.io/vuex-cheatsheet/ 這表沒什麼大毛病,不過這樣的東西其實還是需要對 vuex 有相對程度的瞭解,看起來才會有些用處,不然對於初學者來說,她就只是一個整理得很漂亮的表單而已。 簡介 既然 vuex

  • Hina Chen
    Hina Chen
4 min read
VueJS

[VueJS] $watch 藏在原始碼裡的邊緣人

身為一個菜蟲,洗菜的時候抓到很多蟲應該超棒的(欸!只是說,有些蟲實在是很惱人,因為那也不算是蟲,只是個隱藏版的功能。至於為何沒有寫在文件裡?這就只能去問作者了! $watch 的實際狀況與問題 文件裡面有特別寫到 $watch 的額外選項, deep immediate 這個就不多做解釋,可以去看官方文件 https://vuejs.org/v2/api/#vm-watch 我來聊一下關於 $watch 遇到的問題, methods: { ...mapActions(['setTick']) }, computed: { ...mapGetters(['getTick']

  • Hina Chen
    Hina Chen
6 min read
VueJS

[VueJS] 官方套件各種雷

首先,我因為不太常用眼藥水,所以,有關於眼睛酸澀流目油等事情,請不要來問我謝謝。至於是不是有這麼多雷,其實我也不太確定,只是我遇到了而已。 如果你沒有,那應該是我眼睛乾澀看錯,假的! 關於 Lifecycle Diagram 舉一個 1.x 的例子來看,先抽離 vue-router 的狀況,實際上在瀏覽器上觸發的狀況大概就是官方的順序(底下先不討論離開畫面的東西, init created beforeCompile compiled attached ready 各別帶出來的 this 則是這樣, VueComponent,

  • Hina Chen
    Hina Chen
3 min read
VueJS

[VueJS] 大型專案開發 #假的

其實我最近在準備科技農夫的事情,只是說剛好遇到需要開發一點東西,所以順手筆記一下。VueJS 這個東西有 Kuro 這扛霸子持續佈道應該是妥當的,個人只是插花一下而已。 何謂大型專案? 首先必須要認知的一件事情,沒有什麼大型專案,或者人人都是大型專案(欸!只是說,我們在開發的時候,總是會希望有一些事情是能保持該有的彈性的,這個彈性不管專案的大小,勢必是留一點空間給自己的一個作法。 投影片在這裡, http://www.slideshare.net/hinablue/vue-js 公司內訓直播在這裡, https://www.facebook.com/hinablue/videos/10208267619426295/

  • Hina Chen
    Hina Chen
3 min read
JavaScript

[VueJS] 工具開發心得

首先可以先看一下 Kuro 的投影片,先瞭解一下 VueJS 的基本運作方式,然後就可以收工了(喂 先求不傷身體 專案 Github 在這裡, https://github.com/hinablue/vuejs-gantt 這是隨意寫的工具,程式碼很亂請當作沒看到,謝謝。 再來講究效果 首先你可以參考任何一個 VueJS 的範例,利用他們的結構來建置你所想要的環境。或者你也可以使用 vue-cli 來安裝,也是挺方便的。 $ vue init webpack my-project

  • Hina Chen
    Hina Chen
5 min read
Famo.us

[Famous] New Engine 介紹

Famous 更新之後,完全是一種爹不親娘不認的狀態!除了整個 Github 的專案直接捨棄之外,結構上也完全重新來過一次。看著我之前大費周章寫在 Github issue 上面的那些文章,不免有些難過(淚 這一切都是幻覺,嚇不倒我的! 開發環境 全新的結構跟之前落差太大,所以只好重新介紹一遍。這次 Famous 在開發工具上,直接做了一個 CLI 工具,讓你可以直接使用命令列,來建立你的 Famous 專案。 詳情請見:http://famous.org/get-started.

  • Hina Chen
    Hina Chen
3 min read
JavaScript

[ng] 讓 SVG 在 ng 裡面不 ng

只是工作筆記,想想之後一定會忘記這件事情,所以就記錄一下。大抵上就好像是,明知道 transform 搭配 position: fixed 會有雷,然後我還是傻傻的踩下去一樣。 關於上面提及的雷,可以參考 這裡,並不是每一種瀏覽器都會這樣,不過就是 Chrome/Firefox 會爆炸就是了。 這種時候要讚揚一下 IE11,他在搭配使用的時候,fixed 還是 fixed,並不會因為 transform 而有所改變。 只是說,有沒有改變到底是不是要依照 w3c 說的那樣,這個留給後人繼續發掘了(

  • Hina Chen
    Hina Chen
4 min read
筆記

[ng] 從實例來看 ng 應用程序架構

為了避免腦袋久了變成水母,所以趁現在記憶鮮明的時候先寫下來,這樣以後被起底才會有東西可以爆料。AngularJS 也不算很新,現在大家都在玩 ReactJS 了,反觀我自己關心的 Famo.us 草都這麼高了(比畫胸口 希望有時間回去整理 Famo.us 啊(遠目 參考 Gantt chart component for AngularJS 架構規劃 粗略說明一下, core 核心的檔案都可以放在這裡面 logic 屬於邏輯的程式放這裡 ui 屬於使用者介面處理的程式放這裡 gagawulala.

  • Hina Chen
    Hina Chen
5 min read
筆記

[天真] Angular + $compile + ng-bind-html 你看看你

自從我膝蓋中了一箭,AngularJS 什麼的就全部都忘光光惹!本來還天真的以為 ng- 天下無敵,結果本來想偷懶直接 ng-bind-html 然後惡搞一下,結果就 GG 惹! 具體的需求與作法大概是, content 是由使用者產生的 HTML 內容,無法有統一的樣版。 $alert() 透過特殊的 Service 來呼叫一個燈箱,燈箱中顯示 content 內容。 ng-bind-html 雖然可以透過 $sce 來產出,不過餵給他基本上沒什麼效果。 $compile 可以用他來重做一次 HTML

  • Hina Chen
    Hina Chen
2 min read
Famo.us

[Famo.us] inputs 模組 Part 2

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github 接續著講滑鼠、觸控等其他的模組。 MouseSync 顧名思義,就是跟滑鼠控制相關的同步事件模組,預設值有以下項目, MouseSync.DEFAULT_OPTIONS = { direction: undefined, // 方向 rails: false, // 指定單一方向移動 scale: 1, // 滑鼠軌跡放大倍率 propogate: true // 在文件中加入 mouseleave 事件監聽 }; 常數 這兩個常數是給 direction 所使用的,

  • Hina Chen
    Hina Chen
4 min read
Famo.us

[Famo.us] inputs 模組 Part 1

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github 在 Famo.us 當中,提供了不少關於輸入(input)的模組,主要是用於接收使用者的操作輸入,諸如滑鼠、捲軸、觸控等等。 輸入控制 常見的輸入控制,除了滑鼠與觸控外,捲軸與手勢動作也包含在這些模組當中,主要有下列輸入模組可以使用, 非輸入模組 Accumulator 累加器,他提供一組累加功能,單純的使用 setter/getter 來加入或是取得你所累加的數字(或是數字陣列 TouchTracker 追蹤觸控輸入,

  • Hina Chen
    Hina Chen
3 min read
Famo.us

[Famo.us] SlideShow 模組開發

[UPDATE] Famo.us 官方已捨棄此模組,所以本範例只能在舊有的 Famo.us 上面運行,詳情請看官方 Github 身為農夫,種點菜也是很合理的。 Slideshow 概念是這樣,我們利用左右兩邊的頁面來置換中間的頁面,所以只需要兩段 Transform 來做這個動作。這個東西其實用 Famo.us 幾個模組就能兜出來,只是為了方便起見,所以才把它打包成模組方便使用。 Famo.us 模組 由於 Famo.us 是使用 AMD 的方式來載入外部組件,

  • Hina Chen
    Hina Chen
4 min read
Famo.us

[Famo.us] Event 核心與模組介紹

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github EventHandler, EventEmitter 這兩項核心很常出現在其他的模組當中,主要是負責事件控制、監聽與觸發,但是他跟 DOM 就沒有關係,單純的是綁在模組或是元件上面。 EventEmitter 核心 是 EventHandler 核心所依賴的核心(沒有之一,用於將事件往下擴散(或是將其子元件事件綁定在自己身上。 方法 emit(type, event) 觸發一個事件 type,並將該方法傳送到底下所屬的所有子處理程序 on(type, handler)

  • Hina Chen
    Hina Chen
5 min read
Famo.us

[Famo.us] RenderNode 核心說明

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github RenderNode 算是整個 Famo.us 對於元件樹狀結構的核心,他專門用來處理你的元件,在樹狀結構中應該要怎麼長是靠他來處理。 RenderNode 核心 這個核心很特殊,你應該也幾乎沒有機會能直接使用他。他的初始化必須要是一個可渲染(renderable)的元件,而這個元件經過初始化後,自身就會轉換成 RenderNode 物件,來提供給 Famo.us 的引擎去做渲染動作。 什麼叫做可渲染元件?官方定義的有, core/Group core/

  • Hina Chen
    Hina Chen
3 min read