前端基础资料整理

时间  2019-11-10 标签 前端 基础 资料 整理

1，闭包是如何造成的？优缺点？引发内存泄漏的缘由？

造成原理：
嵌套函数被返回，被外部的变量引用，或者做为外部对象的属性时，形
成闭包。 造成闭包以后，本来应该已经被垃圾回收的变量，都能继续使用。
优缺点：
1.保护函数内的变量安全,增强了封装性
2.在内存中维持一个变量(用的太多就变成了缺点，占内存)
缘由：
1.在闭包的做用域链中引用了html元素未释放内存
2.出现了循环引用javascript

2.html页面是如何呈现?JavaScript 回流（reflow）与重绘（repaint）（学渣的我，回流我就蒙了，不记得这专业名称）

如何呈现：
1,HTML文档加载后生成DOM树（包括display：none;元素）；
2,在DOM树的基础上配合css样式结构体生成render树（不包含display:none;、head节点，包含visibility:hidden;节点），即页面中的占位肯定了,最后绘制页面（也叫渲染），不会改变页面布局的一些属性：color、背景色等。css

重绘（repaint）:
更新页面元素的属性引发的，如颜色、透明度等不会改变页面布局而须要从新渲染的。
回流（reflow）
render树中部分或所有元素的尺寸、布局、隐藏等(内容、结构、位置)改变引发的。每一个页面至少有一次回流（即初始构建页面时），成本较高。html

3.JavaScript-数据类型和变量?var let const三者的区别？

数据类型：
Number,字符串,布尔值,null,undefined,Symbol。数组,对象（这俩不知道算不算）
区别：
一、var
var定义全局变量和局部变量，也能够省略var，并且在非严格模式下不会报错，可是实际上在严格模式下，二者的使用有没有区别，可能不少人不清楚。例如循环，跳出循环依旧会有效，不报错。
二、let
let拥有块级做用域,一个{}就是一个做用域，也就是let声明块级变量，即局部变量；
let在其做用域下面不存在变量提高；
let在其做用域中不能被重复声明(函数做用域和块级做用域)。
三、const
const用来声明常量，一旦声明，其值就不能够更改，并且必须初始化。若是你非得修改变量的值，js不会报错，只是默默表示失败(不起做用)。前端

4,JavaScript之面向对象的属性和特性?
对象的本质：
无序属性的集合，其属性能够包含基本值、对象或者函数。即对象是一组没有特定顺序的值，对象的每一个属性或方法都有一个名字，而这个名字都映射到一个值。故对象的本质是一个散列表：其中是一组名值对，值能够是数据或函数。
对象包含：数据属性和访问器属性，他们的区别以下：
数据属性：通常用于存储数据数值，访问器属性不包含数据值；
访问器属性：多用于get/set操做，访问器属性不能直接定义，必须使用Object.defineProperty()来定义，且该属性具备set和ger特性。console对象的时候可看。vue

5, 前端框架Vue、angular、React的优势和缺点?（这个我百度的，本身没怎么回答）

Vue.js的特性以下：
1.轻量级的框架 2.双向数据绑定 3.指令 4.插件化java

优势：jquery

  1. 简单：官方文档很清晰，比 Angular 简单易学。
  2. 快速：异步批处理方式更新 DOM。
  3. 组合：用解耦的、可复用的组件组合你的应用程序。
  4. 紧凑：~18kb min+gzip，且无依赖。
  5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
  6. 对模块友好：能够经过 NPM、Bower 或 Duo 安装，不强迫你全部的代码都遵循 Angular 的各类规定，使用场景更加灵活。
    缺点：
  7. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
  8. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其余一些有名的库。

angular：
1良好的应用程序结构 2.双向数据绑定 3.指令 4.HTML模板 5.可嵌入、注入和测试
优势： 
1.模板功能强大丰富，自带了极其丰富的angular指令。
2.是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等全部功能；
3.自定义指令，自定义指令后能够在项目中屡次使用。
4.ng模块化比较大胆的引入了Java的一些东西（依赖注入），可以很容易的写出可复用的代码，对于敏捷开发的团队来讲很是有帮助。
5.angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。angularjs

缺点：api

  1. angular 入门很容易 但深刻后概念不少, 学习中较难理解.
  2. 文档例子很是少, 官方的文档基本只写了api, 一个例子都没有, 不少时候具体怎么用都是google来的, 或直接问misko,angular的做者.
  3. 对IE6/7 兼容不算特别好, 就是能够用jQuery本身手写代码解决一些.

React特性以下：　
1.声明式设计：React采用声明范式，能够轻松描述应用。
2.高效：React经过对DOM的模拟，最大限度地减小与DOM的交互。
3.灵活：React能够与已知的库或框架很好地配合。数组

优势：

  1. 速度快：在UI渲染过程当中，React经过在虚拟DOM中的微操做来实现对实际DOM的局部更新。
  2. 跨浏览器兼容：虚拟DOM帮助咱们解决了跨浏览器问题，它为咱们提供了标准化的API，甚至在IE8中都是没问题的。
  3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，能够方便地进行隔离。
  4. 单向数据流：Flux是一个用于在JavaScript应用中建立单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
  5. 同构、纯粹的javascript：由于搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
  6. 兼容性好：好比使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务再也不让人望而生畏。
    缺点：
  7. React自己只是一个V而已，并非一个完整的框架，因此若是是大型项目想要一套完整的框架的话，基本都须要加上ReactRouter和Flux才能写大型应用。

6,对比一下jquery和vuejs

jquery：对HTML的操做。绑定事件。请求数据。更可能是以事件为入口去处理HTML。操做细腻。不过维护起来累
vuejs：逻辑简单，代码量少，组件化。根据页面的功能定义，构造出属于它的数据。须要事件触发，再编写起方法。方法是基本是数据的处理。

7，JavaScript对数组的操做有哪些？

  1. 数组创建（new）
  2. 数组元素的访问（循环）
  3. 数组的元素添加(push末尾，unshift开头)
  4. 数组元素的删除（pop最后，shift开头，splice(startIndex , deletSize)指定位置）
  5. 数组元素拷贝和复制（slice(start,end)返回一个新数组，其中以start开始，end结束且不包括end;
  6. concat(element1[element2[]]…);将多个数组从新连成一个新的数组），
  7. 数组元素顺序（sort();数组排序。
  8. reverse()；数组反转。）
  9. 数组转化为字符串（oin(seperater)）

8，数组排序的方法？

冒泡排序，js 利用sort进行排序，快速排序，希尔排序，插入排序。这个本身去理解，我写一个简单的。

 
 
 
1 
objArr.sort(function(a,b){return a>b?1:-1});//从小到大排序
2 
objArr.sort(function(a,b){return a<b?1:-1});//从大到小排序
 
 

9，JavaScript的做用域和做用域链？

做用域
全局做用域（Global Scope）
在代码中任何地方都能访问到的对象拥有全局做用域，
1>最外层函数和在最外层函数外面定义的变量拥有全局做用域
2>全部末定义直接赋值的变量自动声明为拥有全局做用域
3>全部window对象的属性拥有全局做用域
局部做用域
与全局做用于相反，局部做用域通常只在固定的代码片断内可访问到，最多见的例如函数内部

做用域链：
在函数执行过程当中，每遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从做用域链头部，也就是从活动对象开始搜索，查找同名的标识符，若是找到了就使用这个标识符对应的变量，若是没找到继续搜索做用域链中的下一个对象，若是搜索完全部对象都未找到，则认为该标识符未定义。

10，双向绑定的实现原理？

简单来讲，就是监听dom事件，例如change,或者键盘回车，获取改变后的值，赋值给指定的职位，整个都是在函数中完成。

有的框架，基本思路是使用Object.defineProperty对数据对象作属性get和set的监听，当有数据读取和赋值操做时则调用节点的指令，这样使用最通用的=等号赋值就能够了。

11，CSS选择器（最少五个），权重计算？

  1. id选择器（#id）
  2. 类选择器（.className）
  3. 元素选择器(E)
  4. 群组选择器（selector1,selector2,...,selectorN）
  5. 通用兄弟选择器（Ｅ ? Ｆ）
  6. 相邻兄弟元素选择器(E + F)
  7. 子元素选择器(E>F)
  8. 后代选择器（Ｅ Ｆ）
  9. 通配符选择器（＊）
  10. 伪类选择器
  11. 伪元素选择器
  12. 属性选择器

权重计算

第一等：表明内联样式，如: style=””，权值为1000。
第二等：表明ID选择器，如：#content，权值为0100。
第三等：表明类，伪类和属性选择器，如.content，权值为0010。
第四等：表明类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

!important 能够提高权重

联系我们 沪ICP备2021010478号-7