皇家娱乐网址在线调节和测试方案的考虑与执行,工作中用到的一部分node模块的简要memo

皇家娱乐网址在线调节和测试方案的考虑与执行,工作中用到的一部分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编码处理以及对于文本的上传处理.

☞ 代理调节和测试的沉郁

而对于比较复杂的线上环境,代理也会赶上不少阻力,比如:

线上财富 combo

并发谬误的剧本地址为  ,它对应着
a.js,b.js,c.js 多少个本子文件,借使大家选拔 Fiddler/Charles那样的经文代理工科具调节和测试代码,就务须给那么些工具编写插件,大概在轮换配置内部加一堆判断恐怕正则,费用高,门槛高。

线上代码压缩

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

代码正视较多,拉取代码难点

有的是时候,大家的页面注重了多少个 asserts
财富,而那么些财富各自分布在几个仓Curry面,甚至散布在分化的发表平台上,为了能够在源码上清晰的调剂代码,大家只能将持有的能源下载到本地,时期若是存在下载代码的权限难题,整个调节和测试进程就慢下来,那是卓殊不能够经得住的工作。比如某系统创设的页面,页面上的模块都以以仓库为维度区分的,1个页面也许对应了5-肆18个仓库,下载代码实为劳动。

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

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)思想,前一级的出口,间接变成后一流的输入,使得在操作上非常简单。通过本文,大家将学习怎么着选拔居尔p来改变开发流程,从而使支付尤其快捷便捷。
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)再次回到3个可写的stream

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

当见到线上边世难题(或许是别的同学负责页面包车型的士题材),脑中浮出如此的景观:

复制代码 作者:”嘿,线上不经常呀!小编要调节代码!”
电脑:”好的,主人。请问是哪个页面?”(弹出浮层) 笔者:浮层中输入U凯雷德L。
电脑:”请问是哪位地点出难点了?” 小编:(指着电脑)”模块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’),//同样那里用不上,和方面1/10起的
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

☞ 化解代理蒙受的题材

地点大家提到了三个难题,通常支出遭逢最高烧的1个是 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). 浏览器请求全体代理到当地的3个劳务

率先写一个地点服务:

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
财富处理,代理给当地的另3个服务  ,这几个服务接受请求后会将
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
控制台的安装选项中见到:

皇家娱乐网址 1

☞ 代码的拉取

若果二个连串唯有你知道如何修改,那这几个项目标技巧设计就有点不好了,为了令人们都能处理你项目中的难点,一定要索要2个简练的形式为开发者连忙搭建测试环境,文书档案是单向,假如有个一键操作的一声令下,那就更棒了!

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

全总工艺流程就一两分钟,完毕支付在此之前全数的预备干活。那么些本子不仅仅是给本人使用,假诺其余人也急需插足开发,2个限令就能让插手者进入开发方式,加上文书档案表明,省却了很多联络开支。

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(“该路线为文件夹”);

}

})

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

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

输入必要调剂的页面U本田CR-VL(如
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

发表评论

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

网站地图xml地图