diff --git a/Ajax.md b/Ajax.md new file mode 100644 index 0000000..f927e75 --- /dev/null +++ b/Ajax.md @@ -0,0 +1,210 @@ +## Ajax +* [1.什么是ajax？ajax作用是什么？](#1什么是ajaxajax作用是什么) +* [2.为什么要用ajax：](#2为什么要用ajax) +* [3.AJAX最大的特点是什么。](#3ajax最大的特点是什么) +* [4.请介绍一下XMLHttprequest对象。](#4请介绍一下xmlhttprequest对象) +* [5.AJAX技术体系的组成部分有哪些。](#5ajax技术体系的组成部分有哪些) +* [6.工作当中会和后台交互吗？ 那你能说说封装好的 ajax里的几个参数吗 ？](#6工作当中会和后台交互吗-那你能说说封装好的-ajax里的几个参数吗-) +* [7.Ajax的实现流程是怎样的？](#7ajax的实现流程是怎样的) +* [8.AJAX请求总共有多少种CALLBACK](#8ajax请求总共有多少种callback) +* [9.AJAX有哪些有点和缺点？](#9ajax有哪些有点和缺点) +* [10.Ajax 解决浏览器缓存问题？](#10ajax-解决浏览器缓存问题) +* [参考链接](#参考链接) + +## Ajax + + + +#### 1.什么是ajax？ajax作用是什么？ + +AJAX = 异步 JavaScript 和 XML。 **AJAX 是一种用于创建快速动态网页的技术**。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. + +#### 2.为什么要用ajax： + +Ajax应用程序的优势在于： + +\1. 通过异步模式，提升了用户体验 + +\2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用 + +\3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。 + +#### 3.AJAX最大的特点是什么。 + +Ajax可以实现动态不刷新（局部刷新） +就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。 + +#### 4.请介绍一下XMLHttprequest对象。 + +Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。 + +#### 5.AJAX技术体系的组成部分有哪些。 + +HTML，css，dom，xml，xmlHttpRequest，javascript + +#### 6.工作当中会和后台交互吗？ 那你能说说封装好的 ajax里的几个参数吗 ？ + +url: 发送请求的地址。 + +type: 请求方式（post或get）默认为get。 + +async: 同步异步请求，默认true所有请求均为异步请求。 + +timeout : 超时时间设置，单位毫秒 + +data：要求为Object或String类型的参数，发送到服务器的数据 + +cache：默认为true（当dataType为script时，默认为false）, 设置为false将不会从浏览器缓存中加载请求信息。 + +dataType: 预期服务器返回的数据类型。 + +可用的类型如下： + + xml：返回XML文档，可用JQuery处理。 + +html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 + +script：返回纯文本JavaScript代码。不会自动缓存结果。 + +json：返回JSON数据。 + +jsonp：JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 + +text：返回纯文本字符串。 + +success：请求成功后调用的回调函数，有两个参数。 + +(1) 由服务器返回，并根据dataType参数进行处理后的数据。 + +(2) 描述状态的字符串。 + +error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数 + +(1) XMLHttpRequest对象 + +(2) 错误信息 + +(3) 捕获的错误对象(可选) + +complete :function(XMLHttpRequest,status){ //请求完成后最终执行参数 + + +#### 7.Ajax的实现流程是怎样的？ + +> Ajax的实现流程是怎样的？ + +- (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. +- (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. +- (3)设置响应HTTP请求状态变化的函数. +- (4)发送HTTP请求. +- (5)获取异步调用返回的数据. +- (6)使用JavaScript和DOM实现局部刷新. + +``` + +``` + +#### 8.AJAX请求总共有多少种CALLBACK + +> AJAX请求总共有多少种CALLBACK + +Ajax请求总共有**八种**Callback + +- onSuccess +- onFailure +- onUninitialized +- onLoading +- onLoaded +- onInteractive +- onComplete +- onException + +#### 9.AJAX有哪些有点和缺点？ + +> AJAX有哪些有点和缺点？ + +优点： + +- 1、最大的一点是页面无刷新，用户的体验非常好。 +- 2、使用异步方式与服务器通信，具有更加迅速的响应能力。 +- 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。 +- 4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 + +缺点： + +- 1、ajax不支持浏览器back按钮。 +- 2、安全问题 AJAX暴露了与服务器交互的细节。 +- 3、对搜索引擎的支持比较弱。 +- 4、破坏了程序的异常机制。 +- 5、不容易调试。 + +#### 10.Ajax 解决浏览器缓存问题？ + +> Ajax 解决浏览器缓存问题？ + +- 1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。 +- 2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。 +- 3、在URL后面加上一个随机数： "fresh=" + Math.random();。 +- 4、在URL后面加上时间戳："nowtime=" + new Date().getTime();。 +- 5、如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。 + + + +#### 参考链接 + +https://zhuanlan.zhihu.com/p/98288927 + +https://segmentfault.com/a/1190000013291898 + +https://blog.csdn.net/dkh_321/article/details/79311367 diff --git a/Angular.md b/Angular.md new file mode 100644 index 0000000..7686b50 --- /dev/null +++ b/Angular.md @@ -0,0 +1,108 @@ +## Angular + +* [1.什么是Angular 7？与AngularJS有何不同？](#1什么是angular-7与angularjs有何不同) +* [2.什么是Angular框架？](#2什么是angular框架) +* [3.Angular 7中的结构指令和属性指令有什么区别？](#3angular-7中的结构指令和属性指令有什么区别) +* [4.NgModule中的”声明”, “提供者”和”导入”之间有什么区别？](#4ngmodule中的声明-提供者和导入之间有什么区别) +* [5.Angular的关键组件是什么？](#5angular的关键组件是什么) +* [6.解释Angular的体系结构概述](#6解释angular的体系结构概述) +* [7.如何将Angular 6更新为Angular 7？](#7如何将angular-6更新为angular-7) +* [8.什么是angular material?](#8什么是angular-material) +* [9. 什么是aot编译?](#9-什么是aot编译) +* [10.什么是数据绑定？在Angular中有几种方式?](#10什么是数据绑定在angular中有几种方式) +* [参考链接](#参考链接) + + +#### 1.什么是Angular 7？与AngularJS有何不同？ + +Angular7是Angular的最新版本。 AngularJS是Angular的第一个版本, 也称为Angular 1.0。 + +Angular7是Angular1.0的完整重写。它支持双向数据绑定, 以及其他一些功能, 例如ng更新, ng添加, Angular元素, Angular材质+ CDK组件, Angular材质入门组件, CLI工作区, 库支持, Tree Shakable Providers, 动画性能改进和RxJS v6等等 + +#### 2.什么是Angular框架？ + +Angular是基于TypeScript的开源Web框架和平台。它用于构建Web /移动和桌面应用程序。 + +该框架的主要功能包括：声明性模板, 依赖项注入, 端到端工具等。这些功能使Angular中的Web开发变得容易。 + +#### 3.Angular 7中的结构指令和属性指令有什么区别？ + +结构化指令用于通过删除和添加DOM元素来更改DOM布局。这些指令在更改视图结构方面要好得多。结构指令的示例是NgFor和Nglf。 + +属性指令用作元素的特征。例如, 模板”语法”指南中的内置NgStyle之类的指令是属性指令。 + +#### 4.NgModule中的”声明”, “提供者”和”导入”之间有什么区别？ + +NgModule中的声明之间的区别”, “提供者”和”导入”： + +- 声明用于使当前模块中的指令(包括组件和管道)可用于当前模块中的其他指令。指令, 组件或管道的选择器只有在声明或导入时才与HTML匹配。 +- 提供者用于使DI知道服务和价值。它们被添加到根范围, 并且被注入到其他具有它们依赖关系的服务或指令中。提供程序的一种特殊情况是延迟加载的模块, 它们具有自己的子注入器。默认情况下, 仅将延迟加载的模块的提供程序提供给该延迟加载的模块(不像其他模块那样提供整个应用程序)。 +- import使其他模块的导出声明在当前模块中可用。 + +#### 5.Angular的关键组件是什么？ + +Angular的关键组件： + +组件：组件是角度应用程序的基本构建块, 用于控制HTML视图。 + +模块：模块是有角度的基本构建块的集合, 例如组件, 指令, 服务等。应用程序分为逻辑部分, 每段代码称为”模块”, 用于执行单个任务。 + +模板：模板用于表示Angular应用程序的视图。 + +服务：用于创建可以在整个应用程序之间共享的组件。 + +元数据：可用于向Angular类添加更多数据。 + +#### 6.解释Angular的体系结构概述 + +Angular是用于开发移动和Web应用程序的最受欢迎的Web开发框架。它使用称为IONIC的跨平台移动开发, 这就是为什么它不仅限于Web应用程序。 + +Angular应用程序有7个主要构建块： + +- 零件 +- 范本 +- 元数据 +- 数据绑定 +- 指令 +- 服务 +- 依赖注入 + +Angular应用程序的基本构建块是NgModules, 它为组件提供编译上下文。 Angular应用程序由一组NgModule定义, 并且始终至少具有启用引导的根模块以及更多功能模块。 + +- 组件定义模板视图 +- 组件使用服务 + +NgModules使开发人员可以将应用程序组织成相互连接的功能块。 + +CLI生成的最小” AppModule”的NgModule属性如下： + +- 声明：用于声明应用程序组件。 +- 导入：每个应用程序都必须导入BrowserModule才能在浏览器中运行该应用程序。 +- 提供者：没有什么可以开始的。 +- Bootstrap：这是Angular创建并插入到index.html主机网页中的根AppComponent。 + +#### 7.如何将Angular 6更新为Angular 7？ + +你可以使用以下命令将Angular 6更新为Angular 7： + +``` +ng update @angular/cli @angular/core +``` + +#### 8.什么是angular material? + +这是Angular的用户界面组件库。 + +#### 9. 什么是aot编译? + +aot是ahead of time。就是Angular的内部编译机制。 + +#### 10.什么是数据绑定？在Angular中有几种方式? + +一共有三种方式。一种是事件绑定，这种方式使得应用程序可以对用户的输入做出反应。另一种是属性绑定。这种方式是从应用数据向html传递数据。最后一种方式是双向绑定。这种绑定可以支持用程序数据的修改影响视图，同时视图上数据的改动也会影响到应用程序的数据。 + +#### 参考链接 + +http://www.srcmini.com/33381.html + +https://zhuanlan.zhihu.com/p/80791364 diff --git a/ES6.md b/ES6.md new file mode 100644 index 0000000..c4a7d4e --- /dev/null +++ b/ES6.md @@ -0,0 +1,145 @@ +## ES6 + +* [1.es5和es6的区别，说一下你所知道的es6](#1es5和es6的区别说一下你所知道的es6) +* [2.var、let、const之间的区别](#2varletconst之间的区别) +* [3.使用箭头函数应注意什么？](#3使用箭头函数应注意什么) +* [4.ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能](#4es6的模板字符串有哪些新特性并实现一个类模板字符串的功能) +* [5.介绍下 Set、Map的区别？](#5介绍下-setmap的区别) +* [6.ECMAScript 6 怎么写 class ，为何会出现 class？](#6ecmascript-6-怎么写-class-为何会出现-class) +* [7.Promise构造函数是同步执行还是异步执行，那么 then 方法呢？](#7promise构造函数是同步执行还是异步执行那么-then-方法呢) +* [8.setTimeout、Promise、Async/Await 的区别](#8settimeoutpromiseasyncawait-的区别) +* [9.promise有几种状态，什么时候会进入catch？](#9promise有几种状态什么时候会进入catch) +* [10.使用结构赋值，实现两个变量的值的交换](#10使用结构赋值实现两个变量的值的交换) +* [11.Promise 中reject 和 catch 处理上有什么区别](#11promise-中reject-和-catch-处理上有什么区别) +* [12.理解 async/await以及对Generator的优势](#12理解-asyncawait以及对generator的优势) +* [参考资料](#参考资料) + + + +#### 1.es5和es6的区别，说一下你所知道的es6 + +ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性： +1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明 +2）箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义 +3）模板字符串模板字符串是增强版的字符串，用反引号标识，可以当作普通字符串使用，也可以用来定义多行字符串 +4）解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值 +5）for of循环for...of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串 +6）import、export导入导出ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用 +7）set数据结构Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数 +8）... 展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量 +9）修饰器 @decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数 +10）class 类的继承ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念11）async、await使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成 +12）promisePromise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大 +13）SymbolSymbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的 +14）Proxy代理使用代理（Proxy）监听对象的操作，然后可以做一些相应事情 + +#### 2.var、let、const之间的区别 + +var声明变量可以重复声明，而let不可以重复声明 +var是不受限于块级的，而let是受限于块级 +var会与window相映射（会挂一个属性），而let不与window相映射 +var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错 +const声明之后必须赋值，否则会报错 +const定义不可变的量，改变了就会报错 +const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错 + +#### 3.使用箭头函数应注意什么？ + +（1）用了箭头函数，this就不是指向window，而是父级（指向是可变的） +（2）不能够使用arguments对象 +（3）不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误 +（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数 + +#### 4.ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能 + +基本的字符串格式化。 +将表达式嵌入字符串中进行拼接。 +用${}来界定在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。 +ES6反引号就能解决类模板字符串的功能 + +``` +let name = 'web'; +let age = 10; +let str = '你好，${name} 已经 ${age}岁了' +str = str.replace(/\$\{([^}]*)\}/g,function(){ + return eval(arguments[1]); + }) +console.log(str);//你好，web 已经 10岁了 + +``` + +#### 5.介绍下 Set、Map的区别？ + +应用场景：Set用于数据重组，Map用于数据储存 +Set：　 +（1）成员不能重复 +（2）只有键值没有键名，类似数组 +（3）可以遍历，方法有add, delete,has +Map: +（1）本质上是健值对的集合，类似集合 +（2）可以遍历，可以跟各种数据格式转换 + +#### 6.ECMAScript 6 怎么写 class ，为何会出现 class？ + +ES6的class可以看作是一个语法糖，它的绝大部分功能ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。 + +``` +//定义类 +class Point { + constructor(x,y) { + //构造方法 + this.x = x; //this关键字代表实例对象 + this.y = y; + } toString() { + return '(' + this.x + ',' + this.y + ')'; + } +} + +``` + +#### 7.Promise构造函数是同步执行还是异步执行，那么 then 方法呢？ + +promise构造函数是同步执行的，then方法是异步执行的 + +#### 8.setTimeout、Promise、Async/Await 的区别 + +事件循环中分为宏任务队列和微任务队列 +其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行async函数表示函数里面可能会有异步方法，await后面跟一个表达式 +async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行 + +#### 9.promise有几种状态，什么时候会进入catch？ + +三个状态： +pending、fulfilled、reject +两个过程： +padding -> fulfilled、padding -> rejected当pending为rejectd时，会进入catch + +#### 10.使用结构赋值，实现两个变量的值的交换 + +``` +let a = 1;let b = 2; +[a,b] = [b,a]; +``` + +#### 11.Promise 中reject 和 catch 处理上有什么区别 + +reject 是用来抛出异常，catch 是用来处理异常 +reject 是 Promise 的方法，而 catch 是 Promise 实例的方法 +reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch +网络异常（比如断网），会直接进入catch而不会进入then的第二个回调 + +#### 12.理解 async/await以及对Generator的优势 + +async await 是用来解决异步的，async函数是Generator函数的语法糖 +使用关键字async来表示，在函数内部使用 await 来表示异步 +async函数返回一个 Promise 对象，可以使用then方法添加回调函数 +当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句 +async较Generator的优势： +（1）内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样 +（2）更好的语义。async 和 await 相较于 * 和 yield 更加语义化　　 +（3）更广的适用性。yield命令后面只能是 Thunk 函数或 Promise对象，async函数的await后面可以是Promise也可以是原始类型的值 +（4）返回值是 Promise。async 函数返回的是 Promise 对象，比Generator函数返回的Iterator对象方便，可以直接使用 then() 方法进行调用 + +#### 参考资料 + +https://zhuanlan.zhihu.com/p/102442557 diff --git a/Glup_Grunt.md b/Glup_Grunt.md new file mode 100644 index 0000000..842fbcd --- /dev/null +++ b/Glup_Grunt.md @@ -0,0 +1,164 @@ +## Glup_Grunt +* [1.Grunt的特点](#1grunt的特点) +* [2.Gulp和Grunt的异同点](#2gulp和grunt的异同点) +* [3.差异和不同](#3差异和不同) +* [4.I/O流程的不同](#4io流程的不同) +* [5.Gulp中的流](#5gulp中的流) +* [6.为什么应该使用流？](#6为什么应该使用流) +* [7.为什么要使用Grunt?](#7为什么要使用grunt) +* [8.Grunt都有哪些插件?](#8grunt都有哪些插件) +* [9.哪些人都在使用Grunt?](#9哪些人都在使用grunt) +* [10.Gulp优点：](#10gulp优点) +* [参考链接](#参考链接) + + + + +#### 1.Grunt的特点 + +- Grunt有一个完善的社区，插件丰富 它简单易学， +- 你可以随便安装插件并配置它们 +- 你不需要多先进的理念，也不需要任何经验 + +完善 – Grunt的插件繁多。 + +易用 – Grunt的插件丰富： 许多常见的任务都有现成的Grunt插件，而且有众多第三方插件，如：CoffeeScript，Handlebars，Jade，JsHint，Less，RequireJS，Sass，Styles。通过参考文档进行配置便可以快速使用。 + +#### 2.Gulp和Grunt的异同点 + +易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。 + +高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。 + +高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。 + +易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系列流管道。 + +**易用** Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。 + +**高效** Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。 + +**高质量** Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。 +例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。 +他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。 + +**易学** Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。 + +#### 3.差异和不同 + +- 流：Gulp是一个基于流的构建系统，使用代码优于配置的策略。 +- 插件：Gulp的插件更纯粹，单一的功能，并坚持一个插件只做一件事。 +- 代码优于配置：维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。 +- 没有产生中间文件 + +#### 4.I/O流程的不同 + +使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。 +而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。 + +#### 5.Gulp中的流 + +Gulp通过流和代码优于配置策略来尽量简化任务编写的工作。这看起来有点“像jQuery”的方法，把动作串起来创建构建任务。早在Unix的初期，流就已经存在了。流在Node.js生态系统中也扮演了重要的角色，类似于*nix将几乎所有设备抽象为文件一样，Node将几乎所有IO操作都抽象成了Stream的操作。因此用Gulp编写任务也可看作是用Node.js编写任务。当使用流时，Gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。 + +Doug McIlroy, then head of the Bell Labs CSRC (Computing Sciences Research Center), and inventor of the Unix pipe, summarized the Unix philosophy as follows: + +> This is the Unix philosophy: Write programs that do one thing and do +> it well. Write programs to work together. Write programs to handle +> text streams, because that is a universal interface. + +基于流的模块特点： + +- Write modules that do one thing and do it well. +- Write modules that work together. + Write modules that handle events and streams. + +Unix管道示例： + +``` +tput setaf 88 ; whoami | figlet | tr _ … | tr \ \` | tr \| ¡ | tr / √ +1 +``` + + + +#### 6.为什么应该使用流？ + +Node中的I/O操作是异步的，因此磁盘的读写和网络操作都需要传递回调函数。 + +``` +var http = require('http'); +var fs = require('fs'); + +var server = http.createServer(function (req, res) { + fs.readFile(__dirname + '/data.txt', function (err, data) { + res.end(data); + }); +}); +server.listen(8000); +123456789 +``` + +这个Node.js应用很简单，所有学习过Node的人应该都做过这样的练习，可以说是Node版的Hello World了。这段代码没有任何问题，你使用node可以正常的运行起来，使用浏览器或者其他的http客户端都可以正常的访问运行程序主机的8000端口读取主机上的data.txt文件。 +但是这种方式隐含了一个潜在的问题，node会把整个data.txt文件都缓存到内存中以便响应客户端的请求（request），随着客户端请求的增加内存的消耗将是非常惊人的，而且客户端需要等待很长传输时间才能得到结果。让我们再看一看另外一种方式，使用流： + +``` +var http = require('http'); +var fs = require('fs'); + +var server = http.createServer(function (req, res) { + var stream = fs.createReadStream(__dirname + '/data.txt'); + stream.pipe(res); +}); +server.listen(8000); +12345678 +``` + +这里面有一个非常大的变化就是使用createReadStream这个fs的方法创建了stream这个变量，并由这个变量的pip方法来响应客户端的请求。使用stream这个变量就可以让node读取data.txt一定量的时候就开始向客户端发送响应的内容，而无需服务缓存以及客户端的等待。 + +#### 7.为什么要使用Grunt? + +Grunt是一个庞大的生态系统, 每天都在成长. 你可以自由的选择数以百计的插件以帮助你自动化的处理任务. + +如果你所需要的插件还没有被人创建, 那么你可以自己创建插件并通过npm很方便的发布以供更多人使用并一起完善. + +#### 8.Grunt都有哪些插件? + +大多数的任务Grunt都提供了可用的Grunt插件, 并且每天都有插件诞生并发布到社区中. 我想你所熟悉的有: + +- JSHint +- Uglify +- Less +- Sass +- CoffeeScript +- CSSLint + +等等. 更多的插件可以在Grunt官方的[插件清单](http://gruntjs.com/plugins)中查看. + +#### 9.哪些人都在使用Grunt? + +众所周知的有: + +- jQuery +- Modernizr +- Twitter +- Adobe + +等等. 还有更多的人在使用Grunt, 比如: 你. + +#### 10.Gulp优点： + +1.gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。 + +2.代码优于配置、node 最佳实践、精简的 API 集，gulp 让工作前所未有的简单。 + +3.基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。 + +4.遵循严格的准则，确保我们的插件结构简单、运行结果可控。 + + + +#### 参考链接 + +https://blog.csdn.net/weixin_40191445/article/details/83065015 + +https://www.w3cschool.cn/grunt/ diff --git a/README.md b/README.md index 37a5a74..3b271d8 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ 如果对于有所帮助，可以给个star。有纰漏的地方，欢迎给我们提PR。 -如果想获取本Repo的PDF版本，可以用微信扫描下方二维码，回复 “pdf” ，即可获取。 +如果想获取本Repo的PDF版本，可以用微信扫描下方二维码，回复 “pdf” ，即可获取。如果二维码加载不出来，可以在微信搜索公众号 “前端技术星球”，回复 “pdf” ，即可获取PDF版本。
## BOM&DOM @@ -266,3 +266,172 @@ * [18.重排重绘为什么会影响渲染，如何避免?](https://github.com/WebInterviewHub/WebInterview/blob/main/性能优化.md#18重排重绘为什么会影响渲染如何避免) * [19.何时缓存在memory,合适缓存在dist？](https://github.com/WebInterviewHub/WebInterview/blob/main/性能优化.md#19何时缓存在memory合适缓存在dist) * [20.CSS选择符优化](https://github.com/WebInterviewHub/WebInterview/blob/main/性能优化.md#20css选择符优化) + + +## Angular + +* [1.什么是Angular 7？与AngularJS有何不同？](https://github.com/WebInterviewHub/WebInterview/blob/main/Angular.md#1什么是angular-7与angularjs有何不同) +* [2.什么是Angular框架？](https://github.com/WebInterviewHub/WebInterview/blob/main/Angular.md#2什么是angular框架) +* [3.Angular 7中的结构指令和属性指令有什么区别？](https://github.com/WebInterviewHub/WebInterview/blob/main/Angular.md#3angular-7中的结构指令和属性指令有什么区别) +* [4.NgModule中的”声明”, “提供者”和”导入”之间有什么区别？](https://github.com/WebInterviewHub/WebInterview/blob/main/Angular.md#4ngmodule中的声明-提供者和导入之间有什么区别) +* [5.Angular的关键组件是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/Angular.md#5angular的关键组件是什么) +* [6.解释Angular的体系结构概述](https://github.com/WebInterviewHub/WebInterview/blob/main/Angular.md#6解释angular的体系结构概述) +* [7.如何将Angular 6更新为Angular 7？](https://github.com/WebInterviewHub/WebInterview/blob/main/Angular.md#7如何将angular-6更新为angular-7) +* [8.什么是angular material?](https://github.com/WebInterviewHub/WebInterview/blob/main/Angular.md#8什么是angular-material) +* [9. 什么是aot编译?](https://github.com/WebInterviewHub/WebInterview/blob/main/Angular.md#9-什么是aot编译) +* [10.什么是数据绑定？在Angular中有几种方式?](https://github.com/WebInterviewHub/WebInterview/blob/main/Angular.md#10什么是数据绑定在angular中有几种方式) +* [参考链接](https://github.com/WebInterviewHub/WebInterview/blob/main/Angular.md#参考链接) + + +## Ajax + +* [1.什么是ajax？ajax作用是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/Ajax.md#1什么是ajaxajax作用是什么) +* [2.为什么要用ajax：](https://github.com/WebInterviewHub/WebInterview/blob/main/Ajax.md#2为什么要用ajax) +* [3.AJAX最大的特点是什么。](https://github.com/WebInterviewHub/WebInterview/blob/main/Ajax.md#3ajax最大的特点是什么) +* [4.请介绍一下XMLHttprequest对象。](https://github.com/WebInterviewHub/WebInterview/blob/main/Ajax.md#4请介绍一下xmlhttprequest对象) +* [5.AJAX技术体系的组成部分有哪些。](https://github.com/WebInterviewHub/WebInterview/blob/main/Ajax.md#5ajax技术体系的组成部分有哪些) +* [6.工作当中会和后台交互吗？ 那你能说说封装好的 ajax里的几个参数吗 ？](https://github.com/WebInterviewHub/WebInterview/blob/main/Ajax.md#6工作当中会和后台交互吗-那你能说说封装好的-ajax里的几个参数吗-) +* [7.Ajax的实现流程是怎样的？](https://github.com/WebInterviewHub/WebInterview/blob/main/Ajax.md#7ajax的实现流程是怎样的) +* [8.AJAX请求总共有多少种CALLBACK](https://github.com/WebInterviewHub/WebInterview/blob/main/Ajax.md#8ajax请求总共有多少种callback) +* [9.AJAX有哪些有点和缺点？](https://github.com/WebInterviewHub/WebInterview/blob/main/Ajax.md#9ajax有哪些有点和缺点) +* [10.Ajax 解决浏览器缓存问题？](https://github.com/WebInterviewHub/WebInterview/blob/main/Ajax.md#10ajax-解决浏览器缓存问题) +* [参考链接](https://github.com/WebInterviewHub/WebInterview/blob/main/Ajax.md#参考链接) + + +## Glup_Grunt +* [1.Grunt的特点](https://github.com/WebInterviewHub/WebInterview/blob/main/Glup_Grunt.md#1grunt的特点) +* [2.Gulp和Grunt的异同点](https://github.com/WebInterviewHub/WebInterview/blob/main/Glup_Grunt.md#2gulp和grunt的异同点) +* [3.差异和不同](https://github.com/WebInterviewHub/WebInterview/blob/main/Glup_Grunt.md#3差异和不同) +* [4.I/O流程的不同](https://github.com/WebInterviewHub/WebInterview/blob/main/Glup_Grunt.md#4io流程的不同) +* [5.Gulp中的流](https://github.com/WebInterviewHub/WebInterview/blob/main/Glup_Grunt.md#5gulp中的流) +* [6.为什么应该使用流？](https://github.com/WebInterviewHub/WebInterview/blob/main/Glup_Grunt.md#6为什么应该使用流) +* [7.为什么要使用Grunt?](https://github.com/WebInterviewHub/WebInterview/blob/main/Glup_Grunt.md#7为什么要使用grunt) +* [8.Grunt都有哪些插件?](https://github.com/WebInterviewHub/WebInterview/blob/main/Glup_Grunt.md#8grunt都有哪些插件) +* [9.哪些人都在使用Grunt?](https://github.com/WebInterviewHub/WebInterview/blob/main/Glup_Grunt.md#9哪些人都在使用grunt) +* [10.Gulp优点：](https://github.com/WebInterviewHub/WebInterview/blob/main/Glup_Grunt.md#10gulp优点) +* [参考链接](https://github.com/WebInterviewHub/WebInterview/blob/main/Glup_Grunt.md#参考链接) + + + +## Vue + +* [1.vue 优点？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#1vue-优点) +* [2.vue 父组件向子组件传递数据？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#2vue-父组件向子组件传递数据) +* [3.子组件像父组件传递事件？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#3子组件像父组件传递事件) +* [4.v-show 和 v-if 指令的共同点和不同点？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#4v-show-和-v-if-指令的共同点和不同点) +* [5. 如何让 CSS 只在当前组件中起作用？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#5-如何让-css-只在当前组件中起作用) +* [6.keep-alive的作用是什么](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#6keep-alive的作用是什么) +* [7.如何获取 dom?](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#7如何获取-dom) +* [8.说出几种 vue 当中的指令和它的用法？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#8说出几种-vue-当中的指令和它的用法) +* [9.vue-loader 是什么？使用它的用途有哪些？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#9vue-loader-是什么使用它的用途有哪些) +* [10.为什么使用 key?](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#10为什么使用-key) +* [11.axios 及安装?](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#11axios-及安装) +* [12.v-modal 的使用。](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#12v-modal-的使用) +* [13.请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#13请说出-vuecli-项目中-src-目录每个文件夹和文件的用法) +* [14. 分别简述 computed 和 watch 的使用场景](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#14-分别简述-computed-和-watch-的使用场景) +* [15.v-on 可以监听多个方法吗？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#15v-on-可以监听多个方法吗) +* [16.$nextTick 的使用](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#16nexttick-的使用) +* [17.vue 组件中 data 为什么必须是一个函数？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#17vue-组件中-data-为什么必须是一个函数) +* [18. 渐进式框架的理解](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#18-渐进式框架的理解) +* [19.Vue 中双向数据绑定是如何实现的？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#19vue-中双向数据绑定是如何实现的) +* [20. 单页面应用和多页面应用区别及优缺点](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#20-单页面应用和多页面应用区别及优缺点) +* [21.v-if 和 v-for 的优先级](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#21v-if-和-v-for-的优先级) +* [22.assets 和 static 的区别](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#22assets-和-static-的区别) +* [23.vue 常用的修饰符](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#23vue-常用的修饰符) +* [24.vue 的两个核心点](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#24vue-的两个核心点) +* [25.vue 和 jQuery 的区别](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#25vue-和-jquery-的区别) +* [26. 引进组件的步骤](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#26-引进组件的步骤) +* [27.delete 和 Vue.delete 删除数组的区别](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#27delete-和-vuedelete-删除数组的区别) +* [28.SPA 首屏加载慢如何解决](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#28spa-首屏加载慢如何解决) +* [29.Vue-router 跳转和 location.href 有什么区别](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#29vue-router-跳转和-locationhref-有什么区别) +* [30. vue slot](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#30-vue-slot) +* [31. 你们 vue 项目是打包了一个 js 文件，一个 css 文件，还是有多个文件？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#31-你们-vue-项目是打包了一个-js-文件一个-css-文件还是有多个文件) +* [32.Vue 里面 router-link 在电脑上有用，在安卓上没反应怎么解决？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#32vue-里面-router-link-在电脑上有用在安卓上没反应怎么解决) +* [33.Vue2 中注册在 router-link 上事件无效解决方法](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#33vue2-中注册在-router-link-上事件无效解决方法) +* [34.RouterLink 在 IE 和 Firefox 中不起作用（路由不跳转）的问题](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#34routerlink-在-ie-和-firefox-中不起作用路由不跳转的问题) +* [35.axios 的特点有哪些](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#35axios-的特点有哪些) +* [36. 请说下封装 vue 组件的过程？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#36-请说下封装-vue-组件的过程) +* [37.params 和 query 的区别](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#37params-和-query-的区别) +* [38.vue 初始化页面闪动问题](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#38vue-初始化页面闪动问题) +* [39.vue 更新数组时触发视图更新的方法](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#39vue-更新数组时触发视图更新的方法) +* [40.vue 常用的 UI 组件库](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#40vue-常用的-ui-组件库) +* [41. Vue的生命周期？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#41-vue的生命周期) +* [42.虚拟DOM和DIFF算法？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#42虚拟dom和diff算法) +* [43.vue2和vue3原理？](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#43vue2和vue3原理) +* [44.生命周期钩子的一些使用方法：](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#44生命周期钩子的一些使用方法) +* [45.开发中常用的指令有哪些?](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#45开发中常用的指令有哪些) +* [参考链接](https://github.com/WebInterviewHub/WebInterview/blob/main/Vue.md#参考链接) + +## ES6 + +* [1.es5和es6的区别，说一下你所知道的es6](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#1es5和es6的区别说一下你所知道的es6) +* [2.var、let、const之间的区别](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#2varletconst之间的区别) +* [3.使用箭头函数应注意什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#3使用箭头函数应注意什么) +* [4.ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#4es6的模板字符串有哪些新特性并实现一个类模板字符串的功能) +* [5.介绍下 Set、Map的区别？](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#5介绍下-setmap的区别) +* [6.ECMAScript 6 怎么写 class ，为何会出现 class？](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#6ecmascript-6-怎么写-class-为何会出现-class) +* [7.Promise构造函数是同步执行还是异步执行，那么 then 方法呢？](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#7promise构造函数是同步执行还是异步执行那么-then-方法呢) +* [8.setTimeout、Promise、Async/Await 的区别](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#8settimeoutpromiseasyncawait-的区别) +* [9.promise有几种状态，什么时候会进入catch？](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#9promise有几种状态什么时候会进入catch) +* [10.使用结构赋值，实现两个变量的值的交换](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#10使用结构赋值实现两个变量的值的交换) +* [11.Promise 中reject 和 catch 处理上有什么区别](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#11promise-中reject-和-catch-处理上有什么区别) +* [12.理解 async/await以及对Generator的优势](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#12理解-asyncawait以及对generator的优势) +* [参考资料](https://github.com/WebInterviewHub/WebInterview/blob/main/ES6.md#参考资料) + + +## jQuery + +* [1.jQuery库中的$()是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/jQuery.md#1jquery库中的是什么) +* [2.网页上有5个div元素，如何使用 jQuery来选择它们？](https://github.com/WebInterviewHub/WebInterview/blob/main/jQuery.md#2网页上有5个div元素如何使用-jquery来选择它们) +* [3.$(this) 和 this 关键字在 jQuery 中有何不同？](https://github.com/WebInterviewHub/WebInterview/blob/main/jQuery.md#3this-和-this-关键字在-jquery-中有何不同) +* [4.使用CDN加载 jQuery库的主要优势是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/jQuery.md#4使用cdn加载-jquery库的主要优势是什么) +* [5.jQuery中的方法链是什么？使用方法链有什么好处？](https://github.com/WebInterviewHub/WebInterview/blob/main/jQuery.md#5jquery中的方法链是什么使用方法链有什么好处) +* [6.如何将一个HTML元素添加到DOM树中的？](https://github.com/WebInterviewHub/WebInterview/blob/main/jQuery.md#6如何将一个html元素添加到dom树中的) +* [7.说出jQuery中常见的几种函数以及他们的含义是什么?](https://github.com/WebInterviewHub/WebInterview/blob/main/jQuery.md#7说出jquery中常见的几种函数以及他们的含义是什么) +* [8.jQuery 能做什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/jQuery.md#8jquery-能做什么) +* [9.jquery中的选择器和CSS中的选择器有区别吗？](https://github.com/WebInterviewHub/WebInterview/blob/main/jQuery.md#9jquery中的选择器和css中的选择器有区别吗) +* [10.jQuery的特点都有什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/jQuery.md#10jquery的特点都有什么) +* [参考资料](https://github.com/WebInterviewHub/WebInterview/blob/main/jQuery.md#参考资料) + + +## React +* [1.什么是React？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#1什么是react) +* [2.React有什么特点？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#2react有什么特点) +* [3.列出React的一些主要优点。](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#3列出react的一些主要优点) +* [4.React有哪些限制？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#4react有哪些限制) +* [5.什么是JSX？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#5什么是jsx) +* [6.你了解 Virtual DOM 吗？解释一下它的工作原理。](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#6你了解-virtual-dom-吗解释一下它的工作原理) +* [7.为什么浏览器无法读取JSX？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#7为什么浏览器无法读取jsx) +* [8.如何理解“在React中，一切都是组件”这句话？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#8如何理解在react中一切都是组件这句话) +* [9.解释 React 中 render() 的目的。](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#9解释-react-中-render-的目的) +* [10.什么是 Props?](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#10什么是-props) +* [11.React中的状态是什么？它是如何使用的？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#11react中的状态是什么它是如何使用的) +* [12.React组件生命周期的阶段是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#12react组件生命周期的阶段是什么) +* [13.详细解释 React 组件的生命周期方法。](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#13详细解释-react-组件的生命周期方法) +* [14.React中的事件是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#14react中的事件是什么) +* [15.React中的合成事件是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#15react中的合成事件是什么) +* [16.列出一些应该使用 Refs 的情况。](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#16列出一些应该使用-refs-的情况) +* [17.什么是高阶组件（HOC）？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#17什么是高阶组件hoc) +* [18.你能用HOC做什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#18你能用hoc做什么) +* [19.什么是纯组件？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#19什么是纯组件) +* [20.React 中 key 的重要性是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#20react-中-key-的重要性是什么) +* [21.什么是React 路由？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#21什么是react-路由) +* [22.为什么需要 React 中的路由？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#22为什么需要-react-中的路由) +* [23.列出 React Router 的优点。](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#23列出-react-router-的优点) +* [24.类组件和函数组件之间有什么区别？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#24类组件和函数组件之间有什么区别) +* [25.state 和 props有什么区别？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#25state-和-props有什么区别) +* [26.constructor中super与props参数一起使用的目的是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#26constructor中super与props参数一起使用的目的是什么) +* [27.什么是受控组件？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#27什么是受控组件) +* [28.使用React Hooks有什么优势？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#28使用react-hooks有什么优势) +* [29.React中的StrictMode是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#29react中的strictmode是什么) +* [30.React context是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#30react-context是什么) +* [31.React Fiber是什么？](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#31react-fiber是什么) +* [32.react diff 原理](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#32react-diff-原理) +* [33.setState 和 replaceState 的区别](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#33setstate-和-replacestate-的区别) +* [34.React 中有三种构建组件的方式](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#34react-中有三种构建组件的方式) +* [35.应该在 React 组件的何处发起 Ajax 请求](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#35应该在-react-组件的何处发起-ajax-请求) +* [参考资料](https://github.com/WebInterviewHub/WebInterview/blob/main/React.md#参考资料) + + + + diff --git a/React.md b/React.md new file mode 100644 index 0000000..0aed84d --- /dev/null +++ b/React.md @@ -0,0 +1,345 @@ +## React +* [1.什么是React？](#1什么是react) +* [2.React有什么特点？](#2react有什么特点) +* [3.列出React的一些主要优点。](#3列出react的一些主要优点) +* [4.React有哪些限制？](#4react有哪些限制) +* [5.什么是JSX？](#5什么是jsx) +* [6.你了解 Virtual DOM 吗？解释一下它的工作原理。](#6你了解-virtual-dom-吗解释一下它的工作原理) +* [7.为什么浏览器无法读取JSX？](#7为什么浏览器无法读取jsx) +* [8.如何理解“在React中，一切都是组件”这句话？](#8如何理解在react中一切都是组件这句话) +* [9.解释 React 中 render() 的目的。](#9解释-react-中-render-的目的) +* [10.什么是 Props?](#10什么是-props) +* [11.React中的状态是什么？它是如何使用的？](#11react中的状态是什么它是如何使用的) +* [12.React组件生命周期的阶段是什么？](#12react组件生命周期的阶段是什么) +* [13.详细解释 React 组件的生命周期方法。](#13详细解释-react-组件的生命周期方法) +* [14.React中的事件是什么？](#14react中的事件是什么) +* [15.React中的合成事件是什么？](#15react中的合成事件是什么) +* [16.列出一些应该使用 Refs 的情况。](#16列出一些应该使用-refs-的情况) +* [17.什么是高阶组件（HOC）？](#17什么是高阶组件hoc) +* [18.你能用HOC做什么？](#18你能用hoc做什么) +* [19.什么是纯组件？](#19什么是纯组件) +* [20.React 中 key 的重要性是什么？](#20react-中-key-的重要性是什么) +* [21.什么是React 路由？](#21什么是react-路由) +* [22.为什么需要 React 中的路由？](#22为什么需要-react-中的路由) +* [23.列出 React Router 的优点。](#23列出-react-router-的优点) +* [24.类组件和函数组件之间有什么区别？](#24类组件和函数组件之间有什么区别) +* [25.state 和 props有什么区别？](#25state-和-props有什么区别) +* [26.constructor中super与props参数一起使用的目的是什么？](#26constructor中super与props参数一起使用的目的是什么) +* [27.什么是受控组件？](#27什么是受控组件) +* [28.使用React Hooks有什么优势？](#28使用react-hooks有什么优势) +* [29.React中的StrictMode是什么？](#29react中的strictmode是什么) +* [30.React context是什么？](#30react-context是什么) +* [31.React Fiber是什么？](#31react-fiber是什么) +* [32.react diff 原理](#32react-diff-原理) +* [33.setState 和 replaceState 的区别](#33setstate-和-replacestate-的区别) +* [34.React 中有三种构建组件的方式](#34react-中有三种构建组件的方式) +* [35.应该在 React 组件的何处发起 Ajax 请求](#35应该在-react-组件的何处发起-ajax-请求) +* [参考资料](#参考资料) + + +#### 1.什么是React？ + +React 是 Facebook 在 2011 年开发的前端 JavaScript 库。 +它遵循基于组件的方法，有助于构建可重用的UI组件。 +它用于开发复杂和交互式的 Web 和移动 UI。 +尽管它仅在 2015 年开源，但有一个很大的支持社区。 + +#### 2.React有什么特点？ + +它使用虚拟DOM而不是真正的DOM。 +它可以用服务器端渲染。 +它遵循单向数据流或数据绑定。 + +#### 3.列出React的一些主要优点。 + +它提高了应用的性能 +可以方便地在客户端和服务器端使用 +由于 JSX，代码的可读性很好 +React 很容易与 Meteor，Angular 等其他框架集成 +使用React，编写UI测试用例变得非常容易 + +#### 4.React有哪些限制？ + +React 只是一个库，而不是一个完整的框架 +它的库非常庞大，需要时间来理解 +新手程序员可能很难理解 +编码变得复杂，因为它使用内联模板和 JSX + +#### 5.什么是JSX？ + +JSX 是J avaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能。下面是JSX的一个例子： + +``` +render(){ + return( +
+

Hello World from Edureka!!

+
+ ); +} + + +``` + +#### 6.你了解 Virtual DOM 吗？解释一下它的工作原理。 + +Virtual DOM 是一个轻量级的 JavaScript 对象，它最初只是 real DOM 的副本。它是一个节点树，它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树，该变化是由用户或系统完成的各种动作引起的。 + +Virtual DOM 工作过程有三个简单的步骤。 + +每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。 +然后计算之前 DOM 表示与新表示的之间的差异。 +完成计算后，将只用实际更改的内容更新 real DOM。 + +#### 7.为什么浏览器无法读取JSX？ + +浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器。 + +#### 8.如何理解“在React中，一切都是组件”这句话？ + +组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。 + +#### 9.解释 React 中 render() 的目的。 + +每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 form、group、div 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果。 + + +#### 10.什么是 Props? + +Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。 + +#### 11.React中的状态是什么？它是如何使用的？ + +状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。可以通过 this.state() 访问它们。 + +#### 12.React组件生命周期的阶段是什么？ + +React 组件的生命周期有三个不同的阶段： + +初始渲染阶段：这是组件即将开始其生命之旅并进入 DOM 的阶段。 +更新阶段：一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。 +卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。 + +#### 13.详细解释 React 组件的生命周期方法。 + +componentWillMount() – 在渲染之前执行，在客户端和服务器端都会执行。 +componentDidMount() – 仅在第一次渲染后在客户端执行。 +componentWillReceiveProps() – 当从父类接收到 props 并且在调用另一个渲染器之前调用。 +shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件，请返回true 否则返回 false。默认情况下，它返回 false。 +componentWillUpdate() – 在 DOM 中进行渲染之前调用。 +componentDidUpdate() – 在渲染发生后立即调用。 +componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。 + +#### 14.React中的事件是什么？ + +在 React 中，事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于处理 DOM 元素中的事件。但是有一些语法差异，如： + +用驼峰命名法对事件命名而不是仅使用小写字母。 +事件作为函数而不是字符串传递。 + +事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为，只能通过其事件处理程序访问。 + +#### 15.React中的合成事件是什么？ + +合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。 + +#### 16.列出一些应该使用 Refs 的情况。 + +需要管理焦点、选择文本或媒体播放时 +触发式动画 +与第三方 DOM 库集成 + +#### 17.什么是高阶组件（HOC）？ + +高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件。 + +#### 18.你能用HOC做什么？ + +代码重用，逻辑和引导抽象 +渲染劫持 +状态抽象和控制 +Props 控制 + +#### 19.什么是纯组件？ + +纯（Pure） 组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用的性能。 + +#### 20.React 中 key 的重要性是什么？ + +key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。 + +#### 21.什么是React 路由？ + +React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页 Web 应用。 React 路由有一个简单的API。 + +#### 22.为什么需要 React 中的路由？ + +Router 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配，则用户将重定向到该特定路由。所以基本上我们需要在自己的应用中添加一个 Router 库，允许创建多个路由，每个路由都会向我们提供一个独特的视图。 + +#### 23.列出 React Router 的优点。 + +就像 React 基于组件一样，在 React Router v4 中，API 是 ‘All About Components’。可以将 Router 可视化为单个根组件（BrowserRouter），其中我们将特定的子路由（route）包起来。 +无需手动设置历史值：在 React Router v4 中，我们要做的就是将路由包装在 BrowserRouter 组件中。 +包是分开的：共有三个包，分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换。 + +#### 24.类组件和函数组件之间有什么区别？ + +类组件（ Class components ） +无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props 。 +所有 React 组件都必须是纯函数，并禁止修改其自身 props 。 + + +React是单项数据流，父组件改变了属性，那么子组件视图会更新。 +属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改 +组件的属性和状态改变都会更新视图。 + +函数组件（functional component） +函数组件接收一个单一的 props 对象并返回了一个React元素 + +区别 +函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。 + + +#### 25.state 和 props有什么区别？ + +state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息，但它们在组件方面的功能不同。即 + +props 是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的 props 来重新渲染子组件，否则子组件的 props 以及展现形式不会改变。 + +state 的主要作用是用于组件保存、控制以及修改自己的状态，它只能在 constructor 中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的 this.setState 来修改，修改 state 属性会导致组件的重新渲染。 + +#### 26.constructor中super与props参数一起使用的目的是什么？ + +在调用方法之前，子类构造函数无法使用 this 引用 super() 。 + +在ES6中，在子类的 constructor 中必须先调用 super 才能引用 this 。 + +在 constructor 中可以使用 this.props + +#### 27.什么是受控组件？ + +在HTML当中，像 input , textarea , 和 select 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。 + +非受控组件 +非受控组件，即组件的状态不受React控制的组件，例如下边这个 + +``` +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; + +class Demo1 extends Component { + render() { + return ( + + ) + } +} + +ReactDOM.render(, document.getElementById('content')) +``` + +在这个最简单的输入框组件里,我们并没有干涉input中的value展示,即用户输入的内容都会展示在上面。如果我们通过props给组件设置一个初始默认值,defaultValue属性是React内部实现的一个属性,目的类似于input的placeholder属性。 + +受控组件 +同样的，受控组件就是组件的状态受React控制。上面提到过，既然通过设置input的value属性, 无法改变输入框值,那么我们把它和state结合在一起,再绑定onChange事件,实时更新value值就行了。 + +``` +class Demo1 extends Component { + constructor(props) { + super(props); + this.state = { + value: props.value + } + } + + handleChange(e) { + this.setState({ + value: e.target.value + }) + } + + render() { + return ( + this.handleChange(e)}/> + ) + } +} +``` + + +#### 28.使用React Hooks有什么优势？ + +hooks 是react 16.8 引入的特性，他允许你在不写class的情况下操作state 和react的其他特性。 +hooks 只是多了一种写组件的方法，使编写一个组件更简单更方便，同时可以自定义hook把公共的逻辑提取出来，让逻辑在多个组件之间共享。 + +Hook 是什么 +Hook 是什么？ Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。 + +什么时候我会用 Hook？ 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hook。 + +ReactHooks的优点 +无需复杂的DOM结构 +简洁易懂 + +#### 29.React中的StrictMode是什么？ + +React的StrictMode是一种帮助程序组件，可以帮助您编写更好的react组件，您可以使用包装一些组件， 并且基本上可以： + +验证内部组件是否遵循某些推荐做法，如果不在控制台中，则会发出警告。 +验证不赞成使用的方法，如果使用了严格模式，则会在控制台中警告您。 +通过识别潜在风险来帮助您预防某些副作用。 + +#### 30.React context是什么？ + +React文档官网并未对 Context 给出“是什么”的定义，更多是描述使用的 Context 的场景，以及如何使用 Context 。 + +官网对于使用 Context 的场景是这样描述的： + +In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API. + +简单说就是，当你不想在组件树中通过逐层传递 props 或者 state 的方式来传递数据时，可以使用 Context 来实现 跨层级 的组件数据传递。 + +使用props或者state传递数据，数据自顶下流。 + +使用 Context ，可以跨越组件进行数据传递。 + +#### 31.React Fiber是什么？ + +React Fiber 并不是所谓的纤程（微线程、协程），而是一种基于浏览器的单线程调度算法，背后的支持 API 是大名鼎鼎的：requestIdleCallback。 + +Fiberl是一种将 recocilation （递归 diff），拆分成无数个小任务的算法；它随时能够停止，恢复。停止恢复的时机取决于当前的一帧（16ms）内，还有没有足够的时间允许计算。 + +#### 32.react diff 原理 + +把树形结构按照层级分解，只比较同级元素。 + +给列表结构的每个单元添加唯一的 key 属性，方便比较。 + +React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字） 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty. +到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。 + +#### 33.setState 和 replaceState 的区别 + +setState 是修改其中的部分状态，相当于 Object.assign，只是覆盖， +不会减少原来的状态 + +replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了 + +#### 34.React 中有三种构建组件的方式 + +React.createClass()、ES6 class 和无状态函数。 + +#### 35.应该在 React 组件的何处发起 Ajax 请求 + +在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。 + +更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。 +在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。 + +#### 参考资料 + +https://blog.csdn.net/eyeofangel/article/details/88797314 + +https://zhuanlan.zhihu.com/p/91725031 + +https://www.jianshu.com/p/7b07550699c9 diff --git a/Vue.md b/Vue.md new file mode 100644 index 0000000..1939dea --- /dev/null +++ b/Vue.md @@ -0,0 +1,408 @@ +## Vue + +* [1.vue 优点？](#1vue-优点) +* [2.vue 父组件向子组件传递数据？](#2vue-父组件向子组件传递数据) +* [3.子组件像父组件传递事件？](#3子组件像父组件传递事件) +* [4.v-show 和 v-if 指令的共同点和不同点？](#4v-show-和-v-if-指令的共同点和不同点) +* [5. 如何让 CSS 只在当前组件中起作用？](#5-如何让-css-只在当前组件中起作用) +* [6.keep-alive的作用是什么](#6keep-alive的作用是什么) +* [7.如何获取 dom?](#7如何获取-dom) +* [8.说出几种 vue 当中的指令和它的用法？](#8说出几种-vue-当中的指令和它的用法) +* [9.vue-loader 是什么？使用它的用途有哪些？](#9vue-loader-是什么使用它的用途有哪些) +* [10.为什么使用 key?](#10为什么使用-key) +* [11.axios 及安装?](#11axios-及安装) +* [12.v-modal 的使用。](#12v-modal-的使用) +* [13.请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法？](#13请说出-vuecli-项目中-src-目录每个文件夹和文件的用法) +* [14. 分别简述 computed 和 watch 的使用场景](#14-分别简述-computed-和-watch-的使用场景) +* [15.v-on 可以监听多个方法吗？](#15v-on-可以监听多个方法吗) +* [16.$nextTick 的使用](#16nexttick-的使用) +* [17.vue 组件中 data 为什么必须是一个函数？](#17vue-组件中-data-为什么必须是一个函数) +* [18. 渐进式框架的理解](#18-渐进式框架的理解) +* [19.Vue 中双向数据绑定是如何实现的？](#19vue-中双向数据绑定是如何实现的) +* [20. 单页面应用和多页面应用区别及优缺点](#20-单页面应用和多页面应用区别及优缺点) +* [21.v-if 和 v-for 的优先级](#21v-if-和-v-for-的优先级) +* [22.assets 和 static 的区别](#22assets-和-static-的区别) +* [23.vue 常用的修饰符](#23vue-常用的修饰符) +* [24.vue 的两个核心点](#24vue-的两个核心点) +* [25.vue 和 jQuery 的区别](#25vue-和-jquery-的区别) +* [26. 引进组件的步骤](#26-引进组件的步骤) +* [27.delete 和 Vue.delete 删除数组的区别](#27delete-和-vuedelete-删除数组的区别) +* [28.SPA 首屏加载慢如何解决](#28spa-首屏加载慢如何解决) +* [29.Vue-router 跳转和 location.href 有什么区别](#29vue-router-跳转和-locationhref-有什么区别) +* [30. vue slot](#30-vue-slot) +* [31. 你们 vue 项目是打包了一个 js 文件，一个 css 文件，还是有多个文件？](#31-你们-vue-项目是打包了一个-js-文件一个-css-文件还是有多个文件) +* [32.Vue 里面 router-link 在电脑上有用，在安卓上没反应怎么解决？](#32vue-里面-router-link-在电脑上有用在安卓上没反应怎么解决) +* [33.Vue2 中注册在 router-link 上事件无效解决方法](#33vue2-中注册在-router-link-上事件无效解决方法) +* [34.RouterLink 在 IE 和 Firefox 中不起作用（路由不跳转）的问题](#34routerlink-在-ie-和-firefox-中不起作用路由不跳转的问题) +* [35.axios 的特点有哪些](#35axios-的特点有哪些) +* [36. 请说下封装 vue 组件的过程？](#36-请说下封装-vue-组件的过程) +* [37.params 和 query 的区别](#37params-和-query-的区别) +* [38.vue 初始化页面闪动问题](#38vue-初始化页面闪动问题) +* [39.vue 更新数组时触发视图更新的方法](#39vue-更新数组时触发视图更新的方法) +* [40.vue 常用的 UI 组件库](#40vue-常用的-ui-组件库) +* [41. Vue的生命周期？](#41-vue的生命周期) +* [42.虚拟DOM和DIFF算法？](#42虚拟dom和diff算法) +* [43.vue2和vue3原理？](#43vue2和vue3原理) +* [44.生命周期钩子的一些使用方法：](#44生命周期钩子的一些使用方法) +* [45.开发中常用的指令有哪些?](#45开发中常用的指令有哪些) +* [参考链接](#参考链接) + + + + +#### 1.vue 优点？ + +轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb； + +简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； + +双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单； + +组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势； + +视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； + +虚拟 DOM：dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式； + +运行速度更快: 相比较与 react 而言，同样是操作虚拟 dom，就性能而言，vue 存在很大的优势。 + +#### 2.vue 父组件向子组件传递数据？ + +通过 props + +#### 3.子组件像父组件传递事件？ + +$emit 方法 + +#### 4.v-show 和 v-if 指令的共同点和不同点？ + + 共同点：都能控制元素的显示和隐藏； + +不同点：实现本质方法不同，v-show 本质就是通过控制 css 中的 display 设置为 none，控制隐藏，只会编译一次；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false，就不会编译了。而且 v-if 不停的销毁和创建比较消耗性能。 + +总结：如果要频繁切换某节点，使用 v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用 v-if（初始渲染开销较小，切换开销比较大）。 + +#### 5. 如何让 CSS 只在当前组件中起作用？ + +在组件中的 style 前面加上 scoped + +#### 6.keep-alive的作用是什么 + + keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 + +#### 7.如何获取 dom? + +ref="domName" 用法：this.$refs.domName + +#### 8.说出几种 vue 当中的指令和它的用法？ + +答：v-model 双向数据绑定； + +v-for 循环； + +v-if v-show 显示与隐藏； + +v-on 事件；v-once: 只绑定一次。 + +#### 9.vue-loader 是什么？使用它的用途有哪些？ + +答：vue 文件的一个加载器，将 template/js/style 转换成 js 模块。 + +用途：js 可以写 es6、style 样式可以 scss 或 less、template 可以加 jade 等 + +#### 10.为什么使用 key? + +答：需要使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点。 + +作用主要是为了高效的更新虚拟 DOM。 + +#### 11.axios 及安装? + +答：请求后台资源的模块。npm install axios --save 装好， + +js 中使用 import 进来，然后. get 或. post。返回在. then 函数中如果成功，失败则是在. catch 函数中。 + +#### 12.v-modal 的使用。 + +答：v-model 用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作： + +v-bind 绑定一个 value 属性； + +v-on 指令给当前元素绑定 input 事件。 + +#### 13.请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法？ + +答：assets 文件夹是放静态资源；components 是放组件；router 是定义路由相关的配置; app.vue 是一个应用主组件；main.js 是入口文件。 + +#### 14. 分别简述 computed 和 watch 的使用场景 + +答：computed: + +当一个属性受多个属性影响的时候就需要用到 computed + +最典型的栗子： 购物车商品结算的时候 + +watch: + +当一条数据影响多条数据的时候就需要用 watch + +栗子：搜索数据 + +#### 15.v-on 可以监听多个方法吗？ + +答：可以，栗子：。 + +#### 16.$nextTick 的使用 + +答：当你修改了 data 的值然后马上获取这个 dom 元素的值，是不能获取到更新后的值， + +你需要使用 $nextTick 这个回调，让修改后的 data 值渲染更新到 dom 元素之后在获取，才能成功。 + +#### 17.vue 组件中 data 为什么必须是一个函数？ + +答：因为 JavaScript 的特性所导致，在 component 中，data 必须以函数的形式存在，不可以是对象。 + +组建中的 data 写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的 data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个 data，这样改一个全都改了。 + +#### 18. 渐进式框架的理解 + +答：主张最少；可以根据不同的需求选择不同的层级； + +#### 19.Vue 中双向数据绑定是如何实现的？ + +答：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变； + +核心：关于 VUE 双向数据绑定，其核心是 Object.defineProperty() 方法。 + +#### 20. 单页面应用和多页面应用区别及优缺点 + +答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于 pc 端。 + +多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新 + +单页面的优点： + +用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点 spa 对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。 + +单页面缺点： + +不利于 seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。 + +#### 21.v-if 和 v-for 的优先级 + +答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐 v-if 和 v-for 同时使用。 + +如果 v-if 和 v-for 一起用的话，vue 中的的会自动提示 v-if 应该放到外层去。 + +#### 22.assets 和 static 的区别 + +答：相同点：assets 和 static 两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点 + +不相同点：assets 中存放的静态资源文件在项目打包时，也就是运行 npm run build 时会将 assets 中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在 static 文件中跟着 index.html 一同上传至服务器。static 中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是 static 中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于 assets 中打包后的文件提交较大点。在服务器中就会占据更大的空间。 + +建议：将项目中 template 需要的样式文件 js 文件等都可以放置在 assets 中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如 iconfoont.css 等文件可以放置在 static 中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。 + +#### 23.vue 常用的修饰符 + +答：.stop：等同于 JavaScript 中的 event.stopPropagation()，防止事件冒泡； + +.prevent：等同于 JavaScript 中的 event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）； + +.capture：与事件冒泡的方向相反，事件捕获由外到内； + +.self：只会触发自己范围内的事件，不包含子元素； + +.once：只会触发一次。 + +#### 24.vue 的两个核心点 + +答：数据驱动、组件系统 + +数据驱动：ViewModel，保证数据和视图的一致性。 + +组件系统：应用类 UI 可以看作全部是由组件树构成的。 + +#### 25.vue 和 jQuery 的区别 + +答：jQuery 是使用选择器（$）选取 DOM 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据和界面是在一起的。比如需要获取 label 标签的内容：$("lable").val();, 它还是依赖 DOM 元素的值。 + +Vue 则是通过 Vue 对象将数据和 View 完全分离开来了。对数据进行操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，他们通过 Vue 对象这个 vm 实现相互的绑定。这就是传说中的 MVVM。 + +#### 26. 引进组件的步骤 + +答: 在 template 中引入组件； + +在 script 的第一行用 import 引入路径； + +用 component 中写上组件名称。 + +#### 27.delete 和 Vue.delete 删除数组的区别 + +答：delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。 + +#### 28.SPA 首屏加载慢如何解决 + +答：安装动态懒加载所需插件；使用 CDN 资源。 + +#### 29.Vue-router 跳转和 location.href 有什么区别 + +答：使用 location.href='/url'来跳转，简单方便，但是刷新了页面； + +使用 history.pushState('/url')，无刷新页面，静态跳转； + +引进 router，然后使用 router.push('/url') 来跳转，使用了 diff 算法，实现了按需加载，减少了 dom 的消耗。 + +其实使用 router 跳转和使用 history.pushState() 没什么差别的，因为 vue-router 就是用了 history.pushState()，尤其是在 history 模式下。 + +#### 30. vue slot + +答：简单来说，假如父组件需要在子组件内放一些 DOM，那么这些 DOM 是显示、不显示、在哪个地方显示、如何显示，就是 slot 分发负责的活。 + +#### 31. 你们 vue 项目是打包了一个 js 文件，一个 css 文件，还是有多个文件？ + +答：根据 vue-cli 脚手架规范，一个 js 文件，一个 CSS 文件。 + +#### 32.Vue 里面 router-link 在电脑上有用，在安卓上没反应怎么解决？ + +答：Vue 路由在 Android 机上有问题，babel 问题，安装 babel polypill 插件解决。 + +#### 33.Vue2 中注册在 router-link 上事件无效解决方法 + +答： 使用 @click.native。原因：router-link 会阻止 click 事件，.native 指直接监听一个原生事件。 + +#### 34.RouterLink 在 IE 和 Firefox 中不起作用（路由不跳转）的问题 + +答: 方法一：只用 a 标签，不适用 button 标签；方法二：使用 button 标签和 Router.navigate 方法 + +#### 35.axios 的特点有哪些 + +答：从浏览器中创建 XMLHttpRequests； + +node.js 创建 http 请求； + +支持 Promise API； + +拦截请求和响应； + +转换请求数据和响应数据； + +取消请求； + +自动换成 json。 + +axios 中的发送字段的参数是 data 跟 params 两个，两者的区别在于 params 是跟请求地址一起发送的，data 的作为一个请求体进行发送 + +params 一般适用于 get 请求，data 一般适用于 post put 请求。 + +#### 36. 请说下封装 vue 组件的过程？ + +答：1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考 1 小时，码码 10 分钟，程序猿的准则。) + +\2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。 + +\3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。 + +\4. 封装完毕了，直接调用即可 + +#### 37.params 和 query 的区别 + +答：用法：query 要用 path 来引入，params 要用 name 来引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name。 + +url 地址显示：query 更加类似于我们 ajax 中 get 传参，params 则类似于 post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示 + +注意点：query 刷新不会丢失 query 里面的数据 + +params 刷新 会 丢失 params 里面的数据。 + +#### 38.vue 初始化页面闪动问题 + +答：使用 vue 开发时，在 vue 初始化之前，由于 div 是不归 vue 管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于 {{message}} 的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。 + +首先：在 css 里加上 [v-cloak] { + +display: none; + +}。 + +如果没有彻底解决问题，则在根元素加上 style="display: none;" :style="{display:'block'}" + +#### 39.vue 更新数组时触发视图更新的方法 + +答: push()；pop()；shift()；unshift()；splice()； sort()；reverse() + +#### 40.vue 常用的 UI 组件库 + +答：Mint UI，element，VUX + +#### 41. Vue的生命周期？ + +beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed（创建、挂载、更新、卸载） + +挂载中可以操作DOM，创建中不能操作DOM；常用挂载或者创建生命周期就行了 + +#### 42.虚拟DOM和DIFF算法？ + +将DOM抽象为虚拟DOM, 然后通过新旧虚拟DOM 这两个对象的差异(Diff算法),最终只把变化的部分重新渲染,提高渲染效率的过程; + +diff 是通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染 + +#### 43.vue2和vue3原理？ + +**1. vue2和vue3双向数据绑定原理发生了改变** + +**vue2** 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。 + +**vue3** 中使用了 es6 的 ProxyAPI 对数据代理。 + +相比于vue2.x，使用proxy的优势如下 + +defineProperty只能监听某个属性，不能对全对象监听 + +可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可） + +可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化 + +**2、默认进行懒观察（lazy observation）** + +在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。 + +**3、更精准的变更通知** + +比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。 + +**4、vue3新加入了TypeScript以及PWA的支持** + +**5、vue2和vue3组件发送改变** + + + +#### 44.生命周期钩子的一些使用方法： + +```js +1.beforecreate:可以在加个loading事件，在加载实例是触发 +2.created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 +3.mounted:挂载元素，获取到dom节点 +4.updated:如果对数据统一处理，在这里写上相应函数 +5.beforeDestroy:可以一个确认停止事件的确认框 +6.nextTick:更新数据后立即操作dom +``` + +#### 45.开发中常用的指令有哪些? + +v-model:一般用在表达输入，很轻松的实现表单控件和数据的双向绑定 +v-html：更新元素的innerHTML +v-show与v-if：条件渲染，注意二者区别 +v-on:click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数 +v-for：基于源数据多次渲染元素或模板 +v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM语法 +v-bind:title=”msg”简写：title="msg" + +#### 参考链接 + +https://zhuanlan.zhihu.com/p/92407628 + +https://blog.csdn.net/qq_37481512/article/details/94400698 + +https://www.jianshu.com/p/9489fdf7c145 + +https://zhuanlan.zhihu.com/p/97950650 diff --git a/jQuery.md b/jQuery.md new file mode 100644 index 0000000..9623a6c --- /dev/null +++ b/jQuery.md @@ -0,0 +1,75 @@ +## jQuery + +* [1.jQuery库中的$()是什么？](#1jquery库中的是什么) +* [2.网页上有5个div元素，如何使用 jQuery来选择它们？](#2网页上有5个div元素如何使用-jquery来选择它们) +* [3.$(this) 和 this 关键字在 jQuery 中有何不同？](#3this-和-this-关键字在-jquery-中有何不同) +* [4.使用CDN加载 jQuery库的主要优势是什么？](#4使用cdn加载-jquery库的主要优势是什么) +* [5.jQuery中的方法链是什么？使用方法链有什么好处？](#5jquery中的方法链是什么使用方法链有什么好处) +* [6.如何将一个HTML元素添加到DOM树中的？](#6如何将一个html元素添加到dom树中的) +* [7.说出jQuery中常见的几种函数以及他们的含义是什么?](#7说出jquery中常见的几种函数以及他们的含义是什么) +* [8.jQuery 能做什么？](#8jquery-能做什么) +* [9.jquery中的选择器和CSS中的选择器有区别吗？](#9jquery中的选择器和css中的选择器有区别吗) +* [10.jQuery的特点都有什么？](#10jquery的特点都有什么) +* [参考资料](#参考资料) + +#### 1.jQuery库中的$()是什么？ + +$() 函数是 jQuery() 函数的别称，$()函数用于将任何对象包裹成 jQuery对象，接着被允许调用定义在jQuery对象上的多个不同方法。甚至可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jQuery对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解jQuery。 + +#### 2.网页上有5个div元素，如何使用 jQuery来选择它们？ + +jQuery支持不同类型的选择器，例如ID选择器、class选择器、标签选择器。鉴于这个问题没提到ID和class，可以用标签选择器来选择所有的div 元素。jQuery代码：$("div")，这样会返回一个包含所有5个div标签的jQuery 对象。 + +#### 3.$(this) 和 this 关键字在 jQuery 中有何不同？ + +这对于很多java零基础学jQuery的初学者来说是一个棘手的问题，其实是个简单的问题。$(this) 返回一个jQuery对象，你可以对它调用多个 jQuery方法，比如用text()获取文本，用val()获取值等等。而this代表当前元素，它是JavaScript关键词中的一个，表示上下文中的当前DOM元素。你不能对它调用 jQuery方法，直到它被 $() 函数包裹，例如 $(this)。 + +#### 4.使用CDN加载 jQuery库的主要优势是什么？ + +除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的jQuery版本, 那么它就不会再去下载它一次，因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。 + +#### 5.jQuery中的方法链是什么？使用方法链有什么好处？ + +方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对DOM进行了一轮查找，性能方面更加出色。 + +#### 6.如何将一个HTML元素添加到DOM树中的？ + +可以用 jQuery方法appendTo()将一个HTML元素添加到DOM树中。这是jQuery提供的众多操控DOM的方法中的一个。可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。 + +#### 7.说出jQuery中常见的几种函数以及他们的含义是什么? + +（1）get()取得所有匹配的DOM元素集合； + +（2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素； + +（3）append(content)向每个匹配的元素内部追加内容； + +（4）after(content)在每个匹配的元素之后插入内容； + +（5）html()/html(var)取得或设置匹配元素的html内容； + +（6）find(expr)搜索所有与指定表达式匹配的元素； + +（7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数； + +（8）empty()删除匹配的元素集合中所有的子节点； + +（9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法； + +（10）attr(name)取得第一个匹配元素的属性值。 + +#### 8.jQuery 能做什么？ + +获取页面的元素；修改页面的外观；改变页面大的内容；响应用户的页面操作；为页面添加动态效果；无需刷新页面，即可以从服务器获取信息；简化常见的javascript任务。 + +#### 9.jquery中的选择器和CSS中的选择器有区别吗？ + +jQuery选择器支持CSS里的选择器，jQuery选择器可用来添加样式和添加相应的行为，CSS中的选择器是只能添加相应的样式。 + +#### 10.jQuery的特点都有什么？ + +jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 + +#### 参考资料 + +https://www.wkcto.com/article/detail/649