Programming Language Notes

  我們前一篇介紹了「 【Web系列】訂閱技術的基石，RSS Feed是什麼？ 」，相信也對於訂閱的機制具備一定的認識了，雖然RSS已經能夠滿足我們訂閱的一些基本需求，但由於主要的訂閱端還是定期去檢查更新資訊，因此假設我們想要在最短時間內掌握最新資訊時，仍會有一些延遲，再者也非常浪費頻寬。 我們為什麼不能改變做法？ 讓通知的決定權交給發佈商，當發佈商更新文章、影片時，主動通知所有訂閱者，相信這樣的模式會更加節省頻寬的浪費，這也就是為什麼我們今天要來談談Webhook的原因。 Webhook到底是什麼概念？ 說到底就是一種「事件驅動」的設計，而什麼是「事件驅動」呢？ 舉例來說就是： 「當(發生什麼事件)時(請主動通知我)」，那被通知的那一方要做什麼事情就跟主動通知方無關了，藉由這樣的設計減少核心系統的複雜程度。 圖片來源 主要的背後運作流程是這樣的： 註冊事件通知資訊。 事件發送時，根據註冊資訊進行通知。 帶來了什麼樣的改變？ 圖片來源 相信上圖聰明的我們應該已經知道帶來了什麼改變，中間減少了好幾次的溝通，對於我們現今複雜的系統架構下，減少了頻寬的浪費，讓我們整體運作上更有效率。 需要思考的幾個問題 通知的過程中發生問題怎麼辦？ 對於主動通知方來說，除了要加強重試機制之外，或許可以將未收到回應的事件先放在某個地方，而訂閱端也可以定期去檢查哪些事件是失敗的，然後應該去哪裡獲得最新資訊，或進行什麼樣的補救措施。 通訊過程安全嗎？ 其實就想像成一般系統的傳輸一樣，也被需加上加密傳輸通道SSL，讓過程更加安全。 需要授權或認證嗎？ 我想我們也不希望任人都能夠註冊進行訂閱吧！所以註冊事件時，最好也能夠加上一個通行證的核發機制，透過這樣的通行證，作為彼此之間的祕密口號。 結語 越趨複雜的系統架構之下，傳統的設計方式已經不敷我們使用了，而這種方式正好解決了頻繁詢問的效能問題，讓整體更有效率，其實套用到我們現實生活也是非常實用，感興趣的消費者向我們訂閱資訊，我們只要對於這些感興趣的消費者投遞廣告即可，取代廣發，或者是讓使用者定期來詢問。 📝 Web微知識系列文章 【Web微知識系列】 關於Web的同源政策(Same Origin Policy) 【Web微知識系列】 跨來源資源共用（Cross-Origin Resource Sh

  什麼是RSS Feed？ 我們常常在聽的Podcast、看的Youtube都有提供訂閱的機制，那這個訂閱的背後到底是怎麼做的呢？ 讓我們一起來了解看看吧！ RSS的全名是Really Simple Syndication，中文又稱為「非常簡單的集合體」，而Feed就是餵食的意思，相信光聽名字還是一頭霧水對吧！ 這麼說好了，集合體指的是分享與傳送，那整個RSS Feed主要目的是將最新消息主動通知給訂閱者。 RSS的運作機制 圖片來源 訂閱端通常都會有RSS閱讀器，透過解析資料交換格式將內容呈現於閱讀器，而訂閱之後，訂閱端可以定期更新內容，載入時則載入最新內容，如此一來我們就能透過閱讀器觀看感興趣的最新內容。 為什麼Podcast需要RSS Feed？ 圖片來源 ⭐ 透過以上的機制，讓更新的部分自動化同步，將寶貴的時間花費在創作上。 我們可以透過RSS Feed來做什麼？ 模式帶來什麼改變？ 假設我們常常逛某個部落格網站，而對於該網站的內容也非常的感興趣，每天都會上來看看這個部落格做了什麼更新，但其實部落格的作者並不會每天更新文章，而我們想要第一時間瀏覽新聞章時怎麼辦呢？ 除了每天勤奮的上來看一下，好像也沒有其他的辦法了對吧！ 除非我們跟作者很熟，那就另當別論了。 這時候RSS Feed就可以發揮作用了，我們可以藉由RSS的標準格式，搭配設計好的閱讀器，定期去幫我們抓取最新資訊，一旦資訊有更新時就能在短時間內獲得最新資訊，而對於平台來說也不用一個一個去通知，而是讓有興趣的人自行訂閱，將決定權交還給用戶，而非強迫推銷。 推薦幾個不錯用的RSS平台 Feedly https://feedly.com/ 第三方平台登入： Facebook、Google。 標籤分類。 輸入網址自動抓取。 筆記本分類模式。 搜尋功能，直接搜尋就能找到想要訂閱的主題。 可惜的是需要收費。 RSSMailer https://briefcake.com/rssmailer 透過平台訂閱後，只要有最新資訊就會發送到我們的email。 每天發送一封郵件。 提供免費版服務。 付費版有提供消息的優先順序、自訂發送時間、無限的主題。 📝 Web微知識系列文章 【Web微知識系列】 關於Web的同源政策(Same Origin Polic

數據的時代，如何有效率的搜尋來找到我們要的答案？這時候就要透過一些資訊檢索的技術來幫我們提升效率了，而本篇會介紹索引的基本概念以及為什麼演化至倒排索引，為我們帶來了哪些好處？ 索引只是搜尋檢索的一個環節，未來的幾個篇章我們也會逐一介紹我們目前使用的搜尋引擎如何聰明的知道我們想要什麼？ 那我們就趕緊進入主題吧！ 什麼是索引？ 相信我們都知道書籤的作用吧！ 書籤就是透過標題或是摘要定位到正確頁數或者文件位置的一種標記方式，透過這種方式大幅度的減少我們掃過整本書的時間，我們只要記住這個摘要，就能精確地找出我們需要的檔案，但是有發現一個問題嗎？ 假設我想要找文章中的某個片段時，是不是就不容易達到我們的目的了？ 這時候就需要有倒排索引(Inverted Index)的技術來幫我們實現了！ 那什麼又是倒排索引？ 能解決什麼問題呢？ 當資料隨著時間遞增，越來越繁雜時，我們都知道要找到正確的資料是一件不容易的事， 以前我們可能需要逐頁翻找， 後來加入了書籤功能， 透過標題、群組整理濃縮的方式，快速定位到目標，但是這仍遠遠不夠，那可以怎麼做呢？ 答案就是透過倒排索引(Inverted Index)的方式，將每一個文件的內容以詞的方式切割，成為書籤的標記方式，如下圖： 檢索時有什麼幫助呢？ 假設我們今天要找蘋果，那麼只要輸入apple，就能得到文件1與文件2都出現蘋果，我們再想的更深入一點，假設每個書籤再多記錄這個詞出現在文件中的哪個位置，那麼我們是不是可以搭配更強大的搜尋方式，以「一個蘋果」為例，我們可以搜尋「an apple」，透過這樣有順序的表達詞語，我們就可以非常語意化的來搜尋文件位置。 看到這邊，相信大家已經非常清楚倒排索引為我們帶來了什麼樣的巨大改變，讓我們從原本很固定的搜尋方式，可以透過更聰明、符合人性的搜尋方式來查找文件，甚至可以加入距離的限制條件，讓我們更精準的找到目標。 為什麼更快更精準？ 事前建立機制，再記錄之前就先進行斷詞索引，讓後續的搜尋更加省工。 索引額外記錄了位置資訊，檢索時透過詞與詞的順序、位置...等限制條件來精準找到目標。 結語 數位時代的來臨，我們許多的資料都轉移到網際網路，相信在大數據的環境下，傳統的檢索方式也不敷使用了，因此才會演進更有效率的檢索方式。 而這項技術也是許多搜尋引擎的底層實現方式，例如： Lu

  常常我們可以看到es6語法出現了 ... 這樣子的符號, 而 ... 本身就具有無限想像的意思, 因此被設計為擴展的用途。 情境一: 擴展元素到函數的參數 const add = ( a , b ) => { return a + b ; }; const nums = [ 1 , 2 ]; add (... nums ); // 又等同於 add ( 1 , 2 ); 情境二: 串接陣列 const a = [ 1 , 2 , 3 ]; const b = [ 4 , 5 , 6 ]; const c = [... a , ... b ]; console . log ( c ); // [1,2,3,4,5,6] // 又等同於 const d = a . concat ( b );

  簡化物件的返回值 const request = () => { const code = 200 ; const body = "ok" ; return { code , body }; } console . log ( request ()); // { code: 200, body: "ok"} 定義物件的時候其key值也可以加入邏輯判斷、運算 const flag = true ; const name = 'john' ; const n = 1 const obj = { [ name + n ] : 18 , // { john1: 18 } }

  樣板文字用反引號表示: ``, 如下: const html = '<div>' + template . link + '</div>' ; 等同於 const html = ` <div> ${ template . link } </div> `

  ES6的解構賦值是一種非常便利的語法糖果, 可以想像成分解一個物品再套入到新的集合, 取值的部分不需要多餘的轉換, 讓程式碼更加簡潔。 概念 主要從object、array這類的集合提取值再指定到新的變數。 原本只能藉由迴圈來取值, 且要藉由index條件來中止, 使用起來較不便利。 const [ code , body ] = [ 200 , { "message" : "ok" }] console . log ( code ); // 200 console . log ( body ); // { // "message": "ok" // } // 物件的解構賦值 const { user , password } = { "user" : "john" , "password" : "123" }; console . log ( user ); // john console . log ( password ); // 123 應用 swap功能, 交換兩個變數時 原本我們需要這樣 let a = 1 ; let b = 2 ; let tmp = a ; a = b ; b = tmp ; 用es6可以這樣 let a = 1 ; let b = 2 ; [ a , b ] = [ b , a ]; 設計一個function接收多個參數值時 const sum = ( ... params ) => { console . log ( params ); // [1,2,3,4.......more]; return params . reduce ( ( r , p ) => r + p , 0 ); }