跨域、vue双向绑定相关面试题

  • 时间:2018-10-11 23:25 作者:前端攻城小牛 来源:前端攻城小牛 阅读:156
  • 扫一扫,手机访问
摘要:vue数据双向绑定的实现原理是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。懒加载原理?一般来讲,给图片src配置一个假的地址,同事给增加一个data-url属

vue数据双向绑定的实现原理

是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

跨域、vue双向绑定相关面试题

懒加载原理?

一般来讲,给图片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);
}
});
}
  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
【系统环境|服务器应用】第10题- 你不知道的delete操作符(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部