前言

本人也是一名小白，自學進入了前端的這個行業，無論是前端也好，後臺也罷，都離不開敲程式碼。我自己在學習的過程中也做過許多專案，前期主要是為了練習基礎，每個專案的程式碼量比不多。後來到了一個公司實習，這是我第一次出來實習工作，之前一直都是沉浸在自己的自學中，根本不知道自己的水平在外面處於一個什麼樣的地位。

來到公司，開始接手了第一個專案，對於做介面這些來說，我基本上都可以很輕鬆的完成，前端最為重要的部分就是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事件方面的問題知識，有興趣的可以去看一下，希望可以給大家帶來幫助，後面我會持續更新更多的內容，謝謝大家！