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

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

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

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

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

???nodejs目前常用的有兩種類型的調(diào)試方案

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

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

???全局安裝：

npm install -g node-inspector

???啟動(dòng)

???ssh執(zhí)行

node-inspector

???會(huì)提示

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

???再開一個(gè)終端，cd到項(xiàng)目目錄，執(zhí)行

node-dev –debug app.js

???上一節(jié)我們講node-dev，使用了其自動(dòng) restarting，如果不需要高度，執(zhí)行 node-dev app.js即可。

???瀏覽器A打開

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

???瀏覽器A即會(huì)顯示成debug模式，

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

???如下圖：

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

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

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

???cd到我們的項(xiàng)目 root，執(zhí)行

git init    

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

???執(zhí)行

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

???將本地目錄和遠(yuǎn)程目錄關(guān)聯(lián)起來

git config -- global user.name 

git config – global user.email  

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

git add *

???添加所有的文件到暫存區(qū)

git commit -m "我的第一個(gè)項(xiàng)目"

???將暫存區(qū)的文件提交到 git 目錄

git push -u origin master

???按提示輸入你的git帳號(hào)及密碼，將git 目錄的文件提交到遠(yuǎn)程github上

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

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

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

???連接服務(wù)器

ssh  -l root

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

???按項(xiàng)目約定安裝，nginx / nodejs / mongo / git 等，并創(chuàng)建根目錄

???克隆遠(yuǎn)程庫到本地

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

???拉取遠(yuǎn)程庫的數(shù)據(jù)到本地

git pull origin master

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

???同樣的配置成功后，訪問該你的服務(wù)器IP，站點(diǎn)即發(fā)布成功。

???如果有域名了更好，不過域名現(xiàn)在都需要備案了，需要些時(shí)間。

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

???驗(yàn)證組件有很多種寫法，但往往越高級(jí)的，限制性越大，我們寫一個(gè)輕量級(jí)的，拋磚引玉。

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

???1、每個(gè)輸入項(xiàng)都可以配置驗(yàn)證規(guī)則

???2、可指定觸發(fā)事件，如keyup或 change時(shí)觸發(fā)驗(yàn)證

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

???4、可配置自定義規(guī)則，如注冊時(shí)，再次輸入密碼項(xiàng)的規(guī)則和密碼項(xiàng)需一致。

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

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

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

    //為指定指定表單添加指定觸發(fā)事件的指定規(guī)則
    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 ]"
    }

    /*定義常用規(guī)則，通過判斷值是否符合規(guī)則返回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 );
        },
        //英文、數(shù)字
        typeEN: function( value ){
            return /^[0-9|a-z|A-Z]+$/.test( value );
        },
        //數(shù)字
        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)
        }

    }
    //循環(huán)對(duì)規(guī)則進(jìn)行驗(yàn)證，主要分類兩種。一種是self，一種是已定義的常用規(guī)則。
    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] );
            //這里是針對(duì) 即帶值，又帶提示的規(guī)則 [ 3, "用戶名不能少于3位"]
            //否則只帶提示的規(guī)則，如非空，電話號(hào)碼等值可定的規(guī)則
            if( rule == "self" ){   //驗(yàn)證自定義的定義
                if( rules[ rule ].call( this, cb ) !== true ){
                    return false;
                };
            } else if( !Regular[ rule ]( value, codex ) ){  //驗(yàn)證上面定義過的規(guī)則
                cb( prompt )
                return false;
            }
            cb( "" );
        }
        return true;

    }
    //開始的驗(yàn)證函數(shù)，對(duì)某元素el添加指定事件events的驗(yàn)證規(guī)則rules，驗(yàn)證結(jié)果在cb中執(zhí)行
    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 {
            //這里是對(duì)不用傳觸發(fā)條件，直接進(jìn)行驗(yàn)證的規(guī)則。主要是針對(duì)form.submit時(shí)需一次驗(yàn)證所有輸入框時(shí)
            cb = events[1];
            rules = events[0];
            return check.call( el.get( 0 ), rules, cb );

        }

    }

    return validate

})