【北京網(wǎng)站制作】基于Node.js、Express、Jscex開發(fā)的ToDo網(wǎng)站實(shí)例
  • 更新時(shí)間:2024-11-06 21:24:09
  • 網(wǎng)站建設(shè)
  • 發(fā)布時(shí)間:1年前
  • 480

基于Node.js、Express和Jscex開發(fā)的ToDo網(wǎng)站示例

Jscex的主要使用場(chǎng)景是“JavaScript異步編程”,但無論是運(yùn)行在瀏覽器端還是服務(wù)器端都沒有限制。 Node.js 最近很火,Windows 原生版本也剛剛發(fā)布。很多同學(xué)會(huì)用它來制作一些網(wǎng)站之類的小程序。目前用Node.js開發(fā)網(wǎng)站最著名的框架就是Express,而且比較好用。前段時(shí)間在CNodeJS社區(qū)看到一篇文章。有同學(xué)將一個(gè)用Python寫的ToDo列表網(wǎng)站移植到了Node.js上。為了推廣Jscex,我fork了這個(gè)項(xiàng)目,修改為基于Jscex的版本。大家可以來對(duì)比一下。當(dāng)然這個(gè)站點(diǎn)太簡(jiǎn)單了,我也在尋找更合適的項(xiàng)目。 (網(wǎng)站制作)

51CTO推薦話題:Node.js專區(qū)

JavaScript是一種非阻塞語言,所以各種API都設(shè)計(jì)成異步的,有利于服務(wù)端的擴(kuò)展性和客戶端網(wǎng)頁的響應(yīng)性,但是在編程中會(huì)遇到各種問題。比如ToDo例子中一個(gè)簡(jiǎn)單的處理函數(shù),因?yàn)樾枰樵償?shù)據(jù)庫,所以需要寫一個(gè)回調(diào):

exports.index=function(req,res,next){

db.query('select*fromtodoorderbyfinishedasc,idasclimit50',function(err,rows){

if(err)returnnext(err);

res.render('index',{todos:rows});

});

};

db變量用于操作MySQL數(shù)據(jù)庫。它的查詢方法傳入sql(可能有參數(shù)),并提供回調(diào)函數(shù)來提示錯(cuò)誤或返回查詢結(jié)果。在回調(diào)中,我們必須判斷err是否存在,如果存在,則調(diào)用next向框架報(bào)告“error”。每個(gè)異步操作都必須是這樣的。試想一下,如果在這個(gè)查詢之后還有一個(gè)查詢,需要進(jìn)行嵌套和err判斷。每一個(gè)處理函數(shù)都是如此,這也是異步編程的煩惱之一:很難進(jìn)行統(tǒng)一的異常處理,處理代碼總是需要分散在各處。一不小心就會(huì)變成“野外異?!?,很難排查。

我只是Jscexed ToDo 網(wǎng)站。首先,啟用MySQL 查詢以訪問Jscex (libjscex.mysql.js):

alt">exports.jscexify?=?function?(db)?{ ?
  • ????db.queryAsync?=?function?()?{ ?
  • ????????var?_this?=?this; ?
  • ?
  • ????????var?args?=?[]; ?
  • ????????for?(var?i?=?0;?i?<?arguments.length;?i++)?{ ?
  • ????????????args.push(arguments[i]); ?
  • ????????} ?
  • ?
  • ????????var?delegate?=?{ ?
  • ????????????onStart:?function?(callback)?{ ?
  • ?
  • ????????????????args.push(function?(err,?result)?{ ?
  • ????????????????????if?(err)?{ ?
  • ????????????????????????callback("failure",?err); ?
  • ????????????????????}?else?{ ?
  • ????????????????????????callback("success",?result); ?
  • ????????????????????} ?
  • ????????????????}); ?
  • ?
  • ????????????????_this.query.apply(_this,?args); ?
  • ????????????} ?
  • ????????}; ?
  • ?
  • ????????return?new?Jscex.Async.Task(delegate); ?
  • ????} ?
  • }?
  • 一般來說,將一個(gè)異步接口給Jscex化并不需要那么多代碼(最關(guān)鍵的其實(shí)只是onStart函數(shù))。這里近30行代碼,其中大部分是為了支持“變長(zhǎng)”參數(shù),因此queryAsync函數(shù)會(huì)保留調(diào)用時(shí)的所有參數(shù),補(bǔ)上一個(gè)callback,再去調(diào)用query函數(shù)本身。此時(shí),便可以去改寫之前的index等處理函數(shù)了(controllerstodo.js),例如:

    1. exports.index?=?toHandler(eval(Jscex.compile("async",?function?(req,?res)?{ ?
    2. ?
    3. ????var?todos?=?$await(db.queryAsync('select?*?from?todo?order?by?finished?asc,?id?asc?limit?50')); ?
    4. ????res.render("index",?{?todos:?todos?}); ?
    5. ?
    6. })));?

    toHandler函數(shù)的作用,是將一個(gè)“接受req和res,返回Task”的函數(shù),封裝成標(biāo)準(zhǔn)的“接受req、res和next三個(gè)參數(shù)”的處理函數(shù),并提供統(tǒng)一的錯(cuò)誤處理:

    1. var?toHandler?=?function?(asyncFunc)?{ ?
    2. ????return?function?(req,?res,?next)?{ ?
    3. ????????var?task?=?asyncFunc(req,?res); ?
    4. ????????task.addListener(function?()?{ ?
    5. ????????????if?(task.status?==?"failed")?{ ?
    6. ????????????????next(task.error); ?
    7. ????????????} ?
    8. ????????}); ?
    9. ????????task.start(); ?
    10. ????} ?
    11. }?

    我在todo.js里保留了原有各個(gè)處理函數(shù)的實(shí)現(xiàn),感興趣的朋友可以對(duì)比一下它們之前的差別??上У氖?,由于ToDo實(shí)在過于簡(jiǎn)單,Jscex的優(yōu)勢(shì)并沒有表現(xiàn)出來太多。例如,每個(gè)處理程序中只有一個(gè)MySQL查詢,沒有判斷和循環(huán),更別說為了充分利用IO并發(fā)能力,從而組合多個(gè)異步函數(shù)了。因此,我最近也一直在尋找更復(fù)雜一些的示例,不過似乎用Express的開源網(wǎng)站并不多見,我?guī)缀醵枷胱约簩懸粋€(gè)了。目前感覺Nodepad似乎還算不錯(cuò),接下來可能會(huì)對(duì)它下手。

    ToDo網(wǎng)站依賴Express,ejs和MySQL驅(qū)動(dòng),同時(shí)我把Jscex作為添加為它的子模塊。如果您要克隆一份ToDo的代碼把玩一番,可以:

    1. >?git?clone?git://github.com/JeffreyZhao/todo.git ?
    2. >?cd?todo ?
    3. >?git?submodule?init ?
    4. >?git?submodule?update ?
    5. >?npm?install?express?ejs?mysql ?
    6. >?node?server.js?

    從現(xiàn)在開始,我會(huì)在InfoQ中文站上發(fā)表一系列關(guān)于Jscex的文章,既有關(guān)于瀏覽器端的JavaScript開發(fā),也有在服務(wù)器端利用Node.js開發(fā)的內(nèi)容??赡苣壳斑€可能會(huì)有所疑惑,例如為什么要使用危險(xiǎn)的eval函數(shù),eval和Jscex.compile函數(shù)不能封裝起來嗎?其實(shí)在看了我的文章并對(duì)Jscex有了基本了解之后,就會(huì)發(fā)現(xiàn)這些都是以“傳統(tǒng)眼光”來看待Jscex時(shí)所形成的誤解。Jscex的做法的確“另辟蹊徑”,否則在JavaScript異步類庫已經(jīng)多如牛毛的情況下,我不知如何讓它脫穎而出。(高端網(wǎng)站建設(shè))

    我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn),每一個(gè)項(xiàng)目承諾做到滿意為止,多一次對(duì)比,一定讓您多一份收獲!

    本文章出于推來客官網(wǎng),轉(zhuǎn)載請(qǐng)表明原文地址:https://www.tlkjt.com/web/13823.html
    推薦文章

    在線客服

    掃碼聯(lián)系客服

    3985758

    回到頂部