架构问题汇总01

1.MVC，MVP，MVVM架构模型区别有哪些？

首先，我们需要清楚的知道这三个架构模型都是在解决代码复杂度的问题，让我们的代码耦合度更低，更易于被维护。那么，先对这几个架构模型中的层级做一个简单的介绍：

• Model（模型层）:执行数据获取，加工处理等相关的逻辑操作；
• View（视图层）:纯前端界面，不包含任何业务逻辑；
• Controller（控制层）:业务逻辑封装在这个层；
• ViewModel（视图模型层）:业务逻辑封装在这个层，基于双向数据绑定的双向通信方式；
• Presenter（代理层）：业务逻辑封装在这个层；

 标准的MVC模型中处理流程是单向的，这导致任何小的修改都要经过整个完整的处理流程，开发起来很不灵活，而且代码执行效率也很低。因此，后面出现了一些MVC的变体，在变体中增加了View层对Model层的修改。

这样的修改使得整个处理流程更加灵活，但是同样也带来了一些问题：

• 由于View层和Controller层都可以修改Model层的数据，导致在复杂的应用中，很难排查是哪一层对Model做出了修改，从而使得数据流向变得混乱不堪；
• 由于放开了View层对Model层的修改，在开发的时候很多人会把View层当成Controller层来用，这使得View层业务处理逻辑越来越庞大，代码耦合度变高可读性下降，代码很难被维护。而Controller层的业务处理逻辑则越来越少，这给开发者一种错觉，使更多的人认为在MVC模型中Controller层可有可无，这样的拓展变体似乎使得MVC架构的层级与原来的职责定位不一致。因此，整个架构需要应用另外一个架构模型来解决当前的问题。

MVP模型中，由于切断了View层和Model层的通信能力，这使得整个应用的大部分业务处理逻辑都放在了Presenter层里，比如：DOM监听，数据绑定等。这使得Presenter层过于臃肿。其次，由于Presenter层与View层和Model层都是双向通信，这使得Presenter层不得不增加额外的调度逻辑。随着应用的体量越来越大，Presenter层也越来越庞大且复杂，代码在未来可能会面临难以维护的风险。

为了，解决此问题，聪明的人们又想出了另外一个架构模型MVVM模型。MVVM模型和MVP模型其实是类似的，只是应用了双向数据绑定机制，使得MVP模型中Presenter层与其他两层的双向数据交互变得更加自动化，因此作为开发者我们不需要编写更多的代码用来完成调度逻辑，这也算是 “ 手动 ” 向 “ 自动 ” 的一层升级。

2.什么是前端架构？

前端架构是一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流。在此前提下，前端架构师的主要工作就是设计整个项目前端工程的结构，开发，或者引入外部工具。根据特定的项目需求背景制定不同任务的流程，并统一流程规范。这里的任务包括：代码转换，文件优化，代码分割，模块合并，代码校验，自动发布等。从而通过持续优化最终实现高效可持续的工作流，。通常前端工作流分为以下五步：①开发；②测试；③构建；④部署；⑤监控。其实，前端架构的整个过程也是进行前端工程化，自动化实践的过程。

参考资料：如何理解前端工程化？

3.如何进行CSS架构设计？

CSS架构过程是一个解耦，并考虑复用性的过程。进行CSS架构的时候可以从两个角度考虑：

• 纵向分层：纵向指的是CSS的深度，我们可以从最外层的div计算深度，从1开始，依次类推。
• 横向分类：我们可以对整个应用的样式进行分类，然后在对应的样式文件中进行样式编写。

 <!-- 层级 1：自定义的界面的根容器，区别于body本身 -->
    <div class="app-container">
        <!--层级2：头部工具栏 -->
        <div class="app-header"></div>
        <!--层级2：主体内容区 -->
        <div class="app-main">
            <!-- 层级3：左侧菜单 -->
            <div class="left-menu">
            </div>
            <!-- 层级3：右侧内容显示区 -->
            <div class="right-content">
            </div>
        </div>
    </div>

在实际开发中，我们有一些比较成熟的CSS架构模式，如下所示：

• OOCSS模式：在编写面向对象CSS（Object-Oriented CSS ）的时候，我们首先要考虑的是抽象，其次考虑如何进行封装，以及如何实现继承。编写OOCSS的过程中，有两个基本的原则需要被遵守：①分离结构和皮肤；②分离容器和内容；（详细描述请看这里）
• BEM模式：BEM指的是（块）Block，（元素）Element，（修饰符）Modifier的简写，BEM规范了在CSS编写过程中的命名问题，使CSS的命名更符合语义化要求；（详细描述请看这里）
• SMACSS模式：即Scalable and Modular Architecture for CSS，指的是编写模块化、结构化和可扩展的 CSS。在SMACSS中，核心就是对样式进行分类。通常把项目的样式分成了五类：①Base（基础）：存放默认样式；②Layout（布局）：布局相关样式；③Module（模块）：界面中那些具备独立性，可用性的界面组成单元，都可以称为模块。比如，管理系统中的侧边栏，导航栏，数据列表等；④State（状态）：存放元素交互状态相关的样式，比如：禁用，激活，查看，隐藏，成功，失败等等的状态；⑤Theme（主题）：存放那些未来会做主题化的通用元素的外观样式。当我们需要封装公共样式时，SMACSS架构模式会非常有用。（详细描述请看这里）
• ACSS模式：原子化CSS，它倾向于设计小巧且用途单一的class，并且会以视觉效果命名。简言之，就是针对某个CSS属性定义一个类名，从而保证类的原子性。（详细描述请看这里）

相关文档：我是如何对网站CSS进行架构的 « 张鑫旭-鑫空间-鑫生活

4.工程化是什么？

首先，我们应该明白工程化是一种思想，而不是指代某个技术。在实践中，工程化可以认为是使用科学的方法和技术手段改造某个生产过程，并使其符合工程标准。那么，我们就很容易明白前端工程化指的是使用组件化，模块化，自动化等方法论及各种技术工具来进行前端工作流改造的过程。运用工程化思维也有一个前提，我们要评估我们的项目体量，如果只是一些简单的静态页面，我想工程化也就无从谈起了。如果非要刻意的运用工程化思维，反而有种杀鸡焉用牛刀的感觉。其次，工程化在实践中应该是一个持续的过程。因此，我们应该利用工程化思维在性能，稳定性，可用性，可维护性等方面持续的优化。并不断完善优化整个前端工作流，使其更高效。