您的位置:澳门402永利com > 前端技术 > 在线调节和测验方案的考虑与试行

在线调节和测验方案的考虑与试行

发布时间:2019-09-23 20:45编辑:前端技术浏览(106)

    在线调节和测量检验方案的思辨与实践

    2015/08/28 · HTML5 · 调试

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

    正文的主旨不在移动端调节和测量检验上,移动端调节和测量检验无非就是调解页面和调弄整理工科具之间存在分离,解决这种分离并创制连结就可以化解移动端的调节和测量试验问题。重视阐释的是所见即所得的调试形式下会遭受的掣肘。

    当大家伸开网页,发掘贰个模块未有正确地渲染只怕空白时,假如调整台有报错,会平昔依据报错定位到源码地方上马 debug;纵然调控台未有报错,则会依据模块名大概模块特征的三个值,通过全局寻觅找到这些模块的地点,然后在调节和测量试验工具中断点,单步调节和测量检验,找到难题所在,此时大家或许会这样做:

    情形一:

    小A同学打开调节台,开掘断点调节和测验不佳写代码,于是将压缩的源码复制一份保存到地面,格式化,然后将线上能源通过代理工科具代理到地头文件。

    情形二:

    小B同学早早的为温馨配了一份本地开垦条件,于是她相见难点未来,直接去源码中固定错误位置,由于应用的是预管理语言,所以要求先打包编写翻译之后再在本地预览效果。

    情形三:

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

    cmd命令:

       ./  当前目录

       ../ 上一级

       dir  查看当前目录

       ls  查看当前目录下文件

       windows 切换盘符 d:

       cls清屏

       cd +文件加名

    ☞ 代理调试的搅扰

    而对于比较复杂的线上意况,代理也会境遇非常的多绊脚石,比如:

    线上能源 combo

    出现错误的剧本地址为  ,它对应着 a.js,b.js,c.js 四个本子文件,假使大家使用 Fiddler/查尔斯那样的经文代理工具调节和测验代码,就必得给这一个工具编写插件,只怕在轮换配置内部加一群剖断恐怕正则,开销高,门槛高。

    线上代码压缩

    装进压缩,那是上线从前的必经流程。由于大家在包装的环节中并不曾虚构为代码增添sourceMap,而线上此前对应 index-min.jsindex.js 也因为安全地方的因由给干掉了,那给咱们调节和测验代码形成了庞然大物的不方便人民群众。

    代码信赖相当多,拉替代码难题

    重重时候,咱们的页面注重了多个 asserts 财富,而那一个财富各自分布在四个货仓里面,以至传布在差异的公布平台上,为了能够在源码上清晰的调治代码,我们只可以将有着的财富下载到本地,时期若是存在下载代码的权杖难点,整个调节和测量试验进程就慢下来,这是可怜无法经受的事体。举个例子某系统创设的页面,页面上的模块都以以货仓为维度区分的,八个页面大概对应了5-46个仓库,下载代码实为劳动。

    最骇人据他们说的调解是,本地没有对号入座的测量试验意况、代理工具又不知足大家的须求,然后就不得不, 编辑代码->打包压缩->提交代码->查看效果->编辑代码->... ,假诺您的品种开荒是这种格局,请停下来,思索调节和测量试验优化方案,正所谓磨刀不误砍柴工。

    es6:

    1.let/const

    2.目的里的方法function能够轻巧

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

    4.template

    5.箭头函数

    6.扩充操作符

    7.解构赋值

    8.Symbol

    9.class 模拟类,但本质是依赖原型的

    10.for ...of

    11.promise 化解回调金字塔.回调地狱

    12.生成器函数,可以退出函数

    13.JS模块化

    ☞ 开启懒人调节和测量试验情势

    当见到线上冒出难点(恐怕是别的同学担负页面包车型大巴难题),脑中浮出这么的情况:

    复制代码 我:"嘿,线上卓殊啊!笔者要调治代码!" 计算机:"好的,主人。请问是哪位页面?"(弹出浮层) 我:浮层中输入UWranglerL。 Computer:"请问是哪位地方出难点了?" 我:(指着计算机)"模块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.导出模块/加载模块

    ☞ 化解代理境遇的难题

    地点大家关系了四个难题,常常开销境遇最头痛的三个是 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/查尔斯工具比较难满意需要,对于这些难点有八个管理方案:

    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 调节台的安装选项中看看:

    图片 1

    ☞ 代码的拉取

    如若叁个种类独有你明白哪些修改,那那一个类其余手艺设计就有一点点倒霉了,为了让大家都能处理你项目中的难点,应当要索要一个简练的情势为开拓者火速搭建测量试验遇到,文书档案是单向,要是有个一键操作的通令,那就更棒了!

    # 运营脚本 start: createFile getMod getPage # 成立目录 createFile: @[ -d module ] || mkdir module @[ -d page ] || mkdir page # 拉取模块货仓,这里有几10个,比较费时,请耐心等待... 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("该路线为文件夹");

    }

    })

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

    输入须要调剂的页面URAV4L(如 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:nodenodejs_2bc

    ☞ 小结

    优化流程、优化架构是大家尽力坚韧不拔的样子,本文重要演讲,编辑代码到调节和测验线上功用的历程,提议了缓和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"

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

    })

    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() {

    //监听端口号三千,并提醒服务成功张开

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

    本文由澳门402永利com发布于前端技术,转载请注明出处:在线调节和测验方案的考虑与试行

    关键词:

上一篇:打闹开拓,几率算法

下一篇:没有了