TAT.svenzeng 【Javascript 设计模式 2】-简单工厂模式
In 未分类 on 2012年10月24日 by view: 22,922
21

简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定， 而是在执行期决定的情况。 说的通俗点，就像公司茶水间的饮料机，要咖啡还是牛奶取决于你按哪个按钮。

简单工厂模式在创建 ajax 对象的时候也非常有用.

之前我写了一个处理 ajax 异步嵌套的库，地址在 https://github.com/AlloyTeam/DanceRequest

这个库里提供了几种 ajax 请求的方式，包括 xhr 对象的 get, post, 也包括跨域用的 jsonp 和 iframe. 为了方便使用, 这几种方式都抽象到了同一个接口里面.

Request 实际上就是一个工厂方法, 至于到底是产生 xhr 的实例, 还是 jsonp 的实例. 是由后来的代码决定的。

实际上在 js 里面，所谓的构造函数也是一个简单工厂。只是批了一件 new 的衣服. 我们扒掉这件衣服看看里面。

通过这段代码, 在 firefox, chrome 等浏览器里，可以完美模拟 new.

这段代码来自 es5 的 new 和构造器的相关说明， 可以看到，所谓的 new， 本身只是一个对象的复制和改写过程， 而具体会生成什么是由调用 ObjectFactory 时传进去的参数所决定的。

[目录]

原创文章转载请注明：

转载自AlloyTeam：https://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-simple-factory-pattern/

如果你觉得我们Alloyteam团队的博客和开源项目给你带来价值，可以通过捐赏支持我们
有你的支持，我们会做得更好！
分享到:0

  1. 思召 2017 年 6 月 20 日

    提供的代码实现略显复杂，提供一个简单的实现：

    function factory(){
    var inst, ret,
    Constructor = Array.prototype.shift.call(arguments);

    }

    回复

  2. kael 2017 年 2 月 18 日

    return typeof ret === ‘object’ ? ret : obj; 这块是否漏了对 function 类型的判断？应该是这样：return typeof ret === ‘object’ || typeof ret === ‘function’ ? ret : obj;

    回复

  3. 无 2016 年 8 月 30 日

    var ret = Constructor.apply( obj, arguments );ret 什么情况下是 object 类型

    回复

  4. Hanfei 2015 年 6 月 10 日

    这么做 a 的 prototype 是 Obj，不是 A

    回复

  5. silen 2015 年 5 月 25 日

    还有个疑问：为什么评论会过滤 ”

    刚才评论的码本应该是 ‘function Fun(){};o=new Fun() (o={},Fun.call(o),o.constructor=Fun)’

    回复

  6. silen 2015 年 5 月 25 日

    function Fun(){};o=new Fun() (o={},Fun.call(o),o.constructor=Fun)

    回复

  7. silen 2015 年 5 月 25 日

    **自己写原型写成这样的时候把 A.prototype = 1**
    -> 例子中的 A 不是构造函数么，构造函数为什么要写成 A.prototype = 1？

    其实直接就是这样也可以了吧：
    function Fun(){};o=new Fun() (o={},Fun.call(o),o.constructor=Fun)

    回复

  8. jozhi 2015 年 5 月 12 日

    又看了一遍， 感念还是不理解。

    回复

  9. yp 2013 年 9 月 3 日

    DanceRequest.js 有没有如何调用函数的说明文档啊

    回复

  10. Mato 2013 年 8 月 25 日

    typeof Constructor.prototype === ‘number’ ? Object.prototype : Constructor .prototype;
    中的
    typeof Constructor.prototype === ‘number’
    哪种情况会出现？

    回复

    • svenzeng 2013 年 9 月 27 日

      自己写原型写成这样的时候把 A.prototype = 1

      回复

      • she 2017 年 6 月 19 日

        请问一下～～如果其他人自己写原型写成 A.prototype = “1111” 这样子怎么办

        回复

  11. 巴格罗 2012 年 11 月 20 日

    能简单讲讲那个构造函数为什么那么写么，查了半天看懂了几个内置函数，但是为什么那么绕不理解呀。

    回复

    • svenzeng 2012 年 11 月 22 日

      标准规范是这样规定的，没有什么太具体的原因。

      回复

  12. VVG 2012 年 10 月 25 日

    github 404 了

    回复

  13. 【Javascript设计模式16】- 享元模式 | Tencent AlloyTeam 2012 年 10 月 25 日

    […] 简单工厂模式 […]

    回复

  14. 【Javascript设计模式17】- 状态模式 | Tencent AlloyTeam 2012 年 10 月 25 日

    […] 简单工厂模式 […]

    回复

发表评论