未来将要学习的技术栈:
- Vue (必修先学)=>80%=>99%
- React(可以晚点学)=>0%
- react-native(可以最后学)=>0%
- Node.js(加分项先学)=>0%
- angluar(可以最后学)=>10%
- Webpack(要学)=>10%=>80%
- 微信小程序开发(必修先学)=>30%=>20%=>10%
以前在公司虽然算的上是全栈,可离职之后发现这个社会更需要的是在一方面顶尖的人才,流水线式的生产,会的多而不精反而成了劣势,从今年开始就从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路由的钩子函数
首页可以控制导航跳转,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、结构清晰。
- 缺点:错误处理机制
【闭包】是指那些能够访问独立(自由)变量的函数 (变量在本地使用,但定义在一个封闭的作用域中)。换句话说,这些函数可以“记忆”它被创建时候的环境。特性:
- 函数嵌套函数
- 函数内部可以引用外部的参数和变量
- 参数和变量不会被垃圾回收机制回收