node.js 一个简单的页面输出实现代码


Posted in Javascript onMarch 07, 2012

安装过程就不说了。如果成功是能使用node的命令。node.js调试是非常方便的。每种后台语言都有一个向那个黑黢黢的控制台团输出语用的命令。node.js沿用FF那套东西,也就是console对象与其方法。我们首先建一个example.js文件,内容如下,然后在控制台打开它。

console.log("hello node.js") 
for(var i in console){ 
console.log(i+" "+console[i]) 
} 
node example.js。

你千万不要在node.js使用alert进行调试,那是浏览器带的全局方法,不报错才怪。
输出结果如下:
var log = function () { 
process.stdout.write(format.apply(this, arguments) + '\n'); 
} 
var info = function () { 
process.stdout.write(format.apply(this, arguments) + '\n'); 
} 
var warn = function () { 
writeError(format.apply(this, arguments) + '\n'); 
} 
var error = function () { 
writeError(format.apply(this, arguments) + '\n'); 
} 
var dir = function (object) { 
var util = require('util'); 
process.stdout.write(util.inspect(object) + '\n'); 
} 
var time = function (label) { 
times[label] = Date.now(); 
} 
var timeEnd = function (label) { 
var duration = Date.now() - times[label]; 
exports.log('undefined: NaNms', label, duration); 
} 
var trace = function (label) { 
// TODO probably can to do this better with V8's debug object once that is 
// exposed. 
var err = new Error; 
err.name = 'Trace'; 
err.message = label || ''; 
Error.captureStackTrace(err, arguments.callee); 
console.error(err.stack); 
} 
var assert = function (expression) { 
if (!expression) { 
var arr = Array.prototype.slice.call(arguments, 1); 
require('assert').ok(false, format.apply(this, arr)); 
} 
}

通过这些函数,我们大概了解到node.js在全局作用域添加了些什么,如require, process。但也不能武断说是,因为它们可能是某个作用域的私有对象。不过,了解这些全局对象,并从这些对象上出发去了解其他对象,非常有助于我们了解node.js的生态结构。在前端,每当浏览器升级,我就遍历一下window对象以及其个元素节点就得知它又增加了什么方法与属性,然后再查文档。那些更新日志不可能把全部细节都告诉你的,必须自己动手遍历一下,这样你就比别人知道得更多。好了,我们去找node.js的全局对象。
node.js的文档告诉我们,有如下几个全局对象:
global, process, require,__filename,__dirname, module
但我们为什么能直接使用console.log呢?经验告诉我们,console肯定是某全局对象的成员,正如我们可以alert, 也可以window.alert。好了,我们选遍历一下global这个名字取得非常霸气的对象
for(var i in global){ 
console.log("var " + i+" = "+global[i]) 
}

结果如下:
var global = [object global] 
var process = [object EventEmitter] 
var GLOBAL = [object global] 
var root = [object global] 
var Buffer = function Buffer(subject, encoding, offset) { 
//太长了,省略 
} 
var setTimeout = function () { 
var t = NativeModule.require('timers'); 
return t.setTimeout.apply(this, arguments); 
} 
var setInterval = function () { 
var t = NativeModule.require('timers'); 
return t.setInterval.apply(this, arguments); 
} 
var clearTimeout = function () { 
var t = NativeModule.require('timers'); 
return t.clearTimeout.apply(this, arguments); 
} 
var clearInterval = function () { 
var t = NativeModule.require('timers'); 
return t.clearInterval.apply(this, arguments); 
} 
var console = [object Object]

发现global与浏览器的window一样,都有个指向自身的同名成员。window === window.window, global === global.global。但node.js早期设计得不好,又一搞了个多余的GLOBAL成员。
console.log(global === global.global)//true
console.log(global === global.GLOBAL)//true
我们再遍历module对象:
for(var i in module){ 
console.log("var " + i + " = "+module[i]) 
}

结果如下:
var id = . 
var exports = [object Object] 
var parent = null 
var filename = /home/cheng19840218/node/example.js 
var loaded = false 
var exited = false 
var children = 
var paths = /home/cheng19840218/node/node_modules,/home/cheng19840218/node_modules,/home/node_modules,/node_modules 
var load = function (filename) { 
//太长了,省略 
} 
var _compile = function (content, filename) { 
//太长了,省略 
}

原来那个著名的exports是在此提供的,__filename大概也是filename的引用。只要遍历一下,你就发现许多有趣的东西。但别以为一下秘密就暴光在你眼皮下,还有许多不可遍历属性。比如上面我遍历global对象,只有???墒?父龀稍保?颐强梢允褂?cma262v5新增的方法去考察一下:
console.log(Object.getOwnPropertyNames(global))
结果如下:
[ 'clearInterval', 
'TypeError', 
'decodeURI', 
'Buffer', 
'parseFloat', 
'Number', 
'URIError', 
'encodeURIComponent', 
'RangeError', 
'ReferenceError', 
'RegExp', 
'Array', 
'isNaN', 
'setTimeout', 
'console', 
'Date', 
'Infinity', 
'Boolean', 
'Error', 
'root', 
'NaN', 
'String', 
'Function', 
'Math', 
'undefined', 
'encodeURI', 
'escape', 
'unescape', 
'process', 
'decodeURIComponent', 
'EvalError', 
'clearTimeout', 
'GLOBAL', 
'setInterval', 
'SyntaxError', 
'Object', 
'eval', 
'global', 
'parseInt', 
'JSON', 
'isFinite' ]

许多人学node.js就立即看其文档,殊不知node.js本身所依赖的V8引擎就拥有许多要学的东西,这其中包括ecma262v5带来的新方法新对象,还有效仿firefox的一些语法:
__defineGetter__
__defineSetter__
__lookupGetter__
__lookupSetter__
set
get
__proto__
不过以"__"开头的东西我是不建议用的,像set与get现在最新的浏览器都支持,如IE9,可以在其开发人员工具下试试下面的脚本:
var a = { 
get latest () { 
if (this.log.length > 0) { 
return this.log[this.log.length - 1]; 
} 
else { 
return null; 
} 
}, 
log: [] 
} 
a.log[0] = "a"; 
a.log[1] = "b"; 
console.log(a.latest)

在node.js基本上没有兼容问题(如果你不是从早期的node.js玩起来),而且原生对象又加了这么多扩展,再加上node.js自带的库,每个模块都提供了花样繁多的API,如果还嫌不够,github上还有上千个插件。对于想向尝试一下后端编程的JSer来说,这是极具诱惑力的。可能有人说,后端不是涉及数据库操作吗?这与比前端的DOM兼容比起来,不值一提。还有什么文件夹与文件操作 ,你就当成是一种特殊的数组操作就是。因此你完全可以愤愤不平!
好了,我们来点实质的内容吧。node.js本来就是一个http服务器,它是要与前端交互的,因此少不了两个对象:请求(request)与响应(response)。请求与响应显然一种异步的东西,因为我们 不知道前端什么时候发请求过来,响应也不能立即给前端,还要做日志,读写数据库等操作呢。因此对于javascript来说,这用回调函数来实现最好。那么由?来接受这个回调呢?一个服务器对象!
var http = require("http"); 
http.createServer(function(request, response) { 
response.writeHead(200, {"Content-Type": "text/plain"}); 
response.write("Hello node.js"); 
response.end(); 
}).listen(8888);

node.js有个特殊的require,用于同步加载其他模块的对象,这与其他语言的require, import差不多。能同步就是好,不像前端那样一层套一层。然后利用一个函数去实例化一个服务器对象,然后监听8888端口。这是node.js官网最初的例子,大家都写烂了。但这样的程序在现实中一无是处,我们在地址栏上输入URL,你起码要返回一个完整页面给我吧!
对此,我们首先要进行模块化。模块化是以文件为单位的,把example.js更名为server.js,然后再把里面的内容改为一个模块。对于一个node.js的文件,其实它里面的内容是在一个封闭的环境中执行。要想共享给其他模块使用,就必须绑定在exports对象上。
var http = require("http"); 
exports.start = function(){ 
http.createServer(function(request, response) { 
console.log("Request received..."); 
response.writeHead(200, {"Content-Type": "text/plain"}); 
response.write("Hello node.js"); 
response.end(); 
}).listen(8888); 
console.log("server start..."); 
}

然后我们再建一个index.js作为入口(index.js与server.js放在同一目录下)。
var server = require("./server"); 
server.start();

然后建一个index.html页面。
<!doctype html> 
<html> 
<head> 
<title>index</title> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> 
<body> 
<h2>这是首页</h2> 
</body> 
</html>

现在我们就在要请求过来时,把此页的内容读出来,返给用户。这时我们就要用到fs模块的方法了。
var http = require("http"); 
var fs = require('fs'); 
exports.start = function(){ 
http.createServer(function(request, response) { 
fs.readFile('./index.html', 'utf-8',function (err, data) {//读取内容 
if (err) throw err; 
response.writeHead(200, {"Content-Type": "text/html"});//注意这里 
response.write(data); 
response.end(); 
}); 
}).listen(8888); 
console.log("server start..."); 
}

好了,这时我们重启再次输入地址,就看到一个完整的页面了。
但一个页面除了HTML结构层外,还有javascript与css。那么,我们在当前目录建一个文件夹javascripts, 里面建index.js,内容如下:
window.onload = function(){ 
var p = document.createElement("p"); 
p.innerHTML = "这是动态添加的" 
document.body.appendChild(p); 
}

再建一个styles目录,里面建index.css,内容如下:
html,body{ 
background: #3671A5; 
height: 100% 
}

然后在index.html引入这两个文件:
<!doctype html> 
<html> 
<head> 
<title>index</title> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link type="text/css" rel="stylesheet" href="styles/index.css"/> 
<script src="/javascripts/index.js"></script> 
</head> 
<body> 
<h2>这是首页</h2> 
</body> 
</html>

重新打开,发现没有改变,google,说要处理js与css文件的请求。没有办法,取得request.url属性,再判定后缀名,为它进行文件读取与设置首部。
var http = require("http"); 
var fs = require('fs'); 
var url = require('url'); 
exports.start = function(){ 
http.createServer(function(request, response) { 
var pathname = url.parse(request.url).pathname; 
var ext = pathname.match(/(\.[^.]+|)$/)[0];//取得后缀名 
switch(ext){ 
case ".css": 
case ".js": 
fs.readFile("."+request.url, 'utf-8',function (err, data) {//读取内容 
if (err) throw err; 
response.writeHead(200, { 
"Content-Type": { 
".css":"text/css", 
".js":"application/javascript", 
}[ext] 
}); 
response.write(data); 
response.end(); 
}); 
break; 
default: 
fs.readFile('./index.html', 'utf-8',function (err, data) {//读取内容 
if (err) throw err; 
response.writeHead(200, { 
"Content-Type": "text/html" 
}); 
response.write(data); 
response.end(); 
}); 
} 
}).listen(8888); 
console.log("server start..."); 
}

node.js 一个简单的页面输出实现代码 
至此,本文的目的达到了。三个node.js文件,一个普通的js文件,一个css文件,一个html文件。下一个目的就是多页了,一个网站是由多个目的构成的。它包含如下内容,能处理ajax请求,上传文件,Session与Cookie支持,日志,MIME识别,路由派发,缓存系统......要做的事多得吓人,因此有人一上来就框架,与学JS那样,连API还没有摸熟就用jQuery了,那学个毛!回顾一下我们上面的server.js中间的部分,其实就要把MIME与路由拆分出来的。但最重要的事还有一样,如何处理这无穷的函数嵌套?本人觉得这与我的模块加载系统还没有什么两样,下次就从这里动手吧。
Javascript 相关文章推荐
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 #Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 #Javascript
拥抱模块化的JavaScript
Mar 07 #Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 #Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 #Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 #Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 #Javascript
You might like
检测png图片是否完整的php代码
2010/09/06 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
django settings.py 配置文件及介绍
2019/07/15 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
IBatis持久层技术
2016/07/18 面试题
销售辞职报告范文
2014/01/12 职场文书
初中生自我鉴定
2014/02/04 职场文书
生产部岗位职责范文
2014/02/07 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
入党介绍人考察意见
2015/06/01 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
python函数的两种嵌套方法使用
2022/04/02 Python
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle
mysql查看表结构的三种方法总结
2022/07/07 MySQL