JavaScript设计模式
文章平均质量分 93
JavaScript设计模式
Prosper Lee
谁又能来拯救我这灰暗的人生呢……
展开
-
JavaScript设计模式(八):架构型设计模式-MVC模式、MVP模式
即模型(Model)- 视图(View)- 管理器(Presenter):View层不直接引用Model层内的数据,而是通过Presenter层实现对Model层内的数据访问。MVP与MVC相比最重要的特征就是MVP中将视图层与数据层完全解耦,使得对视图层的修改不会影响到数据层,数据层内的数据改动又不会影响到视图层。因此,我们在管理器中对数据或者视图灵活地调用就可使数据层内的数据与视图层内的视图得到更高效的复用。因此,MVP模式也可以实现一个管理器,可以调用多个数据,或者创建多种视图,而且是不受限制的。原创 2022-11-14 13:09:41 · 325 阅读 · 0 评论 -
JavaScript设计模式(七):架构型设计模式-Widget模式
Widget模式是指借用Web Widget思想将页面分解成部件,针对部件开发,最终组合成完整的页面。原创 2022-11-14 13:07:32 · 816 阅读 · 0 评论 -
JavaScript设计模式(六):架构型设计模式-同步模块模式(SMD)、异步模块模式(AMD)
由于浏览器中的文件是异步加载的,虽然现在开始加载demo.js文件,不过在文件没有加载完之前你可以继续做其他的事情,并且你写的方法,对于文件什么时候加载完成,你是无法获知的。通过对模块的引用,提高了模块代码复用率。请求发出后,继续其他业务逻辑,直到模块加载完成执行后续的逻辑,实现模块开发中对模块加载完成后的引用。:将复杂的系统分解成高内聚、低耦合的模块,使系统开发变得可控、可维护、可拓展,提高模块的复用率。:将复杂的系统分解成高内聚、低耦合的模块,使系统开发变得可控、可维护、可拓展,提高模块的复用率。原创 2022-11-07 16:14:42 · 522 阅读 · 0 评论 -
JavaScript设计模式(五):技巧型设计模式-链模式(jQuery实现机制)、委托模式、数据访问对象模式、节流模式、简单模板模式、惰性模式、参与者模式(柯里化)、等待者模式(Promise)
实现类似于的框架语法原型式继承找位助手此时因为返回的是,所以使用访问不到.于是我们可以借助第三方对象进行访问而在中,为了减少变量的定义,将想使用的变量作为了的一个获取元素两个问题此时是无法访问方法的,因为返回的是元素,故可以使用解决覆盖问题: 覆盖获取: 使用new关键字进行处理,让被赋值的变量都是独立的对象方法丢失对比jQuery对比返回对象的构造器解决方法: 丰富元素获取数组与对象方法拓展添加方法并使用区别未原创 2022-11-06 08:28:01 · 297 阅读 · 0 评论 -
JavaScript设计模式(四):行为型设计模式-模板方法模式、观察者模式(发布订阅模式)、状态模式、策略模式、职责链模式、命令模式、访问者模式、中介者模式、备忘录模式、迭代器模式、解释器模式
需求:定义一个全局能用的弹出框特点:实现三位工程师的功能使用整合这三个功能理解:超级玛丽-状态模式状态模式(State)解决多分支判断问题状态对象的实现 (状态模式的基本雏形)示例:形势:特点:(需求:商场促销活动)()特点:第一站 —— 下一站 —— 终点站 —— 单元测试命令模式命令模式(Command)自由化创建视图命令绘图命令特点:不用关心每种方法的具体实现了,即使在不同浏览器实现不一致我们也不用关心,因为那些不兼容原创 2022-10-30 08:38:51 · 147 阅读 · 0 评论 -
JavaScript设计模式(三):结构型设计模式-外观模式、适配器模式、代理模式、装饰者模式、桥接模式、组合模式、享元模式
需求:为指定按钮添加一个事件⚠ 注意:为 绑定了 事件,但 是 ,也就是说这种方式绑定的事件相当于为元素绑定一个事件方法,所以如果团队中有人再次通过这种方式为 绑定 事件时,就相当于重复定义了一个方法,会将你定义的 事件方法覆盖,如下列程序:实现优化:特点:团队内存在一个和jQuery类似的A代码库,但是现在要代码库中的方法适配到jQuery上,该如何实现?适配实现:参数适配通过传入对象的方式进行参数的适配 牛郎织女-代理模式代理模式(Proxy)原创 2022-10-23 08:07:58 · 480 阅读 · 0 评论 -
JavaScript设计模式(二):创建型设计模式-简单工厂模式、工厂方法模式、抽象工厂模式、建造者模式、原型模式、单例模式
通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例。抽象方法只负责告诉开发者要实现什么方法,并不负责真正的逻辑处理,可以理解为子类要实现所定义功能的模板// 抽象类 /*** 抽象工厂方法 - 寄生式继承* @param {Class} subType 子类* @param {Class} superType 父类// 判断抽象工厂中是否有该抽象类 if(typeof VehicleFactory [ superType ] === 'function') {原创 2022-10-17 09:23:52 · 374 阅读 · 0 评论 -
JavaScript设计模式(一):面向对象编程 - 继承
/ 利用闭包实现 let Book =(function() {// 静态私有变量 let bookNum = 0;// 静态私有方法 let checkBook = function(name) {};// 创建类 function _book(newId , newName , newPrice) {// 私有变量 let name , price;// 私有方法 function checkID(id) {} // 特权方法 this . getName =() => name;原创 2022-10-10 11:50:07 · 2234 阅读 · 0 评论