来源: 趣谈前端公众号

作者: 徐小夕

老牌的组件库

相信 组件库 这东西大家都不陌生吧？

为什么要使用路由

现在的网络应用程序越来越多的使用AJAX异步请求完成页面的无缝刷新，导致浏览器的URL不会发生任何变化而完成了请求，从而破换了用户浏览体验。同时本次浏览的页面内容在用户下次使用URL访问时将无法重新呈现，使用路由可以很好地解决这个问题。

随着互联网技术的发展，传统的单体应用架构已经无法满足复杂业务场景的需求。微服务架构的兴起为后端应用的开发和部署提供了灵活性和可扩展性。与此同时，前端开发也经历了类似的演变，前端微服务作为一种新兴的架构模式应运而生。

一、前端微服务的定义

前端微服务是一种将前端应用拆分为多个独立的、松散耦合的子应用的架构模式。每个子应用通常由一个独立的团队开发、测试、部署，并且可以独立运行和更新。前端微服务的核心理念是将单一的、庞大的前端应用拆解为多个小而独立的组件，这些组件通过特定的方式进行组合，以实现最终的用户界面。

首先定义一个构造函数，叫Observe，给构造函数添加一个属性dep，用于收集所有的订阅者，并在原型上添加一个patch方法，用于发布信息。

在这里我想解释一个小概念：所谓的订阅者（观察者），其实就是我们接到数据后进行处理的函数，Observe中的dep属性，收集的就是这一堆回调函数。

因此，我们的patch方法很简单，就是遍历dep中收集的回调函数（订阅者/观察者），并依次调用。

为了方便我们任何一个函数都可以做为观察者使用，直接在Function构造函数的原型上添加两个方法，一个叫subscribe（订阅），一个叫unsubscribe（取消订阅）。

前端开发的技术选项主要包含以下几点，下面对一些名词概念的解释做了笔记：

1、分层架构：把功能相似，抽象级别相近的实现进行分层隔离

优势：松散耦合（易维护，易复用，易扩展）

常见分层方式：MVC，MVVM

2、模块化：解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程

hash模式：

1.hash模式的路由中带有#号
2.hash模式通过window.onhashchange 方法监听路由的改变
3.hash模式刷新页面的时候，发送的url是不带#号后面的内容的

最近，我又看到了一个新的前端框架，它的名字叫做 ofa.js，其实我更觉得它就是一个库，有点类似于

在MyBatis的两万多行的框架源码中，使用了大量的设计模式对工程架构中的复杂场景进行解耦，这些设计模式的巧妙使用是整个框架的精华。

原则概述

定义：在进行软件系统设计时所要遵循的一些经验准则，应用该准则的目的通常是为了避免某些经常出现的设计缺陷。（百度百科）

目标：降低系统耦合度、提高代码复用率、增强系统可靠性或使得系统易于维护。

七大原则