首页 > 笔经面经 > 北森面试凉经

北森面试凉经

头像
玉树临风**
编辑于 2019-12-13 09:03:04 APP内打开
赞 1 | 收藏 2 | 回复1 | 浏览5315
更:二面凉了,我甚至想不起来问了什么问题。
主要针对项目刨根问底,不断追问
只能想起来这些:
1、自我介绍
2、项目中的问题,解决方案,问题原因,解决原理!(这里追问原理,一度尴尬,我怀疑我是不是学了假前端!)
3、for 和 for in的区别,为什么(这里追问了很多,我想不起来了)
4、vue和jquery的区别(vue为什么不操作dom)
5、html,css,js,node你最熟悉哪个
6、js 对一个数组进行排序(成功把自己带入各种排序算法的坑)
7、为什么学前端,学多久了
8、学前端是为了找工作嘛
9、假如让你快速上手一个新技术,你要怎么学
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
北森一面:
太喜欢这个面试官了,很幽默
1、vue双向数据绑定 https://m.php.cn/article/417685.html
2、null和undefined的区别 https://www.jianshu.com/p/991c41bf212a
3、实现一个自适应九宫格
(1) float /  flex(最佳)
<style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }

    .blockDiv {
        width: 100%;
        /* display: flex;
        flex-wrap: wrap; */
    }

    .block {
        float: left;
        width: calc(100% / 3);
        margin-top: -1px;
        margin-left: -1px; 
        height: 50px;
        box-sizing: border-box;
        border: 1px solid #000;
    }
</style>

<body>
    <ul class="blockDiv">
        <li class="block"></li>
        <li class="block"></li>
        <li class="block"></li>
        <li class="block"></li>
        <li class="block"></li>
        <li class="block"></li>
        <li class="block"></li>
        <li class="block"></li>
        <li class="block"></li>
    </ul>
</body>
设置 👇  让边框重叠    calc( ) 计算属性
 margin-top: -1px;
 margin-left: -1px; 
flex-wrap: wrap;  规定灵活的项目在必要的时候拆行或拆列。
(2) 用 table
  <style>
        .container {
            width: 100%;
            line-height: 100%;
        }

        table {
            width: 100%;
            height: 90vw;
            border-spacing: 0;
            border-collapse: collapse;
        }

        td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="container">
        <table>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
👇  collapse:  美[kəˈlæps]
 border-spacing: 0;     各个单元格之间的间隙
 border-collapse: collapse;  将边框合并成一条    
(3) gird  布局
4、浏览器同源策略(笔记在AJAX部分02-ajax.ppt)
跨域是由浏览器的同源策略引起的,是指页面请求的url地址,必须与浏览器上的url地址处于同域上(即域名,端口,协议相同)。

解决跨域问题:JSONP , CORS 缺点严重依赖后端

***,也称正向***,意思是一个位于客户端和目标服务器(target server)之间的服务器,为了从目标服务器取得内容,客户端向***送一个请求并指定目标(目标服务器),然后***向目标服务器转交请求并将获得的内容返回给客户端。 

反向***(Reverse Proxy)方式是指以***服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时***服务器对外就表现为一个反向***服务器。 (nginx)
👇
jsonp的核心原理就是目标页面回调本地页面的方法,并带入参数
👇node服务端设置响应头
 app.use((req, res, next) => {
     res.header('Access-Control-Allow-Origin', '*');
     res.header('Access-Control-Allow-Methods', 'GET, POST');
     next();
 }) 


👇利用浏览器没有同源限制, node第三方模块request, 调用request就可以向其他服务端发送数据,第一个参数是非同源域名,第二个参数是一个回调函数(参数1:错误对象,参数2:响应参数信息,参数3:响应内容)
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 向其他服务器端请求数据的模块
const request = require('request');        
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

app.get('/server', (req, res) => {
    request('http://localhost:3001/cross', (err, response, body) => {
        res.send(body);
    })
});

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');
5、jsonp存储一个二叉树
许愿二面通过!

1条回帖

回帖
加载中...
话题 回帖

相关热帖

近期精华帖

热门推荐