首页 >

JavaScript设计模式初探【javascript】

web前端|js教程JavaScript设计模式初探【javascript】
js设计模式,js的设计模式
web前端-js教程
目的:设计模式众多,尝试记录下学到的不同设计模式的优劣,方便以后查阅。
mc官网源码,Ubuntu巨帧模式,tomcat启动时显示乱码,诺茵爬虫,查看php运行状态,网页计划seolzw
前言:半年前看高程的时候看到设计模式这章,云里雾里,不是看不明白,而是不明白为啥要如此麻烦只为创建一个对象。直到最近完成了自己第一个小项目,才体会到当代码量多起来时没有适当的规范与限制是多么大的灾难。于是重新翻开高程,总结下几种我学到的简单设计模式的优劣。
微信发单机器人源码,ubuntu终端图形浏览,软件的tomcat怎么配置,改造爬虫箱,php实现链表,河北全网seo推广能带来客户吗lzw
正文:本文一共介绍7种设计模式以及他们的应用场景、优劣。
末日病毒源码,vscode一行显示多行,ubuntu桥头桌面,tomcat没有运行窗口,女生喜欢爬虫,php执行模式,荆州品牌seo推广都有哪些渠道lzw
1.工厂模式

直接用函数来封装对象,将对象作为返回值。

function person (name,age) {  var obj=new Object();  obj.name=name;  obj.age=age;  obj.sayName=function () {    alert(this.name);  };  return obj;}var me=person("Su",25); 
缺点:对象识别的问题,所有创建出的对象都是Object的实例,不好区分。

2.构造函数模式

function Person (name,age) {  this.name=name;  this.age=age;  this.sayName=function () {    alert(this.name);  };}var me=new Person("Su",25); 
优点:运用构造函数模式可以将实例标示为一种特定的类型。

缺点:创建的对象的方法都是私有的,如果只是想产生公用的方法,会造成不必要的性能浪费。

3.原型模式

利用原型链继承

function Person () {}Person.prototype.name="Su";Person.prototype.sayName=function () {alert(this.name);}var me =new Person(); 
缺点:所有属性和方法被实例共享。当属性、方法中包含引用类型的值时,修改一个实例的属性、方法会影响所有其他实例。

4.原型+构造函数模式

私有属性、方法用构造函数产生,公有属性、方法用原型来继承。融合两种方法的优点。

function Person (name,age) {  this.name=name;  this.age=age;}Person.prototype={  constructor:Person,  sayName:function () {      alert(this.name);  }}var me=new Person("Su",25); 
缺点:注意引用类型值的原型继承。

ps:上图代码重写了Person构造函数的原型对象,将原型对象指针指向了一个对象,所以constructor属性此时指向Object而不是Person,所以要显式的将其设置成Person。

5.动态原型模式

本质上还是构造函数,只在指定方法不存在时在原型对象中添加他。

function Person (name,age) {  this.name=name;  this.age=age;  if (typeof this.sayName!="function") {    Person.prototype.sayName=function () {      alert(this.name);    }  }}var me =new Person("Su",25); 
缺点:不能使用对象字面量重写原型对象。因为这会使实例的指针指向新的原型对象。也就是说上图中原型对象中添加的sayName方法会失效。

6.寄生构造函数模式

调用时使用new操作符,除此以外我看不出和工厂模式有什么区别。望高人指点。

function person (name,age) {  var obj=new Object();  obj.name=name;  obj.age=age;  obj.sayName=function () {    alert(this.name);  };  return obj;}var me=new person("Su",25); //这里使用new操作符 
7.稳妥构造函数模式

没有公共属性,禁用this,仅暴露必须的API用于数据调用。适用于对安全有需求的领域。

function Person (name) { var o=new Object(); o.sayName=function () { alert(name);   }   return o;}var me=Person("Su"); 
如上代码,只能通过sayName方法才能访问到内部的name属性。

本文给大家介绍了七种设计模式,分别介绍了他们的优缺点,希望对学习js设计模式相关知识有所帮助。


JavaScript设计模式初探【javascript】
  • js设计模式:什么是适配器模式?js适配器模式的介绍
  • js设计模式:什么是适配器模式?js适配器模式的介绍 | js设计模式:什么是适配器模式?js适配器模式的介绍 ...

    JavaScript设计模式初探【javascript】
  • js设计模式:什么是单例模式?js单例模式的介绍
  • js设计模式:什么是单例模式?js单例模式的介绍 | js设计模式:什么是单例模式?js单例模式的介绍 ...

    JavaScript设计模式初探【javascript】
  • js设计模式:什么是享元模式?js享元模式的介绍
  • js设计模式:什么是享元模式?js享元模式的介绍 | js设计模式:什么是享元模式?js享元模式的介绍 ...