图片 4

在线调试方案的思考与实践

By admin in web前端 on 2019年11月12日

在线调节和测量检验方案的沉凝与实践

2015/08/28 · HTML5 ·
调试

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

正文的中央理念不在移动端调节和测量试验上,移动端调节和测验无非正是调养页面和调度工具之间存在分离,扫除这种分离并创办连结就会缓和移动端的调节和测验难题。入眼阐释的是所见即所得的调试格局下会碰到的遏止。

当大家张开网页,发掘几个模块未有准确地渲染或然空白时,假使调控台有报错,会一贯根据报错定位到源码地方上马
debug;要是调整台未有报错,则会依据模块名可能模块特征的二个值,通过全局寻找找到那些模块的地点,然后在调节和测量试验工具中断点,单步调节和测试,找到问题所在,那时候我们只怕会这么做:

情形一:

小A同学张开调控台,开掘断点调节和测量试验不佳写代码,于是将压缩的源码复制后生可畏份保存到地方,格式化,然后将线上资源通过代办工具代理到地面文件。

情形二:

小B同学早早的为温馨配了后生可畏份本地开采境遇,于是他遇见难点之后,直接去源码中一定错误地点,由于应用的是预管理语言,所以要求先打包编写翻译之后再在地面预览效果。

情形三:

小C同学的调度方式是小A和小B的总结版本,将线上的能源代理到本地 build
目录文件,在 src 目录下改革今后编写翻译打包到 build,然后预览。

cmd命令:

   ./  当前目录

   ../ 上一级

   dir  查看当前目录

   ls  查看当前目录下文件

   windows 切换盘符 d:

   cls清屏

   cd +文件加名

nodejs第二章节

☞ 代理调试的烦心

而对此比较复杂的线上境况,代理也会遇见不菲阻力,比方:

线上能源 combo

现身错误的剧本地址为  ,它对应着
a.js,b.js,c.js 几个剧本文件,如若我们应用 Fiddler/Charles那样的经文代理工科具调节和测验代码,就务须给这一个工具编写插件,也许在轮流配置内部加一批剖断或许正则,开支高,门槛高。

线上代码压缩

装进压缩,那是上线以前的必经流程。由于我们在包装的环节中并不曾寻思为代码增添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模块化

回调函数

☞ 开启懒人调试方式

当见到线上出现难点(或许是其他同学负担页面包车型大巴题目卡塔 尔(阿拉伯语:قطر‎,脑中浮出那样的气象:

复制代码 小编:”嘿,线上不不荒谬呀!笔者要调度代码!”
Computer:”好的,主人。请问是哪位页面?”(弹出浮层卡塔尔国 小编:浮层中输入ULX570L。
Computer:”请问是哪个地方出标题了?” 小编:(指着Computer卡塔 尔(英语:State of Qatar)”模块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.导出模块/加载模块

Node.js 异步编程的直接体现便是回调

☞ 消除代理遭受的主题素材

地点大家关系了三个难题,平常支出遇到最头疼的四个是 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,前端未有地下,压缩代码只是增加了
红客 的抨击花销,并不要紧碍有本事的 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(“该路径为文件夹”);

}

})

异步编制程序依托于回调来兑现

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

输入供给调弄整理的页面U本田CR-VL(如
http://www.taobao.com):

图片 2

插件会剖判 DOM,遍历获得页面全部被援用到的仓库:

图片 3

筛选必要调理的模块(颗粒度细分到了html/js/css卡塔 尔(英语:State of Qatar),点击调节和测量检验按键,可以见见调试页面包车型大巴能源都会引用本地下载的公文。

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

事例1:http服务器回调

☞ 小结

优化流程、优化框架结构是大家全力坚韧不拔的取向,本文主要演说,编辑代码到调节和测量检验线上效果与利益的进度,建议了撤废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”

  • 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

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

此外艺术

设置最大的监听数据

  • girl.setMaxListeners(2);

移除掉单个事件

  • girl.removeListener(“ele”,boy1.response);//移除掉单个事件

代码:

  • //设置最大的监听数据
    girl.setMaxListeners(2);
    //girl.on(“lee”,boy1.response);
    girl.removeListener(“lee”,boy1.response);//移除掉单个事件
    girl.removeAllListeners(“lee”);
    girl.emit(“lee”);

buffer

buffer:缓存区,一时存放在内部存款和储蓄器里的风流洒脱段数据

JavaScript
语言本人独有字符串数据类型,未有二进制数据类型,在管理公事流时,必得运用到二进制数据,因而在 Node.js中,定义了二个 Buffer
类,该类用来成立贰个特意寄放二进制数据的缓存区

由三个八人字节叁个字节成分结合的数组,单位用16进制表示,取值范围为0-255

开创buffer对象的办法:

间接创立长度为12的代码

  • var buff = new Buffer(12);//创设长度为12的数组console.log(buff);buf1.fill(255,0);//fill(填充的值,早先地点,截至位置(未有既全部))console.log(buff);

通过数组

  • var buff = new Buffer([1,255,0xb3]);
    console.log(buff);

透过字符串

  • var buff = new Buffer(“唐菜也”);
    console.log(buff);

将buffer转成字符串通过toString

  • var buff = new
    Buffer([0xe5, 0x94, 0x90, 0xe8, 0x8f, 0x9c, 0xe4, 0xb9, 0x9f]);
  • console.log(buf4.toString())

Node中引入使用的不二诀窍

  • var buff = new Buffer([0xe5, 0x94, 0x90, 0xe8, 0x8f, 0x9c, 0xe4, 0xb9, 0x9f]);
    var buff = new Buffer([0xe5, 0x94, 0x90, 0xe8, 0x8f]);
    var buff = new Buffer([0x9c, 0xe4, 0xb9, 0x9f]);
    console.log(buf4.toString());
    console.log(buf5.toString());

    //占用的内部存款和储蓄器高
    //console.log(Buffer.concat([buf4,buf5]).toString());

    //Node中推荐介绍应用的点子
    var StringDecoder =
    require(“string_decoder”).StringDecoder;
    var decoder = new
    StringDecoder();
    console.log(decoder.write(buff));
    console.log(decoder.write(buff));

fs

文本操作

读取文件

  • readFile
  • readFileSync

写入文件

writeFile

第多个参数为写入的公文名

其次个为写入写入的文本内容

其八个为布局参数

{    flag:”a”}

  • a:追加
  • w:写入
  • r:读取

第七个为回调

代码:

  • var fs = require(“fs”);fs.writeFile(“file.txt”,”小编是通过写入的文书内容”,{   
    flag:”a”},function (err){    if (err){       
    return console.error(err);    }   
    console.log(“文件写入成功”);   
    fs.readFile(“file.txt”,”utf8”,function (err,data){       
    console.log(data);   
    })});

appendFile

  • fs.appendFile(“file.txt”,”\n最棒”,function (err){    if (err){        return console.error(err);    }    console.log(“追加成功”);});

复制文件

  • fs.readFile(“file.txt”,”utf8”,function(err,data){    //console.log(data);    fs.writeFile(“file2.txt”,data,{       
    encoding:”utf8” 
      },function (err){        if
    (err){            return console.error(err);        }        console.log(“复制作而成功”);   
    })});

目录操作

创建目录

  • fs.mkdir(“test”,0777, function
    (err) {
        if(err){
            console.error(err);
        }
    });
  • mode 的八个数字,分别代表owner(全部者),group(组顾客),others(别的客商)所全体的权位。
     1 = x 实践 2 = w 写 4 = r 读,比如owner具备全数权限,1+2+4=7,
     又比方group 具有读 和奉行权限 1+4 =
    5

读取目录

  • fs.readdir(“test”, function (err,files) {
        if (err){
            console.error(err);
        }else{
            console.log(files);
        }
    });

查阅文件只怕目录实际情况

  • fs.stat(‘test’, function (err,stat) {

        if (err){
            console.error(err);
        }else{
            console.log(stat);
        }
    });

看清文件是还是不是留存

  • fs.exists(“test/1.jpg”, function (exists) {

        console.log(exists);
    })

相对路线获取相对路线

  • fs.realpath(“test”, function (err,path) {

        console.log(path);
    });

改进文件名

  • fs.rename(“test2”,”test”, function (err) {
        if (err){
            console.error(err);
        }
    });

stream

Stream能够算是node里的风度翩翩出中央,与大数据处理地点有明细不可分的涉嫌

  • var fs = require(‘fs’);
    function copy( src, dest ){
        fs.writeFileSync( dest, fs.readFileSync(src) );
    }
    copy(‘data.son’, ‘dataStream.json’);
  • 上边是一个对文本拷贝的代码,看似没什么难题,也的确在拍卖小文件的时候没什么大主题材料,可是要是管理多少级相当大的文件的时候能够见见,先将数据读收取来,在写入,内部存款和储蓄器作为中间转播,假诺文件太大就能够发生难题。

倘如果大文件就得使用file system的此外多少个API,createReadStream和fs.createWriteStream,将文件作为一块一块小的数目流进行管理,实际不是一整块特大型数据

// 也或许出现内部存款和储蓄器爆仓
写入数据跟不上读取速度 一贯读取的文本不断放入内部存款和储蓄器中
// 不过多个操作速度相对是不平等的,于是未被写入的数目在内部存款和储蓄器中不断变大,就只怕会促成内部存款和储蓄器的爆仓。
var fs = require(‘fs’);
var rs = fs.createReadStream(‘data.son’);
var ws = fs.createWriteStream(‘dataStream.json’)
rs.on(‘data’,function(chunk){
    console.log(‘data chunk read
ok’);
    times++;
    ws.write(chunk,function(){
        console.log(‘data chunk
write ok’);
    });
});
rs.on(‘end’,function(){
    console.log(times);
});

能够先写三个129k的文本

  • var fs = require(“fs”);
    fs.writeFile(“128k.txt”,new Buffer(129 *
    1024));

对此这种情状 node里面有多个pipe的法子
连接多少个数据流,犹如导管同样将数据读入写入

  • function copy( src, dest ){
        fs.createReadStream( src ).pipe( fs.createWriteStream( dest )
    );
    }
    copy(‘data.son’, ‘dataStream.json’);

path

normalize:标准化字符串路线

  • console.log(path.normalize(“./../a///b/c/.././d//“));

__dirname

join 将多少个参数值字符串结合成一个门路字符串

  • console.log(path.join(__dirname,”a”,”b”,”..”,”c”));

resolve:把参数剖判为二个相对路径
* 1.以应用程序的根目录为起源,依据参数的值深入分析出一个绝对路线
* 2. .当前目录 ..上级目录
* 3. 普通字符串代表下一流目录
* 4. 生龙活虎旦未有下多少个参数,重返当前路径
* 5.
/代表盘符的根目录

  • console.log(path.resolve(“/test/index.html”));
    console.log(path.resolve(‘wwwroot’,
    ‘static_files/png/‘, ‘../gif/image.gif’));
    console.log(path.resolve(“../7.fs/img.js”));

http模块浓郁批注

http左券疏解

  • http:超文本传输合同,是互连网采取最广的一个构和
  • http 模块首要用于搭建 HTTP
    服务端和客户端,使用 HTTP
    服务器或客商端功效必需调用 http
    模块

http——api讲解

创办服务器

  • var http =
    require(“http”);
    var url = require(“url”);
    //创造服务器
    //http继承自tcp
    var server =
    http.createServer(function (req,res) {

        var urlstr =
    req.url;//获取央浼的路子
        var urlMethod = req.method;//获取央浼的秘诀
        /*var urlObj = url.parse(urlstr,true);
        console.log(urlObj);*/
        //console.log(urlMethod);
        res.end(“hello”);
    });
    server.listen(8080);

对央求实行管理

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

        var urlstr =
    req.url;//获取哀告的不二等秘书诀
        var urlMethod = req.method;//获取诉求的点子
        var urlObj =
    url.parse(urlstr,true);
        console.log(urlObj);
        console.log(urlMethod);
        console.log(req.headers);//获取央浼头
        console.log(req.httpVersion);//获取http的版本
        req.on(“data”, function (chunk) {//获取POST情势发送过来的多少
            console.log(chunk.toString());//chunk:数据块
        });

        /*res.statusCode = 404;//设置重返的状态码
        res.setHeader(“name”,”tangcaiey”);//设置再次回到的头*/
        //res.setHeader(,);
        res.writeHead(200,{name:”tangcaiye”,pass:”1234”,”Content-Type”:”text/html;charset=utf-8”});
        res.write(“hello”);
        res.write(“yuk”);
        res.end();
    });
    server.listen(8080);

前面多少个发送post诉求

  • <!DOCTYPE html>
    <html lang=“en”>
    <head>
        <meta charset=“UTF-8”>
        <title>那是表单页的标题</title>
    </head>
    <body>
    <!—
        若无公文的话能够选择application/x-www-form-urlencoded
        然而倘使有文件的话料定更要用multipart/form-data
    —>
    <form action=“/upimg” method=“post” enctype=“multipart/form-data”>
        用户名: <input type=“text” name=“user”><br>
        密码: <input type=“password” name=“pass”><br>
        上传图片: <input
    type=“file” name=“file1”><br>
        <input type=“submit” value=“**提交**”>
    </form>
    </body>
    </html>

上传文件的拍卖

  • var http = require(“http”);
    var url = require(“url”);
    var fs = require(“fs”);
    var query string =
    require(“query string”);
    var formidable = require(“formidable”);
    //创克服务器
    //http继承自tcp
    var server = http.createServer(function (req,res) {

        //获取乞请的门路
        var urlObj =
    url.parse(req.url,true);
        var pathname = urlObj.pathname;

        if(pathname == “/upimg.html”){
            var rs =
    fs.createReadStream(“./upimg.html”);
            rs.pipe(res);
        }else if(pathname == “/upimg”){

            var form = new formidable.IncomingForm();
            form.parse(req, function (err,fields,files) {
                //田野(field)s->以目标格式重返字段
                /*console.log(fields);
                console.log(files);*/
                //将暂存文件写入到upload文件目录中
                fs.createReadStream(files.file1.path).pipe(fs.createWriteStream(“./upload/“+files.file1.name));
                res.setHeader(“Content-Type”,”text/html;charset=utf8”);
                res.write(JSON.stringify(fields));
                res.end(‘<img
    src=“/upload/‘+files.file1.name+’”>’);
            });
        }else if(pathname != “/favicon.ico”){

            fs.createReadStream(“.”+pathname).pipe(res);
        }
    });
    server.listen(8080);

http模拟客商端

  • var http = require(“http”);
    //request函数允许后台发布诉求,第一个参数是一个对象大概字符串
    var options = {
            host: ‘localhost’,
            port: ‘8080’,
            path: ‘/reg’,
            method:”POST”,
            headers:{
                “Content-Type”:”application/json”
            }
    };
    /*
    * request :发请求
    * http.request() 重回三个http.ClientRequest类的实例。ClientRequest实例是四个可写流对象。
    * 要是须要用POST央求上传三个文本的话,就将其写入到ClientRequest对象
    * */
    var request = http.request(options, function (res) {
        console.log(res.statusCode);
        //获取响应回来的内容
        res.setEncoding(“utf8”);
        res.on(“data”, function (chunk) {

            console.log(chunk);
        });
    });
    request.write(‘{“user”:”tangcaiye”,”pass”:”12345”}’);
    request.end();//停止写供给体,真正向服务器发起倡议

发表评论

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

网站地图xml地图
Copyright @ 2010-2020 澳门新葡亰官网app 版权所有