当前位置: 56net亚洲必嬴 > Web前端 > 正文

必赢56.net前端常见跨域解决方案(全)

时间:2019-10-30 09:00来源:Web前端
在线调节和测量试验方案的观念与实践 2015/08/28 · HTML5 ·调试 初藳出处:李靖(@Barret李靖)    本文的中央不在移动端调节和测验上,移动端调节和测量试验无非就是调治将养页面和

在线调节和测量试验方案的观念与实践

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 财富,而那个能源各自遍及在八个仓Curry面,以致散布在分化的通知平台上,为了能够在源码上清晰的调试代码,大家必须要将有所的能源下载到本地,期间就算存在下载代码的权限难题,整个调节和测量试验进程就慢下来,这是那多少个无法经得住的业务。比方某系统构建的页面,页面上的模块都以以旅社为维度区分的,一个页面大概对应了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模块化

回调函数

 

☞ 开启懒人调节和测量试验格局

当看到线上冒出难点(大概是其余同学负担页面包车型大巴难点),脑中浮出那样的风貌:

复制代码 笔者:"嘿,线上有毛病呀!笔者要调整代码!" 计算机:"好的,主人。请问是哪个页面?"(弹出浮层) 笔者:浮层中输入U福特ExplorerL。 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,然后映射到地点

自然调试之后,能够还应该有二个操作:

本身:"哈,已经修复了,帮我付出代码~" Computer:正在diff代码...收到确认提交数字信号,提交到预发情形...收到已经预览非非确定性信号...正在宣布代码...收到线上回归复信号...流程甘休

1
2
我:"哈,已经修复了,帮我提交代码~"
电脑:正在diff代码...收到确认提交信号,提交到预发环境...收到已经预览信号...正在发布代码...收到线上回归信号...流程结束

除了那几个之外 debug 代码,我们须要做的就只是用肉眼看功效是否ok,整个工艺流程优化下来,体验是相当的赞的!

NodeJS:

1.node.js费用景况搭建

2.npm nodejs包处理器

3.CommonJS模块化标准化,AMD(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,前端未有地下,压缩代码只是增添了 红客 的抨击花费,并不要紧碍有手艺的 黑客借系统漏洞侵犯。所以可认为源码提供少年老成份 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 调节台的装置选项中见到:

必赢56.net 1

☞ 代码的拉取

若是三个体系独有你驾驭什么订正,那那些类型的本领布署就有一点倒霉了,为了让大家都能管理你项目中的难题,一定要索要二个简洁的形式为开垦者火速搭建测量试验情形,文书档案是一方面,若是有个意气风发键操作的命令,那就更棒了!

# 运行脚本 start: createFile getMod getPage # 创立目录 createFile: @[ -d module ] || mkdir module @[ -d page ] || mkdir page # 拉取模块货仓,这里有几13个,相比费时,请耐性等待... 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安德拉L(如 http://www.taobao.com):

必赢56.net 2

插件会分析 DOM,遍历获得页面全数被援引到的货仓:

必赢56.net 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

事例1:http服务器回调

广义的跨域:

☞ 小结

优化流程、优化架构是大家力图百折不挠的取向,本文重要演讲,编辑代码到调节和测量检验线上效果与利益的长河,建议驾驭决combo 和代码压缩等难点的方案和建议。希望能够给不专长代理调节和测验的校友一点启发。

1 赞 收藏 评论

必赢56.net 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.) 能源跳转: A链接、重定向、表单提交

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(“笔者是别的的代码”);

2.) 能源嵌入:<link>、<script>、<img>、<frame>等dom标签,还应该有样式中background:url()、@font-face()等公事外链

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上马  服务器端错误

常用模块传授

3.) 脚本央浼: js发起的ajax央浼、dom和js对象的跨域操作等

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

同源计谋/SOP(Same origin policy)是风流倜傥种约定,由Netscape公司一九九三年引进浏览器,它是浏览器最基本也最基本的商洛功用,借使缺乏了同源战术,浏览器相当轻松境遇XSS、CSF福睿斯等攻击。所谓同源是指”公约+域名+端口”三者后生可畏致,尽管三个例外的域名指向同叁个ip地址,也非同源。

连串验证

 

  • console.log(util.isArray([]));//决断是不是为四个数组
    console.log(util.isRegExp(/d/));//决断是或不是为三个正则表明式

同源攻略约束之下三种行为:

event

 

事件概念

1.) Cookie、LocalStorage 和 IndexDB 不只怕读取

  • 事件
    * 又叫做公布订阅方式
    * 又称作观察者形式
    * 当宗旨对象发生变化时,会通报全数的观望者对象,更新本身的行动

2.) DOM 和 Js对象不只怕获取

得到事件模块

3.) AJAX 央浼不能够发送

  • var events = require(“events”).EventEmitter();//老的写法,跟上面包车型地铁写法是等价的
    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”);

 

事件

U逍客L                                      表明                    是不是同意通讯

         同意气风发域名,分裂文件或路线           允许

 

         同后生可畏域名,不一样端口                不容许

 

        同风流倜傥域名,不一致协商                分裂意

 

           域名和域名对应相近ip              差别意

 

           主域相近,子域分裂                分裂意

 

        不一样域名                         不允许

注册事件

 

  • on
  • addListener
  • once

跨域应用方案

发出事件

 

  • emit

1、 通过jsonp跨域

此外艺术

2、 document.domain + iframe跨域

安装最大的监听数据

3、 location.hash + iframe

  • girl.setMaxListeners(2);

4、 window.name + iframe跨域

移除掉单个事件

5、 postMessage跨域

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

6、 跨域能源分享(COLacrosseS)

代码:

7、 nginx代理跨域

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

8、 nodejs中间件代理跨域

buffer

9、 WebSocket共同商议跨域

buffer:缓存区,权且寄存在内部存款和储蓄器里的生机勃勃段数据

 

JavaScript 语言自己唯有字符串数据类型,未有二进制数据类型,在管理公事流时,必得使用到二进制数据,因而在 Node.js中,定义了一个 Buffer 类,该类用来成立一个特别寄存二进制数据的缓存区

一、 通过jsonp跨域

由二个八位字节贰个字节成分构成的数组,单位用16进制表示,取值范围为0-255

 

始建buffer对象的点子:

万般为了缓慢解决web服务器的负荷,大家把js、css,img等静态能源抽离到另生龙活虎台独立域名的服务器上,在html页面中再通过相应的竹签从不一致域名下加载静态财富,而被浏览器允许,基于此原理,大家能够通过动态创制script,再央求一个带参网站实现跨域通讯。

直白创建长度为12的代码

 

  • var buff = new Buffer(12);//创立长度为12的数组console.log(buff);buf1.fill(255,0);//fill(填充的值,开首地点,停止地点(未有既全体))console.log(buff);

1.)原生完结:

因此数组

 

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

<script>

    var script = document.createElement('script');

    script.type = 'text/javascript';

 

    // 传参并钦赐回调试行函数为onBack

    script.src = '';

    document.head.appendChild(script);

 

    // 回调实施函数

    function onBack(res) {

        alert(JSON.stringify(res));

    }

</script>

经过字符串

 

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

onBack({"status": true, "user": "admin"})

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

2.)jquery ajax:

fs

 

文本操作

$.ajax({

    url: '',

    type: 'get',

    dataType: 'jsonp',  // 央求情势为jsonp

    jsonpCallback: "onBack",    // 自定义回调函数名

    data: {}

});

读取文件

 

  • readFile
  • readFileSync

3.)vue.js:

写入文件

 

writeFile

this.$http.jsonp('', {

    params: {},

    jsonp: 'onBack'

}).then((res) => {

    console.log(res);

})

率先个参数为写入的文本名

 

第3个为写入写入的文书内容

后端node.js代码示例:

编辑:Web前端 本文来源:必赢56.net前端常见跨域解决方案(全)

关键词: