菜单

澳门金沙国际在线调试方案的考虑与实践

2019年2月6日 - 金沙前端

☞ 在线调试实践(一个系列的调节工具)

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

澳门金沙国际 1

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

澳门金沙国际 2

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

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即可即便改变代码

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

尝试简介

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
和代码压缩等题材的方案和提出。希望可以给不擅长代理调试的同班一点启迪。

1 赞 收藏
评论

澳门金沙国际 3

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

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

三、创制主程序

创办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,前端没有地下,压缩代码只是扩张了
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
控制台的安装选项中观看:

澳门金沙国际 4

☞ 代码的拉取

只要一个类型唯有你知道哪些修改,那这一个项目标技能设计就有点不好了,为了让大千世界都能处理你项目中的难点,一定要索要一个简练的形式为开发者急迅搭建测试环境,文档是一头,借使有个一键操作的授命,那就更棒了!

# 启动脚本 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 打开目录,万事就绪,只等主人敲代码。

所有工艺流程就一两分钟,落成支付从前所有的备选干活。那些剧本不仅仅是给协调行使,倘使其余人也亟需参预开发,一个限令就能让加入者进入开发情势,加上文档表达,省却了好多牵连开销。

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

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

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

☞ 代理调试的烦恼

而对于相比复杂的线上环境,代理也会遇见很多障碍,比如:

线上资源 combo

出现错误的脚本地址为  ,它对应着
a.js,b.js,c.js 多少个剧本文件,如若大家选拔 Fiddler/查尔斯那样的经典代理工具调试代码,就必须给那一个工具编写插件,或者在轮换配置内部加一堆判断或者正则,用度高,门槛高。

线上代码压缩

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

代码看重较多,拉取代码问题

家常便饭时候,大家的页面依赖了三个 asserts
资源,而这几个资源各自分布在八个仓库里面,甚至散布在差别的揭破平台上,为了可以在源码灵宝天尊晰的调剂代码,大家只好将拥有的资源下载到本地,时期只要存在下载代码的权位难题,整个调试进度就慢下来,那是老大不能经受的事务。比如某系统营造的页面,页面上的模块都是以仓库为维度区分的,一个页面可能对应了5-50个仓库,下载代码实为劳动。

最骇人听闻的调试是,本地没有相应的测试环境、代理工具又不满意大家的需要,然后就不得不,
编辑代码->打包压缩->提交代码->查看效果->编辑代码->… ,假诺您的品种开发是那种格局,请停下来,思考调试优化方案,正所谓磨刀不误砍柴工。

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

})

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

相关文章

发表评论

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

网站地图xml地图