设计模式
小曾小肉
热爱生活的你,真可爱
展开
-
学习MVC、MVP、MVVM模式
架构型设计模式 1、MVC模式 前端页面依据MVC思想开发的时候,可将页面分成3层部分,数据层部分、视图层部分、控制层部分。视图层可以调用数据层创建视图,控制器层可以调用数据层数据与视图层内的视图创建页面增添逻辑。 MVC代码 const MVC = {}; // 数据模型层 MVC.model = function(){ const M = {}; M.data = { demo1: {}, // ... }; return {原创 2020-11-04 17:43:11 · 135 阅读 · 0 评论 -
JavaScript设计模式笔记之结构性设计模式
结构性设计模式 1、外观模式 外观模式:为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更容易。在JavaScript中有时也会用于对底层结构兼容性做统一封装来简化用户使用。 function getEvent(event) { // 标准浏览器返回event,IE下window.event return event || window.event; } // 获取元素 var getTarget = function(event) { var e原创 2020-09-21 09:53:09 · 232 阅读 · 0 评论 -
JavaScript设计模式笔记之面向对象编程
面向对象编程 1、两种编程风格——面向过程与面向对象 面向过程 例如,有个输入表单,分别输入手机号、姓名和密码。若要对它们进行输入校验。你可能会创建三个函数checkPhone、checkName、checkPassword分别实现校验功能。这是一个面向过程的实现方式,然而在这种方式中,你会发现无端地在页面中添加了很多全局变量,而且不利于别人重复使用。 面向对象 面向对象编程就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法)。这个对象我们称之为类。 2、面向对象编程思想特点之一—原创 2020-08-09 23:01:42 · 113 阅读 · 0 评论 -
JavaScript设计模式笔记之创建型设计模式
创建型设计模式 1、简单工厂模式 当类太多,并且这些类有很多相似之处,那么可以用一个工厂函数将这些类整合起来,以后想要创建这些类之一时,可直接调用工厂函数传入参数,来选择你想创建的类。 var Benz = function() { this.brand = 'Benz'; } Benz.prototype.getBrand = function() {} var BMW = function() { this.brand = 'BMW'; } Benz.prototype.getBran原创 2020-09-06 15:57:34 · 85 阅读 · 0 评论