摘要：一前言上節我們主要應用了部分模塊功能，本節我們再演示下常用的功能，使用，并發布到阿里云，就完成了系統的教程。本身支持很好的的開發體驗，其也集成了測試功能，但這個不是我推薦的，自行百度調試。

上節我們主要應用了部分nodejs模塊功能，本節我們再演示下nodejs常用的debug功能，git使用，并發布到阿里云，就完成了 0.*系統的教程。

GIT：https://github.com/xiaolulu/mynodejs.git

參考：http://www.upopen.cn

debug，即開發過程中的運行跟蹤，是開發過程中的不可缺少的。如同頁面端開發過程中，如果沒有chrome的inspect element，開發過程中的問題排查，將是非常困難的。

???nodejs目前常用的有兩種類型的調試方案

???1、以 webstorm為代表的開發編輯器類調試。webstrom本身支持很好的nodejs的開發體驗，其也集成了測試功能，但這個不是我推薦的，自行百度 “ webstorm nodejs 調試 ”。

???2、第二種是npm 下的 node-inspector，我使用的編輯器就是ubuntu下的gedit，即使在win7下使用的也是較古老的 edit plus，因為開發過程中，不需要什么提示功能，webstorm本身很大，啟動起來也占用很大的資源。相比之下，gedit + node-inspector，則更加輕量。

???全局安裝：

npm install -g node-inspector

???啟動

???ssh執行

node-inspector

???會提示

Visit http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 to start debugging.

???再開一個終端，cd到項目目錄，執行

node-dev –debug app.js

???上一節我們講node-dev，使用了其自動 restarting，如果不需要高度，執行 node-dev app.js即可。

???瀏覽器A打開

http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858

???瀏覽器A即會顯示成debug模式，

???再用瀏覽器B打開我們項目，瀏覽器A就會顯示nodejs端的代碼，調用起來和頁面端一樣一樣的。所以用 node-inspector可以安裝后即可快速上手，不需要任何配置，使用起來不需額外成本，這也是我推薦的原因。

???如下圖：

???git的常用命令可參見

http://www.upopen.cn/article/list?kind=git

???參照上面的教程，在 github上申請賬號、新建項目、添加本地生成的key之后，就可以開始使用了。

???cd到我們的項目 root，執行

git init    

???將本地文件夾初即化為 git目錄，通過 ls -la，可以看到其下多了.ssh的隱藏文件夾，用于存放git信息

???執行

git remote add origin git@github.com:/.git

???將本地目錄和遠程目錄關聯起來

git config -- global user.name 

git config – global user.email  

???配置自己的git信息，用于提交的記錄author。

git add *

???添加所有的文件到暫存區

git commit -m "我的第一個項目"

???將暫存區的文件提交到 git 目錄

git push -u origin master

???按提示輸入你的git帳號及密碼，將git 目錄的文件提交到遠程github上

???我們即完成了本地代碼的提交，具體命令解釋及更多命令應用還是參照

???http://www.upopen.cn/article/list?kind=git

???此處我使用的阿里云服務器，管理上簡單些，選了個最低配置，1000/年，www.upopen.cn就是在阿里云上，七牛，百度也提供了這樣的服務器。購買好服務器后，選擇安裝ubuntu系統。

???連接服務器

ssh  -l root

???用戶名先默認用 root即可。按提示輸入密碼即可登錄

???按項目約定安裝，nginx / nodejs / mongo / git 等，并創建根目錄

???克隆遠程庫到本地

git clone root git@github.com:xiaolulu/mynodejs.git

???拉取遠程庫的數據到本地

git pull origin master

???在此我們使用了與上面git不同的命令，其實也可以按init/ remote來，為了多使用幾個命令，另外，第三
部分是新建庫，此部主要是拉取。對后面的使用是一樣的。

???同樣的配置成功后，訪問該你的服務器IP，站點即發布成功。

???如果有域名了更好，不過域名現在都需要備案了，需要些時間。

???最后稍講下頁面端的js，原本不是我們本系列的重點，和大家探討下，如何寫一個可復用、解耦的組件，小微框架的思想也不過如此。

???驗證組件有很多種寫法，但往往越高級的，限制性越大，我們寫一個輕量級的，拋磚引玉。

???首先我們分析下驗證功能，得出以下一些原則

???1、每個輸入項都可以配置驗證規則

???2、可指定觸發事件，如keyup或 change時觸發驗證

???3、可配置一些通用的規則如非空、最小值、最大值、只能輸入數字、字母、電話、身份證等

???4、可配置自定義規則，如注冊時，再次輸入密碼項的規則和密碼項需一致。

???5、提供錯誤提示的回調，往往錯誤提示形式是一致的，不需要提供回調，我們提供更自由的顯示方式。

???以注冊頁面表單為例，定義輸入框的規則。在root/static/module/issue/register.js下新增

javascript    var username = $( "#username" ),
        password = $( "#password" ),
        email = $( "#email" );
    //定義驗證規則
    var usernameRule = [{
            "noBlank": "請輸入用戶名",    //非空
            "min": [ 3, "用戶名不能少于3位"],   //最小
            "max": [ 16, "用戶名長度不能多于16位"],   //最大
            "typeEN": "用戶名只能為字母及數字"     //準輸入類型
        }, function( prompt ){  //錯誤提示回調
            $( "#usernameTip" ).html( prompt );
        }],
        passwordRule = [{
            "noBlank": "請輸入密碼",
            "self": function( cb ){ //自定義規則
                cb( "密碼不能全為數字" );
                return isNaN( this.value - 0 );
            }
        }],
        email = [{
            "noBlank": "請輸入注冊郵箱",
            "typeEmail": "郵箱格式不正確"  //指定某定義規則
        }, function( prompt ){
            $( "#emailTip" ).html( prompt );
        }];

    //為指定指定表單添加指定觸發事件的指定規則
    validate( username, [ "keyup" ], usernameRule );
    validate( password, [ "change" ], passwordRule );
    validate( email, [ "foucsOut" ], emailRule );

javascriptdefine(function(  ){

    var isArray = function( value ){
        return Object.prototype.toString.call( value ) == "[object ]"
    }

    /*定義常用規則，通過判斷值是否符合規則返回true / false */
    var Regular = {

        //非空
        noBlank: function( value ){
            return !!value;
        },
        //最小
        min: function( value, rule ){
            return value.length >= rule;
        },
        //最大
        max: function( value, rule ){
            return value.length <= rule;
        },
        //中文、英文
        typeZE: function( value ){
            return /^[u4E00-u9FA5uf900-ufa2duFE30-uFFA0a-zA-Z]+$/.test( value );
        },
        //英文、數字
        typeEN: function( value ){
            return /^[0-9|a-z|A-Z]+$/.test( value );
        },
        //數字
        typeNum: function( value ){
            return !isNaN( value );
        },
        //電話
        typePhone: function( value ){
            return /^1[0-9]{10}$/.test( value );
        },
        //email
        typeEmail: function( value ){
            return /^(w)+(.w+)*@(w)+((.w+)+)$/.test(value)
        }

    }
    //循環對規則進行驗證，主要分類兩種。一種是self，一種是已定義的常用規則。
    function check( rules, cb ){

        var rule,
            prompt,
            codex,
            value = this.value;
        for ( rule in rules ){

            prompt = rules[ rule ];
            isArray( prompt ) && ( codex = prompt[0] ) && ( prompt = prompt[1] );
            //這里是針對 即帶值，又帶提示的規則 [ 3, "用戶名不能少于3位"]
            //否則只帶提示的規則，如非空，電話號碼等值可定的規則
            if( rule == "self" ){   //驗證自定義的定義
                if( rules[ rule ].call( this, cb ) !== true ){
                    return false;
                };
            } else if( !Regular[ rule ]( value, codex ) ){  //驗證上面定義過的規則
                cb( prompt )
                return false;
            }
            cb( "" );
        }
        return true;

    }
    //開始的驗證函數，對某元素el添加指定事件events的驗證規則rules，驗證結果在cb中執行
    function validate( el, events, rules, cb ){

        if( rules ){

            cb = rules[1];
            rules = rules[0];
            $.each( events, function( k, event ){
                el.on( event, function(){
                    check.call( this, rules, cb );
                });

            });

        } else {
            //這里是對不用傳觸發條件，直接進行驗證的規則。主要是針對form.submit時需一次驗證所有輸入框時
            cb = events[1];
            rules = events[0];
            return check.call( el.get( 0 ), rules, cb );

        }

    }

    return validate

})