小白学习JavaScript设计模式（1）——简单工厂模式

前言

本人也是一名小白，自学进入了前端的这个行业，无论是前端也好，后台也罢，都离不开敲代码。我自己在学习的过程中也做过许多项目，前期主要是为了练习基础，每个项目的代码量比不多。后来到了一个公司实习，这是我第一次出来实习工作，之前一直都是沉浸在自己的自学中，根本不知道自己的水平在外面处于一个什么样的地位。

来到公司，开始接手了第一个项目，对于做界面这些来说，我基本上都可以很轻松的完成，前端最为重要的部分就是JS，也是必不可少的部分，我做的这个项目还只是一个demo，因此在做的过程中经常都会遇到更改需求，越到后面越发现，每更改一个或增加一个功能，都要重复书写很多代码。功能虽然是可以实现，但是纵观自己的代码，有些地方自己都不知道是什么，只能说“乱的一匹”，并且与其他人对接起来也是相当的困难复杂。

为了让自己的代码有很好的安全性、共享性、封装性等，让自己代码质量有更高的档次，更深的层次，写出更漂亮的代码，那你必须要学会运用JavaScript的一些经典常用的设计模式。

本人也才开始学习设计模式，对其的理解也比较浅薄，有错误的地方望大神提出。

首先介绍第一种设计模式，也是最为简单的一种。

简单工厂模式

简单工厂模式又叫静态工厂方法，由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类的对象。

如果让你做一个简单的登录系统，对输入的内容校验，例如：登录账号必须是4-10位。小白的做法是

var LoginAlert = function(text){
    this.content = text;
}
LoginAlert.porototype.show = function(){
    //显示警示框
}
var userNameAlert = new LoginAlert("用户名长度应为4-10位");\
userNameAlert.show();

现在又要增加一个密码提示：输出密码不正确，然后又增加了如下代码

var passwordAlert = new LoginAlert("输入密码不正确");
passwordAlert.show();

如果现在又需要增加一个注册按钮，还有登录成功后给出一个自定义提示框，除了有确定取消按钮，并且显示“欢迎您”。这又是一个新类，现在又要添加几个新类

var loginConfirm = function(text){
    this.content = text;
}
loginConfirm.prototype.show = function(){
   //显示确认框
}
var loginFailConfirm = new LoginConfirm("您的用户名不存在，请重新输入");
loginFailConfirm.show();
var LoginPrompt = function(text){
    this.content = text;
}
LoginPrompt.prototype.show = function(){
   //显示确认框
}

从上面的例子可以发现，这样的创建的类太多了，并且代码看起来也很乱。如果有其他的人，需要用到这个登录模块，需要把这这几个类都一个一个解释每个的意义，这是的交接起来非常的麻烦，有没有什么办法可以使其变得简洁方便，这就可以利用简单工厂模式来做。

简单工厂模式就好比是一个商店，你到这个商店买东西，需要什么就跟老板说什么，老板直接拿出来，但是我们并不需要知道这个东西放在那，老板是怎么拿到这个东西的，我们只需要找到这个商店，向他提出我们想要的东西即可。

接下来采用简单工厂模式对上面的例子进行改进

function createPop(type,text){
    //创建一个对象，并对对象拓展属性和方法
    var o = new Object();
    o.content = text();
    o.show = function(){
        //显示方法
    };
    if(type = 'alert'){
        //警示框差异部分
    }
    if(type = 'prompt'){
        //警示框差异部分
    }
    if(type = 'confirm'){
        //警示框差异部分
    }
    //将对象返回
    return o;
}
//创建警示框
var userNameAlert = createPop('alert','用户名只能是26个字符');

我们可以把creatPop看做是一个工厂，alter、prompt、confirm是工厂里面的集装箱，这样我们只需要把这个工厂交个其他需要的人就可以了，而不需要将里面的集装箱一个一个的标明挨个的传给他人。

篇外话

本人正处于在前端方面踩坑的路上，我相信也有很多人和我现在是一样的，向更深的地方迈进，从现在开始，我以后会经常更新博客，发表一些我踩过的坑，一些大家容易出错的地方，一些大家经常遇到的问题。由于才开始写博客，没有太多的经验，存在很多不足的地方，希望大家关注我，给我一些建议或意见，我们一起学习一起进步。

在我的前面几篇博客谈了一些关于jQuery事件方面的问题知识，有兴趣的可以去看一下，希望可以给大家带来帮助，后面我会持续更新更多的内容，谢谢大家！