脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript工厂模式和构造器模式

JavaScript设计模式之工厂模式和构造器模式

 更新时间：2015年02月11日 09:17:03   投稿：junjie  
这篇文章主要介绍了JavaScript设计模式之工厂模式和构造器模式,本文同时讲解了设计模式的类别如创建型设计模式、结构型设计模式、行为设计模式等内容,需要的朋友可以参考下

什么是模式

前阵子准备期末考试，劳神又伤身的，实在闲不得空来更新文章，今天和大家说说javascript中的设计模式。

首先呢，我们需要知道的是：模式是一种可复用的解决方案，而反模式呢就是针对某个问题的不良解决方案。

js反模式常见例子

1.向setTimeout和setInterval传递字符串，而不是函数，这会触发eval()的内部使用。
2.在全局上下文中定义大量的变量污染全局命名空间
3.修改Object类的原型
4.以内联形式使用js，嵌入在HTML文件中的js代码是无法包含在外部单元测试工具中的。
5.滥用document.write，如果在页面加载完成后执行docume.write，它会重写我们所在的页面，可以使用document.creatElement代替的话就尽量不用docume.write。

设计模式的类别

创建型设计模式

创建型设计模式专注于处理对象创建机制，以适合给定情况的方式来创建对象。属于这个类别的属性包括：

Constructor构造器、Factory工厂、Abstract抽象、Prototype原型、Singleton单例和Builder生成器

结构型设计模式

结构型模式与对象组合有关，通常可以用于找出在不同对象之间建立关系的简单方法。
属于这个类别的模式包括：

Decorator装饰者、Facade外观、Flyweight享元、Adapter适配器和Proxy代理

行为设计模式

行为模式专注于改善或简化系统中不同对象之间的通信。

行为模式包括：

Iterator迭代器、Mediator中介者、Observer观察者和Visitor访问者

Factory(工厂)模式

为了解决多个类似对象声明的问题，我们可以使用一种叫做 工厂模式的方法，这种方法 就是为了解决实例化对象产生大量重复的问题。

复制代码 代码如下:

<script type="text/javascript">
    function createObject(name,age,profession){//集中实例化的函数
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.profession = profession;
        obj.move = function () {
            return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
        };
        return obj;
    }
    var test1 = createObject('trigkit4',22,'programmer');//第一个实例
    var test2 = createObject('mike',25,'engineer');//第二个实例
    alert(test1.move());
    alert(test2.move());
</script>

工厂模式的分类

工厂模式分为简单工厂、抽象工厂和智能工厂，工厂模式不显示地要求使用一个构造函数。

简单工厂模式：使用一个类（通常为单体）来生成实例。
复杂工厂模式：使用子类来决定一个成员变量应该是哪个具体的类的实例。

工厂模式之利

主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。
工厂模式之弊

大多数类最好使用new关键字和构造函数，可以让代码更加简单易读。而不必去查看工厂方法来知道。   
工厂模式解决了重复实例化的问题 ,但还有一个问题,那就是识别问题,因为根本无法 搞清楚他们到底是哪个对象的实例。

复制代码 代码如下:

alert(typeof test1); //Object
alert(test1 instanceof Object); //true

何时使用工厂模式？

Factory模式主要在以下场景使用：

1.当对象或组件涉及高复杂性时
2.当需要根据所在的不同环境轻松生成对象的不同实例时
3.当处理很多共享相同属性的小型对象或组件时

Constructor(构造器)模式

ECMAScript 中可以采用构造函数(构造方法)可用来创建特定的对象。 该模式正好可以解决以上的工厂模式无法识别对象实例的问题。

复制代码 代码如下:

<script type="text/javascript">
    function Car(model,year,miles){//构造函数模式
        this.model = model;
        this.year = year;
        this.miles = miles;
        this.run = function () {
            return this.model + " has done " + this.miles + "miles";
        }
    }
    var Benz = new Car('Benz',2014,20000);
    var BMW = new Car("BMW",2013,12000);
    alert(Benz instanceof Car); //很清晰的识别他从属于 Car,true

    console.log(Benz.run());
    console.log(BMW.run());
</script>

使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：

1.构造函数方法没有显示的创建对象 (new Object());
2.直接将属性和方法赋值给 this 对象;
3.没有 renturn 语句。

构造函数的方法有一些规范:

1.函数名和实例化构造名相同且大写, (PS:非强制,但这么写有助于区分构造函数和 普通函数);
2.通过构造函数创建对象,必须使用 new 运算符。 
既然通过构造函数可以创建对象，那么这个对象是哪里来的， new Object()在什么地方执行了？执行的过程如下:

1.当使用了构造函数,并且 new 构造函数(),那么就后台执行了 new Object();
2.将构造函数的作用域给新对象 ，(即 new Object()创建出的对象)，而函数体内的 this 就 代表 new Object()出来的对象。
3.执行构造函数内的代码；
4.返回新对象(后台直接返回)。

带原型的Constructor(构造器)

js中有一个名为prototype的属性。调用js构造器创建一个对象后，新对象就会具有构造器原型的所有属性。通过这种方式，可以创建多个Car对象，并访问相同的原型。

复制代码 代码如下:

   <script type="text/javascript">
        function Car(model,year,miles) {
            this.model = model;
            this.year = year;
            this.miles = miles;
        }
        Car.prototype.run = function () {
            return this.model + " has done " + this.miles + " miles ";

        };
        var Benz = new Car('S350',2010,20000);
        var Ford = new Car('Ford',2012,12000);

        console.log(Benz.run());//"S350 has done 20000 miles "
        console.log(Ford.run());
    </script>


现在run()的单一实例就能够在所有Car对象之间共享。

您可能感兴趣的文章:

相关文章

  • JavaScript资源预加载组件和滑屏组件的使用推荐

    JavaScript资源预加载组件和滑屏组件的使用推荐

    这篇文章主要介绍了JavaScript资源预加载组件和滑屏组件的使用推荐,分别为preload和slide的用法讲解,使用起来非常简单,需要的朋友可以参考下
    2016-03-03
  • Move.js入门

    Move.js入门

    本文主要介绍了Move.js基础知识和Move.js的方法。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • vue中使用cropperjs的方法

    vue中使用cropperjs的方法

    这篇文章给大家总结了在.vue文件里cropperjs的使用方法和经验教训，感兴趣的朋友跟随脚本之家小编学习吧
    2018-03-03
  • 关于document.cookie的使用javascript

    关于document.cookie的使用javascript

    设置cookie 每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：
    2008-04-04
  • 如何解决IONIC页面底部被遮住无法向上滚动问题

    如何解决IONIC页面底部被遮住无法向上滚动问题

    Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。在开发过程中我们同样会遇到各种各样奇葩的问题。下面小编给大家带来了有关IONIC页面底部被遮住无法向上滚动问题的解决方案
    2016-09-09
  • 用javascript getComputedStyle获取和设置style的原理

    用javascript getComputedStyle获取和设置style的原理

    这两天用了baidu 百度空间中的弹出窗口js，感觉不错，很强大，很好很简单的解决了好几个问题，界面友好度以及美化也好多了，以前都是硬邦邦window.open();
    2008-10-10
  • 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性

    利用Javascript判断操作系统的类型实现不同操作系统下的兼容性

    在通过Javascript实现客户端和服务端的交互时，有时候需要对操作系统进行判断，以便实现不同操作系统下的兼容性;从而实现网站在跨平台浏览时候保持良好的用户体验,感兴趣的朋友可以了解下啊，或许对你有所帮助
    2013-01-01
  • React类组件转换成函数式组件

    React类组件转换成函数式组件

    Hooks让我们为相同的功能编写更少的代码,我们需要编写的代码越少,我们就可以越快地启动应用程序,hooks需要在函数组件中使用,您不能在 React 类中使用 hooks,函数式的 React 组件更加现代,并支持有用的 hooks,现在流行把旧式的类组件转换为函数式组件
    2024-01-01
  • javascript 大中小字体显示实现代码

    javascript 大中小字体显示实现代码

    有时候页面中的正文一般都加上了字体大中小控制代码，方便浏览者阅读。
    2010-09-09
  • JS中style.display和style.visibility的区别实例说明

    JS中style.display和style.visibility的区别实例说明

    下面的例子说明了这种区别：在这个例子中，divContent1和divContent2隐藏的时候用的是style.display=none，这时候，后面的div会向上移动，占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏，但是其隐藏后仍然占据原来的空间
    2013-03-03

最新评论