Javascript设计模式之原型模式详细


Posted in Javascript onOctober 05, 2021

1、原型模式

原型模式用于在创建对象时,通过共享某个对象原型的属性和方法,从而达到提高性能、降低内存占用、代码复用的效果。

示例一

function Person(name) {
  this.name = name;

  this.config = {
    a: "1",
    b: "2",
  };

  this.hello = function () {
    console.info("hello");
  };
}

假如需要通过以上代码创建 100 个实例,那么将需要创建 100 个 config、100 个 hello,而这两个东西在每个实例里面是完全一样的。

因此我们可以通过提取公共代码的方式进行油优化。

const config = {
  a: "1",
  b: "2",
};
const hello = function () {
  console.info("hello");
};
function Person(name) {
  this.name = name;

  this.config = config;

  this.hello = hello
}

这样的方式使得无论创建多少个Person对象都只需要创建一个config、一个hello。 但是仍然污染全局变量、config被误修改、Person和其他代码耦合大、不易于代码扩展维护等问题。

因此可以通过原型的方式进行优化。

function Person() {}
var p = new Person();

该函数创建实例时原型图如下:

Javascript设计模式之原型模式详细

示例二

function Person(name) {
  this.name = name;

  this.config = {
    a: "1",
    b: "2",
  };

  this.hello = function () {
    console.info("hello");
  };
}

//此方式会重写prototype,造成constructor丢失,变为Object()。
//可以使用Person.prototype.xx=yy的方式写,或者重新指定Person.prototype.constructor=Person
Person.prototype = {
  version: 1.0,
  say: function (arg) {
    console.info(`${this.name} say ${arg}`);
  },
  constructor: Person,
};
var p1 = new Person("p1");
var p2 = new Person("p2");

console.info(p1.config == p2.config); //false
console.info(p1.hello == p2.hello); //false
console.info(p1.say === p2.say); //true
p1.say("qq");
p2.say("qq");
console.info(p1.version === p2.version); //true
console.info(p1.version);

该函数创建实例时原型图如下:

Javascript设计模式之原型模式详细

示例三

function Person(name) {
  this.name = name;

  this.config = {
    a: "1",
    b: "2",
  };

  this.hello = function () {
    console.info("hello");
  };
}

//此方式会重写prototype,造成constructor丢失,变为Object()
Person.prototype = {
  version: 1.0,
  say: function (arg) {
    console.info(`${this.name} say ${arg}`);
  },
};

function PersonA(name) {
  Person.call(this, name);
}
PersonA.prototype = Person.prototype;

function PersonB(name) {
  Person.call(this, name);
}
PersonB.prototype = Person.prototype;
var pA = new PersonA("pa");
var pB = new PersonB("pb");

console.info(pA.config == pB.config); //false  内部属性比较
console.info(pA.hello == pB.hello); //false  内部属性比较
console.info(pA.say === pB.say); //true  原型方法共享
pA.say("qq");
pB.say("qq");
console.info(pA.version === pB.version); //true  原型属性共享
console.info(pA.version); //1.0
Person.prototype.version = 2.0; //修改原型共享属性
console.info(pB.version); //2.0
console.info(new Person().version); //2.0

//修改原型共享方法
PersonB.prototype.say = function (arg) {
  console.info(`v2--- ${this.name} say ${arg}`);
};
pB.say("qq");
new Person("Person").say("ww");

总结:

js 在创建对象比较消耗内存、耗时长,可以通过减少内部属性创建的方式降低内存占用。

而原型模式就是使用 javascript 语言的原型特性进行相同属性的共享,从而达到降低内存占用、提高对象创建效率。

2、观察者模式

观察者模式用于模块、组件之间通讯,通过提供统一的模式进行事件订阅、事件发布。从而达到模块、组件之间解耦,提高代码的可维护性。

模块之间、组件之间通讯方式

Javascript设计模式之原型模式详细

模块之间、组件之间采用直接引用通讯方式

const moduleA = {
  say: function (msg) {
    console.info("A say " + msg);
  },

  letBrun: function () {
    //直接引用了moduleB
    moduleB.run();
  },
};

const moduleB = {
  run: function () {
    console.info("B run ");
  },

  letAsay: function () {
    //直接引用了moduleA
    moduleA.say("hello");
  },
};

moduleA.letBrun(); //B Run
moduleB.letAsay(); //A say hello

模块之间、组件之间采用父组件通讯方式

const moduleA = {
  say: function (msg) {
    console.info("A say " + msg);
  },
};

const moduleB = {
  run: function () {
    console.info("B run ");
  },
};

const parentModule = {
  moduleA,
  moduleB,

  letBrun: function () {
    this.moduleB.run();
  },

  letAsay: function () {
    this.moduleA.say("hello");
  },
};

parentModule.letBrun(); //B Run
parentModule.letAsay(); //A say hello

事件模块实现通讯

function Emitter() {
  this.events = {};
  this.res_oldAction = {}
  this.res_action_events = {}
}

//订阅资源
Emitter.prototype.subscribe = function (res, action, fn) {
  if(!this.res_oldAction[res.name]){
 this.res_oldAction[res.name] = res[action]
 res[action] = (data) => {
      this.res_oldAction[res.name](data)
   const fns = this.res_action_events[res.name].action;
      for (let i = 0; i < fns.length; i++) {
        fns[i](data);
      }
    }
  }
  
  if(!this.res_action_events[res.name]){
 this.res_action_events[res.name] = {}
  }
  
  if(!this.res_action_events[res.name][action]){
 this.res_action_events[res.name][action] = []
  }
  
  this.res_action_events[res.name].action.push(fn)
}

//取消订阅资源
Emitter.prototype.unsubscribe = function (res, action, fn) {
  const fns = this.res_action_events[res.name].action;
  for (let i = 0; i < fns.length; i++) {
 if (fns[i] === fn) {
   fns.splice(i, 1);
   i--;
 }
  }
}

Emitter.prototype.on = function (name, fn) {
  if (!this.events[name]) {
    this.events[name] = [];
  }

  this.events[name].push(fn);
};

Emitter.prototype.remove = function (name, fn) {
  if (!this.events[name]) {
    return;
  }

  const fns = this.events[name];

  for (let i = 0; i < fns.length; i++) {
    if (fns[i] === fn) {
      fns.splice(i, 1);
      i--;
    }
  }
};

Emitter.prototype.fire = function (name, data) {
  if (!this.events[name]) {
    return;
  }

  const fns = this.events[name];

  for (let i = 0; i < fns.length; i++) {
    fns[i](data);
  }
};

const emitter = new Emitter();

//模块A中注册事件
const methodA = (data) => {
  console.info("模块A接受到food消息:");
  console.info(data);
};

emitter.on("food", methodA);

//模块B中注册事件
const methodB = (data) => {
  console.info("模块B接受到food消息:");
  console.info(data);
};
emitter.on("food", methodB);

//模块C中触发事件
emitter.fire("food", "饭来了");

//模块B中移除事件
emitter.remove("food", methodB);

//模块C中再次触发事件
emitter.fire("food", "饭又来了");

执行结果如下:

模块 A 接受到 food 消息:

饭来了

模块 B 接受到 food 消息:

饭来了

模块 A 接受到 food 消息:

饭又来了

总结:

js 组件模块的通讯方式一般分为3种(直接通讯、通过父组件通讯、通过事件模块通讯)。观察者模式用于模块、组件之间通讯,通过提供统一的模式进行事件订阅、事件发布,从而达到模块、组件之间解耦,提高代码的可维护性

到此这篇关于Javascript设计模式之原型模式详细的文章就介绍到这了,更多相关Javascript原型模式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
JS数组方法some、every和find的使用详情
8个JS的reduce使用实例和reduce操作方式
Oct 05 #Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 #Javascript
JavaScript实现简单拖拽效果
Sep 15 #Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 #Javascript
Javascript之datagrid查询详解
Sep 15 #Javascript
Js类的构建与继承案例详解
Sep 15 #Javascript
You might like
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python实现购物车程序
2018/04/16 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
餐饮业会计岗位职责
2013/12/19 职场文书
会计专业毕业生自荐信范文
2013/12/20 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
安全责任协议书
2014/04/21 职场文书
预防传染病方案
2014/06/14 职场文书
本科生自荐信
2014/06/18 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年统计工作总结
2014/11/21 职场文书
五四青年节活动总结
2015/02/10 职场文书
2014年个人总结范文
2015/03/09 职场文书
河童之夏观后感
2015/06/11 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
浅谈Redis的几个过期策略
2021/05/27 Redis