关于常见的前台架构面试汇总题

1.假如让你来制作一个访问量很高的大型网站，你会如何来管理所有css、js文件、图片？

（1）遵循自定的一套CSS，JS和图片文件和文件夹命名规范

（2）依托采使用的前台工程化工具，依照工具脚手架规范 (gulp, webpack, grunt, yeoman)

（3）依据采使用的框架规范（Vue, React, jQuery）

2.假如没有框架、怎样搭建你的项目

应使用原生JS自己尝试搭建一个MVC架构：

(1) 基本板块

common：公共的一组件，下面的各板块都会使用到

config：配置板块，处理框架的配置问题

startup：启动板块，处理框架和Servlet如何进行整合的问题

plugin：插件板块，插件机制的实现，提供IPlugin的笼统实现

routing：路由板块，处理请求路径的解析问题，提供了IRoute的笼统实现和基本实现

controller：控制器板块，处理的是如何产生控制器

model：视图模型板块，处理的是如何绑定方法的参数

action：action板块，处理的是如何调使用方法以及方法返回的结果，提供了IActionResult的笼统实现和基本实现

view：视图板块，处理的是各种视图引擎和框架的适配

filter：过滤器板块，处理是执行Action，返回IActionResult前后的AOP功可以，提供了IFilter的笼统实现以及基本实现

（2）扩展板块

filters：少量IFilter的实现

results：少量IActionResult的实现

routes：少量IRoute的实现

plugins：少量IPlugin的实现

3.在选择框架的时候要从哪方面入手

影响团队技术选型有很多因素，如技术组成，新技术，新框架，语言及发布等。为了更好的考量不同的因素，需要列出重要的象限，如开发效率、团队喜好，依次来决定哪个框架更适合当前的团队和项目。上线时间影响框架选择，不要盲目替换现有框架。

（1）jQuery

项目功可以比较简单。并不需要做成一个单页面应使用，就不需要 MV* 框架。项目是一个遗留系统。与其用其余框架来替换，不如留着以后重写项目。

（2）AngularJS

当我们在制作一个应使用，它对性可以要求不是很高的时候，那么我们应该选择开发速度更快的技术栈AngularJS，她拥有混合开发可以力的ionic框架。对于复杂的前台应使用来说，基于 Angular.js 应使用的运行效率，依然有大量地改进空间。Angular2需要学习新的语言，需慎重选择。

（3）React

选择React有两个起因，一是通过Virtual DOM提高运行效率，二是通过组件化提高开发效率。大型项目首选。选择 React 还有一个起因是：React Native、React VR 等等，能让 React 运行在不同的平台之上。我们还可以通过 React 轻松编写出原生应使用，还有 VR 应使用。

令人遗憾的是 React 只是一个 View 层，它是为了优化 DOM 的操作而诞生的。为了完成一个完整的应使用，我们还需要路由库、执行单向流库、web API 调使用库、测试库、依赖管理库等等，为了完整搭建出一个完整的 React 项目，我们还需要做大量的额外工作。

（4）Vue.js

对于用 Vue.js 的开发者来说，我们依然能用 熟习的 HTML 和 CSS 来编写代码。并且，Vue.js 也用了 Virtual DOM、Reactive 及组件化的思想，能让我们集中精力于编写应使用，而不是应使用的性可以。

对于没有 Angular 和 React 经验的团队，并且规模不大的前台项目来说，Vue.js 是一个非常好的选择。

4.聊一聊前台模板与渲染

（1）页面级的渲染，后台模板

如smarty，这种方式的特点是展现数据快，直接后台拼装好数据与模板，展示到使用户面前，对SEO友好。

（2）异步的请求与新添加模板，前台模板

如Mustache，ArtTemplate，前台解析模板的引擎的语法，与后台解析模板引擎语法一致。这样就达到了一份HTML前后台一起用的效果。

来源：千锋HTML5