学习的前端技术栈与面试杂记

最新推荐文章于 2023-12-04 11:20:22 发布

weixin_30896511

最新推荐文章于 2023-12-04 11:20:22 发布

阅读量240

点赞数

文章标签：前端面试 json ViewUI

原文链接：http://www.cnblogs.com/NidhoggDJoking/p/11148487.html

版权

未来将要学习的技术栈：

Vue （必修先学）
React（可以晚点学）
react-native（可以最后学）
Node.js（加分项先学）
angluar（可以最后学）
Webpack（要学）
微信小程序开发（必修先学）

以前在公司虽然算的上是全栈，可离职之后发现这个社会更需要的是在一方面顶尖的人才，流水线式的生产，会的多而不精反而成了劣势，从今年开始就从Web前端开始再来一遍，学精在迈下一步，把PHP先放下，Java放下，那些后端语言通通放下，从HTML5，CSS3最简单的开始从头来过，加油。

现在Web面试常见问题：

3月15日今年面试开始的第一天

ES6,7,8,9 的新特性，和常用技术

JS 封装继承多态

JS 原型链，闭包，生命周期

Vue 的生命周期

前端页面的兼容问题与方法

JS面向对象编程思想

Ajax的运行原理和协议

前端开发里的设计模式（大佬级面试秒跪的那种，没必要现在就研究）

箭头函数的this 始终指向全局对象（window）

SEO 优化

盒模型

Position属性四个值：static、fixed、absolute和relative的区别和用法

vue生命周期图表：

Vue生命周期图

vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

GET 请求：一般用来进行查询操作，url地址有长度限制，

请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。

POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

AJAX技术体系的组成部分：

HTML，css，dom，xml，xmlHttpRequest，javascript

JavaScript 的同源策略：

防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

搜索引擎优化

一、内部优化

（1）META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化；

（2）内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接；

（3）网站内容更新：每天保持站内的更新(主要是文章的更新等)。

二、外部优化

（1）外部链接类别：友情链接、博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、站群、

相关信息网等尽量保持链接的多样性；

（2）外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升；

（3）外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。

ajax的缺点：

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

Position属性四个值

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。
可通过z-index进行层次分级，默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点。

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left","top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

instanceof用于判断引用类型属于哪个构造函数的方法

var arr=[];
arr instanceof Array //true
typeof arr //object, typeof是无法判断是否是数组的

事件委托 :

Jquery版：

$("目标们的父元素").on("click","目标对象",function(event){
               var target = $(event.target);
               something....
});

Js原生版：

window.onload = function(){
            var obj = document.getElementById("目标ID");
            obj.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                something......
            } 
        }

改进版：
   
 var lists = document.getElementById("lists");
         lists.addEventListener("click",function(event){
             var target = event.target;
             //防止父元素ul也触发事件(防冒泡)
             if(target.nodeName == "LI"){
                something......
             }
        })

什么是现实！这就是现实

“原生JavaScript精通么？Jquery熟练么？能用上面的两个做出业务框架么？常见的UI框架能不能快速上手？Ajax熟练么？分得清同步异步适用的场景么？HTTP协议了解么？能用这个分析Ajax的应用么？XML、Json会么？被吹上天的react angular Vue会一个么？前端自动化模块化会么？后端的语言你总得会一个吧，不然怎么用接口？如果不会，孩子，说实话北京不缺这样水平的，你找不到工作的。”

今后的人生一步也不能松懈了！

2019年3月16号

鹅厂：

window的onload事件和domcontentloaded谁先谁后？

new和instanceof的内部机制

flex布局

浏览器缓存,HTTP缓存

typeof和instanceof的区别

从输入URL到页面加载发生了什么？

URL到页面加载：

1、浏览器的地址栏输入URL并按下回车。

2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。

3、DNS解析URL对应的IP。

4、根据IP建立TCP连接（三次握手）。

5、HTTP发起请求。

6、服务器处理请求，浏览器接收HTTP响应。

7、渲染页面，构建DOM树。

8、关闭TCP连接（四次挥手）。

Javascript异步编程的4种方法：

一、回调函数

这是异步编程最基本的方法。

假定有两个函数f1和f2，后者等待前者的执行结果。

　f1();

　　f2();

如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。

　　function f1(callback){

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　callback();

　　　　}, 1000);

　　}

执行代码就变成下面这样：

　　f1(f2);

采用这种方式，我们把同步操作变成了异步操作，f1不会堵塞程序运行，相当于先执行程序的主要逻辑，将耗时的操作推迟执行。

回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数。

二、事件监听

另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

还是以f1和f2为例。首先，为f1绑定一个事件。

　　f1.on('done', f2);

上面这行代码的意思是，当f1发生done事件，就执行f2。然后，对f1进行改写：

　　function f1(){

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　f1.trigger('done');

　　　　}, 1000);

　　}

f1.trigger('done')表示，执行完成后，立即触发done事件，从而开始执行f2。

这种方法的优点是比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以“去耦合”（Decoupling），有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。

三、Promises对象

Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。

简单说，它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。比如，f1的回调函数f2,可以写成：

　　f1().then(f2);

f1要进行如下改写（这里使用的是jQuery的实现）：

　　function f1(){

　　　　var dfd = $.Deferred();

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　dfd.resolve();

　　　　}, 500);

　　　　return dfd.promise;

　　}

这样写的优点在于，回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。

比如，指定多个回调函数：

　f1().then(f2).then(f3);

再比如，指定发生错误时的回调函数：

　f1().then(f2).fail(f3);

而且，它还有一个前面三种方法都没有的好处：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以，你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难。

四、发布/订阅

上一节的"事件"，完全可以理解成"信号"。

我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。

这个模式有多种实现，下面采用的是Ben Alman的Tiny Pub/Sub，这是jQuery的一个插件。

首先，f2向"信号中心"jQuery订阅"done"信号。

　　jQuery.subscribe("done", f2);

然后，f1进行如下改写：

　　function f1(){

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　jQuery.publish("done");

　　　　}, 1000);

　　}

jQuery.publish("done")的意思是，f1执行完成后，向"信号中心"jQuery发布"done"信号，从而引发f2的执行。

此外，f2完成执行后，也可以取消订阅（unsubscribe）。

jQuery.unsubscribe("done", f2);

这种方法的性质与"事件监听"类似，但是明显优于后者。因为我们可以通过查看"消息中心"，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。

异步编程概况：

回调函数：
优点：简单、容易理解
缺点：不利于维护，代码耦合高
事件监听(采用时间驱动模式，取决于某个事件是否发生)：
优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数
缺点：事件驱动型，流程不够清晰
发布/订阅(观察者模式)：
类似于事件监听，但是可以通过‘消息中心’，了解现在有多少发布者，多少订阅者。
Promise对象
优点：可以利用then方法，进行链式写法；可以书写错误时的回调函数；
缺点：编写和理解，相对比较难
Generator函数
优点：函数体内外的数据交换、错误处理机制
缺点：流程管理不方便
async函数
优点：内置执行器、更好的语义、更广的适用性、返回的是Promise、结构清晰。
缺点：错误处理机制

【闭包】是指那些能够访问独立(自由)变量的函数 (变量在本地使用，但定义在一个封闭的作用域中)。换句话说，这些函数可以“记忆”它被创建时候的环境。特性：

函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收

转载于:https://www.cnblogs.com/NidhoggDJoking/p/11148487.html

weixin_30896511

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习的前端技术栈与面试杂记

未来将要学习的技术栈：Vue （必修先学） React（可以晚点学） react-native（可以最后学） Node.js（加分项先学） angluar（可以最后学） Webpack（要学）微信小程序开发（必修先学）以前在公司虽然算的上是全栈，可离职之后发现这个社会更需要的是在一方面顶尖的人才，流水线式的生产，会的多而不精反...
复制链接

扫一扫