前端的一些问题

1. 面向对象

2. 闭包

3. display:inline-block有间隙怎么处理

4.node.js
5. express.js

6.apply/call区别

7.css有哪几种选择器

8.react原理

9.说一下mvc框架

10.http https区别

11.原生ajax实现步骤

<html>

<head>
    <meta charset="UTF-8">
    <title>test $.ajax</title>
</head>

<body>
    <p id="resp"></p>
    <br />
    <div id="app"></div>
    
    <script>
    var $ = (function() {
        function _xhr() {
            return new XMLHttpRequest();
        }
        function param(data) {
            return Object.keys(data).map(function(key) {
                return key + '=' + data[key];
            }).join('&');
        }
        function ajax(o) {
            var request = _xhr(),
                type = o.type ? o.type : 'GET',
                url = o.url,
                success = o.success,
                dataType = o.dataType ? o.dataType : "text/html",
                data = o.data ? o.data : {};

            request.open(type, url, true);

            request.onload = function() {
                if (200 <= request.status && request.status < 400) {
                    var resp = request.responseText;
                    dataType === "application/json" ? 
                        success(JSON.parse(resp)) : success(resp);
                } else {
                    typeof o.fail === "function" && o.fail();
                }
            }
            request.onerror = function() {
                typeof o.error === "function" && o.error();
            }
            if (type === "POST") {
                request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                request.send(param(data));
            } else {
                request.send();    
            }            
        }        

        return {
            ajax: ajax,
            param: param
        }
    })();

    // test
    $.ajax({
        type: 'GET',
        url: "http://www.tfjyzx.com:9999/system/school/archive",
        success: function(resp) {
            document.getElementById("app").innerHTML = resp;
        },
        error: function() {
            onsole.error("There was a connection error of some sort");
        },
        fail: function() {
            console.error("We reached our target server, but it returned an error");
        }
    });

    $.ajax({
        type: 'POST',
        url: 'http://www.tfjyzx.com/student/login',
        data: {
            username: 'gmy12345',
            pwd: '123456',
            count: 1,
            captcha: ''
        },
        success: function(resp) {
            document.getElementById("resp").innerHTML = resp;
        }
    });
    // {"result":1,"cause":"登录成功！","school":"许昌市新区实验学校","sessionId":"0F3EABC86A3FF1C034138F819DDDCDFD"}

    
    </script>
</body>

</html>

test $.ajax

12.require.js原理

13.ajax/jsonp区别, jsonp原理

14.为什么大部分网站css/js/img分不同域名引入

15.页面重构分3个步骤说说看

16.优化页面性能有哪几种方式

17.事件监听

18.js上拉加载和下拉刷新实现的方法

19.ES6语法新特性

=====================

复制粘贴一篇文章到这里:

=====================

笔试

面试前要先做一份笔试题，题目大概是：

1、爬虫引擎是怎样抓取页面的

2、浏览器渲染页面的过程

用户输入URL地址
浏览器解析URL解析出主机名
浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表没有的话再向浏览器默认的DNS服务器发送查询请求同时缓存）
浏览器将端口号从URL中解析出来
浏览器建立一条与目标Web服务器的TCP连接（三次握手）
浏览器向服务器发送一条HTTP请求报文
服务器向浏览器返回一条HTTP响应报文
关闭连接浏览器解析文档

网上找的标准答案，自己答得也是这么个意思，但是没这详细。

3、异步编程的四种方法

看到这题瞬间感觉阮老师简直就是中国前端界的教父级人物啊，面试官的理想答案应该是阮老师这篇文章：Javascript异步编程的4种方法。自己特地看过，也总结在我的面试题总结里面了：前端面试偏门题总结（https://www.bougieblog.cn/article/Qk9VMTlHSUU.html）。但是记性太差还是答偏了，心里恨啊。

4、解释同步\异步、阻塞\非阻塞、并行\并发之间的区别

这里补充一下并行和并发：并行是指运算中的两件或更多件事情在同一时刻发生。实事求是地说，这种情况只会在系统CPU拥有两个独立核心时发生，这样在任何时刻才会有不同的电脉冲信号发出。并发意味着至少两件事务在同一时间段发生。但注意，这里的事务是（高级的）任务，而不是（低级的）操作。所以，请分清并发和并行。

5、js实现数值千分位

头条笔试碰到过了： number.toLocaleString()

6、多语言网站建设应注意哪些事项？

一开始以为多语言是 python、 java、 php啥的，后面面试官说是各个国家语言。

7、React非父子、兄弟组件传值

状态管理：Redux、Mobx等等。

8、"123456789876543212345678987654321..."的第n位是什么？

function getNum(n) {
let num = 0, flag = true
for(let i = 0; i < n; i++) {
if(num === 1) flag = true
if(num === 9) flag = false
flag ? num++ : num--
}
return num
}

时间有点紧不小心把 i<=n写成 i<n了，尴尬，怪自己不细心吧。

时限是20分钟，还有两三题记不清了。

面试

面试官很亲切，说话很流畅并且肯定，感觉是个知识体系非常齐全的大牛。以下题目顺序并不是面试官问的顺序：

1、浏览器打开一个页面前端缓存了哪些东西？

我：后端通过设置响应头 CacheControl设置资源过期时间，用于缓存一些静态资源

面试官：还有呢

我：DNS缓存

面试官：后端缓存了什么

我：缓存了session

面试官：还有呢

我：...答不上来了

2、说一下vue的生命周期

一年的Vue不是白用的，顺利从 beforeCreate到 destroyed过了一遍。

3、你的博客用的是Koa，Express用过吗？

我：用过，我的个人博客本来用的是Express，后面改成Koa了

面试官：为什么要改？Express不好用吗？

我：Koa的路由用async和await处理，不会陷入回调地狱

面试官：Express的路由也可以封装成async\await，自己试过没有？

我：没有。。。

4、你的博客用的什么服务器？

我：用的Node服务器，pm2做进程守护的

面试官：代码直接放上去运行的还是编译后运行的

我：（一脸懵比，脚本语言还能编译？？？）直接运行的

面试官：服务器是什么系统的？

我：windows sever...（感觉面试官笑了）

后来查了一下，segmentFault的大佬们也说Node JS不用编译：运行在服务端的Node.js代码需要编译吗？（https://segmentfault.com/q/1010000009607720/a-1020000009607917），好想追问一下面试官到底怎么编译啊。

5、有没有自己实现过Promise？

看了不少文章，自己也写过了，但问到细节还是答烂了。

6、有没有写过Webpack插件？

我：没有...

7、new 一个对象后发生了什么？

8、写过响应式网站吗？

我的个人博客就是响应式的，主要说了媒体查询和rem控制字体大小。

9、说一下原型和原型链

10、有没有自己写过比较复杂的正则？

11、有没有封装过axios？

12、前后分离的系统，一个请求出错了，如何中断其它请求？

13、如何在axios中添加登陆验证？

14、rollup了解过没？

15、为什么rollup打包赘余代码比较少？

16、有没有结合原生封装过RN组件？

17、为什么用高德地图不用百度地图？

18、怎样在Android Studio中对React Native的js代码进行断点调试？

posted @ 2018-07-27 09:56 zhanghui_ming 阅读(218) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端的一些问题

笔试

面试

公告