Interview3

最新推荐文章于 2020-06-18 18:52:32 发布

Wang_0_

最新推荐文章于 2020-06-18 18:52:32 发布

阅读量161

点赞数

分类专栏： Interview

本文链接：https://blog.csdn.net/Wang_0_/article/details/78814176

版权

Interview 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一面

1.跨域

（1）document.domain+iframe（主域相同的时候才能使用）

在www.a.com/a.html中
document.domain='a.com'; var ifr=document.createElement('iframe'); ifr.src='http://www.script.a.com/b.html'; ifr.display=none; document.body.appendChild(ifr); ifr.onload=function(){ var doc=ifr.contentDocument||ifr.contentWindow.document; //在这里操作doc也就是b.html ifr.onload=null; }
在www.script.a.acom/b.html中
document.domain=’a.com’

(2)动态创建script

    function loadScript(url,func){
       var head=document.head||document.getElementByTagName('head')[0];
       var script=document.createElement('script');
       script.src=url;
       script.onload=script.onreadystatechange=function(){ 
       if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
    func();
    script.onload=script.onreadystatechange=null;
         }
       }
       head.insertBefore(script,0);
    }
    window.baidu={
      sug:function(data){
         console.log(data)
         }
  }
  loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log(loaded)})

（3）location.hash+iframe

  //  a.com/cs1.html
  function startRequest(){
    var ifr=document.createElement('iframe');
    ifr.style.display='none';
    ifr.src='http://www.cnblogs.com/lab/csript/cs2.html#paramdo';
    document.body.appendChild(ifr);
    }
    function checkHash(){
       try{
        var data=location.hash?location.hash.substring(1):'';
        if(console.log){
        console.log('Now the data is '+data);
            }
         }catch(e){}
    }
    setInterval(checkHash,2000)
 //cnblogs.com/cs2.html
 switch(location.hash){//模拟一个简单的参数处理操作
     case '#paramdo':
     callBack();
     break;
     case '#paramset':
     break;       
 }
 function callBack(){
    try{
     parent.location.hash='somedata';
        }catch(e){
        var ifrproxy=document.createElement('iframe');
        ifrproxy.style.disolay='none';
        ifrproxy.src=''http://a.com/test/cscript/cs3.html#somedata'; 
        document.body.appendChild(ifrproxy)
        }
  }
  //com/cs3.html
  parent.parent.location.hash=self.location.hash.substring(1)

（4）window.name+iframe

name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的name值（2MB）

```
        //1.创建a.com/cs1.html;
        //2.创建a.com/proxy.html
        <head><script>
        function proxy(url,func){
        var isFirst=true;
        var ifr=document.createElement('iframe');
        var loadFunc=function(){
           if(isFirst){
              ifr.contentWindow.location='http://a.com/cs1.html';
              isFirst=false;
               }else{
                 func(ifr.contentWindow.name);
                 ifr.contentWindow.close();
                 document.body.removeChild(ifr);
                 ifr.src='';
                 ifr=null;
               }
           }
           ifr.src=url;
           ifr.style.display='none';
           if(ifr.attachEvent) ifr.attachEvent('onload',loadFunc);
           elsee ifr.onload=loadFunc;
           document.body.appendChild(iframe);
        }
        </script>
        </head>
        <body>
           proxy('http://www.baidu.com/',function(data){
        console.log(data)
       })
        </body>
        //b.com/cs1.html
        window.name='要传送的内容'
```

（5）postMessage（HTML5中的XMLHttpRequest Level 2中的API）

  //a.com/index.html中的代码
      <iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
    var ifr = document.getElementById('ifr');
    var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样
                                        // 若写成'http://c.com'就不会执行postMessage了
    ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>
// b.com/index.html中的代码：
<script type="text/javascript">
window.addEventListener('message', function(event){
    // 通过origin属性判断消息来源地址
    if (event.origin == 'http://a.com') {
        alert(event.data);    // 弹出"I was there!"
        alert(event.source);  // 对a.com、index.html中window对象的引用
                              // 但由于同源策略，这里event.source不可以访问window对象
    }
}, false);
</script>

（6）CORS

原理：使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应式应该成功还是应该失败。

ie对CORS的实现时xdr

 var xdr=new XDomainRequest( );
 xdr.onload=function(){
   console.log(xdr.reponseText);
}
xdr.open('get','http://www.baidu.com');
xdr.send(null)

其他浏览器的实现就在XHR中

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
  if(xhr.readyState==4){
     if(xhr.status>=200&&xhr.status){
             console.log(xhr.reponseText)
        }
     }
  }
  xhr.open('get','http://www.baidu.com')
  xhr.send(null)

实现跨浏览器的CROS

function createCORS(method,url){
 var xhr=new XMLHttpRequest();
 if('withCredenTials' in xhr){
        xhr.open(method,url,true)
    }else if(typeof XDomainRequest!='undefined'){
      var xhr=new XDomainRequest();
      xhr.open(method,url)
   }else{
     xhr=null;
    }
   return xhr;
}
var request=createCORS('get','http://www.baidu.com')
if(request){
    requset.send()
  }

（7）JSONP

     function handleResponse(response){
console.log('The responsed data is: '+response.data);
}
var script = document.createElement('script');
script.src = 'http://www.baidu.com/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({"data": "zhe"})*/
//原理如下：
//当我们通过script标签请求时,后台就会根据相应的参数(json,handleResponse),来生成相应的json数据(handleResponse({"data": "zhe"})),最后这个返回的json数据(代码)就会被放在当前js文件中被执行,至此跨域通信完成
缺点：    安全问题(请求代码中可能存在安全隐患，要确定jsonp请求是否失败并不容易

（8）web sockets
web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。
只有在支持web socket协议的服务器上才能正常工作。
```
var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){
    var data = event.data;
}
```

2.redux的使用
3.props改变子组件会更新吗
4.子组件能改变从父级传进去的props的值吗？（原因说清楚）
5.描述一下react的dom diff算法，原来dom diff的复杂度是什么？怎么优化？
6.ES6中的class用原生的方式重新写（原型链继承）

class A(){
   constructor(){
     this.a=1
  }
  test(){
      console.log('test')
   }
}

7.输出结果和原因

  var a=[1,2,3]
  var b=a;
  b.push(4);
  console.log(a);
  console.log(b)

8.在实际项目中用过node吗？是自己搭建node服务吗？了解的其他node框架有哪些？
9.nodejs怎样去寻找它引用的依赖的？
- 分级查找，现在当前文件夹下找，再逐层递归
10.说下安装依赖npm、yarn的区别
- yarn的package锁定，避免兼容性问题
- package.json版本号的问题
```
  'react': '^1.1.0',
  'react': '1.1.0',
```
11.下面两个命令的区别
- npm init
- npm init -y
12.canvas的原理
13.网页动画性能优化
14.介绍一个值得说的项目
15.Css样式布局
16.固定定位，绝对定位
17.千位分隔符的原生实现

二面

1.单页应用（SPA）和多页面应用相比哪个更好？为什么？
- 单页应用的优缺点
  - 优点
  1.具有桌面应用的即时性，网站的可移植性和可访问性
  2.用户体验好，快，内容的改变不需要重新加载整个页面，web应用更具有响应性和更令人着迷。
  3.基于上面一点，SPA相对服务器压力小
  4.良好的前后端分离SPA和RESTFUL架构一起使用，后端不再负责模板渲染，输出页面工作，web前端和各种移动端地位对等，后端API通用化
  5.对前端人员JavaScript技能要求更高，促使团队技能提升
- 缺点
  
  1.分功能模块的鉴权不好实现
  2.不利于SEO
  3.初次加载耗时相对增多
  4.导航不可用，如果一定要导航需要自行实现前进，后退
- 多页应用的特点
  
  1.页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上
  2.页面间的数据传递依赖URL，cookie或者localStorage，实现麻烦
  3.适用于需要对搜索引擎友好的网站

2.使用react、vue开发与传统框架相比的好处是什么？
3.怎么实现双向绑定？
4.实现一个注册为什么用post，不是get？

Wang_0_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Interview3

一面1.跨域2.redux的使用3.props改变子组件会更新吗4.子组件能改变从父级传进去的props的值吗？（原因说清楚）5.描述一下react的dom diff算法，原来dom diff的复杂度是什么？怎么优化？6.ES6中的class用原生的方式重新写（原型链继承）class A(){ constructor(){ this.a=1 } tes
复制链接

扫一扫