JS一般般的网页重构能够运用Node,rename方法应用表明

JS一般般的网页重构可以应用Node.js做些什么

2016/06/07 · JavaScript
· 3 评论 ·
重构

原文出处:
张鑫旭(@张鑫旭)   

D:\node\update_name目录有如下文件:

主意求证:

设置进度就隐瞒了。如若成功是能应用node的命令。node.js调试是越发便利的。每种后台语言都有一个向那多少个黑黢黢的操纵台团输出语用的吩咐。node.js沿用FF那套东西,也就是console对象与其方式。我们第一建一个example.js文件,内容如下,然后在控制台打开它。

一、非总括机背景前端怎样急速了然Node.js?

做前端的应该都听过Node.js,偏开发背景的童鞋应该都玩过。

对于一些不曾电脑背景的,工作内容以静态页面显示为主的前端,可能没有把玩过Node.js,且很有可能对Node.js都尚未一个对比立体的认识——知道这个家伙能够跑服务,打造很多前端工具,看上去很厉害的规范,但是,可能就仅限于此了。

亚洲必赢官网 ,“那是还是不是三言两语概括Node.js的满目呢?”
“不可!”
“那咋做?”
“那就六言四语!”

首先,要清楚,Node.js一个JavaScript运行环境(runtime),没错,就是用来运作Javascript.
在此以前JavaScript只好在浏览器那一个小世界里称王称霸。很多前端小伙伴或者就JS那门程序语言熟一点,其余C++,
.net之类的就呵呵了。假如是病故,要是浏览器一觉醒来杜绝了,很三个人就会下岗。似乎食品单一的物种一旦那种食物没了,就坐等灭绝是一个道理。

不过,现在,不要担心了,Node.js让JavaScript变成杂食的了,也就是除了网页行为,可以和其它C++等语言同样,创设服务,操作文件等等。

俺们应有都接纳过.exe后缀的公文,双击一下,就足以隐藏个病毒什么的;大家也许还运用过.bat后缀的批处理文件,一点击,文件夹里面的图纸全体重命名;那么一旦是.js后缀的文书呢(假使你的系统已经设置了Node.js环境),双击一下则……当当当当……会打开编辑器看到JS代码,双击是未曾用的!

亚洲必赢官网 1

俺们可以打开命令行工具,cd到指定目录,然后输入(如若JS文件名为test.js):

node test

1
node test

然后test.js里面的代码就足以愉悦地跑起来啦!

对此“页面仔”而言,精晓那样多就够了!

  1. 安装后Node.js环境;
  2. 用大家蹩脚的JS写一个不善处理的.js文件;
  3. node执行下。

简简单单三部曲,大家就变身成了具备开发味道的前端从业人士了。亚洲必赢官网 2

1:文件夹:icons

修改文件名称,可更改文件的存放路径。

复制代码 代码如下:

二、蹩脚JS下的Node.js初体验

绝大数工厂都是小厂,很半数以上小厂都唯有一个前端,很多前端的JS其实都一般般。

领域里面经常把“前端解决方案”挂在嘴边的,实际上都是有前端团队的,因为有团体,
才能显价值。

“前端解决方案”是好,然而,如果实在关怀行业前行,应该了然,可以在一个大团队里面玩耍的实在是小片段人,有众多居多的伴儿都是孤军作战,这套东西可能反而阻挠了火速和灵活;有很多浩大的伙伴在二三四线城市,是野生的前端开发,底子不够,那套庞杂的事物很难明白;有成百上千广大的花色就是多少个静态活动页面,没需要回回使用高射炮打蚊子。

那时,往往须求的是定制化很强的小而美的处理。有同学也许会狐疑,哎哎,我JS水平相比菜,自造工具那种事情会不会有点基本啊。实际上,固然你JS一般般,借助Node.js营造一些小工具进步自己的前端开发功能那种工作,完全不在话下。

前端那东西,有个博尔特都认可的性状,就是上心灵!

第一,大家需求一份Node.js API文档,我们利用“动物搜索”,搜一下:
亚洲必赢官网 3

就率先个呢,进入会看到一长排的API列表内容:
亚洲必赢官网 4

不要怕,大家只须要那一个就足以,没错,就一个文件系统(fs)!亚洲必赢官网 5
其他都不需求管,那个都是名高天下玩家玩的:
亚洲必赢官网 6

点击去,又是不少洒洒,一群API:亚洲必赢官网 7
亚洲必赢官网 8

不用怕,大家只须要……淡定,不是一个,是多少个正规的增删读写重命名文件就可以了。亚洲必赢官网 9

好了,然后只须求一些涂鸦的JS,我们就足以玩起来了。

玩什么吧?容我看集动漫想一想……

设计师给的图标重命名
勤劳的设计师送来了香饽饽的小图片素材,可是,连接字符是下划线_,恰巧,此时,前端童鞋的处女病发错,其余自己处理的图形全体是短横线-两次三番的,那里图标全是下划线受不住,想要全体轮换为短横线,如何是好?

亚洲必赢官网 10

即使就一八个图标还好,大不断手动修改,不过,若是如上截图,设计师一口气给了57个图标,我去,要改到头皮发麻了啊~倒不是岁月难题,而是重复劳动带来的那种枯燥和不快活会潜移默化工作的心绪,而且那种劳动用完就没了,不可能复用,且不可能同日而语业绩(我可以5分钟成功100个文本的重命名,有个卵用~)。

此刻,Node.js就可以闪亮登场了,有了Node.js环境,大家只要寥寥几行JS代码,就可以完全秒杀了,很简单,读取文件夹里面的保有图片,然后把称呼里面装有的下划线_替换成短横线-,
假诺我们的.js文件和内需处理的小图标文件夹结构如下:
亚洲必赢官网 11

underscore2dash.js情节如下:

// 引入fs文件处理模块 var fs = require(“fs”); //
现在大家要保护的是’icons’文件夹 //
我们不妨用变量表示那个文件夹名称,方便日后体贴和保管 var src = ‘icons’;
// API文档中中找到遍历文件夹的API // 找到了,是fs.readdir(path,
callback) // 文档中有描述: // 读取 path 路径所在目录的情节。 回调函数
(callback) 接受七个参数 (err, files) 其中 files
是一个仓储目录中所包罗的文件名称的数组 // 因而: fs.readdir(src,
function(err, files) { // files是称呼数组,由此 //
可以行使forEach遍历哈, 此处为ES5 JS一点知识 //
如若不明白,也得以动用for循环哈 files.forEach(function(filename) { //
上边就是文件名称重命名 // API文档中找到重命名的API,如下 //
fs.rename(oldPath, newPath, callback) //
下边,我们就足以依葫芦画瓢,确定新旧文件名称: var oldPath = src + ‘/’ +
filename, newPath = src + ‘/’ + filename.replace(/_/g, ‘-‘); //
重命名走起 fs.rename(oldPath, newPath, function(err) { if (!err) {
console.log(filename + ‘下划线替换成功!’); } }) }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 引入fs文件处理模块
var fs = require("fs");
// 现在我们要关心的是’icons’文件夹
// 我们不妨用变量表示这个文件夹名称,方便日后维护和管理
var src = ‘icons’;
 
// API文档中中找到遍历文件夹的API
// 找到了,是fs.readdir(path, callback)
// 文档中有叙述:
// 读取 path 路径所在目录的内容。 回调函数 (callback) 接受两个参数 (err, files) 其中 files 是一个存储目录中所包含的文件名称的数组
// 因此:
fs.readdir(src, function(err, files) {
    // files是名称数组,因此
    // 可以使用forEach遍历哈, 此处为ES5 JS一点知识
    // 如果不清楚,也可以使用for循环哈
    files.forEach(function(filename) {
        // 下面就是文件名称重命名
        // API文档中找到重命名的API,如下
        // fs.rename(oldPath, newPath, callback)      
        // 下面,我们就可以依葫芦画瓢,确定新旧文件名称:
        var oldPath = src + ‘/’ + filename, newPath = src + ‘/’ + filename.replace(/_/g, ‘-‘);
        // 重命名走起
        fs.rename(oldPath, newPath, function(err) {
            if (!err) {
                console.log(filename + ‘下划线替换成功!’);
            }      
        })
    });
});

window系统举例,大家接纳cmd或者PowerShell,在对应文件夹目录下执行下该JS文件:

node underscore2dash

1
node underscore2dash

结果:
亚洲必赢官网 12

那时的公文夹的图纸们:
亚洲必赢官网 13

那里的文本名批量替换不仅适用于图片,实际上适用于任意格式的公文。

眼前,对命名的批量处理不仅仅如此,还包罗联合前缀(例如icon_*),此时只要把newPath =后满的代码改成src + '/icon_' + filename。或者非开发需求,比方说批量下载的小视频名称从1依次以后排,则……照旧自己处理下啊,forEach主意第一个参数是数组序号值,可以一向拿来用,就当课后学业了,看好你哟!

本文件夹批量处理例子,抛开详尽的诠释,差不离10行出头JS代码,用到的JS方法也都是至极充裕基本的,对啊,数组遍历forEach和字符替换replace格局,其余就是套API走套路,固然自己爱妻(非IT领域)亲自上阵,也都得以弄出来。不难,而且有意思。

自我强烈提议大学的次序支付入门课程就学JavaScript,跑web网页,跑Node.js,
简单且所见即所得,简单刺激学习的童趣,要比枯燥不知干嘛用的C语言更切合广大和入门。

2:js文件:update-name.js

语法:

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

三、蹩脚JS下的Node.js初体验二周目

大家写页面实际的开销须求必然不知文件批量重命名这么简单,我了解有一个须要点,越发平日写静态原型页面的同伙一定感兴趣的。

即便HTML页面也能够如动态语言,如php一样,各类模块可以直接include进去。现在普遍存在那样一个难点,某项目,重构人士哗啦啦编写了20多少个静态页面,可是,由于HTML无法直接include公用的头顶底部和侧边栏,导致,那20个页面的头尾都是单身的,一般尾部内容暴发了转移,呵呵,臆度就须要助编辑器来个批量替换什么的了。

那是否痛点?明显是!凡事痛点都是可以做出进献突显温馨价值的地方。

没错,大家办事就是纯属页面,大家的JS勉强可以扶上墙,但,就是那般的我们,只要你有那个心,意识到难点所在,同时领会Node.js可以帮您完了那或多或少,一个实用的工具其实早已做到了大体上。参照API文档,东拼拼,西凑凑,肯定可以弄出一个至少自己用得很high的东西,剩下的一半就好像此简简单单续上了。

实例示例示意
有一个原来的HTML页面,头尾都利用了接近下边代码的规范HTML5 import导入:

<link rel=”import” href=”header.html”/>

1
<link rel="import" href="header.html"/>

但是,实际上,rel="import"include是一点一滴不均等的概念,import进去实际上是个单身的document!但是那是后话了,反正大家又不是间接浏览这几个页面,因而,我们无需在意那么些细节。

亚洲必赢官网 14

HTML多少个文本结构关系如下示意:
亚洲必赢官网 15

那时候,我们就足以借助Node.js以及我们那点点JS知识,把rel="import"那行HTML替换成对应的导入的HTML页面内容。

规律其实很简短:

  1. 读import-example.html页面;
  2. href="header.html"这行HTML替换成header.html的内容;
  3. 监控import-example.html页面,一有浮动,即时生成;
  4. done!

下边为本例子的JS代码import.js:

// 引入fs文件处理模块 var fs = require(“fs”); //
测试用的HTML页文件夹地址和文件名称 var src = ‘import’, filename =
‘import-example.html’; var fnImportExample = function(src, filename) {
// 读取HTML页面数据 // 使用API文档中的fs.readFile(filename, [options],
callback) fs.readFile(src + ‘/’ + filename, { //
要求指定编码格局,否则重返原生buffer encoding: ‘utf8’ }, function(err,
data) { // 上边要做的作业就是把 // // 那段HTML替换成href文件中的内容 //
可以求助万能的正则 var dataReplace = data.replace(//gi, function(matchs,
m1) { // m1就是十分的门道地址了 // 然后就足以读文件了 return
fs.readFileSync(src + ‘/’ + m1, { encoding: ‘utf8’ }); }); //
由于大家要把公文放在更上一流目录,因而,一些相对地址要处理下 //
在本例子中,就比较不难,对../举办交流 dataReplace =
dataReplace.replace(/”..//g, ‘”‘); // 于是生成新的HTML文件 //
文档找一找,发现了fs.writeFile(filename, data, [options], callback)
fs.writeFile(filename, dataReplace, { encoding: ‘utf8’ }, function(err)
{ if (err) throw err; console.log(filename + ‘生成成功!’); }); }); };
// 默认先执行一次 fnImportExample(src, filename); //
监控文件,变更后再度生成 fs.watch(src + ‘/’ + filename, function(event,
filename) { if (event == ‘change’) { console.log(src + ‘/’ + filename +
‘暴发了改动,重新生成…’); fnImportExample(src, filename); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 引入fs文件处理模块
var fs = require("fs");
 
// 测试用的HTML页文件夹地址和文件名称
var src = ‘import’, filename = ‘import-example.html’;
 
var fnImportExample = function(src, filename) {
    // 读取HTML页面数据
    // 使用API文档中的fs.readFile(filename, [options], callback)
    fs.readFile(src + ‘/’ + filename, {
        // 需要指定编码方式,否则返回原生buffer
        encoding: ‘utf8’
    }, function(err, data) {
        // 下面要做的事情就是把
        //
        // 这段HTML替换成href文件中的内容
        // 可以求助万能的正则
        var dataReplace = data.replace(//gi, function(matchs, m1) {
            // m1就是匹配的路径地址了
            // 然后就可以读文件了
            return fs.readFileSync(src + ‘/’ + m1, {
                encoding: ‘utf8’
            });
        });
 
        // 由于我们要把文件放在更上一级目录,因此,一些相对地址要处理下
        // 在本例子中,就比较简单,对../进行替换
        dataReplace = dataReplace.replace(/"..//g, ‘"’);
 
        // 于是生成新的HTML文件
        // 文档找一找,发现了fs.writeFile(filename, data, [options], callback)
        fs.writeFile(filename, dataReplace, {
            encoding: ‘utf8’
        }, function(err) {
            if (err) throw err;
            console.log(filename + ‘生成成功!’);
        });
    });
};
 
// 默认先执行一次
fnImportExample(src, filename);
 
// 监控文件,变更后重新生成
fs.watch(src + ‘/’ + filename, function(event, filename) {
    if (event == ‘change’) {
        console.log(src + ‘/’ + filename + ‘发生了改变,重新生成…’);
        fnImportExample(src, filename);
    }
});

大家那儿node run一下:

node import

1
node import

结果:
亚洲必赢官网 16

此刻的公文夹:
亚洲必赢官网 17

箭头所指就是新生成的HTML页面,此时的内容是:
亚洲必赢官网 18

我们走访此页面:
亚洲必赢官网 19

连广告都显得可以!

那儿,node实际上是实时督查原始HTML是或不是暴发变化的,文档中的fs.watch()办法,例如,大家把图片地址的mm1换成mm2,则:
亚洲必赢官网 20

那儿页面变成了:
亚洲必赢官网 21

于是,一个整日自动编译import导入HTML页面的小工具的雏形就好了。

页面重构的伴儿,就不要顾虑20五个原型页面公用部分修改一遍要改20多处的题材了,直接将公用的模块import进来,20多少个页面分分钟编译为HTML页面完整体。

JS一般般的网页重构能够运用Node,rename方法应用表明。现在,大家再向后看上边的HTML支持模块引入的小工具,就是多少个差不离的Node.js
API和几行不难的JS.
大家又不是开源就融洽用用,很多扑朔迷离气象根本就不用去考虑,所以,这么不难就足足了!

 

复制代码 代码如下:

您相对不要在node.js使用alert举行调节,那是浏览器带的全局方法,不报错才怪。
输出结果如下:

四、结束语

当项目比较小的时候,当协会成员比较少的时候,当开发同学不鸟你的时候,此时,要弘扬团结入手,丰衣足食的振奋。

开发时候蒙受痛点,或者感觉自己在做重复劳动的时候,想想看,是或不是足以花点时间捣腾出一个Node.js的小本子。

无须以为npm仓库里面的这些工具好像很Diao很难搞,其实呢,也就是一点点为主加上应付各样现象弄出来的。由于我们是自娱自乐,追求的是连忙高效,专注于前方职分功效,所以,大家只要把中央弄出来就好,而这么些主旨往往就几行JS代码+几个fs
API就足以了。

蚂蚁虽小,咬人也疼。所以,不要认为自己JS比较菜,搞不来,就几行JS代码,你不出手搞一搞你怎么就规定呢?

写CSS为主的前端想要将来进步,没有比本文介绍内容更适合学习和入门的了。

Try it!

2 赞 7 收藏 3
评论

亚洲必赢官网 22

js文件代码:

fs.rename(oldPath, newPath, [callback(err)])

复制代码 代码如下:

// 引入fs文件处理模块
var fs = require(“fs”);
// 现在咱们要关注的是’icons’文件夹
// 我们不妨用变量表示那一个文件夹名称,方便日后爱戴和保管
var src = ‘icons’;

是因为该格局属于fs模块,使用前需要引入fs模块(var fs= require(“fs”) )

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));
}
}

// API文档中中找到遍历文件夹的API
// 找到了,是fs.readdir(path, callback)
// 文档中有描述:
// 读取 path 路径所在目录的内容。 回调函数 (callback) 接受三个参数 (err,
files) 其中 files 是一个囤积目录中所包罗的文件名称的数组
// 因此:
fs.readdir(src, function(err, files) {
// files是称呼数组,由此
// 能够动用forEach遍历哈, 此处为ES5 JS一点知识
// 即使不了然,也可以应用for循环哈
files.forEach(function(filename) {
// 下边就是文件名称重命名
// API文档中找到重命名的API,如下
// fs.rename(oldPath, newPath, callback)
// 下边,大家就足以依葫芦画瓢,确定新旧文件名称:
var oldPath = src + ‘/’ + filename,
// newPath = src + ‘/’ + filename.replace(/_/g, ‘-‘);
newPath = src + ‘/’ + filename + “-20”;

收起参数:

由此这一个函数,我们大体驾驭到node.js在全局成效域添加了些什么,如require,
process。但也不可能武断说是,因为它们或者是某个成效域的个体对象。不过,通晓那一个全局对象,并从那么些目的上起身去打听其余对象,分外有助于大家领悟node.js的生态结构。在前者,每当浏览器升级,我就遍历一下window对象以及其个要素节点就意识到它又追加了何等点子与特性,然后再查文档。那多少个更新日志无法把全体细节都告知你的,必须团结出手遍历一下,那样您就比人家知道得越来越多。好了,我们去找node.js的全局对象。
node.js的文档告诉我们,有如下多少个全局对象:
global, process, require,__filename,__dirname, module
但大家为何能一贯运用console.log呢?经验告诉大家,console肯定是某全局对象的积极分子,正如大家得以alert,
也可以window.alert。好了,我们选遍历一下global这么些名字取得相当霸气的目标

// 重命名走起
fs.rename(oldPath, newPath, function(err) {
if (!err) {
console.log(filename + ‘下划线替换成功!’);
}
})
});
});

oldPath                原路径

复制代码 代码如下:

cd到文件路径,在顶峰执行命令: node update-name.js

newPath              新路径

for(var i in global){
console.log(“var ” + i+” = “+global[i])
}

callback               回调,传递一个err非凡参数

结果如下:

例子:

复制代码 代码如下:

复制代码 代码如下:

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]

//同以目录下的公文更名:
var fs = require(‘fs’);
fs.rename(‘125.txt’,’126.txt’, function(err){
 if(err){
  throw err;
 }
 console.log(‘done!’);
})
 
//差距途径下的文本更名 +
移动:(新的路子必须已存在,路径不设有会回到很是)
var fs = require(‘fs’);
fs.rename(‘125.txt’,’new/126.txt’, function(err){
 if(err){
  throw err;
 }
 console.log(‘done!’);
})

发现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])
}

fs.rename = function(oldPath, newPath, callback) {
  callback = makeCallback(callback);
  if (!nullCheck(oldPath, callback)) return;
  if (!nullCheck(newPath, callback)) return;
  binding.rename(pathModule._makeLong(oldPath),
                 pathModule._makeLong(newPath),
                 callback);
};

结果如下:

你或许感兴趣的文章:

  • Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not
    permitted)
  • node.js中的fs.renameSync方法应用表达
  • node.js用fs.rename强制重命名或运动文件夹的法子

复制代码 代码如下:

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对象,唯有尞尞可数多少个分子,我们可以使用ecma262v5新增的点子去考察一下:
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…”);
}

亚洲必赢官网 23 
从那之后,本文的目标达到了。多少个node.js文件,一个一般的js文件,一个css文件,一个html文件。下一个目标就是多页了,一个网站是由多个目标构成的。它富含如下内容,能处理ajax请求,上传文件,Session与Cookie扶助,日志,MIME识别,路由派发,缓存系统……要做的事多得可怕,因而有人一上来就框架,与学JS那样,连API还从未摸熟就用jQuery了,那学个毛!回看一下大家地点的server.js中间的一部分,其实就要把MIME与路由拆分出来的。但最关键的事还有一样,如何处理那不断函数嵌套?本人认为这与自身的模块加载系统还未曾怎么两样,下次就从那边下手吧。

你或许感兴趣的稿子:

  • 一行命令搞定node.js
    版本升级
  • 跟我学Nodejs(一)—
    Node.js简介及安装开发条件
  • Node.js(安装,启动,测试)
  • Node.js实战
    建立不难的Web服务器
  • node.js+Ajax达成获取HTTP服务器再次来到数据
  • Node.js文件操作详解
  • node.js中的http.request方法运用验证
  • node.js 开发指南 – Node.js 连接 MySQL
    并实行数据库操作
  • NODE.JS加密模块CRYPTO常用艺术介绍
  • 小结几道关于Node.js的面试标题
网站地图xml地图