vue資料雙向繫結的實現原理
是採用資料劫持結合釋出者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的setter,getter,在資料變動時釋出訊息給訂閱者,觸發相應的監聽回撥。
懶載入原理?
一般來講,給圖片src配置一個假的地址,同事給新增一個data-url屬性指向真是url地址,當圖片快要顯示的時候將url地址替換成data-url的屬性。
vue中watch和computed的區別
watch主要作用是監聽路由變化。Computed主要是做計算方法。
前端跨域究竟跨的是什麼?
跨域請求針對瀏覽器的同源策略(Same-Origin Policy)而言,指一個網站主動請求另外一個網站的資源(圖片、javascript、視訊等)。
Nginx反向代理實現跨域
我們只需要配置Nginx,在一個伺服器上配置多個字首來轉發http/https請求到多個真實的伺服器即可。這樣這個伺服器上所有URL都是相同的域名、協議和埠。因此,對於瀏覽器來說這些URL都是同源的,沒有跨域限制。而實際上這些URL實際上由物理伺服器提供服務。這些伺服器內的JavaScript可以跨域呼叫所有這些伺服器上的URL。
簡單說,Nginx伺服器欺騙了瀏覽器,讓它認為這是同源呼叫,從而解決了瀏覽器的跨域問題。
下面給出一個Nginx支援跨域的例子,進行具體說明。
伺服器A(域名:www.hi-linux.com)中有一個頁面,想請求伺服器B(域名:www.imike.me)中的api地址(http://www.imike.me/api)獲取資料。
- Nginx配置
修改配置檔案
server {
listen 80;
server_name www.hi-linux.com;
root /var/www/html;
autoindex off;
index index.html index.htm index.php;
# 將www.hi-linux.com/api的所有請求反向代理到www.imike.me
location ~ ^/api/ {
proxy_pass http://www.imike.me;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ~ /.ht {
deny all;
}
}
複製程式碼
重啟Nginx
/etc/init.d/nginx restart
複製程式碼
- 修改JS程式碼中的地址
function getID(){
jQuery.get("http://www.hi-linux.com/api/GetData?id=1”,
function (data, textStatus){
this; // 在這裡this指向的是Ajax請求的選項配置資訊
if(textStatus=="success"){
jQuery("#CountNum").html(data);
}
});
}複製程式碼