AngularJS 面试题及答案（真实职场版）

AngularJS面试题及答案（真实职场版）一、基础核心面试题1.简单说说你对AngularJS的理解，它的核心特性有哪些？AngularJS是一款基于MVC模式的前端JS框架，主打双向数据绑定，主要用于快速开发单页应用（SPA），大幅简化前端DOM操作，提升开发效率。核心特性主要包含：双向数据绑定、MVC/MVVM架构、依赖注入、指令系统、服务与依赖管理、模板引擎、过滤器、路由机制。和原生JS相比，不用手动操作DOM，数据驱动视图是它最大的优势。2.什么是双向数据绑定？它的实现原理是什么？双向数据绑定指的是模型（数据层）和视图（页面层）相互同步：数据变更会自动更新页面视图，页面输入修改也会自动同步更新数据模型。AngularJS核心通过脏值检测（$digest机制）实现：1.页面绑定数据后，框架会监听绑定的变量；2.当触发交互、接口请求、定时器等事件时，会启动$digest循环；3.循环遍历所有监听变量，对比新旧值，发现变化就更新视图；4.反复检测直到所有数据稳定，结束循环。3.AngularJS中$scope和$rootScope的区别？1.$rootScope：是根作用域，整个应用全局唯一，所有控制器、指令的作用域都继承自它，全局定义的数据所有页面、控制器都能访问。2.$scope：是局部作用域，每个控制器、指令都会创建独立的$scope，作用域相互隔离，仅当前模块内部可用。子作用域可以继承父作用域数据，父作用域无法访问子作用域数据。注意：尽量少用$rootScope挂载全局变量，容易造成全局变量污染、数据冲突、调试困难。4.AngularJS常见的内置指令有哪些？分别说说用途-ng-model：双向数据绑定，多用于输入框、单选、复选等表单元素；-ng-bind：单向数据绑定，渲染数据到页面，避免页面闪烁问题；-ng-repeat：循环渲染列表，常用于数组、对象遍历；-ng-show/ng-hide：控制元素显示隐藏，通过CSSdisplay属性切换，元素始终存在于DOM中；-ng-if：条件渲染，条件不成立时直接移除DOM节点，成立后重新创建，性能优于ng-show；-ng-click/ng-change：绑定点击、值改变等事件；-ng-class/ng-style：动态绑定样式类、行内样式。5.ng-if和ng-show的区别？项目中如何选择？核心区别：1.渲染机制：ng-if是DOM节点增删，条件不满足直接移除节点；ng-show是样式切换，节点始终存在，仅控制显示隐藏。2.性能消耗：ng-if切换时会重新创建销毁DOM，切换频繁时性能差；ng-show只是CSS切换，频繁切换性能更好。3.作用域：ng-if会创建独立子作用域，内部变量外部无法直接访问；ng-show沿用当前作用域。使用场景：-页面状态切换不频繁、需要减少DOM节点数量，用ng-if；-频繁切换显示隐藏（如弹窗、按钮状态），用ng-show。二、进阶核心面试题1.说说AngularJS的脏值检测机制，以及它的优缺点AngularJS没有采用浏览器原生的事件监听，而是自主实现脏值检测体系。所有数据绑定的变量都会被加入监听队列，每次触发$digest循环时，会遍历所有Watcher，对比变量新旧值，判断是否更新视图。优点：无需手动监听数据变化，开发简洁，适配绝大多数前端业务场景，降低数据同步成本。缺点：数据量大、绑定变量过多时，$digest循环遍历耗时变长，页面会出现卡顿；频繁触发循环会造成性能冗余。2.$apply、$digest、$watch的关系和区别-$watch：数据监听函数，用于监听指定变量、表达式的变化，变化时触发回调，可自定义监听逻辑；-$digest：脏值检测的核心执行方法，遍历所有Watcher，更新变化的数据和视图，是框架底层自动调用的方法；-$apply：手动触发方法，用于原生JS事件、定时器、AJAX原生请求等非Angular事件场景，手动调用$apply可以主动启动$digest循环，同步更新视图。总结：$watch负责监听，$digest负责检测更新，$apply负责手动触发检测。3.AngularJS中的服务有哪些？factory、service、provider的区别常用内置服务：$http、$timeout、$interval、$location、$filter等，用于处理接口请求、定时器、路由地址、数据过滤等通用逻辑。自定义服务三种方式区别：1.factory：返回一个对象，最常用，适合定义通用方法、数据工具，灵活度最高，项目中90%自定义服务都用factory；2.service：基于构造函数创建，通过new实例化，内部用this挂载属性和方法，适合面向对象的服务封装；3.provider：唯一可以在config配置阶段注入的服务，支持全局配置，适合需要全局初始化配置的场景（如接口域名、全局请求拦截配置）。4.AngularJS路由机制是什么？ui-router和原生ng-route的区别AngularJS通过路由实现单页应用页面跳转，无刷新切换视图。原生ng-route：功能简单，仅支持基础路由跳转、参数传递，不支持嵌套路由、多视图，无法实现复杂页面布局，适合简单项目。ui-router：企业主流使用，基于状态管理路由，支持嵌套路由、多视图共存、路由传参、路由钩子、路由懒加载，适配中大型复杂项目。5.如何解决AngularJS页面闪烁问题？页面闪烁原因：页面加载时，AngularJS脚本未执行完成，页面会短暂展示{{}}插值表达式，加载完成后才渲染数据。常用解决方案：1.使用ng-bind替代{{}}插值渲染；2.页面根节点添加ng-cloak指令，配合内置样式隐藏未渲染的插值；3.首屏关键数据提前加载，避免延迟渲染。三、实战踩坑与优化面试题1.AngularJS定时器$timeout和原生setTimeout的区别？使用注意事项1.$timeout是Angular封装的定时器，执行完成后会自动触发脏值检测，自动更新视图；原生setTimeout不会触发，需要手动调用$apply才能更新页面。2.页面销毁时，$timeout会被框架自动清除，避免内存泄漏；原生定时器需要手动清除，否则会造成内存溢出、报错。注意：项目中优先使用$timeout，控制器销毁时尽量取消未执行的定时器。2.项目中AngularJS性能优化的常用方案1.减少不必要的Watcher：减少页面多余的数据绑定、重复监听，避免过多变量参与脏值检测；2.列表渲染优化：ng-repeat渲染长列表时，使用trackby绑定唯一标识，减少DOM对比更新开销；3.合理区分ng-if和ng-show，减少无效DOM节点；4.避免频繁手动调用$apply、$digest，减少循环次数；5.通用逻辑封装为服务，避免控制器代码冗余、重复执行；6.长列表做分页、虚拟滚动，一次性不渲染过多DOM节点。3.AngularJS控制器销毁的场景，以及如何避免内存泄漏控制器销毁场景：路由跳转、弹窗关闭、视图销毁时，对应控制器会自动销毁。内存泄漏解决方案：1.控制器销毁时，手动清除定时器、事件监听、全局订阅；2.解绑自定义$watch监听，避免监听残留；3.不随意挂载变量到$rootScope，避免全局变量堆积；4.取消未完成的$http请求，避免页面销毁后回调执行报错。4.说说AngularJS自定义指令的使用场景和核心参数使用场景：封装通用UI组件、复用DOM结构、自定义页面交互逻辑，减少代码冗余，提升复用性。核心参数：-restrict：指令声明方式（E元素、A属性、C类、M注释）；-scope：隔离作用域，实现父子组件数据隔离；-template/templateUrl：指令模板内容/模板地址；-link：核心逻辑函数，处理DOM操作、事件监听、数据绑定；-controller：指令内部控制器，处理业务逻辑。四、面试高频问答（简答）1.AngularJS是单向数据流还是双向数据流？整体为单向数据流，双向数据绑定是基于单向数据流实现的视图同步效果。2.隔离作用域的作用是什么？