正向代理與反向代理差異

因為偶爾會有機會接觸到nginx一直不清楚當中反向代理跟正向代理的真正意思，也只知道nginx可以當作大多的伺服器與負載平衡用，也很多作為反向代理的作用，至於是什麼我們來說說吧

首先我們看張圖

正向代理

正向代理比較像是一個中間服務器就像是一個中繼站，例如client端像目標server端發出請求，中間透過了正向代理跟server端取得資料返回給client端，client端這邊就需要做些設置才能使用．

反向代理

反向代理就是相反的意思，主要是把反向代理當作伺服器，由client端直接跟反向代理要求資料，由反向代理決定資料該走向何處，就像是個接口一個伺服器．

區別

正向代理需要手動設置代理伺服器IP指定代理去跟目標server端要取資料，反向代理則就跟一般一樣去跟目標server要資料只是中間透過反代理伺服器所以真實伺服器是不可見．

使用情境

正向代理可以隱藏我們client端自身因為我們是透過正向代理去跟目標server端要取資料，今天我們client端可能被封鎖限制某些網站不能進去，但是我們正向代理卻可以，就可以透我們正向代理去跟目標server要資料就是我們俗稱的翻牆．

反向代理就可以做到很多事情我們最熟知的就是平衡負載，其他就例如隱藏目標server壓縮緩存內容當中繼站，可以達到存取資料加速．

Youtube Download Antd-Vue + Nodejs 簡單練習

看到Facebook就有人在問ui套件該怎選擇，我留了

其實每個專案最後都會自己受用的技術跟ui框架，用別人的ui框架小功能開發當然快，但是一複雜就是會受限於功能上，最後這些問題下導致拖累開發速度，另一方面自己如果能學習開發框架的能力及技術當然總有一天自己也可以成為別人的巨人．

回到標題
這麼愛寫功能練習的我假日用了大概2小時簡單寫了個  Antd-Vue + Nodejs 為server的Youtube下載的功能，主要antd我沒這麼熟悉也常常看到有人在推崇就試著寫看看，果然用別人寫好的東西就是快，但是我覺得相對會有很多限制css跟一些版型上的問題，也會造成很多人再用但是卻實際根本不知道怎寫的情況．
Node這邊用了youtube-dl去解析youtube的資料做顯示分析各種資料格式可以供使用者直接下載，當然還有轉檔功能youtube-dl也都可以做到．

我有部屬到Heroku 有興趣可以看一下
https://youtubego.herokuapp.com/

Vue-virtual-scroll 虛擬滾動實作

前言
我們常常在開發畫面往往遇到最頭痛的問題就是效能問題，一個好的功能如果沒有流暢的操作畫面，我想寫得再多功能也是於事無補，特別是在使用v-for時 如果我們要渲染幾萬筆資料往往是畫面還沒出來就先卡住了，更何況是Mobile版本，所以就有了我們的virtual-scroll，這邊我就寫個簡單的範例，一方面也當作練習，廢話不多　我們先看實現效果

可以發現我們可視的畫面是固定的我們卻可以實現大量list效果的顯示

思路
例如我們有一萬筆資料 我只想每次渲染五筆 這時候第一步我們需要個虛擬的主要是要顯示我們的卷軸用這個 例如一萬筆高度乘以每筆30px ，再來高度有了 每五筆的渲染呢 就是要透過我們每次捲動時計算scrollTop在這個位置時我們的資料畫面的第一筆至第五筆的是在第幾筆資料的可見區域進行渲染，簡單講就是我們卷軸再捲時我們再透過translate調整Y軸固定我們顯示的位置，我知道這樣講解可能不太清楚我們就直接看程式碼吧 我也有放在我的github(https://github.com/MarsCaiWORD/Vue-virtual-scroll)

Vue雙向綁定的原理&實現

前言

Vue也寫了這麼久了對雙向綁定原理也是有點一知半解，就來實際操作JavaScript寫個簡單版Vue雙向綁定功能，了解語言的底層運作的話以後各種開發情境甚至自己開發前端framework都是有利的．

雙向綁定原理

我們可以先可以先建立個我們一般new vue的方法然後這邊我們console出我們的資料觀察



可以發現我們a屬性下還有我們相對應的get() set()的方法熟悉我們javascirpt原生的朋友一定可以猜出vue是透過Object.defineProperty()為底層監控我們的資料的異動然後實現我們雙向綁定的原理，我知道可能很多人還不知道Object.defineProperty()這邊就寫個簡單的範例
btw. ES6新出的Proxy也可以可以達到同樣的效果

Vue架構

首先我們都知道Vue是基於MVVM的架構如下圖，分別為View,ViewModel,Model，這麼做有什麼好處呢，我們知道以前也有個MVC的架構，在MVC架構下我們元件都是共用在複雜邏輯的畫面時就會造成以下圖的問題，有時候光要找問題就很頭痛了，所以才衍生出現在有MVVM或是Flux架構，這邊我們我們講Vue就來說說MVVM架構，多個ViewModel就有點像個中繼站負責我們View跟Model之間的橋樑

MVC：

MVVM：

簡單解釋如下：
View：
為我們UI的部分負責呈現我們DOM
ViewModel：
為負責同步View及Model之間的橋樑，讓畫面的更新可以即時同步到資料上
Model：
就是我們的資料

vue實際做法
至於綁定的實際做法細節還分為以下做解釋如下圖






















Observer相當於Model層觀察vue實例中的data數據，當數據發生變化時，通知Watcher訂閱者。

Compile指令解析器位於View層，初始化View的視圖，將數據變化與更新函數綁定，傳給Watcher訂閱者。

Watcher是整個模型的核心，對應ViewModel層，連接Observer和Compile。所有的Watchers存於Dep訂閱器中，Watcher將Observer監聽到的數據變化對應相應的回調函數，處理數據，反饋給View層更新界面視圖。


實現的簡單代碼如下有興趣的可以去此UP主(http://www.cnblogs.com/canfoo/p/6891868.html)底下會有詳細的解釋跟代碼，實際跑過一輪可以發現很多細節，也對架構整個流程更加了解




參考資料：
http://www.cnblogs.com/canfoo/p/6891868.html
https://segmentfault.com/a/1190000009397476
https://www.jianshu.com/p/d20aa65d89ba

取得Eelement的Css Selectors

有時候我們架構繁雜我們的css可能不像現在有前端這些framework整理好我的css
透過簡單的code去查詢我們element身上的css selectors，邏輯大致上是透過我們的document.styleSheets再去跟物件本身做逐一比對，最後可以列印出我們這個element身上有綁哪些css selectors

HTML:

  <ul>
     <li class="myclass" id="myli">Hello</li>
  </ul>

CSS:

.myclass{
   color:red;       
}
li.myclass{
   background-color:black;
}
ul li{
   float:left;
}

a{
   float:left;
}

Script:

function css(a) {
    var sheets = document.styleSheets, o = [];
    a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.matches(rules[r].selectorText)) {
              console.log(rules[r])
                o.push(rules[r].selectorText);
            }
        }
    }
    return o;
}

document.addEventListener('click',function(e) {
console.log(css(e.target));

})

console.log(css(document.getElementById('myli')));