菜单

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

2018年11月15日 - CSS/CSS3

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

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

初稿出处:
张鑫旭(@张鑫旭)   

作者:厂长

同样、非计算机背景前端如何高效了解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

链接:https://www.zhihu.com/question/33578075/answer/56951771

二、蹩脚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语言更称大面积和入门。

来源:知乎

老三、蹩脚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页面完全体。

而今,我们更拨过头看上面的HTML支持模块引入的略器,就是几乎独简单的Node.js
API和几行简单的JS.
我们而非是开源就和好之所以用,很多错综复杂现象根本就是毫无失去考虑,所以,这么简单即够用了!

国外来同一篇很好之Node.js
介绍文章,从规律入手教,在此间为大家翻译一下(本人不翻译出身,一些地方结合了接触个人理解,有错误欢迎指出)。

四、结束语

当型于粗的时光,当组织成员比少的时,当开发同学不鸟你的上,此时,要弘扬好动手,丰衣足食的振奋。

付出上遇到痛点,或者发好以做重复劳动的时节,想想看,是不是得花点时间捣腾出一个Node.js的有些本子。

绝不觉得npm仓库内的那些家伙类挺Diao很麻烦打,其实也,也就算是一点点中心加上应付各种现象为出来的。由于我们是自娱自乐,追求的凡快速高效,专注让前方任务功能,所以,我们而将核心来出来就是好,而这些基本往往就几乎履JS代码+几独fs
API就足以了。

蚂蚁虽有些,咬人也疼。所以,不要认为自己JS比较菜,搞不来,就几履行JS代码,你莫动手抓一整你怎么就确定为?

描绘CSS为主底前端想如果为后发展,没有于本文介绍内容还合乎学习和入门的了。

Try it!

2 赞 7 收藏 3
评论

图片 22

原稿地址Node.js is the New
Black

译文如下:

一旦你去年注意了技术上面的消息,我敢说您至少看node.js不下一两赖。那么问题来了“node.js是啊?”。有些人没准会告诉您“这是一模一样种植通过JavaScript语言开发web服务端的物”。如果这种晦涩解释还未曾拿你搞晕,你没准会接着问:“为什么咱们设为此node.js?”,别人一般会报告您:node.js有非阻塞,事件驱动I/O等特征,从而被高起(high
concurrency)在的轮询(Polling)和comet构建的采用中变为可能。

当你看了这些说道跟看天书一样的时刻,你估计为懒得继续问了。不过没事。我随即首文章就是是于回避高端术语的同时,帮助您若知node.js的。

浏览器被网站发请求的进程一直无怎么转移了。当浏览器被网站发了央。服务器收到了央,然后开始搜寻被呼吁的资源。如果起亟待,服务器还会见询问一下数据库,最后把响应结果传到浏览器。不过,在风的web服务器中(比如Apache),每一个请都见面受服务器创建一个新的过程来处理这请。

新生来矣Ajax。有矣Ajax,我们虽无须每次都要一个完全的初页面了,取而代之的凡,每次仅请需要的有些页面信息就足以了。这眼看是一个提高。但是论您而修一个FriendFeed这样的社交网站(类似人人网那样的刷朋友新鲜事的网站),你的好友会时刻的推送新的状态,然后您的新鲜事会实时自动刷新。要达到这需要,我们得给用户一直和服务器保持一个管用连接。目前最简便的兑现方式,就是叫用户与服务器之间保持增长轮询(long
polling)。

HTTP请求不是不断的接连,你请一次等,服务器响应一次等,然后就截止了。长轮训是一律栽使HTTP模拟持续连接的技能。具体来说,只要页面载入了,不管您需不需要服务器被你响应信息,你都见面受劳务器发一个Ajax请求。这个要例外为一般的Ajax请求,服务器无会见一直被你归信息,而是她若当着,直到服务器觉得该吃你发消息了,它才会应。比如,你的至交发了千篇一律长条新鲜事,服务器就会拿这个新鲜事当做响应发给你的浏览器,然后您的浏览器就是刷新页面了。浏览器收到响应刷新了事后,再发送一条新的伸手于服务器,这个请依然未会见立即被响应。于是就开始更以上步骤。利用这方式,可以于浏览器始终维持等响应的状态。虽然以上过程还只有不不停的Http参与,但是咱学出了一个类持续的连天状态

咱重拘留风的服务器(比如Apache)。每次一个初用户连到公的网站及,你的服务器就得开始一个总是。每个连都待占用一个过程,这些过程大部分时间还是闲在的(比如当在若好友发新鲜事,等好友发完才于用户应信息。或者当在数据库返回查询结果什么的)。虽然这些过程闲在,但是依旧占用内存。这表示,如果用户连接数的增高至早晚规模,你服务器没准就要耗光内存直接瘫痪了。

这种气象怎么解决?解决办法就是方头说之:非阻塞事件驱动。这些概念在咱们说话的斯场面中其实并未那么难以掌握。你拿非阻塞的服务器想象变为一个loop循环,这个loop会一直跑下去。一个初请求来了,这个loop就接通了是要,把此请传给任何的长河(比如传被一个做数据库查询的进程),然后响应一个回调(callback)。完事了马上loop就跟着走,接其他的请。这样下去。服务器即不见面如前那么笨等正数据库返回结果了。

倘数据库把结果返回回来了,loop就管结果传到用户之浏览器,接着继续跑。在这种措施下,你的服务器的历程就无见面没事在等在。从而以理论及说,同一时刻的数据库查询数量,以及用户之求数量就从未限定了。服务器就当用户那边有事件时有发生的时段才应,这就算是事件驱动。

FriendFeed是故基于Python的非阻塞框架Tornado (知乎也用了此框架)
来落实地方说的新鲜事功能的。不过,Node.js就比较前者更优良了。Node.js的利用是经过javascript开发之,然后径直以Google的变态V8引擎上跑。用了Node.js,你便甭操心用户端的要会当服务器里走了同一段子会造成堵塞的代码了。因为javascript本身就是是事件驱动的脚本语言。你想起一下,在为前端写javascript的下,更多下你都是以打事件处理和回调函数。javascript本身就是于事件处理量身定制的言语。

Node.js还是处于前期阶段。如果您想付出一个因Node.js的施用,你应当会用写一些那个底层代码。但是下一样代表浏览器很快将采取WebSocket技术了,从而助长轮询也会见消失。在Web开发里,Node.js这种类型的技能仅见面转换得越来越重要。

相关文章

发表评论

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

网站地图xml地图