【練習】手機號碼格式

最近在公司的案子中,需要在輸入手機號碼時,自動將格式帶成 09XX XXX XXX

在 codepen 找了很久,好不容易找到一個使用原生 Javascript 寫的方式,但忘記存連結了….只有稍微改過的 code 如下

document.getElementById('phone').addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,4})(\d{0,3})(\d{0,3})/);
  e.target.value = !x[2] ? x[1] : (x[1] ? '' + x[1] : '') + (x[2] ? ' ' + x[2] : '') + (x[3] ? ' ' + x[3] : '');

});

 

本來想抄一抄改一改可以用就好(喂),剛好當天晚上看 老闆 來點寇汀吧。 Boss,CODING please. 的直播影片 剛好講到一些 match 的使用,雖然還是有點有聽沒有懂,但卻讓我想好好瞭解它了。

在 match 之前,還得先知道 replace 裡面的「/\D/g」是什麼….沒錯我連這個都還不知道XD 雖然在 php 裡面好像偶爾會看到,但一直沒有好好把它理解一下。

/\D/g」拿去餵了 Google ,看到了他是「正規表達式」中的其一,稍微看了一下 正規表達式的對照表 ,知道了「/\D/ 」或是「 /[^0-9]/」就是「0~9的數字」的意思,而後面的「g」是 Global search,指搜尋全部,若沒有「g」則只搜尋一個。

正規表達式知道了後,再來是 match。

match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

看來 match 應該就是能夠在字串裡面搜尋特定的字,但返回的值跟 indexOf 的位置不一樣,是返回搜尋到的值。聽起來有點奇怪,但如果搭配正規表達式就可以理解了,下面舉個例子:

var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))

回傳的值為:

1,2,3

在本篇的例子中用了「\d」,表示 match 回傳回來的值會是數字,不過 match 中的大括號我沒查到相關資料,但看起來是把它分成幾個群組。本篇的 match 即是將輸入的值,取數字之後分成三組,分別為 4、3、3 個數字。

以 x 將 match 的值儲存起來,可使用 x[1],x[2],x[3] 分別取出分組後的字串,而 x[0] 則是原本未分組的字串。

本篇例子中的 「!x[2] ? x[1] :」看起來有點像之前看到 if ( ) {  } 的另一種寫法 a : b? c。但其實對這個只有一點點印象,也查不太到…..就算了吧(X) 在另外寫的練習中沒有使用是也可以成功執行啦。

 

稍微研究完之後就磨刀霍霍自己來練習看看囉,懶得架設環境,直接拿 codepen 來動工:

See the Pen phone number by YK KATE (@ykathryn) on CodePen.0

使用鍵盤輸入數字或是按下畫面上的數字都可執行(按鍵盤需要到codepen 頁面才可執行),本來想讓鍵盤的「delete」也能夠刪除一位數字,但在我的 mac 上都無法偵測到按下的事件所以就算了@@

【翻譯】WebAssembly官網文件 – Non-Web Embeddings

原文:http://webassembly.org/docs/non-web/

【Non-WebEmbeddings 嵌入】

雖然WebAssembly是設計在網頁上運行,但他也能十分良好的在不同的環境中運行。包括從用於測試的最小shell到完全成熟的應用程序環境,例如:伺服器、IoT設備或是手機/電腦的APP,甚至可能需要執行嵌入在較大程序中的WebAssembly。

Non-Web環境可以提供與Web環境不同的API,其特徵是測試和動態鏈接將可發現和可用。

Non-Web環境可以包括JavaScript VM(例如node.js),然而WebAssembly也被設計為能夠在不存在JavaScript VM的情況下被執行。

WebAssembly規範本身不會嘗試定義任何大型可移植的libc樣庫。然而,那些功能與在本機libc中找到的函數相似的WebAssembly語義核心,將作為原始運算符的核心WebAssembly規範的一部分。(例如:grow_memory在許多系統中是跟sbrk相似的,在未來將會與dlopen相似)

Web和流行的非Web環境之間存在重疊的地方,可以提出共享的規範,但是它們將與WebAssembly規範分開。JavaScript中的一個對稱示例將是正在進行的Loader規範,這是針對Web和node.js環境提出的,與JavaScript規範不同。

然而,在大多數情況下,預期在源代碼級別實現可移植性,社區將構建從源級接口映射到主機環境的內置功能的庫(在構建時或運行時)。WebAssembly將提供原始構建塊(功能測試,內置模塊和動態加載),以使這些庫成為可能。兩個早期預期的例子是POSIX和SDL。

一般來說,通過保持非Web路徑使其不需要Web API,WebAssembly可以在許多平台上用作便攜式二進制格式,在可移植性,工具和語言不可靠性方面帶來極大的好處(因為它支持C / C ++級別的語義。)

【翻譯】WebAssembly官網文件 – Minimum Viable Product

原文:http://webassembly.org/docs/mvp/

【最小可行性的產品】

正如上述所說的高層級目標,第一個版本旨在成為一個最小可行的產品(MVP)。

這意味著有我們知道我們想要和需要的重要特性,但是post-MVP;這些都在一個單獨的基本post-MVP功能文檔。MVP將會包含現代網絡瀏覽器中可用的功能,並且甚至在移動設備上運行良好,這導致與asm.js大致相同的功能。

MVP的主要設計組件已分解成單獨的文檔:

  • WebAssembly中可分發,可加載和可執行的代碼單元稱為模塊(module
  • 模塊中WebAssembly代碼的行為是根據結構化堆棧機的指令來指定的
  • WebAssembly二進制格式,被設計為由WebAssembly實現進行本地解碼,被指定為模塊結構和代碼的二進制編碼(binary encoding)。
  • WebAssembly文本格式被設計為在使用工具(例如,彙編器,調試器,分析器)時被讀取和寫入,被指定為模塊的結構和代碼的文本投影(textual projection)。
  • WebAssembly設計為由Web瀏覽器(by web browsers)和完全不同的執行環境實現(completely different execution environments.)。