Node.js 간단한 페이지 출력 구현 code_javascript 기술

설치과정은 들어가지 않겠습니다. 성공하면 node 명령을 사용할 수 있습니다. node.js 디버깅은 매우 편리합니다. 각 백엔드 언어에는 해당 다크 콘솔 그룹에 출력되는 실용적인 명령이 있습니다. node.js는 FF 세트, 즉 콘솔 객체와 그 메소드를 따릅니다. 먼저 다음 내용으로 example.js 파일을 생성한 후 콘솔에서 엽니다.

코드 복사 코드는 다음과 같습니다.

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

node.js에서는 디버깅에 경고를 사용하면 안 됩니다. 브라우저에서 제공하는 전역 메서드이므로 오류를 보고하지 않는 것이 이상합니다.
출력 결과는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var log = function ( ) {
process.stdout.write(format.apply(this, 인수) 'n')
}
var info = function () {
process.stdout .write(format.apply (this, 인수) 'n');
}
var warning = function () {
writeError(format.apply(this, 인수)
}
var error = function () {
writeError(format.apply(this, 인수) '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 = 함수(레이블) {
var Duration = Date.now() - times[label]
exports.log('undefine: NaNms ', label, Duration) ;
}
var Trace = function (label) {
// TODO는
// 노출되면 V8의 디버그 개체를 사용하여 이 작업을 더 잘 수행할 수 있습니다. >var err = new Error ;
err.name = 'Trace';
err.message = label ||
Error.captureStackTrace(err,args.callee); error(err.stack) ;
}
var Assert = function (expression) {
if (!expression) {
var arr = Array.prototype.slice.call(arguments, 1);
require('asser').ok(false, format.apply(this, arr));
}
}


이러한 함수를 통해 해당 노드를 대략적으로 이해합니다. .js는 글로벌 범위에 require, process 등이 추가된 것입니다. 그러나 특정 범위의 개인 개체일 수 있으므로 임의로 말할 수는 없습니다. 그러나 이러한 전역 개체를 이해하고 이러한 개체에서 시작하여 다른 개체를 이해하는 것은 node.js의 생태학적 구조를 이해하는 데 매우 도움이 됩니다. 프런트 엔드에서는 브라우저가 업그레이드될 때마다 창 개체와 해당 요소 노드를 탐색하여 추가된 메서드와 속성을 확인한 다음 문서를 확인합니다. 이러한 변경 로그가 모든 세부 사항을 알려주는 것은 불가능합니다. 따라서 다른 사람보다 더 많은 것을 알 수 있도록 직접 살펴보아야 합니다. 좋아요, node.js의 전역 객체를 찾아봅시다.

node.js 문서에는 다음과 같은 전역 개체가 있다고 나와 있습니다.
global, process, require,__filename,__dirname, module
그런데 왜 console.log를 직접 사용할 수 있나요? 경험에 따르면 콘솔은 경고나 window.alert와 마찬가지로 전역 개체의 구성원이어야 합니다. 좋아, 매우 강력한 객체를 얻기 위해 global이라는 이름을 탐색해 봅시다

코드를 복사하세요 코드는 다음과 같습니다:

for(var i in global){

console.log("var " i " = " global[i])
}


결과는 다음과 같습니다. :

코드 복사 코드는 다음과 같습니다.

var global = [object global]

var process = [객체 EventEmitter ]
var GLOBAL = [전역 객체]
var root = [전역 객체]
var Buffer = 함수 Buffer(주제, 인코딩, 오프셋) {
// 너무 길면 생략하세요.
}
var setTimeout = function () {
var t = NativeModule.require('timers');
return t.setTimeout.apply(this, 인수); >}
var setInterval = function () {
var t = NativeModule.require('timers');
return t.setInterval.apply(this, 인수); ClearTimeout = function () {
var t = NativeModule.require('timers');
return t.clearTimeout.apply(this, 인수)
varclearInterval = function() {
var t = NativeModule .require('timers');
return t.clearInterval.apply(this, 인수)
}
var console = [객체 객체]


브라우저 창과 마찬가지로 전역에도 자신을 가리키는 동일한 이름의 멤버가 있는 것으로 확인되었습니다. 창 === window.window, 전역 === global.global. 그러나 node.js는 초기에는 잘 설계되지 않았으며 또 다른 중복된 GLOBAL 멤버를 생성했습니다.
console.log(global === global.global)//true
console.log(global === global.GLOBAL)//true
그런 다음 모듈 객체를 탐색합니다.

코드 복사 코드는 다음과 같습니다.

for(var i in module){
console. log("var " i " = " module[i])
}

결과는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다:

var id = .
var imports = [object Object]
var parent = null
var filename = /home/cheng19840218/node/example.js
varloaded = false
varexited = false
var children =
var paths = /home/cheng19840218/node/node_modules,/home/cheng19840218 /node_modules,/home/node_modules,/node_modules
var load = function (파일 이름) {
//너무 길어서 생략하세요
}
var _compile = function (content, filename) {
//너무 길면 생략
}

여기서 유명한 내보내기가 제공되는 것으로 나타났으며 __filename은 아마도 파일 이름에 대한 참조일 것입니다. 그냥 살펴보면 흥미로운 것들을 많이 발견할 수 있을 것입니다. 그러나 비밀이 코 바로 아래에 노출될 것이라고 생각하지 마십시오. 아직 횡단할 수 없는 속성이 많이 있습니다. 예를 들어, 위의 전역 개체를 순회했는데 소수의 멤버만 계산할 수 있습니다. ecma262v5의 새로운 메서드를 사용하여 확인할 수 있습니다.
console.log(Object.getOwnPropertyNames(global))
결과는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

[ 'clearInterval',
'TypeError',
'decodeURI',
'버퍼',
'parseFloat',
'숫자',
'URIError',
'encodeURIComponent',
'RangeError',
'ReferenceError',
'RegExp',
'Array',
'isNaN',
'setTimeout',
'console',
'날짜',
' 무한대',
'부울',
'오류',
'루트',
'NaN',
'문자열',
' 함수',
'수학',
'정의되지 않음',
'encodeURI',
'escape',
'unescape',
'process',
'decodeURIComponent ',
'EvalError' ,
'clearTimeout',
'GLOBAL',
'setInterval',
'SyntaxError',
'Object',
'eval' ,
'global',
'parseInt',
'JSON',
'isFinite' ]

많은 사람들이 node.js를 배우고 즉시 해당 문서를 읽습니다. 그들은 node.js 자체가 node.js에 의존한다는 사실을 거의 모릅니다. V8 엔진에는 ecma262v5에서 가져온 새로운 메소드와 객체는 물론 firefox를 모방한 일부 구문을 포함하여 배울 것이 많습니다:
__defineGetter__
__defineSetter__
__lookupGetter__
__lookupSetter__
set
get
__proto__
그러나 IE9와 같이 set 및 get과 같은 최신 브라우저에서는 이를 지원하지 않는 것이 좋습니다. 아래 스크립트에서 사용해 볼 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var a = {
최신 정보 가져오기() {
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에는 기본적으로 호환성 문제가 없습니다(초기 노드에서 플레이하지 않는 경우). .js), 수많은 기본 개체가 추가되었으며 node.js와 함께 제공되는 라이브러리와 결합되어 각 모듈은 다양한 API를 제공합니다. 이것이 충분하지 않은 경우 github에 수천 개의 플러그인이 있습니다. 이는 백엔드 프로그래밍을 시도하려는 JSers에게는 매우 유혹적입니다. 어떤 사람들은 백엔드에 데이터베이스 작업이 포함되지 않는다고 말할 수도 있습니다. 이는 프런트엔드 DOM 호환성과 비교하면 아무것도 아닙니다. 다른 폴더 및 파일 작업의 경우 특수 배열 작업으로 처리하면 됩니다. 그래서 불만을 가질 수 있습니다!
자, 이제 실제 내용으로 넘어가겠습니다. Node.js는 원래 http 서버이므로 프런트 엔드와 상호 작용하므로 요청과 응답이라는 두 가지 개체가 필수입니다. 요청과 응답은 분명히 비동기적입니다. 왜냐하면 프런트 엔드가 언제 요청을 보낼지 알 수 없고 응답을 프런트 엔드로 즉시 보낼 수 없기 때문입니다. 또한 로그를 수행하고 데이터베이스 및 기타 작업을 읽고 써야 합니다. . 따라서 자바스크립트의 경우 콜백 함수를 사용하는 것이 가장 좋습니다. 그러면 누가 이 콜백을 받아들일까요? 서버 개체!

코드 복사 코드는 다음과 같습니다.

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 Node.js에는 다른 모듈에서 객체를 동기적으로 로드하는 데 사용되는 특별한 요구 사항이 있습니다. 이는 다른 언어의 요구 사항 및 가져오기와 유사합니다. 레이어별로 되어있는 프런트엔드와 달리 동기화가 가능하면 좋습니다. 그런 다음 함수를 사용하여 서버 개체를 인스턴스화한 다음 포트 8888을 수신합니다. 이건 node.js 공식 홈페이지에 있는 원본 예제인데 다들 엉터리로 작성하셨네요. 그러나 이러한 프로그램은 실제로는 쓸모가 없습니다. 주소 표시줄에 URL을 입력하면 최소한 전체 페이지를 나에게 반환해야 합니다.
이를 위해서는 먼저 모듈화가 필요합니다. 모듈화는 파일을 기반으로 합니다. example.js의 이름을 server.js로 바꾼 다음 내부 콘텐츠를 모듈로 변경합니다. node.js 파일의 경우 내부 콘텐츠는 실제로 폐쇄된 환경에서 실행됩니다. 다른 모듈과 공유하려면 내보내기 개체에 바인딩해야 합니다.

코드 복사 코드는 다음과 같습니다.

var http = require("http") ;
exports.start = function(){
http.createServer(function(request, response) {
console.log("요청 수신됨...");
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 페이지를 만듭니다.

코드 복사 코드는 다음과 같습니다.

>

홈페이지입니다

이제 내용을 읽어보세요. 이 페이지를 나와서 사용자에게 돌려주세요. 이번에는 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 구조 레이어 외에도 자바스크립트와 CSS도 있습니다. 그런 다음 현재 디렉터리에 javascripts 폴더를 만들고 그 안에 index.js를 만듭니다. 내용은 다음과 같습니다.

코드를 복사합니다

. 코드는 다음과 같습니다. window.onload = function(){ var p = document.createElement("p")

p.innerHTML = "This 동적으로 추가됨"

document .body.appendChild(p);
}


다른 스타일 디렉터리를 만들고 그 안에 index.css를 만듭니다. 내용은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. html,body{ 배경: #3671A5 ;

height: 100%

}


그런 다음 index.html에 다음 두 파일을 추가합니다.

코드를 복사합니다. 🎜>

코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. 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];//접미사 가져오기 name
스위치(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;
기본값:
fs.readFile('./index.html', 'utf-8',function (err, data) {//내용 읽기
if (err) throw err;
response.writeHead(200, {
"Content-Type": "text/html"
})
response.write(data); .end ();
});
}
}).listen(8888)
console.log("서버 시작..."); 🎜>


이 시점에서 이 글의 목적은 달성되었습니다. node.js 파일 3개, 일반 js 파일, CSS 파일, html 파일. 다음 목적은 여러 페이지로 구성된 웹사이트입니다. 여기에는 ajax 요청 처리, 파일 업로드, 세션 및 쿠키 지원, 로그, MIME 인식, 라우팅 디스패치, 캐싱 시스템 등을 처리할 수 있는 다음 콘텐츠가 포함되어 있습니다. 해야 할 일이 너무 많아서 프레임워크를 시작하자마자 프레임워크를 시작하는 사람도 있습니다. API에 익숙해지기 전에 JS를 배우고 jQuery를 사용하는 것과 같습니다. 위의 server.js의 중간 부분을 되돌아보면 실제로 MIME과 라우팅을 분리해야 합니다. 하지만 가장 중요한 것은 이 무한 함수 중첩을 어떻게 처리할 것인가 하는 것입니다. 이건 제 모듈 로딩 시스템과 다르지 않다고 생각해서 다음번엔 여기서부터 시작하겠습니다.