js做些什么,改善文件名字

JS平日般的网页重构能够运用Node.js做些什么

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

原来的小讲出处:
张鑫旭(@张鑫旭)   

D:nodeupdate_name目录犹如下文件:

风姿罗曼蒂克、非Computer背景前端怎么着高效精通Node.js?

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

对此有个别尚无Computer背景的,专门的学行业内部容以静态页面彰显为主的前端,恐怕未有把玩过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,大家就足以玩起来了。

玩什么吗?容笔者看集动画想大器晚成想……

设计员给的Logo重命名
亲自过问的设计员送来了香饽饽的小图片素材,但是,连接字符是下划线_,正巧,那时候,前端童鞋的处女病发错,其余本身管理的图片全部都以短横线-三番四回的,这里Logo全都以下划线受不住,想要全体交替为短横线,如何是好?

澳门新葡亰平台官网 10

设若就大器晚成八个Logo辛亏,大不断手动校订,可是,若是如上截图,设计员一口气给了伍十多个Logo,作者去,要改到头皮发麻了呢~倒不是光阴难题,而是重复劳动带给的这种枯燥和不乐意会耳濡目染专门的学问的激情,并且这种劳动用完就没了,无法复用,且不能够作为业绩(小编得以5分钟到位100个公文的重命名,有个卵用~)。

当时,Node.js就足以闪亮登台了,有了Node.js意况,大家假诺寥寥几行JS代码,就足以完全秒杀了,很简短,读取文件夹里面包车型大巴装有图片,然后把称呼里面装有的下划线_替换到短横线-,
要是我们的.js文本和内需处理的小Logo文件夹构造如下:
澳门新葡亰平台官网 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卡塔尔(英语:State of Qatar) { //
上边就是文件名称重命名 // API文书档案中找到重命名的API,如下 //
fs.rename(oldPath, newPath, callback卡塔尔国 //
上面,大家就能够依葫芦画瓢,分明新旧文件名称: var oldPath = src + ‘/’ +
filename, newPath = src + ‘/’ + filename.replace(/_/g, ‘-‘卡塔尔(英语:State of Qatar); //
重命名走起 fs.rename(old帕特h, newPath, function(err卡塔尔(英语:State of Qatar) { 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

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

大家写页面实际的支付供给必然不知文件批量重命名这么简单,笔者知道有贰个须要点,非常日常写静态原型页面包车型地铁小同伙一定感兴趣的。

即便HTML页面也能够如动态语言,如php同样,各种模块能够一直include步向。未来遍布存在此样一个标题,某项目,重构人士劈啪啪编写了20两个静态页面,不过,由于HTML无法直接include公用的底部底部和侧边栏,招致,这贰拾一个页面包车型客车头尾都以单身的,平时底部内容产生了改观,呵呵,臆想将必要助理编辑辑器来个批量轮番什么的了。

那是否痛点?鲜明是!所有事痛点都是能够做出进献显示自个儿价值之处。

准确,大家做事正是纯属页面,我们的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卡塔尔(英语:State of Qatar) { // 上边要做的事务正是把 // // 这段HTML替换来href文件中的内容 //
能够求助万能的正则 var dataReplace = data.replace(//gi, function(matchs,
m1卡塔尔(قطر‎ { // m1就是非常的路线地址了 // 然后就足以读文件了 return
fs.readFileSync(src + ‘/’ + m1, { encoding: ‘utf8’ }卡塔尔; }卡塔尔(英语:State of Qatar); //
由于大家要把文件放在更上超级目录,因而,一些针锋相投地址要管理下 //
在本例子中,就比较简单,对../实行替换 dataReplace =
dataReplace.replace(/”..//g, ‘”‘卡塔尔; // 于是生成新的HTML文件 //
文档找生机勃勃找,开采了fs.writeFile(filename, data, [options], callback卡塔尔(英语:State of Qatar)fs.writeFile(filename, dataReplace, { encoding: ‘utf8’ }, function(err){ if (err卡塔尔(英语:State of Qatar) throw err; console.log(filename + ‘生成成功!’卡塔尔国; }卡塔尔国; }卡塔尔(قطر‎; };
// 暗中认可先试行二次 fnImportExample(src, filename卡塔尔(英语:State of Qatar); //
监察和控制文件,改造后重新生成 fs.watch(src + ‘/’ + filename, function(event,
filename卡塔尔(英语:State of Qatar) { if (event == ‘change’卡塔尔(英语:State of Qatar) { console.log(src + ‘/’ + filename +
‘发生了修正,重新生成…’卡塔尔国; fnImportExample(src, filename卡塔尔(英语:State of Qatar); } }卡塔尔国;

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的小本子。

毫不认为npm货仓里面包车型客车那个工具好像很Diao很难搞,其实呢,也便是一小点骨干加上应付各类现象弄出来的。由于大家是自娱自乐,追求的是全速高效,专心于前方职务效率,所以,大家只要把基本弄出来就好,而那几个基本往往就几行JS代码+几个fs
API就能够了。

蚂蚁虽小,咬人也疼。所以,不要以为自个儿JS相比较菜,搞不来,就几行JS代码,你不入手搞生机勃勃搞你怎么就规定呢?

写CSS为主的前端想要以往升高,没有比本文介绍内容更切合学习和入门的了。

Try it!

2 赞 7 收藏 3
评论

澳门新葡亰平台官网 22

js文件代码:

发表评论

电子邮件地址不会被公开。 必填项已用*标注