前端架构设计应该包含哪些东西？

前端架构设计

后台架构设计概念适用于前端，前端没有数据库设计，所以可以不考虑并发。
vuejs的优点，一样适用于前端项目。高内聚，低耦合，可复用，单元测试。

从项目的生命周期，开发、上线、维护三个阶段考虑

高内聚低耦合，划分清晰的模块职责范围，确定模块依赖和交互关系。
打包优化，自动化部署。高性能、安全可靠、监控，局部更新。
可扩展易维护，以数据来驱动视图，合理的模块拆分，层次清晰。统一的编码风格、文档留存，单元测试。

从实际项目来说，我们一般需要这么做：

每个vue插件一个模块
全局通用的工具类一个模块
公共和私有的vue组件模板
全局常量一个模块
service模块，管理接口请求request和translate，组件模板只关心返回值。
vuex模块，分模块管理公共状态，确定使用vuex的场景。用户身份、本地持久化数据。
全局过滤器模块。
国际化字典单独一个模块。
静态资源按是否需要打包分开管理
代码规范和代码检查
自动化部署，webpack相关方案

业务层的设计宗旨我们关注2点：

可复用
异常即时反馈

以上内容整理略显片面，只是希望可以起到抛砖引玉的作用，让大家明白出发点应该是怎么样。

在ji设计模式中说，分辨模式的关键是意图而不是结构。我觉得结构和意图正好是框架设计需要紧紧围绕的两个核心要素。当你在进行设计时，首先要问问自己为什么这么做，如果不这么做会导致什么问题。

js设计模式

整理了常见的js设计模式，希望大家对常见的js设计模式熟悉以后再读下面的几句话，更容易产生共鸣。

**构造器原型链模式，**是我们比较常见的设计模式，通过原型链继承的方式，将不同实例中的通用部分进行封装，可以通过new关键字创建不同的实例，每个实例都具有相同的原型链。
**模块模式，**将代码封装成独立的模块，将逻辑写道内部，返回内容（可以是值、对象）传递给外部变量。利用闭包达到维系私有变量，防止污染全局作用域，隔离与其他开发者引用冲突。
**单例模式，**保证一个类仅有一个实例。
**观察者模式，**根据数据依赖关系创建观察者，并保存在一个数组中，当依赖数据变化的时候通知当前数据更新。
**代理模式，**通过一个中间对象，实现对一个模块的控制。
**工厂模式，**用于创建对象的接口。根据传入工厂的类型，可以创建出特定类型的对象。这种模式常见的实现通常是利用类或类的静态方法
**责任链模式，**它是一个链式结构，请求在链中的节点之间依次传递，知道有一个对象能处理该请求为止，如果没有能处理的节点就结束执行。
**Mixin模式，**多个类或者对象之间共享的功能，可以抽离出来作为Mixin，如果共享的功能是在单层次中，可以使用继承。在原型继承中，如果继承来自原型，那么对原型做出的修改会影响到从原型继承的一切内容。如果不希望出现这种情况，可以使用mixin。
**命令模式，**将方法调用请求操作封装到单一对象中，从而根据我们不同的请求对客户进行参数化与传递可供执行的方法调用。此外，这种模式将调用操作的对象与知道如何实现该操作的对象解偶，并在交换出具体类方面提供更大的整体灵活性。通过假设桥梁，降低耦合，一定程度遵从OOP
**外观模式，**为更大的代码体提供一个方便的高层次接口，能够隐藏其底层的真实复杂度，可以理解成库的API

前端架构设计应该包含哪些东西？相关推荐

前端架构设计第一课 CI环境npm/Yarn
开篇词像架构师一样思考,突破技术成长瓶颈透过工程基建,架构有迹可循.你好,我是侯策(LucasHC),目前任职于某互联网独角兽公司,带领 6 条业务线前端团队,负责架构设计和核心开发.工程方案调研 ...
前端架构设计第十课前端数据结构和算法
21 如何利用 JavaScript 实现经典数据结构? 前面几讲我们从编程思维的角度分析了软件设计哲学.从这一讲开始,我们将深入数据结构这个话题. 数据结构是计算机中组织和存储数据的特定方式,它的目 ...
前端进阶之路: 前端架构设计(2)-流程核心
可能很多人和我一样, 首次听到"前端架构"这个词, 第一反应是: "前端还有架构这一说呢?" 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视 ...
前端架构设计1：代码核心
现在的前端领域, 随着JS框架, UI框架和各种库的丰富, 前端架构也变得十分的重要. 如果一个大型项目没有合理的前端架构设计, 那么前端代码可能因为不同的开发人员随意的引入各种库和UI框架, 导致代 ...
浅谈京东静态html原理,京东首页前端架构设计.ppt
京东首页前端架构设计工程化 Windows可视化工具 * 工程化前端模块构建平台 * 总结 * QA * * JD.com JD.com JD.com JD.com JD.com JD.com J ...
架构方面学习笔记（3）-前端架构设计
2022.02.08 今天读了一篇关于前端整洁架构的设计,因此对其中的内容进行了一些整理以及我自己的思考,后续阅读<领域驱动设计>后可以加入更多的内容. References: 前端领域的 ...
阿里浅谈大型项目前端架构设计
1.综合我在2年之前,写过一篇中小型项目的前端架构浅谈. 随着能力的上升,以及在阿里巴巴工作的经验,是时候写一篇大型项目的前端架构分析了. 本篇文章不会更多侧重于具体技术实现,而是尝试从更高角度出发 ...
前端架构设计第六课工程化构建、编译、运行
12 如何理解 AST 实现和编译原理? 经常留意前端开发技术的同学一定对 AST 技术不陌生.AST 技术是现代化前端基建和工程化建设的基石:Babel.Webpack.ESLint.代码压缩工具等 ...
从前端架构的出现到微前端架构设计
写在前面的话对于大前端开发岗位,在技术实现上各行业以及应用体系区域完善,也建立了统一的技术栈和规范,这就意味着如果想要从编码为主的开发岗位进一步越迁到架构设计岗位,开发者需要具备完整的技术视野和架构 ...

前端架构设计应该包含哪些东西？

前端架构设计应该包含哪些东西？相关推荐

最新文章

热门文章