javascript设计模式读书笔记=;创建型设计模式(代码片段)

刘翾 刘翾     2022-12-02     670

关键词:

全系列目录

  1. JavaScript设计模式读书笔记(一)=> 创建型设计模式
  2. JavaScript设计模式读书笔记(二)=> 结构型设计模式
  3. JavaScript设计模式读书笔记(三)=> 行为型设计模式
  4. JavaScript设计模式读书笔记(四)=> 技巧型设计模式
  5. JavaScript设计模式读书笔记(五)=>架构型设计模式,MVC,MVP,MVVM

文章目录

1. 简单工厂模式

为了尽量减少地创建全局变量,同一类对象在不同需求中的重复性使用。通过对简单工厂来创建一些对象,可以让这些对象共用一些资源而又私有一些资源。对于简单工厂模式来说,它的使用场合通常也就限制在创建单一对象。

// e.g.
function createPop(type, text) 
  const o = ;
  o.content = text;
  o.show = function() 
    return this; 
  
  switch (type) 
    case 'asd':
      o.a = 123;
      break;
    default:
      break;
  
  return o;

2. 工厂模式

对于创建多类对象,前面学过的简单工厂模式就不太适用了,通过工厂模式可以轻松创建多个类的实例对象,这样工厂方法在创建对象的方式也避免了使用者与对象类之间的耦合,用户不用关心创建对象的具体类,只需调用工厂方法即可。

// e.g. 安全模式创建的工程类
const Factory = function (type, content)
  if (this instanceof Factory) 
    return new this[type](contnet);
   else 
    return new Factory(type, content)
  


Factory.prototype = 
  Java: function (content) 
    // asd
  ,
  Python: function (content) 
    // zxc
  

安全模式可以避免用户当成函数直接调用导致获取不到实例方法。

书看到这里时来了个疑问 =》为什么函数直接在prototype上定义属性,函数却没法直接访问,经过查找资料总结如下:

function Fn() 
    this.hello = function () 
        console.log('实例方法');
    


Fn.hello = function() 
    console.log('静态方法');


Fn.prototype.hello = function () 
    console.log('实例共享方法(对象方法)');

3. 建造者模式

建造者模式关心的是对象创建过程,因此我们通过将创建对象的类模块化,这样使得被创建的类的每一个模块都可以得到灵活的运用与高质量的复用。
对于整体对象的拆分无形中增加了结构的复杂性,因此如果对象粒度很小,或者模块复用率很低最好还是创建整体对象

const Human = function (param) 
  this.skill = param || '保密';


Human.prototype.getSkil = function () 
  return this.skill;


const Named = function(name) 
  this.wholeName = name;
  const indexSpace = name.indexOf(' ')
  if (indexSpace > -1) 
    this.firstName = name.slice(0, indexSpace);
    this.lastName = name.slice(indexSpace);
  


const Person = function(param, name) 
  const o = new Human(param);
  Named.call(o, name);
  return o;


const Liu = Person('asd', 'liu xuan');

4. 原型模式

原型模式可以让多个对象分享同一个原型对象的属性与方法,这是一种继承方式。

代码以及继承讲解博主之前写过一篇文章:https://blog.csdn.net/c_kite/article/details/80261544

5. 单例模式

单例模式只允许实例化一次的对象类,它也经常作为命名空间对象来实现,类似Jquery的$符号。

这个例子很简单没什么说的

// e.g.

const A = 
	c: function(),
	d: function()

结合es6的Symbol实现单例

// 代码出处 http://es6.ruanyifeng.com/#docs/symbol#%E5%AE%9E%E4%BE%8B%EF%BC%9A%E6%A8%A1%E5%9D%97%E7%9A%84-Singleton-%E6%A8%A1%E5%BC%8F
const FOO_KEY = Symbol('foo');

function A() 
  this.foo = 'hello';


if (!global[FOO_KEY]) 
  global[FOO_KEY] = new A();


module.exports = global[FOO_KEY];

参考资料:

  1. 张容铭著 javascript设计模式 40-66页
  2. https://segmentfault.com/q/1010000007817639
  3. http://es6.ruanyifeng.com/#docs/symbol#实例:模块的-Singleton-模式

javascript设计模式读书笔记=;技巧型设计模式(代码片段)

全系列目录JavaScript设计模式读书笔记(一)=>创建型设计模式JavaScript设计模式读书笔记(二)=>结构型设计模式JavaScript设计模式读书笔记(三)=>行为型设计模式JavaScript设计模式读书笔记&#... 查看详情

javascript设计模式读书笔记=;结构型设计模式

全系列目录JavaScript设计模式读书笔记(一)=>创建型设计模式JavaScript设计模式读书笔记(二)=>结构型设计模式JavaScript设计模式读书笔记(三)=>行为型设计模式JavaScript设计模式读书笔记&#... 查看详情

javascript设计模式读书笔记=;技巧型设计模式(代码片段)

全系列目录JavaScript设计模式读书笔记(一)=>创建型设计模式JavaScript设计模式读书笔记(二)=>结构型设计模式JavaScript设计模式读书笔记(三)=>行为型设计模式JavaScript设计模式读书笔记&#... 查看详情

javascript设计模式读书笔记=;架构型设计模式,mvc,mvp,mvvm

全系列目录JavaScript设计模式读书笔记(一)=>创建型设计模式JavaScript设计模式读书笔记(二)=>结构型设计模式JavaScript设计模式读书笔记(三)=>行为型设计模式JavaScript设计模式读书笔记&#... 查看详情

javascript高级程序设计-读书笔记

第6章面向对象的程序设计创建对象1.最简单方式创建Object的实例,如varperson=newObject();person.name=“Greg”;person.age=27;person.job=”Doctor”;person.sayName=function(){  alert(this.name);};person.s 查看详情

[读书笔记]javascript设计模式:单例模式

单例模式:保证一个类只有一个实例,并提供一个可以访问它的全局访问点。 一种简单、方便的写法就是用一个变量来标识当前类是否已经创建过对象,如果有,则返回已经创建好的对象,否则创建一个新对象,并将其返回... 查看详情

《javascript高级程序设计》读书笔记引用类型

第五章:引用类型Object类型创建object实例的两种方式:1.new方式var person = new Object();person.name = “haozk”;person.age = 24;2.对象字面量表示法var person = {name:”haozk”,age:2 查看详情

javascript高级程序设计读书笔记之oop

关于JavaScript创建对象的方式:1、工厂模式1functioncreatePerson(name,age,job){2varo=newObject();3o.name=name;4o.age=age;5o.job=job;6o.sayName=function(){7alert(this.name);8};9returno;10}11varperson1=createPerson("Nic 查看详情

大话设计模式读书笔记——原型模式

原型模式原型模式是创建型模式的一种,其特点在于通过“复制”一个已经存在的实例来返回新的实例,而不是新建实例。被复制的实例就是我们所称的“原型”,这个原型是可定制的。原型模式多用于创建复杂的或者耗时的实... 查看详情

大话设计模式读书笔记--1.简单工厂模式

定义专门定义一个类来负责创建其他类的实例,被创建的类通常具有共同的父类。它又称为静态工厂模式,属于类的创建型模式模式类图将对象的创建和对象本身业务处理分离了,可以降低系统的耦合工厂模式实现场景:实现一个... 查看详情

《javascript高级程序设计》读书笔记

第一章JavaScript简介1.1JavaScript简史略1.2JavaScript实现虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义,但JavaScript的含义却比ECMA-262中规定的要多得多。一个完整的JavaScript实现应该由下列三个不同的部分组成:?核心(ECMAScri... 查看详情

javascript设计模式:读书笔记(未完)

该篇随我读书的进度持续更新阅读书目:《JavaScript设计模式》2016/3/302016/3/31 2016/3/30:模式是一种可复用的解决方案,可用于解决软件设计中遇到的常见问题./将解决问题的方法制作成模板,并且这些模板可应用于多种不同的情况... 查看详情

javascript高级程序设计-读书笔记

第11章DOM扩展1、选择符APISelectorAPILevel1的核心是两个方法:querySelector()和querySelectorAll()。在兼容的浏览器中,可以通过Document及Element类型的实例调用它们。目前完全支持SelectorAPILevel1的浏览器有IE8+、Firefox3.5+、Safari3.1+、Chrome和Oper... 查看详情

javascript高级程序设计-读书笔记

...型的值l       简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串、数值、布尔值和null。但JSON不支持JavaScript中的特殊数值undefined。“Hellowor 查看详情

《javascript高级程序设计》读书笔记javascript简单介绍

第一章:javascript简单介绍  Netscape Navigator 开发的javascript  Javascript的实现有三部分:1.核心(ECMAScript):提供核心语言功能。2.文档对象模型(DOM):提供訪问和操作网页内容的方法和接口。3.浏览器对象模... 查看详情

javascript高级程序设计-读书笔记

...表示浏览器的一个实例。在浏览器中,window对象既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。 所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。  (2)窗口关系及... 查看详情

javascript高级程序设计(第3版)第五章读书笔记

第五章引用类型创建Object实例的方式有两种,第一种是使用new操作符后跟Object构造函数,例如:varperson=newObject();person.name=“Nicholas”;person.age=29;第二种是使用对象字面量表示法。如:varperson={name:“Nicholas”,age:29};在最... 查看详情

《javascript高级程序设计》读书笔记

由于ECMAScript中不存在块级作用域,因此在循环内部定义的变量也可以在外部访问到 //例如:varcount=10;for(vari=0;i<count;i++){alert(i);}alert(i);//10 for-in语句for-in语句是一种精准的迭代语句,可以用来枚举对象的属性。以下是for-... 查看详情