各种设计模式的JavaScript实现,随手coding
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
DI
JQ
MVVM
PROMISE
PUB-SUB
Rerender
USE
.gitignore
README.md
package.json

README.md

实现一些常用框架中的设计模式

目标:加深对一些框架的理解,打算实现一下常用框架中的经典设计模式

Render: 类VUE渲染

  • 在ng,vue中,我们都会用到{{}},这样的模版语法,然而这套语法是如何实现的呢?
  • 请看./Rerender实现步骤: 主要是获取html标签所有属性,遇到规则匹配的属性就进行替换

DI :依赖注入

  • 在绝大多数后端框架,以及前端的angular框架中都有实现依赖注入

  • 好处:参考代码,tom模块依赖 person/animal模块,如果不使用依赖注入那么在tom模块中,我就需要手动引入person/animal并进行初始化,我就需要关心这两个模块的路径,传参,如何初始化等一系列问题,而且后期测试时非常不友好。但是使用di之后,我只需要引入我要的依赖,至于如何查找,初始化,交给di去做就可以了,测试时我只需要关注tom模块是否正确

  • 简明实现思路:1:注册服务,2:解析模块的依赖,3:查找依赖并返回给模块

PUB-SUB :发布-订阅模式

  • angular中的$emit/$on,以及后端微服务常用的消息/事件解耦一般也都是,发布订阅模式的演化和使用

  • 好处:很好用的解耦的模式,方便测试.......

  • 实现思路:构造一个消息队列Queue,订阅者往Queue中添加自己需要订阅的事件,当发布者发布一个事件时,遍历 整个Queue,触发订阅者订阅的事件

PROMISE

  • 根据promise A+规范,一步一步实现一个promise

  • 深入了解promise原理

  • 记:之前promise都是直接用ES6中的原生Promise,也知道基本的用法,然而对整个promise的实现却很模糊....

middleware :中间件

  • node的 express koa框架核心都是 .use() 这个方法,也就是中间件

  • 好处:整个web server 对http req的流程十分简明

  • 实现思路:

MVVM :双向绑定

  • 代表做即angular,观察者模式

  • 简化前端的大多数操作

  • 实现思路:双向数据流: view -> viewmodel -> model view <- viewmodel <- model 视图或者数据模型的值变化后,通知viewmodel,通知对应的view