图片 5

在线调节和测量试验方案的构思与施行

2015/08/28 · HTML5 ·
调试

初藳出处:
李靖(@Barret李靖)   

正文的要领不在移动端调节和测验上,移动端调节和测量试验无非便是调治将养页面和疗养工具之间存在分离,死灭这种分离并创设连结就会消除移动端的调节和测量检验难题。重视阐释的是所见即所得的调节和测量检验情势下会境遇的阻拦。

当大家开发网页,发掘贰个模块未有科学地渲染恐怕空白时,假若调控台有报错,会直接依据报错定位到源码地方上马
debug;若是调节台未有报错,则会基于模块名只怕模块特征的贰个值,通过全局找寻找到这一个模块之处,然后在调整工具中断点,单步调节和测量试验,找到难点所在,那个时候大家恐怕会如此做:

情形一:

小A同学展开调节台,开采断点调节和测量试验不佳写代码,于是将回降的源码复制后生可畏份保存到地点,格式化,然后将线上财富通过代理工科具代理到地头文件。

情形二:

小B同学早早的为和睦配了意气风发份本地开垦碰着,于是她境遇难题之后,直接去源码中一定错误地点,由于使用的是预管理语言,所以须要先打包编写翻译之后再在地点预览效果。

情形三:

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

cmd命令:

   ./  当前目录

   ../ 上一级

   dir  查看当前目录

   ls  查看当前目录下文件

   windows 切换盘符 d:

   cls清屏

   cd +文件加名

在上生机勃勃篇里成功安装了gulp到项目中,以往来测量检验一下gulp的联合与裁减功效

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模块化

gulp入坑种类(1卡塔尔国——安装gulp(传送门):

回调函数

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

当看到线上边世难题(恐怕是别的同学负担页面包车型客车主题素材),脑中浮出如此的情形:

复制代码 小编:”嘿,线上不不奇怪呀!笔者要调整代码!”
Computer:”好的,主人。请问是哪个页面?”(弹出浮层) 作者:浮层中输入URubiconL。
计算机:”请问是哪些地点出难题了?” 笔者:(指着计算机)”模块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,然后映射到地面

自然调节和测量试验之后,能够还会有二个操作:

本身:”哈,已经修复了,帮小编付出代码~”
Computer:正在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卡塔尔(英语:State of Qatar). 浏览器央求全体代理到地头的四个服务

先是写多个本地服务:

JavaScript

var http = require(‘http’卡塔尔(قطر‎; // npm i http-proxy –save var httpProxy =
require(‘http-proxy’卡塔尔; var proxy = httpProxy.createProxyServer({}卡塔尔(英语:State of Qatar); 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(卡塔尔(英语:State of Qatar){ 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卡塔尔(英语:State of Qatar). 使用本地服务央求 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 #
拉取模块货仓,这里有几11个,相比较费时,请意志等待… 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模块(读写文件卡塔尔(英语:State of Qatar)

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(“写入成功”卡塔尔(英语:State of Qatar);

})

console.log(“write”);

//同步写入文件

fs.writeFileSync(“./test.txt”, “This is test content~~~”);

console.log(“write”);

查阅路径音讯stat:fs.stat(path, (err, stat卡塔尔 => {}卡塔尔(英语:State of Qatar)

fs.stat(“./test”, (err, stat) => {

if(err) throw err;

console.log(stat);

if(stat.isFile()) {

console.log(“该路径为文件”卡塔尔国;

}else if (stat.isDirectory()) {

console.log(“该路径为文件夹”卡塔尔;

}

})

在事情未发生前构建的类型中写入,在根目录新建js文件夹,并在文件夹中新建三个js文件,代码如下:

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

☞ 在线调节和测量检验实践(八个系统的调节和测量检验工具卡塔尔(英语:State of Qatar)

输入需求调养的页面UCRUISERL(如
http://www.taobao.com):

图片 2

插件会剖析 DOM,遍历拿到页面全数被援用到的仓库:

图片 3

挑选供给调理的模块(颗粒度细分到了html/js/css),点击调节和测量检验按键,能够看来调节和测量试验页面包车型客车能源都会援用本地下载的文本。

path模块

var path = require(“path”卡塔尔(قطر‎; //加载模块

path.dirname(url卡塔尔 获取目录名

path.extname(url卡塔尔国获取后缀名

path.join([…paths]卡塔尔(英语:State of Qatar) 拼接路径

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

index.js:

事例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”

  1. var index={};  
  2. index={  
  3.     test:function(argument){  
  4.         console.log(‘test’);  
  5.     }  
  6. }  
  7. index.test();  
  • 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”);

})

main.js:

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

})

  1. var main = {};  
  2. main.test=function(argument){  
  3.     console.log(“main test”);  
  4. }  
  5. main.test();  
  • 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(“笔者是别的的代码”卡塔尔(英语:State of Qatar);

http协议:

HyperText Transport Protocol)是超文本传输合同的缩写.

http诉求:get/post/put/delete(get在地址栏,传输速度快,大小有节制.在头,只好传输一些文本;post加密传输,在正文卡塔尔(英语:State of Qatar)

能够倡导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卡塔尔(英语:State of Qatar),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卡塔尔(英语:State of Qatar); //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:中间件和路由.

在根目录新建文件夹build,并在build里新建三个空的js文件:all.min.js

福衢寿车三番五次

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

在根目录下新建index.html ,在里头援用build下的all.min.js。

例子

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

index.html:

  • 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就能够固然退换代码

  1. <script type=”text/javascript” src=”build/all.min.js”></script>  

输出对象

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

接下去编辑gulpfile.js文件,来告诉gulp大家要把index.js,main.js合併起来压缩再写入all.min.js中

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

 

花色验证

gulpfile.js:

  • console.log(util.isArray([]卡塔尔(قطر‎卡塔尔国;//决断是还是不是为二个数组
    console.log(util.isRegExp(/\d/卡塔尔卡塔尔(قطر‎;//决断是或不是为八个正则表达式
  1. var gulp = require(‘gulp’);//gulp自身  
  2. var uglify= require(‘gulp-uglify’卡塔尔(قطر‎;//<span style=”font-family: Arial, Helvetica, sans-serif;”>引入压缩组件</span>  
  3. var concat = require(‘gulp-concat’卡塔尔(قطر‎;//<span style=”font-family: Arial, Helvetica, sans-serif;”>引进合併建设布局</span>  
  4.   
  5. var paths = {  
  6.     scripts:[‘js/index.js’,’js/main.js’]  
  7. } //定义要操作的文书路径  
  8.   
  9.   
  10. gulp.task(‘default’, function() {   
  11.   gulp.src(paths.script卡塔尔(英语:State of Qatar)//找到项目下paths变量所定义的script文件  
  12.   .pipe(uglify())//压缩  
  13.   .pipe(concat(‘all.min.js’))//输入到all.min.js中  
  14.   .pipe(gulp.dest(‘build’卡塔尔(英语:State of Qatar)卡塔尔(英语:State of Qatar);//钦赐目录  
  15. });  

event

 

事件概念

 

  • 事件
    * 又称之为发表订阅形式
    * 又称为观察者情势
    * 当大旨对象产生变化时,会打招呼全体的观察者对象,更新自身的行路

tips:gulp的试行流程选拔了流式操作,每三个pipe(卡塔尔能够知晓成,上叁个操作的出口,就是下一个操作的输入,举例uglify(卡塔尔国压缩后输出的,正是concat要输入到文件中的,而concat输出的公文,是gulp.dest要参预的目录中的,能够领略成每部操作都return了下一步要运用的东西。

获得事件模块

 

  • var events = require(“events”卡塔尔国.EventEmitter(卡塔尔(قطر‎;//老的写法,跟下边的写法是等价的
    var events = require(“events”);

末尾目录布局如下:

例子:

图片 5

  • 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”卡塔尔(英语:State of Qatar);//发射事件
    girl.emit(“die”);

接下去就足以在命令行工具中cd到花色的根目录中施行gulp指令了。

事件

此时或者会并发 Cannot find module
‘gulp-uglify’那样的报错,是因为gulpfile所require的gulp-uglify和gulp-concat插件并不设有,所以能够动用npm在品种中装入就能够:

挂号事件

npm install –save-dev gulp-uglify    回车

  • on
  • addListener
  • once

**npm install –save-dev gulp-concat   回车
**

发出事件

 

  • emit
admin

相关文章

发表评论

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