最近好多小伙伴都跳槽去找工作,我只能在心里默默的支持他们能找到一份好的工作,这份前端面试大全送给我的小伙伴们,主要说的是前端一些常用的一些知识,说的不对的地方请小伙伴们即使指正出来,自己同时也回顾下这些知识。主要分以下几个方边来说:
- css和html
- javascript
- vue
- 微信小程序
1、Doctype作用?标准模式和兼容模式区别。
声明在HTML文档第一行,告诉浏览器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
2、行内元素有哪些?块级元素有哪些?
每个元素都有一个diaplay属性,确定该元素的类型,比如块级元素默认值就是block,行内元素就是none
行内元素:span a u i b img input slect。。。
块级元素:div p ul li ol h1 h2。。。
3、引入样式link和import区别
link属于html直接是在html中引入,import在css中引入只能引入css
link在直接引入页面的时候就就已经引入了,import需要在引入css的时候才引入,性能比较低。
import是CSS2.1 提出的,只在IE5以上才能被识别,而link是html标签,无兼容问题;
4、HTML5有哪些新特性?如何区分html和html5
html5新增了好多东西比如:
一些语义化标签 nav header footer
绘图用到的canvas
用于媒体的video 和 audio 元素
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失,sessionStorage 的数据在浏览器关闭后自动删除;
表单控件,calendar、date、time、email、url、search
区分html5和html:
可以按上文说的doctype区分也可以使用标签区分
5、html语义化理解
语义化是html结构更清晰,便于浏览器解析,利于SEO搜素,使代码更好理解,便于维护
6、不使用borer新建一个1像素的横线
7、两个盒子用一个css属性实现让一个盒子在左边一个盒子在右边并且在一行
<div style="width: 100px;height: 100px;background:red;float: right;"></div>
<div style="width: 100px;height: 100px;background:blue;"></div>
8、清除浮动
清除浮动最好的方法就是使用:after
:after {
clear:both;
content:'';
display:block;
width:0;
height:0;
}
也可以先新建一个空元素来清除浮动
.clear{
clear:both;
height:0;
line-height:0;
font-size:0;
}
还可以给父元素增加overflow属性
.over-flow{ overflow:auto; zoom:1; }//zoom:1;是在处理兼容性问题
9、介绍一下css盒模型
分为两种:ie盒模型和w3c盒模型
盒模型:内容(content)、填充(padding)、边界(margin)、 边框(border);
区别:IE的content部分把 border 和 padding计算了进去;
10、position有几个值
11、css创建三角形
12、为什么要初始化css样式
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异
最简单的初始化方法: * {padding: 0; margin: 0;}
(强烈不建议)
13、css新增伪类元素
:nth-child
:after
:befor
:checked
:disable
14、css新特性
transform
translate
scale
skew
rotate
transtion
animation
shadow
border-radius
15、js基本类型
js有五种基本类型:boolean string number null undefined 一种特殊类型:object
新增了Symbol(创建后独一无二且不可变的数据类型 )
16、js基本规范
不在同一行声明多个变量 不用全局函数 switch必须有default
17、定义函数
函数声明 function name(){}
函数表达式 var name = function(){}
new实例化(不常用)
18、原型链
简单来说就是每个对象对会在内部初始化一个属性 prototype 如果这个对象不存在这个属性 会在prototype上找 这个prototype又会自己往上找 prototype
19、js继承
20、js作用域链
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的。
21、this指向
this指向直接调用者
this指向new出来的对象
在事件中this指向这个事件的对象 IE中的attachEvent的this指向全局window
this指的当前对象
22、null与undefined
null 表示一个对象被定义了,值为“空值”;
undefined 表示不存在这个值。
null==undefined true
23、eval
解析字符串,应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行),也可以把JSON字符串转换为JSON对象
24、window对象和document对象
window对象是指浏览器打开的窗口。
document对象是Documentd对象(HTML 文档对象)的一个只读引用,window对象的一个属性
25、什么是闭包?闭包特性
闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。
特性:
26、什么是js严格模式
严格模式就是在js代码前加 use strict 让 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为。
27、如何创建ajax
/* 封装ajax函数
* @param {string}opt.type http连接的方式,包括POST和GET两种方式
* @param {string}opt.url 发送请求的url
* @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
* @param {object}opt.data 发送的参数,格式为对象类型
* @param {function}opt.success ajax发送并接收成功调用的回调函数
*/
function ajax(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || 'POST';
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}var params = [];
for (var key in opt.data){
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
opt.success(xmlHttp.responseText);
}
};
}
28、同步和异步区别
29、操作dom节点
creatElement()具体元素
creatTextNode()创建文本节点
appendChild()添加
removeChild()删除
replaceChild()替换
insertChild()插入
30、数组的方法
push()
pop()
unshift()
shift()
splice()
indexOf()
sort()
concat()
jion()
slice()
reverse()
includes()
31、更改this指向
.call()
.apply()
.bind()
32、jquery.extend 与 jquery.fn.extend的区别?
jquery.extend 为jquery类添加类方法,可以理解为添加静态方法
jquery.fn.extend:源码中jquery.fn = jquery.prototype,所以对jquery.fn的扩展,就是为jquery类添加成员函数 使用:
jquery.extend扩展,需要通过jquery类来调用,而jquery.fn.extend扩展,所有jquery实例都可以直接调用
33、作用域
作用域 每个方法都是作用域最大的是window
作用域的方法和属性只能在当前作用域使用
查找作用域 是从当前查找 再去上一级查找
34、同源策略
同域名 同端口 同协议
35、http状态码有那些?分别代表是什么意思?
36、一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)
(1)、浏览器会开启一个线程来处理这个请求,对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
(2)、调用浏览器内核中的对应方法,比如 WebView 中的 loadUrl 方法;
(3)、通过DNS解析获取网址的IP地址,设置 UA 等信息发出第二个GET请求;
(4)、进行HTTP协议会话,客户端发送报头(请求报头);
(5)、进入到web服务器上的 Web Server,如 Apache、Tomcat、Node.JS 等服务器;
(6)、进入部署好的后端应用,如 PHP、Java、JavaScript、Python 等,找到对应的请求处理;
(7)、处理结束回馈报头,此处如果浏览器访问过,缓存上有对应资源,会与服务器最后修改时间对比,一致则返回304;
(8)、浏览器开始下载html文档(响应报头,状态码200),同时使用缓存;
(9)、文档树建立,根据标记请求所需指定MIME类型的文件(比如css、js),同时设置了cookie;
(10)、页面开始渲染DOM,JS根据DOM API操作DOM,执行事件绑定等,页面显示完成。
37、对于mvvm的理解
MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件,它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
38、vue生命周期
39、Vue实现数据双向绑定的原理:Object.defineProperty()
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。
40、Vue组件间的参数传递
(1)、父组件与子组件传值
父组件传给子组件:子组件通过props方法接受数据;
子组件传给父组件:$emit方法传递参数
(2)、非父子组件间的数据传递,兄弟组件传值
eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。
使用vuex也可以
41、Vue的路由实现:hash模式 和 history模式
hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;
特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
42、Vue与React的区别?
43、vue路由的钩子函数
首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to,from,next:
to:route即将进入的目标路由对象,
from:route当前导航正要离开的路由
next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
44. vuex是什么?怎么使用?哪种功能场景使用它?
只用来读取的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。
在main.js引入store,注入。新建了一个目录store,…… export 。
场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车
图片描述
推荐文章:微信小程序动画两种实现方式、微信小程序组件化开发框架wepy学习(一)、mpvue小程序架构搭建详细介绍
45、微信小程序有几个文件
46、微信小程序组件封装
47、微信小程序怎样跟事件传值
给HTML元素添加data-*属性来传递我们需要的值,然后通过e.currentTarget.dataset或的param参数获取。但data-名称不能有大写字母和不可以存放对象
48、程序的wxss和css有哪些不一样的地方?
wxss的图片引入需使用外链地址;
没有Body;样式可直接使用import导入
49、小程序关联微信公众号如何确定用户的唯一性?
使用wx.getUserInfo
方法withCredentials为 true 时 可获取encryptedData,里面有 union_id。后端需要进行对称解密
50、微信小程序怎样获取用户信息
微信小程序获取用户信息需要用户授权,首先用户登陆微信小程序使用wx.login这个API,然后通过wx.getUserInfo这个API在拿到用户信息