注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

snoopyxdy的博客

https://github.com/DoubleSpout

 
 
 

日志

 
 

node.js学习日志(二)—— YUI + EXPRESS  

2011-07-28 14:35:27|  分类: node |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
前2天自己参照着网上的一些DEMO,写了NODE.JS的静态文件服务器,能够根据用户输入的URL根据规则作出不同处理,然后显示页面。也可以成功的接收用户的POST和GET过来的信息,进行处理然后以JSON格式返回给用户。
个人感觉这套东西应该是有框架可以利用的,于是网上搜索NODE的框架,后来经过多方比较,终于决定研究下NODE的EXPRESS框架,官方网站的地址是:http://expressjs.com/
我于是安装了EXPRESS框架,过程很顺利,加载以后第一个DEMO,"HELLO WORLD"也顺利跑起来了,我当时无比兴奋啊,于是着手将我自己写的一个聊天室+用户+私聊的服务端程序用EXPRESS重写。
在我N次失败于express.static这个方法后,我放弃了,开始找一些DEMO来挽救我这个低智商。
很幸运,我找到了yui-express的这个DEMO框架,今天研究了一下他的SERVER.JS源码,收获颇丰,不过我发现yui-express也并没有使用express.static方法,难道这个方法真的有BUG!!!
下面我们一起来看一下yui-express的server.js的源码。(当中数据库那块还有待研究。。)
源码地址:https://github.com/davglass/yui-express/


先介绍下yui-express demo的文件结构:如图

node.js学习日志(二)—— YUI + EXPRESS - snoopyxdy - snoopyxdy的博客

其中views文件夹存放的是模版html文件
skin文件夹被我改名了,原来叫assets,存放图片、脚本和CSS
modules文件夹存放的是网站用到的2个服务端脚本TABVIEW和CALENDAR
logs是存放日志的
server_fugue.js和server.js是差不多的内容,只不过server_fugue.js是同步的一个版本。
我这里主要研究下server.js,(当然需要一些NODE.JS基础)

文件里大部分都有英文注释,我就结合自己的理解把一些英文注释不透彻,而正好我又知道的来解释下:
line5:
process.chdir(__dirname);   //改变进程的当前工作目录,可以在程序任何地方调用process.cwd()来获取进程的执行路径,因为程序的运行目录不一定是程序放置的目录

line17:
var app = module.exports = express.createServer();        //定义APP创建一个server,express框架的用法,详情见EXPRESS的API

line168:
content: '#content',   //表示将INDEX.HTML的内容插入layout.html内的id=content的DOM元素中


line174:
              sub: {title: TITLE},  //这个比较有意思,是指模版的作用,在输出layout.html页面时,将{title}的地方替换成TITLE的内容


line182:
                after: function(Y, options, partial) {           //页面输出完成之后的回调,这个匿名函数传递的参数作用不明,望高手指点
                    Y.one('title').set('innerHTML', TITLE);    //这个是YUI框架的方法,对DOM元素进行操作,下同
                    Y.one('#nav li.home').addClass('selected');
                }


line208:
 before: function(Y) {          
                    Y.one('h1').set('innerHTML', 'Welcome to Page #1');
                },
//这里比较好理解,是在页面前操作页面的DOM元素,参数Y应该就是YUI的简写类似, 可以使用YUI.one()获取Node,该方法的参数可以是一个Node,也可以是一个选择器(selector), 在使用选择器时,返回第一个匹配的元素。个人认为,使用BEFORE比AFTER来的好理解。


line263-line276:
app.get('/calendar', function(req, res) {                //当GET发起到这个目录时
        YUI({                                               //注册一个模块,并且把这个模块的详细信息放在modules对象中,取名为local-cal
            debug: DEBUG,
            modules: {
                'local-cal': {
                    //For more detail see this file..
                    fullpath: __dirname + '/modules/local-cal.js'
                }
            }
        }).use('node', 'local-cal', function(page) {                   //这里才是真正的注册这个模块,第二个参数要和上面的取名相同,并且把RES和REQ以及页面都传递到注册的模块中

            //Calling a method inside an external module
            page.localCal(req, res);                 //这里需要调用一下模块内的函数
        });
    });


而local-cal.js可以这么写:
YUI.add('local-cal', function(Y) { 
    Y.localCal = function(req, res) {

                  。。。//一些cal的计算,我们这里不关心               

                res.render('calendar.html', {                        //这里和之前一样,一套模版用来输出HTML页面
                locals: {
                    instance: Y,
                    content: '#content',
                    sub: {
                        title: 'YUI/Express JS Demo'
                    }
                }
            }); 

    }
});

line268:
instance: page,            //当 res.render()函数在闭包内,locals需要定一个instance的属性用来指定当前输出的page对象

line295:
 var diggCache = null;         //这里是利用缓存,说白了就是变量


line346:
 setTimeout(function() {          //每5分钟清除一次这个变量,然后重新获取下
                            //console.log('clear digg cache');
                            diggCache = null;
                        }, (1000 * 60 * 5));


line317:
            if (diggCache) {              //如果缓存在,则直接将缓存的东西塞到页面里去,注意前面已经将UL定义好了
                //console.log('Loading Digg from cache');
                ul.set('innerHTML', diggCache);
                sendRequest();


line329:
   var url = 'http://digg.com/news';
 remotePage.fetch(url, function() {            //这里是通过服务器向URL发送请求,然后获得newsItems的对象,以供YUI使用,类似爬虫偷新闻
                          //Get all the news items from the remote page.
                        var newsItems = remotePage.all('#story-items h3');
                        //Iterate them
                        newsItems.each(function(n) {。。。。//一些DOM操作

line342:
 diggCache = ul.get('innerHTML');        //将计算出来的HTML片段存入缓存


line483:
    app.get('/pre', YUI.express({ render: 'pre.html', locals: {} }), function(req, res, next) {
        req.Y.one('doc').set('title', TITLE + ' :: Pre-Render Layout');
        req.Y.one('#nav li.pre').addClass('selected');
        res.sub({
            title: 'Pre-Render Layout'
        });
        res.send();
    });
//这里提供了另外一种方法来输出页面,个人认为这个方法对输出一些不需要复杂计算的静态页面也不失为一个好办法。

预留一下:yui/express的mysql应用
line398:
数据库操作应用待研究,有高手提供下详细的API地址吗?






疑问:
line23-line54:
YUI({ debug: true }).use('express', 'node', function(Y) {    //这里应该YUI的一个用法具体语法找不到API,但是主要是用来注册服务模块的,望高手指点!


line107:
  YUI.partials    //希望能详细了解下到底如何使用

line266:
res.render()//方法的详细使用,希望了解

   
  







  评论这张
 
阅读(2477)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016