知识点汇总.md

最新推荐文章于 2019-09-30 11:58:30 发布

king--

最新推荐文章于 2019-09-30 11:58:30 发布

阅读量253

点赞数

分类专栏： web前端面试

本文链接：https://blog.csdn.net/wenwen_king/article/details/82972228

版权

web前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

面试

4 篇文章 0 订阅

订阅专栏

知识点 get

一面

自我介绍
vue双向绑定原理，用了js哪些方法实现
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。Object.defineProperty(obj, prop, descriptor)

obj：要在其上定义属性的对象。
prop：要定义或修改的属性的名称。
descriptor：将被定义或修改的属性描述符。返回值：被传递给函数的对象。
vue-router原理
ES6了解哪些
webpack
浏览器输入url后做了什么
MYSQL相关
vue生命周期，父子组件通信，动态组件

1.箭头函数和普通函数this区别

箭头函数中的this是在声明中就定义好了的，而普通函数中的this则是在调用时定义好的。
ES6中定义的时候绑定this的具体含义，继承的是父执行上下文里面的this。
箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply()
普通函数的this指向调用它的那个对象

2.transform和animation区别

要区分transition与animation的区别，一个是过渡，一个是动画，过渡是只有两个帧的动画，动画是有很多次过渡的过渡。
transition是由属性的变化而触发的，无论这个变化是不是我们期望的，只要属性改变，就会触发transition。
animation的触发就是我们所设置的，根据她所规定的值指定我们想要的规则，可以在一开始就执行，可以执行一次再也不变。
触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则立即播放。
循环。 animation可以设定循环次数。
精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果。

3.css水平垂直居中

方案1：position 元素已知宽度

父元素设置为：position: relative; 子元素设置为：position: absolute; 距上50%，据左50%，然后减去元素自身宽度的距离就可以实现。

  <div class="box">
  	<div class="content">
      </div>
  </div>
  .box {
  	background-color: #FF8C00;
      width: 300px;
  	height: 300px;
  	position: relative;
  }
  .content {
  	background-color: #F00;
  	width: 100px;
  	height: 100px;
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	margin: -50px 0 0 -50px;
  }

方案2：position transform

元素未知宽度
如果元素未知宽度，只需将上面例子中的margin:-50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
方案3：flex布局

<div class="box">
   <div class="content">
   </div>
</div>
.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

4.H5的新特性

h5新语义标签：header/footer/nav/aside/article/section/hgroup
新的表单元素：datalist/progress/meter/output
- 表单元素的新属性：placeholder/autofocus/（form:指定输入元素所从属的表单，可以实现输入框放在表单外部并能被提交的效果）
多媒体：video/audio

绘图技术：Canvas绘图/SVG绘图/WebGL绘图（暂不是h5标准）

  Canvas与SVG的不同：
      (1)Canvas是位图；SVG是矢量图
  	(2)Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)
  	(3)Canvas内容不能使用CSS；SVG内容可以使用CSS；
  	(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定

地理定位：Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问。这个对象有三个方法： getCurrentPosition() 、watchPosition()、clearWatch()
本地存储-WebStorage:h5提供了sessionStorage、localStorage和indexedDB加强本地存储。
共同点：sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
区别：sessionStorage基于会话，关闭浏览器之后存储消失。localStorage对象可以将数据长期保存在客户端，除非人为清除。
cookie 和 localStorage 有什么区别？
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，localStorage不会自动把数据发给服务器，仅在本地保存。
- 2.cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下，存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
- cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。
- localStorage支持事件通知机制，可以将数据更新的通知发送给监听者。 api 接口使用更方便。而cookie的原生接口不友好，需要程序员自己封装。
- localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。
- 设置cookie保存时间：通过cookie的expires性质指定一个终止时间。setCookie()
WebWorker

为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。就是一个执行指定任务的独立线程，且该线程可以与UI主线程进行消息数据传递。

注意：Worker任务不允许直接操作DOM树，也不允许使用任何的BOM对象！需要的数据只能由UI主线程来传递，处理的结果也必须交由UI线程来显示。

WebSocket

6.闭包的应用

https://segmentfault.com/a/1190000008681174

闭包的本质是一个函数，闭包可以访问函数内部变量，闭包的存在会使内部变量保留在内存中。

模仿块级作用域

匿名立即执行函数

存储变量
封装私有变量

7.原型链的应用

继承

8.对webpack的了解

https://www.jianshu.com/p/42e11515c10f

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。并且跟具你的在项目中的各种需求，实现自动化处理，解放我们的生产力。

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 。
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

webpack核心概念

Entry：入口，webpack执行构建的第一步将从Entry开始，可抽象理解为输入
Module：模块，在webpacl中一切皆为模块，一个模块对应一个文件，webpack会从配置的Entry开始递归找出所有依赖的模块
Chunk：代码块，一个chunk由多个模块组合而成，用于将代码合并和分割
Loader：模块转换器，用于把模块原内容按照需求转换为需要的新内容
Plugin：扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果和想要做的事情
Output：输入结果，在webpack经过一系列处理并得到最终想要的代码然后输出结果

Webpack 启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module。每找到一个 Module，就会根据配置的Loader去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

webpack三大组成构件，是 package.json, webpack.config.js, server.js

package.json是下载项目需要的依赖包，webpack.config.js是配置webpack的打包文件的配置，server.js是利用webpack自带的服务器在自己电脑上起一个服务。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

9.url解析的多种方法

数组方法，正则

https://blog.csdn.net/hongweigg/article/details/40659731

https://blog.csdn.net/wangyezi19930928/article/details/12658055

https://www.jb51.net/article/121564.htm

https://www.cnblogs.com/jing1208/p/6252408.html

10.http与https区别

https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

11.页面调试方法

https://www.jianshu.com/p/b25c5b88baf5

12.宏任务与微任务

https://juejin.im/post/59e85eebf265da430d571f89

https://segmentfault.com/q/1010000011124511?_ea=2530951

https://zhuanlan.zhihu.com/p/25407758

https://segmentfault.com/a/1190000011198232

13.http轮询

14.websocket

15.js正则

二面

CSS3 实现钟摆动画

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>css3钟摆效果</title>
  <style>
  	.clock-box{
  		width:300px;
  		height:300px;
  		margin:100px auto;
  		border:1px solid yellowgreen;
  	}
  	.clock{
  		width:2px;
  		height:100px;
  		background: green;
  		margin:30px auto;
  		position: relative;
  	}
  	.clock:after{
  		content:"";
  		width:20px;
  		height:20px;
  		border-radius: 10px;
  		background: green;
  		position: absolute;
  		bottom: -20px;
  		left:-9px;
  	}
  	.clock{
  		-webkit-animation:go 1s ease-in-out alternate infinite;
  		-moz-animation:go 1s ease-in-out alternate infinite;
  		animation: go 1s ease-in-out alternate infinite;
  	}
  	@keyframes go{
  		0% {
  			-webkit-transform:rotate(30deg);
  			-webkit-transform-origin: top center;
  			-moz-transform:rotate(30deg);
  			-moz-transform-origin: top center;
  			-ms-transform:rotate(30deg);
  			-o-transform:rotate(30deg);
  			transform: rotate(30deg);
  			transform-origin: top center;
  		}
  		100% {
  			-webkit-transform:rotate(-30deg);
  			-webkit-transform-origin: top center;
  			-moz-transform:rotate(-30deg);
  			-moz-transform-origin: top center;
  			transform: rotate(-30deg);
  			transform-origin: top center;
  		}
  	}
  </style>
  </head>
  <body>
  <div class="clock-box">
  	<div class="clock">
  </div>
  </body>
  </html>

url参数解析用js和正则实现 get
vue和原生js比较有什么区别
vue有什么缺点
url的结构是什么，手写一个解析url参数的函数，解析url的表达式，取出参数。
https://www.bilibili.com/video/av26869257?from=search&seid=15910432978016277339

1.前端页面性能的优化

https://blog.csdn.net/an1090239782/article/details/78166983

2.1-1000的物品最少要多少砝码才能称重出来

3的幂次方需小于1000，即7次。
所配砝码为：100g，50g，20g，10g，5g，2g，1g，

3.项目中解决的复杂问题

逻辑题

有一根细木杆，在上面爬满了蚂蚁，木杆很细，不能同时通过两只蚂蚁，开始时，蚂蚁的头朝向左还是右是任意的，它们只会朝前走或掉头，但不会后退，当任意两只蚂蚁相遇后，蚂蚁会同时掉头朝反方向走，求最后一只蚂蚁从哪个方向掉下去
如果天平两端都允许放砝码，并且假定所有的砝码都是整数克。为了称出从 1 克到 1000 所有整数克的物品，最少需要几个砝码
如何学习前端的，如果你加入后想要提升的是什么
https://segmentfault.com/a/1190000004652898?_ea=680358
谷歌字体
<link href=“https://fonts.gdgdocs.org/css?family=Lobster” rel=“stylesheet” type=“text/css”>
bootstrap框架
<link rel=“stylesheet” href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
Font Awesome 图标库
这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。
<link rel=“stylesheet” href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
jQuery库和Animate.css库

代码

数组去重

 //obj判断对象属性是否存在来实现数组去重
 Array.prototype.unqiue=function(){
 	var arr=[];
 	var obj={};
 	for(var i=0;i<this.length;i++){
 		if(!obj[this[i]]){
 			obj[this[i]]=1;
 			arr.push(this[i]);
 		}
 	}
 	console.log(arr)
 }
 var array=[1,3,2,1,1,2,3,6];
 array.unqiue();

  //indexOf总是返回数组中元素第一个的位置
 Array.prototype.unqiue1=function(){
 	var arr=[];
 	for(var i=0;i<this.length;i++){
 		if(arr.indexOf(this[i])<0){
 			arr.push(this[i]);
 		}
 	}
 	console.log(arr.sort())
 }
 var arr1=[2,3,3,8,5,5,7];
 arr1.unqiue1();

 //filter生成新数组过滤不符合条件的
 Array.prototype.unqiue2=function(){
 	var arr=this.filter(function(elem,index,self){
 		return self.indexOf(elem)===index;
 	})
 	console.log(arr)
 	//console.log(this) // 原数组不变
 }
 arr1.unqiue2();

字符串去重

 function removeRepeatStr(str){
 	var obj = {};
 	var newStr = '';
 	var len = str.length;
 	for(var i=0; i<len; i++){
 		if(!obj[str[i]]){
 			newStr = newStr + str[i];
 			obj[str[i]] = 1;
  //注意，这里的1是给对象属性赋值，这个值可以任意取。
  //意思是把每个遍历的字符作为对象属性并赋值保存，保证该属性的唯一性
 		}
 	}
 	console.log(newStr);
 }
 removeRepeatStr('aaodsoossdaa');

url解析的多种方法

 //第一种：用数组方法
 let url='https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu';
 function queryURLParameter(url){
     let obj={};
 	if(url.indexOf("?")<0){
 		return obj;
 	}
 	let ary=url.split("?");
 	url=ary[1];
 	ary=url.split("&");
 	for(let i=0;i<ary.length;i++){
 		let cur=ary[i],
 		curAry=cur.split("=");
 		obj[curAry[0]]=curAry[1];
 	}
 	return obj;
 }
 console.log(queryURLParameter(url));

 //第二种：正则
 function queryURLParameter(url){
 	let reg = /([^&?=]+)=([^&?=]+)/g,
 	obj={};
 	url.replace(reg,function (){
 		obj[arguments[1]] = arguments[2];
 	});
 	return obj;
 }
 console.log(queryURLParameter(url));

 //正则+箭头函数
 function queryURLParameter(url){
 	let reg = /([^&?=]+)=([^&?=]+)/g,
 	obj={};
 	url.replace(reg,(...arg)=>{
 		obj[arg[1]] = arg[2];
 	});
 	return obj;
 }
 console.log(queryURLParameter(url));

king--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
知识点汇总.md

知识点 get一面自我介绍vue双向绑定原理，用了js哪些方法实现vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。Object.defineProperty(obj, prop, descriptor) obj：要在其上定义属性的对象。prop：要定义或修改的属性的名称。descriptor：将被定义或修改的属性描述符。返回值：被传递给函数的对象。vue...
复制链接

扫一扫