一个大概的页面输出已毕代码,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一个大概的页面输出已毕代码,rename方法应用验证。的内容;
  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页面完全部。

目前,大家再回眸上面的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地图