Skip to content

Commit 20f6fed

Browse files
xv-jiaqixv-jiaqi
committed
add jsonp demo
1 parent 14fccdd commit 20f6fed

File tree

11 files changed

+517
-0
lines changed

11 files changed

+517
-0
lines changed

‎DEMO-libs/JSONP/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# JOSNP 跨域极简实现
2+
3+
---
4+
5+
这是一个简单的JSONP示例Demo，包含一个简单的非同源服务。**未处理相关边界条件，只作简单的JSONP原理使用。**
6+
7+
- 当前服务：http://127.0.0.1:8080/
8+
- 跨域地址：http://127.0.0.1:8888/
9+
10+
## 启动
11+
12+
> 1. `yarn install` 或 `npm install`
13+
> 1. `yarn start` 或 `npm run start`
14+
15+
![JSONP](./JSONP.png)
16+
17+
**注**：跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截。

‎DEMO-libs/JSONP/client/http.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* http请求
3+
* @param {*} url
4+
* @param {*} opts
5+
*/
6+
export function http(url, ...opts) {
7+
if (!url) return;
8+
9+
if (opts.length) return jsonp(url, ...opts);
10+
11+
if ('fetch' in window) {
12+
return fetch(url)
13+
.then(res => res.json())
14+
.then(res => res)
15+
.catch(err => err);
16+
}
17+
};
18+
19+
/**
20+
* jsonp
21+
* @param {*} url
22+
* @param {*} callback
23+
*/
24+
function jsonp(url, successFn, errorFn) {
25+
const cbName = `cb_${new Date().getTime()}`;
26+
27+
// 创建script标签
28+
const script = createScript(`${url}?callback=${cbName}`);
29+
30+
// 挂载全局方法，数据请求回调执行
31+
window[cbName] = res => {
32+
successFn(res);
33+
// window[cbName] = null;
34+
};
35+
36+
document.querySelector('head').appendChild(script);
37+
}
38+
39+
/**
40+
* create script node
41+
* @param {*} url
42+
*/
43+
function createScript(url) {
44+
const node = document.createElement('script');
45+
node.setAttribute('src', url);
46+
return node;
47+
}

‎DEMO-libs/JSONP/index.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
</head>
10+
11+
<body>
12+
<h2>JSONP跨域</h2>
13+
<p>当前网页域是：
14+
<a href="http://127.0.0.1:8080">http://127.0.0.1:8080</a>
15+
</p>
16+
<hr>
17+
<button class="btn1">当前域 http://127.0.0.1:8080/server/test.json </button>
18+
<br>
19+
<br>
20+
<button class="btn2">跨域 http://127.0.0.1:8888 </button>
21+
<br>
22+
<br>
23+
<button class="btn3">JOSNP http://127.0.0.1:8888</button>
24+
</body>
25+
<script type="module">
26+
import { http } from './client/http.js';
27+
28+
if (/localhost/.test(location.href)) {
29+
location.href = 'http://127.0.0.1:8080';
30+
}
31+
32+
const btn1 = document.querySelector('button.btn1'),
33+
btn2 = document.querySelector('button.btn2'),
34+
btn3 = document.querySelector('button.btn3');
35+
36+
// 同源资源
37+
btn1.addEventListener('click', async () => {
38+
const data = await http('http://127.0.0.1:8080/server/test.json');
39+
console.log('同源：', data);
40+
});
41+
42+
// 跨域资源
43+
btn2.addEventListener('click', async () => {
44+
const data = await http('http://127.0.0.1:8888');
45+
console.log('跨域：', data);
46+
});
47+
48+
// JSONP
49+
btn3.addEventListener('click', async () => {
50+
await http('http://127.0.0.1:8888', res => console.log('JSONP：', res));
51+
});
52+
</script>
53+
54+
</html>

‎DEMO-libs/JSONP/lib/JSONP.png

523 KB
Loading

‎DEMO-libs/JSONP/package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "jsonp",
3+
"version": "1.0.0",
4+
"description": "JSONP 跨域",
5+
"main": "client.html",
6+
"scripts": {
7+
"start": "http-server -p 8080 & node ./server/server.js"
8+
},
9+
"keywords": [
10+
"JSONP",
11+
"Cross-origin"
12+
],
13+
"author": "kkxujq@163.com",
14+
"license": "MIT",
15+
"dependencies": {
16+
"http-server": "^0.11.1"
17+
}
18+
}

‎DEMO-libs/JSONP/server/server.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const { createServer } = require('http');
2+
const { parse } = require('url');
3+
4+
createServer((request, response) => {
5+
console.log('🚦', new Date(),request.url);
6+
7+
const { callback } = parse(request.url, true).query;
8+
9+
const test = "来自 http://127.0.0.1:8888 域的资源";
10+
const data = JSON.stringify({test});
11+
12+
if (callback) {
13+
response.end(`${callback}(${data})`)
14+
} else {
15+
response.end(data);
16+
}
17+
}).listen(8888, () => console.log('🤪 server is listen on 8888 ...\n'));
18+

‎DEMO-libs/JSONP/server/test.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"test": "来自 http://127.0.0.1:8080 域的资源"
3+
}

‎DEMO-libs/JSONP/yarn.lock

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+
5+
async@^1.5.2:
6+
version "1.5.2"
7+
resolved "http://registry.npm.taobao.org/async/download/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
8+
9+
colors@1.0.3:
10+
version "1.0.3"
11+
resolved "http://registry.npm.taobao.org/colors/download/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
12+
13+
corser@~2.0.0:
14+
version "2.0.1"
15+
resolved "http://registry.npm.taobao.org/corser/download/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87"
16+
17+
debug@^2.2.0:
18+
version "2.6.9"
19+
resolved "http://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
20+
dependencies:
21+
ms "2.0.0"
22+
23+
debug@^3.1.0:
24+
version "3.1.0"
25+
resolved "http://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
26+
dependencies:
27+
ms "2.0.0"
28+
29+
ecstatic@^3.0.0:
30+
version "3.2.1"
31+
resolved "http://registry.npm.taobao.org/ecstatic/download/ecstatic-3.2.1.tgz#1196a74d63d71d28dea807ed2b6183062671a206"
32+
dependencies:
33+
he "^1.1.1"
34+
mime "^1.6.0"
35+
minimist "^1.1.0"
36+
url-join "^2.0.5"
37+
38+
eventemitter3@^3.0.0:
39+
version "3.1.0"
40+
resolved "http://registry.npm.taobao.org/eventemitter3/download/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
41+
42+
follow-redirects@^1.0.0:
43+
version "1.5.1"
44+
resolved "http://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.1.tgz#67a8f14f5a1f67f962c2c46469c79eaec0a90291"
45+
dependencies:
46+
debug "^3.1.0"
47+
48+
he@^1.1.1:
49+
version "1.1.1"
50+
resolved "http://registry.npm.taobao.org/he/download/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
51+
52+
http-proxy@^1.8.1:
53+
version "1.17.0"
54+
resolved "http://registry.npm.taobao.org/http-proxy/download/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
55+
dependencies:
56+
eventemitter3 "^3.0.0"
57+
follow-redirects "^1.0.0"
58+
requires-port "^1.0.0"
59+
60+
http-server@^0.11.1:
61+
version "0.11.1"
62+
resolved "http://registry.npm.taobao.org/http-server/download/http-server-0.11.1.tgz#2302a56a6ffef7f9abea0147d838a5e9b6b6a79b"
63+
dependencies:
64+
colors "1.0.3"
65+
corser "~2.0.0"
66+
ecstatic "^3.0.0"
67+
http-proxy "^1.8.1"
68+
opener "~1.4.0"
69+
optimist "0.6.x"
70+
portfinder "^1.0.13"
71+
union "~0.4.3"
72+
73+
mime@^1.6.0:
74+
version "1.6.0"
75+
resolved "http://registry.npm.taobao.org/mime/download/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
76+
77+
minimist@0.0.8:
78+
version "0.0.8"
79+
resolved "http://registry.npm.taobao.org/minimist/download/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
80+
81+
minimist@^1.1.0:
82+
version "1.2.0"
83+
resolved "http://registry.npm.taobao.org/minimist/download/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
84+
85+
minimist@~0.0.1:
86+
version "0.0.10"
87+
resolved "http://registry.npm.taobao.org/minimist/download/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
88+
89+
mkdirp@0.5.x:
90+
version "0.5.1"
91+
resolved "http://registry.npm.taobao.org/mkdirp/download/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
92+
dependencies:
93+
minimist "0.0.8"
94+
95+
ms@2.0.0:
96+
version "2.0.0"
97+
resolved "http://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
98+
99+
opener@~1.4.0:
100+
version "1.4.3"
101+
resolved "http://registry.npm.taobao.org/opener/download/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
102+
103+
optimist@0.6.x:
104+
version "0.6.1"
105+
resolved "http://registry.npm.taobao.org/optimist/download/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
106+
dependencies:
107+
minimist "~0.0.1"
108+
wordwrap "~0.0.2"
109+
110+
portfinder@^1.0.13:
111+
version "1.0.13"
112+
resolved "http://registry.npm.taobao.org/portfinder/download/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
113+
dependencies:
114+
async "^1.5.2"
115+
debug "^2.2.0"
116+
mkdirp "0.5.x"
117+
118+
qs@~2.3.3:
119+
version "2.3.3"
120+
resolved "http://registry.npm.taobao.org/qs/download/qs-2.3.3.tgz#e9e85adbe75da0bbe4c8e0476a086290f863b404"
121+
122+
requires-port@^1.0.0:
123+
version "1.0.0"
124+
resolved "http://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
125+
126+
union@~0.4.3:
127+
version "0.4.6"
128+
resolved "http://registry.npm.taobao.org/union/download/union-0.4.6.tgz#198fbdaeba254e788b0efcb630bc11f24a2959e0"
129+
dependencies:
130+
qs "~2.3.3"
131+
132+
url-join@^2.0.5:
133+
version "2.0.5"
134+
resolved "http://registry.npm.taobao.org/url-join/download/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
135+
136+
wordwrap@~0.0.2:
137+
version "0.0.3"
138+
resolved "http://registry.npm.taobao.org/wordwrap/download/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"

‎DEMO-libs/layout/README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# 页面布局
2+
3+
[TOC]
4+
5+
---
6+
7+
## 浮动 float
8+
9+
### 优点
10+
11+
- 兼容性好
12+
13+
### 缺点
14+
15+
- 清除浮动
16+
- 影响周边元素
17+
18+
## 定位
19+
20+
### 优点
21+
22+
- 快捷方便
23+
24+
### 缺点
25+
26+
- 脱离文档流
27+
28+
## flex
29+
30+
### 优点
31+
32+
- 移动端兼容性好，表现优异
33+
34+
### 缺点
35+
36+
- 部分桌面产品还未支持到
37+
38+
## table
39+
40+
### 优点
41+
42+
- 兼容性好
43+
44+
### 缺点
45+
46+
- 容易引起重排reflow
47+
48+
## 栅格grid
49+
50+
### 优点
51+
52+
- 标准化的栅格方案
53+
54+
### 缺点
55+
56+
- 兼容性

0 commit comments

Comments
 (0)