在线调试方案的构思与执行,工作中用到的有些node模块的简短memo

在线调试方案的思辨与执行

2015/08/28 · HTML5 ·
调试

原文出处:
李靖(@Barret李靖)   

正文的大旨理想不在移动端调试上,移动端调试无非就是调剂页面和调节工具之间存在分离,消除那种分离并创设连结就能解决移动端的调试问题。重点阐释的是所见即所得的调试形式下会蒙受的阻碍。

当大家开辟网页,发现一个模块没有正确地渲染或者空白时,如果控制台有报错,会一向按照报错定位到源码地点上马
debug;假使控制台没有报错,则会按照模块名或者模块特征的一个值,通过全局搜索找到那个模块的地点,然后在调试工具中断点,单步调试,找到问题所在,此时大家或许会这么做:

情形一:

小A同学打开控制台,发现断点调试不佳写代码,于是将核减的源码复制一份保存到地面,格式化,然后将线上资源通过代办工具代理到地头文件。

情形二:

小B同学早早的为温馨配了一份本地开发条件,于是他撞见题目未来,直接去源码中固定错误地方,由于应用的是预处理语言,所以须求先打包编译之后再在地面预览效果。

情形三:

小C同学的调剂情势是小A和小B的汇总版本,将线上的资源代理到地面 build
目录文件,在 src 目录下修改之后编译打包到 build,然后预览。

cmd命令:

   ./  当前目录

   ../ 上一级

   dir  查看当前目录

   ls  查看当前目录下文件

   windows 切换盘符 d:

   cls清屏

   cd +文件加名

办事中用到的局地插件,简单做个memo
body-parser
express的中间件
bodyParser用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文本的上传处理.

尝试简介

http模块重要用以创立http
server服务,此次试验还会讲到url模块和path模块,同时也会用到前面讲过的fs模块。url模块用于解析url,path模块用于拍卖和更换文件路径。

 通过前面的实验,相信大家对Node.js模块的使用已经比较熟悉。在这个实验中,我们就通过编写一个简单的http server来学习http模块。

一、创建http server

由此Node.js创制http server万分简单,示例代码如下:
<pre>
/ 引入http模块
var http = require(‘http’);
// 创建http server
http.createServer(function (req, res) {
res.writeHead(200, {‘Content-Type’: ‘text/plain’});
res.end(‘Hello World\n’);
}).listen(1337, ‘127.0.0.1’);
console.log(‘Server running at ‘);
</pre>
运作此文件:<pre>$ node demo.js</pre>
接下来打开虚拟机浏览器,访问
就会看出页面上出示了Hello World,说明我们的http server创立成功了。

本来,大家在那么些实验要做的比这一个略带复杂一点。
在这么些实验中,大家会成立一个简短的http
server,所有的代码都置身app那几个文件夹中。首先,新建一个文app件夹,在文件夹中新建server.js
文件,输入如下代码(其中的诠释为代码解释):

<pre>
// 创建http server
//
// 加载所需模块
var http = require(‘http’);
var url = require(‘url’);
var fs = require(‘fs’);
// 设置ip和端口
// 实际使用中,可以把这个写到配置文件中
var host = ‘127.0.0.1’,
port = 8080;
// 创建http server
function start(route, handle) {
// 参数
// route 判断url是还是不是存在,存在则调用handle处理,不设有则赶回404
// handle 处理不相同的url请求
// 处理request请求
function onRequest(req, res) {
// 使用url.parse()方法解析url
// 它会把url string转化为一个object
// 那样大家就可以很有益的获得url中的host、port、pathname等值了
var pathname = url.parse(req.url).pathname;
console.log(‘Request for ‘ + pathname + ‘ received.’);
// 判断并处理分歧url请求
// 前边介绍此办法
route(handle, pathname, res, req);
}
// 使用http.createSserver()方法创设http server
// 并传入onRequest()方法
// 然后采用listen()方法监听指定地方
http.createServer(onRequest).listen(port, host);
console.log(‘Server has started and listening on ‘ + host + ‘:’ +
port);
}
// 导出 start 方法
exports.start = start;
</pre>
在文书的最后,我们导出了start方法,以便在主程序中动用。你早晚注意到了,在代码中选取了route()方法,它用于拍卖判断请求的url是还是不是留存,现在我们就来编排那么些法子。

☞ 代理调试的抑郁

而对于比较复杂的线上环境,代理也会遇到不少绊脚石,比如:

线上资源 combo

并发谬误的本子地址为  ,它对应着
a.js,b.js,c.js 八个剧本文件,如果大家采取 Fiddler/Charles那样的经典代理工具调试代码,就务须给那几个工具编写插件,或者在轮换配置内部加一堆判断或者正则,成本高,门槛高。

线上代码压缩

卷入压缩,那是上线此前的必经流程。由于大家在包装的环节中并不曾考虑为代码添加
sourceMap,而线上事先对应 index-min.jsindex.js
也因为安全地点的原故给干掉了,那给我们调试代码造成了大幅度的不便宜。

代码爱慕较多,拉取代码问题

成百上千时候,我们的页面重视了多少个 asserts
资源,而这几个资源各自分布在多少个仓库里面,甚至散布在不一样的公布平台上,为了可以在源码上清晰的调试代码,我们不得不将持有的资源下载到本地,时期如若存在下载代码的权位问题,整个调试进程就慢下来,那是老大不可能经得住的工作。比如某系统构建的页面,页面上的模块都是以仓库为维度区分的,一个页面可能对应了5-50个仓库,下载代码实为劳动。

最可怕的调剂是,本地没有相应的测试环境、代理工具又不满意大家的须要,然后就不得不,
编辑代码->打包压缩->提交代码->查看效果->编辑代码->… ,如若你的品类支付是那种形式,请停下来,思考调试优化方案,正所谓磨刀不误砍柴工。

es6:

1.let/const

2.目标里的方法function可以概括

3.函数中的默许参数

4.template

5.箭头函数

6.进展操作符

7.解构赋值

8.Symbol

9.class 模拟类,但实质是基于原型的

10.for …of

11.promise 解决回调金字塔.回调鬼世界

12.生成器函数,可以脱离函数

13.JS模块化

gulp
gulp是前端开发进度中对代码举办构建的工具,是自动化项目标构建利器;她不但能对网站资源举行优化,而且在付出进度中有的是再次的天职能够使用正确的工具自动已毕;使用他,大家不但可以很喜悦的编制代码,而且大大提升我们的工作功能。
gulp是根据Nodejs的电动义务运行器, 她能自动化地做到
javascript/coffee/sass/less/html/image/css
等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、计划文件生成,并监听文件在改动后再次指定的这个手续。在促成上,她借鉴了Unix操作系统的管道(pipe)思想,前顶级的输出,直接变成后一级的输入,使得在操作上分外简单。通过本文,大家将学习如何使用Gulp来改变开发流程,从而使支付尤其便捷高效。
gulp 和 grunt 格外接近,但对待于 grunt 的往往 IO 操作,gulp
的流操作,能更快地更便利地达成构建工作。
gulp.task(name, fn)那一个您应经见过了
gulp.run(tasks…)尽可能多的交互运行多少个task
gulp.watch(glob, fn)当glob内容发生变更时,执行fn
gulp.src(glob)再次来到一个可读的stream
gulp.dest(glob)再次来到一个可写的stream

二、创造路由

在app文件夹中新建router.js,输入如下代码:
<pre>
var fs = require(‘fs’);
// 路由函数
// 处理分歧url的伸手
// 并重回相应内容
function route(handle, pathname, res, req) {
console.log(‘About to route a request for ‘ + pathname);
// 判断此url是或不是留存一定处理函数
// 存在则调用handle处理
// 不设有则赶回404页面
if (typeof handle[pathname] === ‘function’) {
// 前边介绍handle函数
handle[pathname](res, req);
} else {
console.log(‘No request handler found for ‘ + pathname);
// 读取404页面
// 所有页面都存放在view文件夹下
var content = fs.readFileSync(‘./views/404.html’);
res.writeHead(404, { ‘Content-Type’: ‘text/html’ });
res.write(content);
res.end();
在线调试方案的构思与执行,工作中用到的有些node模块的简短memo。}
}
// 导出 route 方法
exports.route = route;
</pre>
在此办法中,调用了handle()方法,这么些艺术用于拍卖分化的url请求。
在app文件夹中新建requestHandlers.js文件,输入如下代码:
<pre>
// 处理url请求
var fs = require(‘fs’);
// home.html 主页
function home(res) {
console.log(‘Request handler “home” was called.’);
// 读取home.html文件
var content = fs.readFileSync(‘./views/home.html’);
res.writeHead(200, { ‘Content-Type’: ‘text/html’ });
res.write(content);
res.end();
}
// about.html 关于页面
function about(res) {
console.log(‘Request handler “about” was called.’);
// 读取about.html文件
var content = fs.readFileSync(‘./views/about.html’);
res.write(200, { ‘Content-Type’: ‘text/html’ });
res.write(content);
res.end();
}
// 导出页面处理函数
exports.home = home;
exports.about = about;
</pre>
以此艺术比较简单,就是读取文件,然后输出到response。

☞ 开启懒人调试格局

当看到线上边世问题(可能是其余同学负责页面的题材),脑中浮出这么的情景:

复制代码 我:”嘿,线上有问题呀!我要调节代码!”
电脑:”好的,主人。请问是哪个页面?”(弹出浮层) 我:浮层中输入URL。
电脑:”请问是哪位地点出问题了?” 我:(指着电脑)”模块A和模块B。”
电脑:正在下载A、B资源…正在将上线A、B映射到本地…自动打开A、B对应文件夹
我:编辑代码,然后实时预览效果。

1
2
3
4
5
6
7
8
复制代码
  我:"嘿,线上有问题啦!我要调试代码!"
电脑:"好的,主人。请问是哪个页面?"(弹出浮层)
  我:浮层中输入URL。
电脑:"请问是哪个地方出问题了?"
  我:(指着电脑)"模块A和模块B。"
电脑:正在下载A、B资源…正在将上线A、B映射到本地…自动打开A、B对应文件夹
  我:编辑代码,然后实时预览效果。

在此处大家须求解决那样多少个问题

  • 将页面对应的有所仓库/资源罗列在用户面前
  • 下载资源的权杖提示和权杖处理
  • 线上资源解 combo,然后映射到地点

理所当然调试之后,可以还有一个操作:

自我:”哈,已经修复了,帮自己付诸代码~”
电脑:正在diff代码…收到确认提交信号,提交到预发环境…收到已经预览信号…正在发表代码…收到线上回归信号…流程停止

1
2
我:"哈,已经修复了,帮我提交代码~"
电脑:正在diff代码…收到确认提交信号,提交到预发环境…收到已经预览信号…正在发布代码…收到线上回归信号…流程结束

而外 debug 代码,大家需求做的就只是用眼睛看功效是不是ok,整个工艺流程优化下来,体验是很赞的!

NodeJS:

1.node.js支付环境搭建

2.npm nodejs包管理器

3.CommonJS模块化标准化,英特尔(require)

4.导出模块/加载模块

// 载入外挂
var gulp = require(‘gulp’),
browserify = require(‘browserify’),//那里用不上,管理js信赖的
source =
require(‘vinyl-source-stream’),//同样那里用不上,和地方至极一起的
uglify =
require(‘gulp-uglify’),//使用gulp-uglify压缩javascript文件,减小文件大小。
clean = require(‘gulp-clean’),//清理文件
notify = require(‘gulp-notify’),//加控制台文字描述用的
buffer = require(‘vinyl-buffer’),
less = require(‘gulp-less’),//转换less用的
autoprefixer = require(‘gulp-autoprefixer’),//扩展个人变量前缀
minifycss = require(‘gulp-minify-css’),//压缩
concat = require(‘gulp-concat’),//合并
fileinclude = require(‘gulp-file-include’),// include 文件用
template = require(‘gulp-template’),//替换变量以及动态html用
rename = require(‘gulp-rename’),//重命名
webserver =
require(‘gulp-webserver’),//一个简约的server,用python的SimpleHttpServer会锁文件夹
imagemin = require(‘gulp-imagemin’),//图片压缩
gulpif = require(‘gulp-if’),//if判断,用来区分生产条件仍然支付环境的
rev = require(‘gulp-rev’),//加MD5后缀
revReplace =
require(‘gulp-rev-replace’),//替换引用的加了md5后缀的公文名,修改过,用来加cdn前缀
addsrc =
require(‘gulp-add-src’),//pipeline中途添加文件夹,那里没有拔取
del = require(‘del’),//也是个删除···
vinylPaths =
require(‘vinyl-paths’),//操作pipe中文件路径的,加md5的时候利用了
runSequence = require(‘run-sequence’);//控制task顺序 Runs a sequence of
gulp tasks in the specified order

三、创立主程序

创建http
server,判断url,处理url都写完了,那么我们得以写主程序来运作http
server了,在app文件夹新建main.js文件,输入如下代码:
<pre>
// 主程序
// 引入server,router及requestHandler
var server = require(‘./server’);
var router = require(‘./router’);
var requestHandlers = require(‘./requestHandlers’);
// 保存url处理措施
var handle = {};
handle[‘/’] = requestHandlers.home;
handle[‘/about’] = requestHandlers.about;
// 启动http server
server.start(router.route, handle);
</pre>
到此,所有的服务器代码都写完了,那么大家来添加代码中用到的五个html文件呢。

☞ 解决代理碰到的题材

地点大家提到了几个问题,日常支付遇到最发烧的一个是 combo ,曾经大家页面上的代码加一个
?_xxx  参数就可见平素起初调试格局,那是因为程序的输入唯有一个,而且所有脚本的信赖也卷入到一个称为
deps.js  文件中,加上调试参数之后,可以将原来
combo 加载的文书:  ,按照非
combo 的办法加载:

1
2
3
http://example.com/path/a.js
http://example.com/path/b.js
http://example.com/path/c.js

上面的代码可以轻松地代理到本地,不过部分系统生成的代码并不曾 deps.js  文件,它是将脚本直接出口到页面上:

<script
src=”;

1
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>

☞ 解决 combo 问题

此时通过 Fiddler/查理(Charles)(Charles)工具相比较难满意需要,对于那些题目有三个处理方案:

1). 浏览器请求全部代理到本地的一个劳务

先是写一个当地服务:

JavaScript

var http = require(‘http’); // npm i http-proxy –save var httpProxy =
require(‘http-proxy’); var proxy = httpProxy.createProxyServer({}); var
server = http.createServer(function(req, res) { console.log(req.url);
if(req.url.indexOf(“??”) > -1){ // combo资源让 3400 端口的劳务处理
proxy.web(req, res, { target: ” }); } else { //
直接回到 proxy.web(req, res, { target: req.url }); } }).listen(3399,
function(){ console.log(“在端口 3399 监听浏览器请求”); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var http = require(‘http’);
// npm i http-proxy –save
var httpProxy = require(‘http-proxy’);
var proxy = httpProxy.createProxyServer({});
 
var server = http.createServer(function(req, res) {
  console.log(req.url);
  if(req.url.indexOf("??") > -1){
    // combo资源让 3400 端口的服务处理
    proxy.web(req, res, { target: ‘http://127.0.0.1:3400’ });
  } else {
    // 直接返回
    proxy.web(req, res, { target: req.url });
  }
}).listen(3399, function(){
    console.log("在端口 3399 监听浏览器请求");
});

代码的意思是,利用 http-proxy 那几个 npm
包,代理浏览器的呼吁,浏览器上采纳 switch夏普 设置本地代理为  ,当呼吁过来,先判断
url,若是 url 中隐含了 ?? 则将其当做 combo
资源处理,代理给本地的另一个服务  ,这几个服务收取请求后会将
combo 内容分解成多少个,整体呼吁完之后再吐出来。

2). 使用当地服务请求 html 代码,替换 html 代码内容

选取强制手段(源码替换)将代码解 combo,比如源码页面为:

<!– html code –> <script
src=”;
<!– html code –>

1
2
3
<!– html code –>
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>
<!– html code –>

动用当地服务请求那个url,然后转换成:

<!– html code –> <script
src=”; <script
src=”; <script
src=”; <!– html code
–>

1
2
3
4
5
<!– html code –>
<script src="http://example.com/path/a.js"></script>
<script src="http://example.com/path/b.js"></script>
<script src="http://example.com/path/c.js"></script>
<!– html code –>

心想事成这一个操作的代码:

JavaScript

var http = require(‘http’); // npm i request –save; var request =
require(‘request’); http.createServer(function(req, res){ var path =
req.url.slice(req.url.indexOf(“path=”) + 5); console.log(path);
if(!path) { res.write(“path is empty”); res.end(); return; }
request(path, function (error, response, body) { if (!error &&
response.statusCode == 200) { console.log(body); // 代码替换 body =
body.replace(‘<script
src=”;’,
‘<script src=”
<script src=”
<script src=”;’ );
res.write(body); res.end(); } }); }).listen(3399, function(){
console.log(“listening on port 3399”); });

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
var http = require(‘http’);
// npm i request –save;
var request = require(‘request’);
http.createServer(function(req, res){
    var path = req.url.slice(req.url.indexOf("path=") + 5);
    console.log(path);
    if(!path) {
        res.write("path is empty");
        res.end();
        return;
    }
    request(path, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body);
            // 代码替换
            body = body.replace(‘<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>’,
                ‘<script src="http://example.com/path/a.js"></script>\
                <script src="http://example.com/path/b.js"></script>\
                <script src="http://example.com/path/c.js"></script>’
            );
            res.write(body);
            res.end();
        }
    });
}).listen(3399, function(){
    console.log("listening on port 3399");
});

譬如说请求  ,即可得到Taobao首页的源码,然后对获得的代码做替换。

☞ 解决代码压缩问题

对于那个题材,指出在线上放两份源码,一份是压缩源码,一份是未压缩源码,当页面
url 存在 debug
参数的时候,重临未压缩版本,正常重临压缩版本。当然,也得以应用上述措施处理问题。

只是,更合理的点子应该是 sourceMap,前端没有地下,压缩代码只是增添了
hacker 的攻击开销,并不妨碍有能力的 hacker
借系统漏洞侵袭。所以能够为源码提供一份 sourceMap
文件。

JavaScript

var gulp = require(‘gulp’); var sourcemaps = require(‘gulp-sourcemaps’);
gulp.task(‘javascript’, function() { gulp.src(‘src/**/*.js’)
.pipe(sourcemaps.init()) //.pipe(xx()) .pipe(sourcemaps.write())
.pipe(gulp.dest(‘dist’)); });

1
2
3
4
5
6
7
8
9
10
var gulp = require(‘gulp’);
var sourcemaps = require(‘gulp-sourcemaps’);
 
gulp.task(‘javascript’, function() {
  gulp.src(‘src/**/*.js’)
    .pipe(sourcemaps.init())
      //.pipe(xx())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(‘dist’));
});

有关 sourceMap 的 gulp
插件配置,详情可以戳这里。不仅仅是
JavaScript,CSS 也有 source maps,那一个音信可以在 Chrome
控制台的安装选项中寓目:

美高梅开户网址 1

☞ 代码的拉取

倘若一个连串唯有你领悟怎么修改,那这几个项目标技巧布署就有点糟糕了,为了让人们都能处理你项目中的问题,一定要索要一个精简的格局为开发者快速搭建测试环境,文档是一派,若是有个一键操作的一声令下,那就更棒了!

# 启动脚本 start: createFile getMod getPage # 创制目录 createFile: @[
-d module ] || mkdir module @[ -d page ] || mkdir page #
拉取模块仓库,那里有几十个,相比费时,请耐心等待… getMod: cd module;
\ for i in $(MODS); do \ [ -d $(MODPATH)$$i ] || git clone
$(MODPATH)$$i; \ git co -b master;\ git co -b $(MODSV); done #
拉取页面仓库,tbindex getPage: cd page; \ @[ -d tbindex ] || git
clone $(PAGEPATH)$PAGE;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 启动脚本
start: createFile getMod getPage
 
# 创建目录
createFile:
  @[ -d module ] || mkdir module
  @[ -d page ] || mkdir page
 
# 拉取模块仓库,这里有几十个,比较费时,请耐心等待…
getMod:
  cd module; \
  for i in $(MODS); do \
    [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i; \
    git co -b master;\
    git co -b $(MODSV);
  done
 
# 拉取页面仓库,tbindex
getPage:
  cd page; \
  @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;

 

地点是一个 MakeFile
的一部分代码,成效是制造开发目录,拉取分支音讯,然后初步服务器,打开浏览器,使用
IDE 打开目录,万事就绪,只等主人敲代码。

凡事工艺流程就一两分钟,已毕开发在此以前所有的准备工作。那些剧本不仅仅是给自己行使,假诺其外人也急需加入开发,一个指令就能让插手者进入开发格局,加上文档表达,省却了无数联络开销。

fs模块(读写文件)

var fs = require(“fs”);//加载模块

//异步读取文件

fs.readFile(“./readme.txt”,”utf8″, (err, data) => {

if(err) throw err;

console.log(data);

});

//同步读取文件 Synchrous

var data = fs.readFileSync(“./readme.txt”,”utf8″);

console.log(data);

//异步写入文件

fs.writeFile(“./test.txt”, “This is test content~~~”,(err) => {

if(err)throw err;

console.log(“写入成功”);

})

console.log(“write”);

//同步写入文件

fs.writeFileSync(“./test.txt”, “This is test content~~~”);

console.log(“write”);

查看路径音信stat:fs.stat(path, (err, stat) => {})

fs.stat(“./test”, (err, stat) => {

if(err) throw err;

console.log(stat);

if(stat.isFile()) {

console.log(“该路线为文件”);

}else if (stat.isDirectory()) {

console.log(“该路线为文件夹”);

}

})

一个概括的例证
var gulpif = require(‘gulp-if’);
var uglify = require(‘gulp-uglify’);

四、创建HTML文件

在app文件夹中新建views文件夹,在views文件夹中,新建home.html文件、about.html文件和404.html文件。
文本中的代码如下所示:
home.html文件:
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Home page</title>
</head>
<body>
<p>home page</p>
</body>
</html>
</pre>
about.html文件:

<!DOCTYPE html>
<pre>
<html>
<head>
<meta charset=”utf-8″>
<title>About page</title>
</head>
<body>
<p>about page</p>
</body>
</html>
</pre>
404.html文件:
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>404 page</title>
</head>
<body>
<p>404 page not found</p>
</body>
</html>
</pre>
HTML文件的代码写得相比较不难,可自由发挥。

那么现在大家来运转程序吗:
<pre>$ node main.js</pre>
运作成功后,打开虚拟机桌面的浏览器,
访问“ ==>就会看到页面显示“home page”,
访问“http://127.0.0.1:8080/about”
==>就会看到页面展现“about page”,
访问 ==>下的其它页面就会看到页面呈现404 page not
found。

☞ 在线调试实践(一个连串的调试工具)

输入须求调剂的页面URL(如
http://www.taobao.com):

美高梅开户网址 2

插件会分析 DOM,遍历获得页面所有被引用到的仓库:

美高梅开户网址 3

分选必要调剂的模块(颗粒度细分到了html/js/css),点击调试按钮,可以看来调试页面的资源都会引用本地下载的文件。

path模块

var path = require(“path”); //加载模块

path.dirname(url) 获取目录名

path.extname(url)获取后缀名

path.join([…paths]) 拼接路径

var url = “”;

var p1 = path.basename(url,”.html”);

console.log(p1); //path

var p2 = path.dirname(url);

console.log(p2); //

var p3 = path.extname(url);

console.log(p3); //.html

var p4 = path.join(__dirname, “./a”, “../b”, “c”);

console.log(p4); //E:\node\nodejs_2\b\c

var condition = true; // TODO: add business logic

☞ 小结

优化流程、优化架构是大家全力持之以恒的主旋律,本文首要解说,编辑代码到调试线上功效的历程,提议了化解
combo
和代码压缩等题材的方案和提议。希望得以给不善于代理调试的校友一点启发。

1 赞 收藏
评论

美高梅开户网址 4

querystring模块 查询字符串

var qs = require(“querystring”);

var o = {

color: “red”,

border: “1px solid red”,

“font-size”: “16px”

}

var ret = qs.stringify(o, “;”, “:”);

console.log(ret);

// “color:red;border: 1px solid red;font-size: 16px”

gulp.task(‘task’, function() {
gulp.src(‘./src/*.js’)
.pipe(gulpif(condition, uglify()))
.pipe(gulp.dest(‘./dist/’));
});

http模块

var http = require(“http”); //加载模块

var server = http.createServer((request, response) => {

//创制一个web服务器

//request

//response

//设置响应头

console.log(request.url);

switch(request.url) {

             case “/”:

                    response.write(“首页”);

                     break;

case “/list”:

response.write(“列表页”);

break;

case “/detail”:

response.write(“详情页”);

break;

}

response.writeHead(200, {

“Content-Type”:”text/html; charset=utf8″

})

response.end();

//if(request.url)

})

//http80端口号 ftp23端口号

server.listen(3000, function() {

console.log(“server has started at port 3000”);

})

 

1.http呼吁页面,不是该文件目录下的页面重定向,其他的基于目录查找

var http = require(“http”); //CommonJS规范 加载模块

var fs = require(“fs”);

var path = require(“path”);

var server = http.Server(); //创造服务器

server.on(“request”, function(req, res) {

var filepath = path.join(__dirname, “./www”, req.url);

if(req.url === “/”) {

filepath = path.join(filepath, “index/html”);

}

try{

var stat = fs.statSync(filepath);

if(stat.isFile()) {

var content = fs.readFileSync(filepath);

res.setHeader(“Content0length”, Buffer.bytelength(content))

res.write(content);

}else if(stat.isDirectory() {

//当请求的路线是目录的时候

})

}catch(e) {

//重定向301(永久) 302(暂时)

res.writeHead(302, {

“Location” : “/”

})

}

res.end();

})

server.listen(3000, function() {

console.log(“server has started”);

})

express

serve-favicon
Node.js middleware for serving a favicon.
Examples

Typically this middleware will come very early in your stack (maybe even
first) to avoid processing any other middleware if we already know the
request is for /favicon.ico.

express

var express = require(‘express’)
var favicon = require(‘serve-favicon’)
var path = require(‘path’)

var app = express()
app.use(favicon(path.join(__dirname, ‘public’, ‘favicon.ico’)))

// Add your routes here, etc.

app.listen(3000)


morgan
morgan是express默许的日记中间件,也足以脱离express,作为node.js的日志组件单独使用
var express = require(‘express’);
var app = express();
var morgan = require(‘morgan’);

app.use(morgan(‘short’));
app.use(function(req, res, next){
res.send(‘ok’);
});

app.listen(3000);
ode basic.js运行程序,并在浏览器里拜访
,打印日志如下

➜ 2016.12.11-advanced-morgan git:(master) ✗ node basic.js
::ffff:127.0.0.1 – GET / HTTP/1.1 304 – – 3.019 ms
::ffff:127.0.0.1 – GET /favicon.ico HTTP/1.1 200 2 – 0.984 ms


express 的 模板引擎
jade 和 ejs

jade
index.jade
doctype
html
head
title hello
body
h1 hello world

随后在命令行执行 jade -P index.jade ,编译后的文件 index.html 内容如下:
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>

ejs
特性

<% %> 用于控制流

<%= %> 用于转义的输出

<%- %> 用于非转义的输出

 


handlebars
模板引擎
在模板中利用{{ }}或{{{ }}}的地点就是代表
{{ }} 会转译标签
{{{ }}} 则从来沟通

const productTemplateContent = fs.readFileSync(path.join(__dirname,
‘../templates/product.xml.hbs’), ‘utf-8’);
const productTemplate = handlebars.compile(productTemplateContent);
let html = productTemplate({ product: product, productJson: (new
Buffer(JSON.stringify(product))).toString(‘base64’) });

 


crypto
node自带模块.那么些模块的重大功效是加密解密。
var md5 = crypto.createHash(‘md5’);
var sha1 = crypto.createHash(‘sha1’);

 


needle
Nimble, streamable HTTP client for Node.js. With proxy, iconv, cookie,
deflate & multipart support.
轻量级的http client模块,集成了iconv-lite,跟request类似
var needle = require(‘needle’);

needle.get(”, function(error, response) {
if (!error && response.statusCode == 200)
console.log(response.body);
});

Callbacks not floating your boat? Needle got your back.

var data = {
file: ‘/home/johnlennon/walrus.png’,
content_type: ‘image/png’
};

needle
.post(”, data, { multipart: true })
.on(‘readable’, function() { /* eat your chunks */ })
.on(‘done’, function() {
console.log(‘Ready-o, friend-o.’);
})

needle.post(url, data, requestOptions, function(err, resp, body) {
let data;
if (body) {
let bodyText = body.toString(‘utf-8’);
try {
data = JSON.parse(bodyText);
} catch (e) {
data = bodyText;
}
}
mainCallBack(err, body);
});


superagent
superagent是nodejs里一个那些有益的客户端请求代理模块,当您想处理get,post,put,delete,head请求时,你就应有想起该用它了:)

superagent 是一个轻量的,渐进式的ajax
api,可读性好,学习曲线低,内部信赖nodejs原生的呼吁api,适用于nodejs环境下.

一个概括的post请求,并安装请求头音讯的例子

request
.post(‘/api/pet’)
.send({ name: ‘Manny’, species: ‘cat’ })
.set(‘X-API-Key’, ‘foobar’)
.set(‘Accept’, ‘application/json’)
.end(function(res){
if (res.ok) {
alert(‘yay got ‘ + JSON.stringify(res.body));
} else {
alert(‘Oh no! error ‘ + res.text);
}
});

SuperAgent请求的默许方法为GET,所以你可可以简单地写如下代码:

request(‘/search’, function(res){

});



 

http协议:

HyperText Transport Protocol)是超文本传输协议的缩写.

http请求:get/post/put/delete(get在地址栏,传输速度快,大小有限制.在头,只可以传输一些文件;post加密传输,在正文)

可以倡导http请求的点子:浏览器/postman/curl/Fiddle/php/node.js

http1.0和http1.1的区分:1.0是每便请求都成立一个连接,而1.1是多少个请求一个连接.

报文:请求头(post有content-type:”application-x-www-form-urlencoded”,
cookie)+正文

xhr.readystate

XMLHttpRequest.UNSENT  0        起先化连接

XMLHttpRequest.OPENED  1        连接建立

XMLHttpRequest.HEADER_RECEIVED 2  接收到请求头

XMLHttpRequest.LOADING  3        处理多少

XMLHttpRequest.DONE    4        处理达成

xhr.status HTTP响应状态码

1始发  101 切换协议

2开头  成功  200

3开头  重定向  304 301/302

4开端  客户端错误  404 403

5发端  服务器端错误

2.爬虫 cheerio

原理: 1.拉取页面(字符串)http.get/request(node),file_get_content(php)

2.使用模块,方便火速筛选.cheerio(node), simple.html.dom.php(php)

3.搜集音讯

npm install cheerio //安装cheerio模块

npm init

// spider.js

var http    = require(“http”);

var cheerio = require(“cheerio”);

var fs      = require(“fs”);

3.express 基于 Node.js 平台,快捷、开放、极简的 web 开发框架。

nmp install express -g

npm install express-generator -g(飞速创设express的总体目录)

express -h

express myapp

cd myapp

npm start

express

1.新建文件夹

cd到该文件目录下

npm init (enter name:myapp enter….)

npm install express

在myapp里面新建app.js

在app.js里面写代码

var express  = require(“express”),//加载express模块

http = require(“http”), //加载http模块

app  = express(), //创造一个express实例

server  = http.createServer(app); //app可以视作http创设服务器的回调函数

//静态资源挂载,设置静态资源目录

//中间件 express.static

//挂载中间件 使用use

app.use(express.static(“public”));

//定义一个到手访问用户IP的中间件

//哪个先挂载,先使用哪个的代码

var ips = [];

function getIp(req, res, next) {

console.log(req.ip);

ips.push(req.ip);

next();

}

function responseIP (req, res, next) {

res.send(req.ip);

}

app.use((req, res, next) => {

console.log(“hello”);

next();

})

app.use(getIp);

app.use(responseIP);

app.get(“/”, (req, res) => {

res.send(“首页”);

})

app.get(“/list”, (req, res) => {

// console.log(req.ip);获取ip

res.send(“列表页”);

})

app.get(“/details”, (req, res) => {

res.send(“详情页”);

})

server.listen(3000, function() {

//监听端口号3000,并提醒服务成功打开

console.log(“Server has started”);

})

统计express:中间件和路由.

3.websocket 构建实时应用(你猜我画,视频直播)

全双工、双向数据、长连接的协商,h5新增特性

劳务器端可以主动向浏览器端发送消息

无法不浏览器要扶助,服务器要支持,数据传输格式是Frame

经过:第三次是由客户端发起,请求的报文的伸手头会多一些内容,需求服务器更换协议.

服务器端响应回报文,响应头也会多几条数据,之后就能建立长的连接.

a. 发起呼吁,跟一般的http请求例外的地方,

请求头 包括:

Sec-WebSocket-Key:asgK0L1sVa22xbiq8MU58w==

Sec-WebSocket-Version:13

Upgrade:websocket

让服务器更新切换协议 websocket

b. 服务器收到请求,upgrade

透过一定的手续算法 暴发

Sec-WebSocket-Accept:IQcF4EGKE8sALj3PxJRvYQ1iG2Y

2.  npm init

npm install socketio express –save-dev

socketio 是对websocket协和封装的一个模块,让客户端和劳务器端的写法都是同一的

socket.emit()发数据

socket.on()收数据

监听客户端连接,回调函数会传送本次连接的socket

io.on(‘connection’,function(socket));

给所有客户端广播音讯

io.sockets.emit(‘String’,data);

给指定的客户端发送音信

io.sockets.socket(socketid).emit(‘String’, data);

监听客户端发送的音讯

socket.on(‘String’,function(data));

给该socket的客户端发送音信

socket.emit(‘String’, data);

3.WebSocket

new Websocket(“ws:localhost/chat”)

gulp

npm init

npm install gulp –save-dev

新建 gulpfile.js(默许执行的文本)

//gulpfile.js

//1.配备职责, 2.活动执行

var gulp = require(“gulp”);

var uglify = require(“gulp-uglify”);

//task1 定义一个职责ufligy 压缩js

gulp.task(“uglify” ,function() {

gulp.src(“./src/js/*.js”)

.pipe(uglify())

.pipe(gulp.dest(“./dist/js”))

})

安装gulp-uglify插件 npm install gulp-uglify –save-dev

新建src文件夹 > js文件夹 >demo.js

新建dist文件夹> js文件夹 >

运行 gulp uglify

然后在dist文件夹就能找到已经减弱的demo.js

插件:gulp-less

插件:gulp-minify-css

//文件看守, 监听./src/less/*美高梅开户网址 ,.less 文件的扭转,变化运行该less职责

gulp.task(“default”, [“uglify”, “less”], function() {

gulp.watch(“./src/less/*.less”, [“less”]);

})

//运行 gulp即可就算改变代码

webpack

全局安装webpack npm install webpack –save-dev

新建文件夹webpack

1.开始化一个档次 npm init

name:不能为webpack

2.在该公文夹上边安装npm install webpack –save-dev

  1. webpack 资源模块化

webpack ./app/main.js ./app/bundle.js

  1. mongodb 非关系型数据库

mongoose Nodejs操作mongodb数据库的模块

发表评论

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

网站地图xml地图