ca88node.js

作者:ca88

在线调节和测验方案的思谋与实施

2015/08/28 · HTML5 · 调试

原版的书文出处: 李靖(@Barret李靖)   

正文的中央观念不在移动端调试上,移动端调节和测验无非便是调度页面和调节和测量检验工具之间存在分离,消逝这种分离并创制连结就能够一挥而就移动端的调节和测量检验难点。入眼演讲的是所见即所得的调节和测验情势下会境遇的阻挠。

当我们开垦网页,开掘四个模块未有正确地渲染恐怕空白时,如若调控台有报错,会直接依照报错定位到源码地方上马 debug;若是调控台未有报错,则会依据模块名也许模块特征的三个值,通过全局找寻找到那一个模块的职分,然后在调度工具中断点,单步调节和测量检验,找到难点所在,那个时候我们恐怕会如此做:

情形一:

小A同学展开调整台,开采断点调节和测量试验倒霉写代码,于是将回降的源码复制大器晚成份保存到本地,格式化,然后将线上财富通过代办工具代理到地面文件。

情形二:

小B同学早早的为团结配了风流洒脱份本地开拓条件,于是他撞见题目以往,直接去源码中固定错误地方,由于采用的是预管理语言,所以须求先打包编写翻译之后再在本地预览效果。

情形三:

小C同学的调节和测量试验方式是小A和小B的综合版本,将线上的能源代理到地头 build 目录文件,在 src 目录下改善今后编写翻译打包到 build,然后预览。

cmd命令:

   ./  当前目录

   ../ 上一级

   dir  查看当前目录

   ls  查看当前目录下文件

   windows 切换盘符 d:

   cls清屏

   cd 文件加名

nodejs第二章节

实施简要介绍

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 Worldn');
}).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/查理那样的经文代理工科具调节和测量试验代码,就务须给这个工具编写插件,大概在轮番配置内部加一批判别只怕正则,开支高,门槛高。

线上代码压缩

装进压缩,那是上线此前的必经流程。由于大家在包装的环节中并未酌量为代码增多sourceMap,而线上事先对应 index-min.jsindex.js 也因为安全方面包车型客车从头到尾的经过给干掉了,那给我们调节和测验代码变成了宏大的不便于。

代码重视相当多,拉替代码难点

不少时候,大家的页面注重了四个 asserts 财富,而那些能源各自布满在多少个仓库里面,甚至散播在分化的昭示平台上,为了能够在源码上清晰的调节和测试代码,大家只可以将有着的财富下载到本地,期间即便存在下载代码的权柄难题,整个调节和测验进度就慢下来,那是特别无法经得住的事体。比方某系统创设的页面,页面上的模块都是以酒店为维度区分的,叁个页面大概对应了5-四十八个仓库,下载代码实为劳动。

最怕人的调整是,本地未有对景挂画的测验境况、代理工科具又不满意大家的必要,然后就只可以, 编辑代码->打包压缩->提交代码->查看效果->编辑代码->... ,假若你的花色支出是这种方式,请停下来,思索调节和测量检验优化方案,正所谓必先利其器。

es6:

1.let/const

2.指标里的方法function能够省略

3.函数中的私下认可参数

4.template

5.箭头函数

6.进展操作符

7.解构赋值

8.Symbol

9.class 模拟类,但真相是凭仗原型的

10.for ...of

11.promise 消弭回调金字塔.回调鬼世界

12.生成器函数,能够脱离函数

13.JS模块化

回调函数

二、创造路由

在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();
}
}
// 导出 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。

☞ 开启懒人调节和测量试验形式

当见到线上现身难题(可能是别的同学担当页面包车型地铁标题卡塔尔国,脑中浮出那般的现象:

复制代码 笔者:"嘿,线上有毛病啊!小编要调解代码!" 计算机:"好的,主人。请问是哪位页面?"(弹出浮层卡塔 尔(阿拉伯语:قطر‎ 笔者:浮层中输入UEscortL。 Computer:"请问是哪里出标题了?" 作者:(指着计算机卡塔尔"模块A和模块B。" Computer:正在下载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.导出模块/加载模块

Node.js 异步编制程序的一向反映正是回调

三、创设主程序

成立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工具相比难满意须求,对于那几个标题有四个管理方案:

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 包,代理浏览器的央求,浏览器上运用 switchSharp 设置本地代理为  ,当倡议过来,先推断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");
});

譬喻说须求  ,就可以获得天猫商城首页的源码,然后对获得的代码做替换。

☞ 解决代码压缩难点

对于那一个问题,提议在线上放两份源码,风姿洒脱份是裁减源码,意气风发份是未压缩源码,当页面 url 存在 debug 参数的时候,重临未压缩版本,平常再次回到压缩版本。当然,也能够应用上述办法管理难题。

而是,更客观的主意应该是 sourceMap,前端未有地下,压缩代码只是增添了 黑客 的攻击花费,并不要紧碍有本事的 黑客借系统漏洞入侵。所以可认为源码提供后生可畏份 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 调节台的安装选项中见到:

ca88 1

☞ 代码的拉取

少年老成旦八个类型唯有你精晓怎么修正,那这么些类别的技艺设计就有一点点不好了,为了让大家都能管理你项目中的难点,必要求索要叁个简洁明了的模式为开辟者快捷搭建测量试验景况,文书档案是单向,假诺有个豆蔻梢头键操作的下令,那就更棒了!

# 运维脚本 start: createFile getMod getPage # 创制目录 createFile: @[ -d module ] || mkdir module @[ -d page ] || mkdir page # 拉取模块饭馆,这里有几12个,比较费时,请意志等待... 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("该路径为文件夹");

}

})

异步编制程序依托于回调来落到实处

四、创建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。

☞ 在线调节和测量检验施行(一个系统的调和工具)

输入供给调弄收拾的页面U帕JeroL(如 http://www.taobao.com):

ca88 2

插件会深入分析 DOM,遍历得到页面全部被引述到的库房:

ca88 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:nodenodejs_2bc

事例1:http服务器回调

☞ 小结

优化流程、优化架构是大家努力持锲而不舍的矛头,本文首要演讲,编辑代码到调节和测量检验线上成效的经过,提议了化解combo 和代码压缩等难点的方案和建议。希望能够给不专长代理调节和测量试验的同校一点启迪。

1 赞 收藏 评论

ca88 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"

  • var http = require(“http”);//引进一个http的模块

    var server = http.createServer(function (req,res) {

        //向前台响应内容(数据)
        res.end(“大家好,我是yuk”);
    });
    //listen(端口,域名,成功的回调)
    server.listen(8080,”localhost”, function () {
        console.log(“服务器运营成功!”);
    });

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

})

事例2:读取文件操作

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

})

  • var fs = require(“fs”);//文件模块

    //异步的办法->当文件读取实现后实践回调函数内容,不影响其余后续程序的试行
    /*var data = fs.readFile(“1.txt”,”utf8”, function (err,data) {

        console.log(“读取文件成功”);
        console.log(data);
    });*/
    //同步获取文件的方式->必得读取完结未来再实施之后的程序
    var data = fs.readFileSync(“1.txt”,”utf8”);
    console.log(data);
    console.log(“我是其余的代码”);

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

ca88,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");

util

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")

  • var util = require(“util”);
    //完毕三翻五次
    function Parent(){
        this.name = “老爸”;
        this.age = 50;
        this.sayHello = function (){

            console.log(‘hello’);
        }
    }
    Parent.prototype.showName = function (){

        console.log(this.name);
    }
    function Child(){
        //要世袭函数内部的能够应用call或许apply
        this.name = “儿子”;
    }
    //通过这种措施能够延续父类原型中的方法和性能
    util.inherits(Child,Parent);
    var parentObj = new Parent();
    parentObj.showName();
    var childObj = new Child();
    childObj.showName();

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数据库的模块

  • console.log(util.inspect(obj));

品种验证

  • console.log(util.isArray([]));//剖断是不是为二个数组
    console.log(util.isRegExp(/d/));//判定是还是不是为一个正则表明式

event

事件概念

  • 事件
    * 又称为发表订阅形式
    * 又称之为观望者方式
    * 当主题对象产生变化时,会通报全部的观望者对象,更新本身的行动

获取事件模块

  • var events = require(“events”).伊夫ntEmitter();//老的写法,跟上面包车型客车写法是等价的
    var events = require(“events”);

例子:

  • var events = require(“events”);
    var util = require(“util”);

    function Girl(){
        //创制五个美女类,它装有一点点事变
    }
    //要让美丽的女人两全事件措施须求先世袭events模块
    util.inherits(Girl,events);

    function Boy(name,response){
        this.name = name;
        this.response = response;
    }

    var boy1 = new Boy(“备胎1”,function (){

        console.log(“吃鸡腿”);
    });

    var boy2 = new Boy(“备胎2”, function (){

        console.log(“吃牛肉”);
    });

    • var girl = new Girl();
      girl.on(“lee”,boy1.response);
      girl.addListener(“lee”,boy2.response);
      girl.once(“die”,function (){
          console.log(“死了”);
      });

    girl.emit(“die”);//发射事件
    girl.emit(“die”);

事件

注册事件

  • on
  • addListener
  • once

发出事件

  • emit

本文由ca88发布,转载请注明来源

关键词: ca88网址 日记本 HTML5 nodejs