我的NodeJS学习之路9(改善代码)

请关注专题:我的NodeJS学习之路(实践之路)

小弟初涉node领域,不足之处,还请多多指教!
欢迎Star、Fork:https://github.com/gefangshuai/ANodeBlog

今天是不幸的一天,为什么说呢,因为Github挂了!全球最大的同性交友网站挂了,让我等技术宅还怎么好好的撸代码呢?

好了,闲篇少扯,说点正事吧。今天我们来介绍程序中用到的几个强大的中间件。

async - 强大的异步功能支持

之前已经简单介绍过,请移步NodeJS异步流程控制简单介绍。为什么要将这个中间件呢,因为当你接触nodejs代码多了之后,难免会受到“回调之痛”。各种的回调嵌套真的把你给玩坏了。代码看起来就好像多层的if-else嵌套一样。

比如我们做用户注册功能,保存用户之前,要先判断一下用户名是否已经存在,大致代码如下:

var user = req.body;
var User = dbHelper.User;   
User.findOne({username: user.username}, function (err, doc) {
    if(err){
        next(err);
    }else{
        if(doc){    // 用户名已被占用
            req.flash('error', '用户名已被占用');
            res.redirect('/reg');
        }else{
            User.create(user, function (err, doc) {
                if(err){
                    next(err);
                }else{
                    req.flash('success', '注册成功,请登录!');
                    res.redirect('/login');
                }
            });
        }
    }
});

对于数据库的操作我们嵌套了两层。再进一步,加入保存成功后,自动为注册用户绑定一些数据并存到数据库,同时在跳转成功的页面进行展示呢?是不是又要多嵌套两层?这时候我们的代码已经面目全非了!

这时候改async出场了。
async将各种嵌套的异步进行有效组织,增加了代码的可维护性(虽然是为 Node.js 设计的,但是它也可以直接在浏览器中使用)。

Async 提供了大约20个函数,包括 map, reduce, filter, forEach 等等,也有常用的异步流程控制模式,并行,瀑布等等。官方文档里有详细的说明,并且有实例,这里我们介绍一下两个最常用的:parallel
waterfall

parallel

并行执行多个函数,每个函数都是立即执行,不需要等待其它函数先执行。传给最终callback的数组中的数据按照tasks中声明的顺序,而不是执行完成的顺序。

async.parallel([
    function(callback){
        setTimeout(function(){
            callback(null, 'one');
        }, 200);
    },
    function(callback){
        setTimeout(function(){
            callback(null, 'two');
        }, 100);
    }
],
// optional callback
function(err, results){
    // the results array will equal ['one','two'] even though
    // the second function had a shorter timeout.
});

parallel中的函数是并行的,没有先后之分,callback中results参数的结果跟并行函数顺序有关。上例中results值为['one', 'two']

在本程序中,用户注册时,我们要校验用户名和邮箱是否被占用。分析一下:校验用户名校验邮箱并有没先后循序,可以并行校验。我们只需要拿到校验后的结果,做出处理即可。示例代码如下:

async.parallel({
    username: function (callback) {
        User.findOne({username: user.username}, function (err, doc) {
            callback(null, doc);
        });
    },
    email: function (callback) {
        User.findOne({email: user.email}, function (err, doc) {
            callback(null, doc);
        });
    }
}, function (err, results) {
    if (results.username) {
        req.flash(config.constant.flash.error, '用户名已被占用');
        res.redirect('/join');
        return;
    }
    if (results.email) {
        req.flash(config.constant.flash.error, '邮箱已被占用');
        res.redirect('/join');
        return;
    }

    user.password = utils.md5(user.password, 'base64');
    User.create(user, function (err, doc) {
        webHelper.reshook(err, next, function () {
            req.flash(config.constant.flash.success, '注册成功,请登录!');
            res.redirect('/login');
        });
    });
});

waterfall

按顺序依次执行一组函数。每个函数产生的值,都将传给下一个函数。

waterfall跟parallel相反,是顺序执行一组函数。

async.waterfall([
    function(callback) {
        callback(null, 'one', 'two');
    },
    function(arg1, arg2, callback) {
      // arg1 now equals 'one' and arg2 now equals 'two'
        callback(null, 'three');
    },
    function(arg1, callback) {
        // arg1 now equals 'three'
        callback(null, 'done');
    }
], function (err, result) {
    // result now equals 'done'
});

第一个函数返回两这值onetwo,由于waterfall是顺序执行的,所有等第一个函数执行完,才会继续执行第二个函数,并且onetwo传递给了第二个函数,所以在第二个函数中arg1值为'one'arg2值为'two',然后通过callback,将three传给了第三个函数,所以第三个函数arg1值为'three',最后将'done'传给了最后的回调函数,所以result值为'done'

那么在我们的程序中是怎么应用的呢?比如展示用户详情页面中/u/username,我们需要展示用户的基本信息,同时将此用户的文章进行展示。前台传递到后台的参数是username,而我们只能通过userId才能查询文章,所以我们需要先通过username查询user,在通过user.id查询此用户的所有文章articles,然后将userarticles都传到前台,进行展示,代码如下:

router.get('/:username', function (req, res, next) {
    var username = req.params.username;
    var User = dbHelper.User;
    var Article = dbHelper.Article;
    async.waterfall([
        function (callback) {
            User.findOne({username: username}).exec(function (err, user) {
                callback(null, user);
            });
        },
        function (user, callback) {
            if (user) {
                Article.find({_user: user.id}).populate('_user').exec(function (err, articles) {
                    callback(null, articles, user);
                });
            } else {
                callback(null, null);
            }
        }
    ], function (err, articles, user) {
        res.render('my', {
            articles: articles,
            user: user,
            menu: 'my'
        });
    });
});

总结:async官方示例中说的很详细了,它的功能非常强大,需要我们一个个将其摸索透。最终组织出漂亮的代码出来。
官方文档:https://github.com/caolan/async#asyncjs

添加自定义的404页面

expressjs生成的代码app.js中,默认404是当作500错误进行处理的,当我们请求到404后,会给出这样一个错误页面

404

而实际上404跟500是不一样的,500是服务器端程序错误,404是很常见的一种资源不存在的错误,500能避免,但是404是不可避免的,所以我们需要有好的提示给用户一个404页面。改善方法如下:
app.js中找到catch 404 and forward to error handler对应的方法:

app.use(function (req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

问题就出在next(err),将err传递给下一个方法,也就是500那个。这里我们阻断它继续传递,直接渲染到前台页面:

app.use(function (req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    res.render('404');
});

然后在views下添加一个404.hbs,定制一下就ok!效果如下:

404

你可以自己订制的更漂亮!

使用Handlebars模块化你的页面

已经有一篇详细的文章来单独说明这个知识点,请移步:http://www.jianshu.com/p/a38ec7ef339a

请关注专题:我的NodeJS学习之路(实践之路)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,042评论 25 707
  • Node基本 node的最大特性莫过于基于事件驱动的非阻塞I/O模型。 node通过事件驱动的方式处理请求,无须为...
    AkaTBS阅读 2,140评论 0 11
  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,156评论 22 257
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,490评论 18 139
  • 端午节,帮着父亲把家里认认真真打扫了一番,大大小小的家具也擦了一遍。 父亲是一个极其干练的人,做事从不让人吃亏。 ...
    南尘三阅读 654评论 2 7