AngularJS是什么？

AngularJs（简称ng）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个Javascript框架，因为它的核心其实是对HTML标签的增强。何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。后面会详细介绍。那么，什么又是动态web应用呢？与传统web系统相区别，web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。为了实现这些，ng引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。

另外一个疑问，ng是MVC框架吗？还是MVVM框架？官网有提到ng的设计采用了MVC的基本思想，而又不完全是MVC，因为在书写代码时我们确实是在用ng-controller这个指令(起码从名字上看，是MVC吧)，但这个controller处理的业务基本上都是与view进行交互，这么看来又很接近MVVM。让我们把目光移到官网那个非醒目的title上：“AngularJS — Superheroic Javascript MVW Framework”。

AngularJS简单介绍

AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线，它非但不畏缩不前，反而正面出击，提出了有效的解决方案。很多前端应用的开发框架，比如Backbone、EmberJS等，都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长处，但它不必要地污染了开发者自己代码的对象空间，还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式，因为网络最初的设计无法提供 我们今天所需的交互性，于是我们需要框架，来帮我们填补JavaScript和HTML之间的鸿沟。而且有了它，你不用再“直接”操控DOM，只要给你的DOM注上metadata（即AngularJS里的directive们），然后让AngularJS来帮你操纵DOM。同时，AngularJS不依赖（也不妨碍）任何其他的框架。你甚至可以基于其它的框架来开发AngularJS应用。

我们什么时候该用AngularJS呢？

AngularJS是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。

如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用，就不是AngularJS的用武之地了。

AugularJS特性

AngularJS是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。在这里我们浅谈一下angular比较简单的几个特性，后边咱们再具体谈论angular的其他特性。

首先我们先来了解一下angular的五个小特性，具体了解一下：

特性一：双向的数据绑定

数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。

我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。

传统来说，当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析

这些互动，然后融合到一个model中，并且更新View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。

这里肯定有更好的解决方案！那就是AngularJS的双向数据绑定，能够同步DOM和Model等等。

特性二：模板

在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。

HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。

我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。

最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。

特性三：MVC

针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC，更接近于MVVM（Moodel-View-ViewModel)。

Model

model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes，使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性，这种方法使得我们更少使用应用的原型。

ViewModel

viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。

viewmodel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。

Controller

controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。

View

view是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。

特性四：服务和依赖注入

AngularJS服务其作用就是对外提供某个特定的功能。

AngularJS拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易的开发，理解和测试应用。

DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。

为了而得到核心的AngularJS服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你：

你也可以定义自己的服务并且让它们注入：

特性五：指令（Directives）

指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么AngularJS可以做到。

指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。

这里是一个例子，它监听一个事件并且针对的更新它的$scope ，如下：

然后，你可以使用这个自定义的directive来使用：

<my-component ng-model="message"></my-component>

使用一系列的组件来创建你自己的应用将会让你更方便的添加，删除和更新功能。

Angular1 与 Angular2的区别

Angular2不是从Angular1升级过来的，Angular2是重写的，所以他们之间的差别比较大，不是你用过1就能直接上手2的，计划可以认为是一个新的框架；

Angular2使用了javascript的超集‘Typescript’，所以angular1和angular2从设定之初就是不一样的；

Angular1.x在设计之初主要是针对pc端的，对移动端支持较少（当然也有其他一些衍生框架如ionic），而Angular2是设计包含移动端的；

Angular 1的核心概念是$scope，但是angular2中没有$scope，angular2使用zone.js来记录监测变化；

Angular 1 中的控制器在angular2中不再使用，也可以说控制器在angular2中被‘Component’组件所替代：

Angular 2中, 指令的结构、用法作了一些调整，比如1中的ng-repeat被*ngFor替代

Angular 2中, 自带原始指令在使用的时候要加上哈希(#)前缀

<div *ngFor="#technicalDiary of technicalDiries">

双向数据绑定: [(ngModel)]的写法替换了ng-model

Angular 2主要的性能优化改进是使用了分层依赖注入系统。 Angular 2实现了基于单向树的变化检测，这再次提高了性能；这些优化改进是的angular2的速度比angular1的速度提高很多；

Angular 2的大小是20kb左右，相对于angular1体积减少很多，在移动端的应用中，流量方便更占优势；

支持影子 DOM；

支持 Android 和 iOS 的原生移动渲染；

支持服务端渲染

总结：

很多人觉得从angular1转向angular2的时候学习曲线陡峭，所以在进军angular2的时候还是先做点预习功课比较好，也是因为改动较大，对angular2的设计思想、原生组件写法和工作原理有一定的了解，学习使用的过程中也更好跨阶。

尽管angular2还在应用测试阶段，但是新版本相对于angular1有了长足的优化改进，相信它会越来越多的被应用到各个应用开发中，并且angular2只会load应用所需的组件(components)，这也是个很好的改进，一些统计网站上的数据显示angular的速度比angular1快五倍，不得不说这次angular2的改版升级是非常给力的；

Vue

说一说对 vue 的理解

是一个轻量的 MVVM 框架。写程序的时候更少的去关注 DOM 的改动，而是将重点放在数据之上。双向绑定完成之后，数据的改变会驱动页面显示的变化。当一个站点或者网站拥有极大数据量，且点击一个区块会发生很多页面数据改变的时候。这个网站就可以使用 vue 框架。并且 vue 的组件化的写法极为友好，也是分为 template 、script 、style 将 HTML、JS、CSS 放置到一个 vue文件之中。并且有 vuex 和 vue-router 等机制。

请谈谈Vue中的MVVM模式

MVVM全称是Model-View-ViewModel

Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。 ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的这个HTML元素可以是body，也可以是某个id所指代的元素。

DOMListeners和DataBindings是实现双向绑定的关键。DOMListeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；DataBindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。

v-show和v-if指令的共同点和不同点?

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

如何让CSS只在当前组件中起作用?

将当前组件的<style>修改为<style scoped>

vue 中父子组件之间传值是怎样进行的

父组件通过属性的形式向子组件进行传值。

子组件通过事件触发的形式向父组件传值

父子组件传值时，有单向数据流的规定。父组件可以向子组件传递任何的数据，但子组件不能修改父组件传递过来的数据。如果一定要进行修改，只能通过修改复制副本的方式进行。

vue生命周期简记

生命周期

beforeCreate：创建前，new操作，已绑定事件，还没有数据，不能处理数据

created：创建，可以处理数据

beforeMounted：挂载前，准备把创建的挂载到el上，有el才去执行挂载

挂载前的el仍是<div id="app"></div>

有template转化后执行render funcion再去渲染

cli中的.vue文件中的template是通过vue-loader直接转化直接执行render funcion的减少耗时

mounted：挂载，挂载后$el就是渲染后的<div>123</div>，挂载前后中间执行render funcion

beforeUpdated：更新前，数据变化

updated：更新

beforeDestroy：销毁前，组件被销毁，或手动销毁

destroy：销毁

注：

挂载前的钩子里获取不到el的，想对如data中的数据进行操作最早要在created里；

一般在created和mounted钩子里写一些页面渲染前的操作，比如数据请求；

有些传统的第三方库在使用后需要在组件销毁时手动删除其创建的对象在destroy中

<keep-alive></keep-alive>的作用是什么?

<keep-alive></keep-alive>包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

vue-cli 工程技术集合介绍

问题一：构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？

1、vue.js：vue-cli工程的核心，主要特点是 双向数据绑定 和 组件系统。

2、vue-router：vue官方推荐使用的路由框架。

3、vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。

4、axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。

5、vux等：一个专为vue设计的移动端UI组件库。

6、创建一个emit.js文件，用于vue事件机制的管理。

7、webpack：模块加载和vue-cli工程打包器。

问题二：vue-cli 工程常用的 npm 命令有哪些？

下载 node_modules 资源包的命令：npm install

启动 vue-cli 开发环境的 npm命令：npm run dev

vue-cli 生成 生产环境部署资源 的 npm命令：npm run build

用于查看 vue-cli 生产环境部署资源文件大小的 npm命令：npm run build --report

命令效果：

在浏览器上自动弹出一个 展示 vue-cli 工程打包后 app.js、manifest.js、vendor.js 文件里面所包含代码的页面。可以具此优化 vue-cli 生产环境部署的静态资源，提升 页面 的加载速度。

问题三：vue-cli 工程目录结构介绍

1、build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。

2、config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。

3、dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。

4、node_modules：存放npm命令下载的开发环境和生产环境的依赖包。

5、src: 存放项目源码及需要引用的资源文件。

6、src下assets：存放项目中需要用到的资源文件，css、js、images等。

7、src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。

8、src下emit：自己配置的vue集中式事件管理机制。

9、src下router：vue-router vue路由的配置文件。

10、src下service：自己配置的vue请求后台接口方法。

11、src下page：存在vue页面组件的文件夹。

12、src下util：存放vue开发过程中一些公共的.js方法。

13、src下vuex：存放 vuex 为vue专门开发的状态管理器。

14、src下app.vue：使用标签渲染整个工程的.vue组件。

15、src下main.js：vue-cli工程的入口文件。

16、index.html：设置项目的一些meta头信息和提供

用于挂载 vue 节点。

17、package.json：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。

问题四：config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置

build 对象下 对于 生产环境 的配置：

index：配置打包后入口.html文件的名称以及文件夹名称

assetsRoot：配置打包后生成的文件名称和路径

assetsPublicPath：配置 打包后 .html 引用静态资源的路径，一般要设置成 "./"

productionGzip：是否开发 gzip 压缩，以提升加载速度

dev 对象下 对于 开发环境 的配置：

port：设置端口号

autoOpenBrowser：启动工程时，自动打开浏览器

proxyTable：vue设置的代理，用以解决 跨域 问题

问题五：请你详细介绍一些 package.json 里面的配置

常用对象解析：

scripts：npm run xxx 命令调用node执行的 .js 文件

dependencies：生产环境依赖包的名称和版本号，即这些 依赖包 都会打包进 生产环境的JS文件里面

devDependencies：开发环境依赖包的名称和版本号，即这些 依赖包 只用于 代码开发 的时候，不会打包进 生产环境js文件 里面。

说一说对 vuex 的理解

vuex 就是一个仓库，仓库里面放了很多对象。其中 state 就是数据源存放地，对应于与一般 Vue 对象里面的 data。使用 vuex 可以简单、快速的完成兄弟组件之间的传值。不用经过一个中间组件再传递一次值或者事件。降低了耦合，也有很好的可维护性、可读性。

vue 使用vue-i18n做全局中英文切换

1、vue-i18n安装npm install vue-i18n --save-dev

2、在main.js文件中引入

3、新建中英文语言文件

4、创建一个切换语言方法（写在App.vue可以全局控制）；

5、在template中的使用：

React

Redux

react将dom解耦，不用直接操作dom，使用了状态机制，当状态改变时视图就会相应更新。我们知道在react中，父组件可以将一些状态传递给子组件，让子组件的视图相应更新，这时我们会发现，只有有关联的组件才可以依次传递，那些没有父组件与子组件关系的组件，这些组件之间的某些状态是共享的，这时就需要redux了。

redux的主要设计思想：1）web应用是一个状态机，视图与状态是一一对应的 2）所有的状态都保存在一个对象里

redux包含两个步骤，发起Action和产生新state的reducer

Action的函数可以是自己写的一个请求后台数据的函数，也可以使用react-actions中的createAction，与后台无交互，只是传入更新的state

Reducer的函数接收Action传入的state，通过对state操作返回新的state，在需要该state的组件使用该reducer更新state

redux的设计思想之一就是所有的数据都在一个对象里，那么当reducer过于繁多时，就会导致代码难于维护，所以我们可以拆分成几个小的reducer，最后将这些reducer合并成大的reducer，redux提供了combineReducers函数可以将子reducer合并成一个state对象

小程序

小程序有哪几种跳转页面的方式

wx.switchTab：跳转 app.json 的页面（路由方式）

wx.navigateTo：跳转到指定页面，保存当前页面。

wx.redirectTo：跳转到指定页面，关闭当前页面。

wx.navigateBack：返回之前页面,跳转之前的页面

Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

Node.js 的包管理器 npm，是全球最大的开源库生态系统。

最后：

“相信有很多想学前端的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，53763，1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。”