前端开发 | node.js Vue react

Posted 2021-04-08 WEBlearner

基础部分

1. 对Node的优点和缺点提出了自己的看法

（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，

而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子

2. node.js 的应用场景

1. 实时应用：如在线聊天，实时通知推送等等（如socket.io）

2. 分布式应用：通过高效的并行I/O使用已有的数据

3. 工具类应用：海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序

4. 游戏类应用：游戏领域对实时和并发有很高的要求（如网易的pomelo框架）

5. 利用稳定接口提升Web渲染能力

6. 前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著名的纯Javascript全栈式MEAN架构）

3. NodeJS非阻塞I/O模型执行流程

主线程：

1. 执行 node 的代码，把代码放入队列

2. 事件循环程序（主线程）把队列里面的同步代码都先执行了，

3. 同步代码执行完成，执行异步代码

4. 异步代码分 2种状况，

 (1)、异步非 io setTimeout() setInterval()

判断是否可执行，如果可以执行就执行，不可以跳过。

 (2)、异步io 文件操作

会从线程池当中去取一条线程，帮助主线程去执行。

5. 主线程会一直轮训，队列中没有代码了，主线程就会退出。

子线程：被放在线程池里面的线程，用来执行异步 io操作

1. 在线程池里休息

2. 异步 io 的操作来了，执行异步 io操作。

3. 子线程会把异步 io操作的 callback 函数，扔回给队列

4. 子线程会回到线程池了去休息。

callback，在异步 io 代码执行完成的时候被扔回主线程。

4. nodejs中流(stream)的理解

1. 什么是Stream?

答案:stream是基于事件EventEmitter的数据管理模式．由各种不同的抽象接口组成，主要包括可写，可读，可读写，可转换等几种类型．

2. Stream有什么好处?

答案: 非阻塞式数据处理提升效率，片断处理节省内存，管道处理方便可扩展等.

3. Stream有哪些典型应用?

答案: 文件，网络，数据转换，音频视频等.

4. 怎么捕获 Stream的错误事件?

答案: 监听 error 事件，方法同 EventEmitter.

5. 有哪些常用Stream,分别什么时候使用?

答案:Readable 为可被读流，在作为输入数据源时使用；Writable 为可被写流,在作为

输出源时使用；Duplex 为可读写流,它作为输出源接受被写入，同时又作为输入源被后面的

流读出．Transform 机制和Duplex一样，都是双向流，区别时 Transfrom 只需要实现一

        个函数transfrom(chunk, encoding, callback);而 Duplex 需要分别实现read(size)函数

        和_write(chunk, encoding, callback)函数.

6. 实现一个 Writable Stream?

答案: 三步走:1)构造函数call Writable 2) 继承 Writable 3) 实现_write(chunk,encoding, callback)函数

5. ES6有哪些新特性?

类的支持，模块化，箭头操作符，let/const块作用域，字符串模板，解构，参数默认值/不定参数/拓展参数, for-of遍历, generator, Map/Set, Promise

6. 你对ES6的个人看法

从软件工程角度来看，以前真的很弱，不适合做大型应用，很容易导致烂尾工程。ES6就相当于当年的Java5,是历史性的发展，从此我们可以用js做大型项目了。事实上，各大主流浏览器现在已经支持大部分新特性了，后端的Node.js更是可以直接使用ES6的绝大多数语法。

7. node中的Buffer如何应用?

Buffer是用来处理二进制数据的，比如图片，mp3,数据库文件等.Buffer支持各种编码解码，二进制字符串互转．

8. 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

1. 什么是前端路由

2. 什么时候使用前端路由

在单页面应用，大部分页面结构不变，只改变部分内容的使用

3. 前端路由有什么优缺点

优点：

用户体验好，不需要每次都从服务器全部获取，快速展现给用户

缺点：

使用浏览器的前进，后退键的时候会重新发送请求，没有合理利用缓存

单页面无法记住之前滚动的位置，无法再前进，后退的时候记住滚动的

9. 如何判断当前脚本运行在浏览器还是node环境中？

Exports = typeof  window  === 'undefined'? global: window ;

获取全局对象的方式

同理可得，typeof window可以用来判断是不是在浏览器环境中

实际工作部分

1. node中的异步和同步怎么理解?

node是单线程的，异步是通过一次次的循环事件队列来实现的．同步则是说阻塞式的IO,这在高并发环境会是一个很大的性能问题，所以同步一般只在基础框架的启动时使用，用来加载配置文件，初始化程序什么的．

2. 有哪些方法可以进行异步流程的控制?

1. 多层嵌套回调

2. 为每一个回调写单独的函数，函数里边再回调

3. 用第三方框架比方async, q, promise等

3. npm有哪些常用的命令，请列举并说明作用

$npm init                项目初始化

$npminstall -g <name>   安装并更新package.json中的版本配置

$npm run<name>        执行一段脚本

$npm update -n <name>   更新模块

4. 什么事Webpack？

WebPack 可以看做是模块打包机:它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言(Scss，TypeScript 等)，并将其打 包为合适的格式以供浏览器使用。

5. 为什么要使用Webpack

今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的 JavaScript 代码和一大 堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法 a:模块化，让我们可以把复杂的程序细化为小的文件;b:类似于 TypeScript 这种在 JavaScript 基础上拓展的开发语言:使我们能够实现目前版 本的 JavaScript 不能直接使用的特性，并且之后还能能装换为 JavaScript 文件使浏览器可 以识别;c:scss，less 等 CSS 预处理器.........

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外 的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为 WebPack 类的工具的出现 提供了需求。

十、VUE模块

基础部分

1. Vue组件间传值

1. 父子之间的传值

父组件向子组件传值通过prop子组件在props中创建一个属性，用以接收父组件传过来的值

子组件向父组件传值在响应该点击事件的函数中使用$emit来触发一个自定义事件在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

2. 非父子之间的通讯

可以通过eventBus来实现通信.

所谓eventBus就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件

eventBus = new Vue();

组件1触发：

<div @click="eve"></div>

methods: {

eve() {

eventBus.$emit('change','hehe'); //Hub触发事件

}

}123456

组件2接收:

<div></div>

created() {

eventBus.$on('change', () => { //Hub接收事件

this.msg = 'hehe';

});

}123456

这样就实现了非父子组件之间的通信了.原理就是把eventBus当作一个中转站！

2. VUE是什么?

vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

3. React 和 Vue 的区别React 和 Vue 的相似之处：

1. 使用 Virtual DOM

2. 提供了响应式（Reactive）和组件化（Composable）的视图组件。

3. 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

Vue与Angular、React的对比：

1. vue.js 更轻量，gzip后只有20K+，angular:56K ,react:44K

2. vue.js 更易上手，学习曲线平稳

3. 吸收两家之长，有angular 的指令和 react组件化思想

优缺点：

优点：体积小。接口灵活。侵入性好，可用于页面的一部分，而不是整个页面。扩展性好。源码规范简洁。代码较为活跃，作者是中国人，可在官方论坛中文提问。github9000+。基于组件化的开发。它是一个轻量级 mvvm框架、数据驱动+组件化的前端开发、社区完善

缺点：社区不大，如果有问题可以读源码。功能仅限于view 层，Ajax等功能需要额外的库。对开发人员要求较高。开发的话，需要 webpack，不然很难用，最好配合es6。

4. v-show 和 v-if的选择

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

5. Vue.js核心思想

Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。

数据驱动：

Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。

组件式编程

6. template参数选项的有无对生命周期的影响

1. 如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数

2. 如果没有template参数选项，则将外部的html作为模板编译（template），也就是说，template参数选项的优先级要比外部的HTML高

3. 如果1,2条件都不具备，则报错

实际工作部分

1. 怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

对path属性加上/:id。  使用router对象的params.id

2. vue-router有哪几种导航钩子

1. vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消

三种：

第一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

第二种：组件内的钩子；

第三种：单独路由独享组件

3. 说出至少4种vue当中的指令和它的用法？

v-if：判断是否隐藏；

v-for：数据循环出来；

v-bind:class：绑定一个属性；

v-model：实现双向绑定

4.简述一些vue项目中文件构成？

build文件夹：主要就是webpack的配置；

Config文件夹：主要的就是index.js 这个文件进行配置代理服务器

Src文件夹：

 “assets”共用的样式和图片

 “components”业务代码存放

 “router”路由

 “APP.vue”vue 文件入口界面

 “main.js”对应App.vue创建的实例，也是入口文件，对应     webpack.base.config.js里的入口配置

Static文件夹：静态资源

Pack.json:scripts 里面设置命令，例如设置了dev用于调试则我们开发时输入的是npm run dev ；例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

十一、Angular和React模块

基础部分

1. angularJS是什么?

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML

2. angularJS中的MVVM模式

采用这种方式为合理组织代码提供了方便，降低了代码间的耦合度，功能结构清晰可见。

Model：一般用来处理数据，包括读取和设置数据，一般指的是操作数据库。

View：一般用来展示数据，就是放数据，比如通过 HTML来展示。

Controller：因为一个模块里面可能有多个视图和模型，控制器就起到了连接模型和视图的

作用。

VM--> ViewModel（视图模型） 也就是$scope。

MVC 模式在AngularJS 中的体现：

一、首先定义应用，采用ng-app属性指定一个应用，表示此标签内所包裹的内容都属于

APP的一部分。

<html ng-app="App">

3. 模块化与依赖注入

AngularJS 模块：

AngularJS模块是一种容器，把代码隔离并组织成简洁，整齐，可复用的块。

模块本身不提供直接的功能：包含其他提供功能的对象的实例：控制器，过滤器，服务，动

画。可通过定义其提供的对象构建模块。通过依赖注入将模块连接在一起，构建一个完整的

应用程序。

AngularJS建立在模块原理上。大部分 AngularJS 提供的功能都内置到ng-*模块中。

创建模块：

你可以通过 AngularJS 的 angular.module 函数来创建模块：

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []);

</script>

依赖注入：（Dependency Injection，简称 DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。

该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转

和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用

该系统找到依赖

一句话 ，没事你不要来找我，有事我会去找你。

AngularJS 提供很好的依赖注入机制。以下 5个核心组件用来作为依赖注入：value、

factory、service、provider、constant

4. ReactJS的适用场景

一些后台界面，或者是和后台数据比较多，又或者和用户交互比较多，dom 操作频繁的都可以用 react。因为 react 的大特点就是虚拟DOM 技术，这样可以提高渲染的性能。个人的体验就是，用 react可以让整个页面的速度提高很多。

另外这样做的话，和后台的数据通过接口来进行前后端分离，也挺好挺方便的

5. ReactJS是什么

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

6. ReactJs 的特点

1. 声明式设计 −React 采用声明范式，可以轻松描述应用。

2. 高效 −React通过对 DOM 的模拟，最大限度地减少与 DOM 的交互。

3. 灵活 −React可以与已知的库或框架很好地配合。

4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

7. react Native比起标准Web开发或原生开发能够带来的三大好处

1. 手势识别：基于Web 技术（HTML5/JavaScript）构建的移动应用经常被抱怨缺乏及时响应。而基于原生 UI的React Native能避免这些问题从而实现实时响应。

2. 原生组件：使用 HTML5/JavaScript 实现的组件比起原生组件总是让人感觉差一截，而React Native 由于采用了原生UI组件自然没有此问题。

3. 样式和布局：ios、android 和基于Web 的应用各自有不同的样式和布局机制。React Native 通过一个基于 FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。

实际工作部分

1. 看过Angular的源码吗，它是怎么实现双向数据绑定的?

angular对常用的dom事件， xhr事件等做了封装，在里面触发进入angular的digest 流程。 在digest 流程里面， 会从 rootscope 开始遍历， 检查所有的watcher

2. 为什么angular不推荐使用dom操作？

Angular 倡导以测试驱动开发，在的 service 或者 controller 中出现了DOM 操作，那 么也就意味着的测试是无法通过的 使用 Angular 的其中一个好处是啥，那就是双向数据绑定，这样就能专注于处理业务逻辑， 无需关系一堆堆的 DOM 操作。如果在 Angular 的代码中还到处充斥着各种 DOM 操作， 那为什么不直接使用jquery 去开发呢。

3. MVC模式的意思是，软件可以分成三个部分？

视图（View）：用户界面。

控制器（Controller）：业务逻辑

模型（Model）：数据保存

4. 各部分之间的通信方式是什么？

View 传送指令到 Controller

Controller 完成业务逻辑后，要求 Model 改变状态

Model 将新的数据发送到 View，用户得到反馈

十二、其他

实际工作部分

1. webpack是怎样配置的，简要描述一下过程

第一在项目文件创建一个webpack.config.js文件，配置文件创建好了，第二开始正式配置webpack了，首先下载好node.js，因为webpack基于node.js,装好node.js后，通过命令行窗口找到项目文件，在项目文件webpack.config.js文件所在的目录下输入 npm install webpack -save dev  下载webpack依赖文件到本地项目中，下载好后会在webpack.config.js文件下自动创建node_modules文件夹，文件夹里就是所有项目中用到的依赖插件，现在只有一个webpack，项目中用到在下载！

2. git的作用是什么，有哪些命令，这些命令的作用是什么？在pull时，如果只想要文件的一部分而不是工程文件的整个，使用什么命令？git的冲突如何解决？

git是一个开源的分布式版本控制系统，用以有效、高速处理很小到非常大的项目版本管理。

常用的命令：

git init   初始化仓库

git config --globaluser.name    配置用户名

git config --globaluser.email    配置邮箱

git add      文件添加到暂存区

git commit   文件添加到仓库

git branch    列出所有的分支

git status     显示有变更的文件

git log       查看当前分支的版本历史

git push      提交本地代码到远程

git pull       从远程仓库下载到本地

git checkout   创建切换分支

解决git分支冲突： 将本地dev删除,在重新checkout一个dev分支(保证了此时我们的本地dev分支是最新的),在进行pull服务器分支,就这样解决了.

3. 怎么防止内存泄露？

1. 减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收

2. 注意程序逻辑，避免“死循环”之类的

3. 避免创建过多的对象 。

4. 网站优化时怎么做数据分析？

网站优化时，我们需要每天在百度统计中查看我们网站的每日流量，还有在各大站长平台中查看网站的收录量，网站关键词流量，还有就是每天要用站长工具查看网站的基本情况。这些数据都是最基础的。