update
This commit is contained in:
parent
6e45a9a8fa
commit
749ad08c64
8
20200519/20200519.md
Normal file
8
20200519/20200519.md
Normal file
@ -0,0 +1,8 @@
|
||||
# oop 面向对象的编程思想
|
||||
|
||||
第一步；创建一个对象
|
||||
1. 初始化
|
||||
2. 绑定事件操作
|
||||
3. 把数据渲染到页面中
|
||||
|
||||
|
||||
106
20200519/index.html
Normal file
106
20200519/index.html
Normal file
@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>tab选项卡</title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.warp {
|
||||
width: 900px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.warp .tab-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.warp .tab-header li {
|
||||
width: 300px;
|
||||
border: 1px solid #000;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.warp .tab-header .active {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.warp .tab-panel li {
|
||||
display: none;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.warp .tab-panel .active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="warp">
|
||||
<ul class="tab-header">
|
||||
<li class="active">tab1</li>
|
||||
<li>tab2</li>
|
||||
<li>tab3</li>
|
||||
</ul>
|
||||
<ul class="tab-panel">
|
||||
<li class="active">内容1</li>
|
||||
<li>内容2</li>
|
||||
<li>内容3</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
var Tab = {
|
||||
init: function () {
|
||||
this.warp = document.querySelector('.warp .tab-header');
|
||||
console.log(this.warp)
|
||||
this.tab_header = document.querySelectorAll('.tab-header > li')
|
||||
console.log(this.tab_header)
|
||||
this.tab_panel = document.querySelectorAll('.warp .tab-panel > li')
|
||||
console.log(this.tab_panel)
|
||||
this.bind()
|
||||
},
|
||||
bind: function () {
|
||||
this.warp.addEventListener('click', function (e) {
|
||||
// e 真正产生事件的源对象
|
||||
// 使用父元素做代理，利用冒泡，只绑定一个事件处理三个点击
|
||||
var target = e.target
|
||||
console.log(target.nodeName)
|
||||
if (target.nodeName === 'LI') {
|
||||
console.log(this.tab_header)
|
||||
for (var i = 0; i < this.tab_header.length; i++) {
|
||||
this.tab_header[i].classList.remove('active')
|
||||
this.tab_panel[i].classList.remove('active')
|
||||
}
|
||||
target.classList.add('active')
|
||||
var index = [].indexOf.call(this.tab_header, target)
|
||||
this.tab_panel[index].classList.add('active')
|
||||
}
|
||||
console.log(this.tab_header)
|
||||
}.bind(this))
|
||||
}
|
||||
}
|
||||
Tab.init()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
150
Miscellaneous/boom.html
Normal file
150
Miscellaneous/boom.html
Normal file
@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>节拍器</title>
|
||||
<style>
|
||||
*{padding: 0;margin: 0;}
|
||||
header{background-image: linear-gradient(to bottom,#4387fd,#4683ea);padding: 20px;font-size: 30px;color: #fff;}
|
||||
footer{padding: 20px;text-align: center;color: #ccc;}
|
||||
footer>a{color: #999;}
|
||||
body>section{text-align: center;padding: 20px;width: 300px;margin: auto;}
|
||||
body>section>section{margin: 30px auto;}
|
||||
body>section>section>div{display: flex;justify-content:space-between;align-items: center;}
|
||||
button {padding: 5px 10px;}
|
||||
#btnTest {padding: 15px 30px;font-size: 20px;}
|
||||
#btnStop {display: none;}
|
||||
#speed{font-size: 50px;padding:0 20px;width: 100px;}
|
||||
#msg{height: 20px;padding-top: 5px; font-size: 9px;color: gray;}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
let speed = 60, //节拍速度
|
||||
arrClick = [], //测速时每次点击的速度组成的数组，节拍速度取其平均值
|
||||
clickTime = 0, //测速点击计时器，超过 3 秒清空数组
|
||||
s = Date.now(), //记录每一次点击的时间，下一次点击时与此时间的间隔，来计算速度
|
||||
time = 0, //play 过程 timeout 变量
|
||||
isPlay = false, //是否正在播放
|
||||
speedMsg = document.getElementById("speed"), //页面正中间显示速度值的元素
|
||||
rangeValue = document.getElementById("rangeValue"), //滑块元素
|
||||
showSpeed = () => rangeValue.value = speedMsg.innerText = speed; //更新显示速度值的函数
|
||||
|
||||
/** 测速按钮点击 */
|
||||
document.getElementById("btnTest").addEventListener("click", function () {
|
||||
let lastSpeed = Math.floor(60000 / (Date.now() - s));
|
||||
if (lastSpeed - arrClick[arrClick.length - 1] > 30) { arrClick = []; } //如果点击时间和上次差别较大，则清零重测
|
||||
arrClick.push(lastSpeed);
|
||||
|
||||
if (arrClick.length > 31) arrClick.shift(); //最大容量保持在30个（除去第 1 个不用）
|
||||
|
||||
//如果数量多于1个则计算速度（第 1 个时间间隔太久，不准确，弃之）
|
||||
if (arrClick.length > 1) {
|
||||
//取第2个到最后的平均值
|
||||
speed = Math.ceil((arrClick.reduce((sum, n) => sum + n) - arrClick[0]) / (arrClick.length - 1));
|
||||
if (arrClick.length > 5) document.getElementById("msg").innerText = "多点几次更准确...";
|
||||
}
|
||||
showSpeed();
|
||||
s = Date.now();
|
||||
document.getElementById("btnStop").click(); //测速时停止播放
|
||||
|
||||
//两次点击间隔大于 3 秒就重置
|
||||
window.clearTimeout(clickTime);
|
||||
clickTime = window.setTimeout(function () {
|
||||
arrClick = [];
|
||||
document.getElementById("msg").innerText = "";
|
||||
}, 3000);
|
||||
|
||||
});
|
||||
|
||||
/** 播放按钮点击 */
|
||||
document.getElementById("btnPlay").addEventListener("click", function () {
|
||||
isPlay = true;
|
||||
play();
|
||||
this.style.display = "none";
|
||||
document.getElementById("btnStop").style.display = "inline-block";
|
||||
});
|
||||
|
||||
/** 停止按钮点击 */
|
||||
document.getElementById("btnStop").addEventListener("click", function () {
|
||||
window.clearTimeout(time);
|
||||
isPlay = false;
|
||||
this.style.display = "none";
|
||||
document.getElementById("btnPlay").style.display = "inline-block";
|
||||
});
|
||||
|
||||
/** 减号按钮点击 */
|
||||
document.getElementById("btnSub").addEventListener("click", function () {
|
||||
speed--;
|
||||
showSpeed();
|
||||
});
|
||||
|
||||
/** 加号按钮点击 */
|
||||
document.getElementById("btnAdd").addEventListener("click", function () {
|
||||
speed++;
|
||||
showSpeed();
|
||||
});
|
||||
|
||||
/** 滑动条更改 */
|
||||
rangeValue.addEventListener("change", function () {
|
||||
speed = this.value * 1;
|
||||
showSpeed();
|
||||
});
|
||||
|
||||
/** 播放 */
|
||||
let play = () => {
|
||||
window.clearTimeout(time);
|
||||
playsound();
|
||||
if (isPlay) {
|
||||
time = window.setTimeout(play, Math.floor(60000 / speed));
|
||||
};
|
||||
}
|
||||
|
||||
let audioCtx = new AudioContext();
|
||||
/** 发声 */
|
||||
let playsound = () => {
|
||||
let oscillator = audioCtx.createOscillator();
|
||||
let gainNode = audioCtx.createGain();
|
||||
oscillator.connect(gainNode);
|
||||
gainNode.connect(audioCtx.destination);
|
||||
oscillator.type = 'sine';
|
||||
oscillator.frequency.setValueAtTime(220, audioCtx.currentTime);
|
||||
oscillator.frequency.linearRampToValueAtTime(50, audioCtx.currentTime + 0.1);
|
||||
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
|
||||
gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
|
||||
gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);
|
||||
oscillator.start(audioCtx.currentTime);
|
||||
oscillator.stop(audioCtx.currentTime + 0.5);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>节拍器</header>
|
||||
<section>
|
||||
<button id="btnTest">连续点击测速</button>
|
||||
<div id="msg"></div>
|
||||
<section>
|
||||
<div>
|
||||
<button id="btnSub"><svg style="width: 16px; height: 16px;vertical-align: middle;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M66.462276 431.621065l891.075447 0 0 127.296492L66.462276 558.917558 66.462276 431.621065z"></path></svg></button>
|
||||
<div id="speed">60</div>
|
||||
<button id="btnAdd"><svg style="width: 16px; height: 16px;vertical-align: middle;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1024 448H576V0H448v448H0v128h448v448h128V576h448z"></path></svg></button>
|
||||
</div>
|
||||
<div><input type="range" style="width:100%;" min="20" max="300" id="rangeValue" value="60"></div>
|
||||
</section>
|
||||
<button id="btnPlay">
|
||||
<svg style="width: 32px; height: 32px;vertical-align: middle;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M196.394461 103.235223 196.394461 920.764777 827.604516 535.079648Z"></path></svg>
|
||||
</button>
|
||||
<button id="btnStop">
|
||||
<svg style="width: 32px; height: 32px;vertical-align: middle;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M256 256l512 0 0 512-512 0z"></path></svg>
|
||||
</button>
|
||||
</section>
|
||||
<footer>2018-02-05 by <a href="mailto://zk1218@gmail.com">zhangkai</a></footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -46,4 +46,8 @@
|
||||
* 其他信息
|
||||
* vue写一个先
|
||||
* 然后用flutter写一个
|
||||
* 然后用react native 写一个
|
||||
* 然后用react native 写一个
|
||||
|
||||
db.admin.insert({id: '170521328, name:'赵英博', mail:'zhaoyingbo@live.cn', openid: '10aeff'})
|
||||
|
||||
docker run -it --name python -v /root/data/tracer/db:/data --network=lacus python:3.7-alpine /bin/sh
|
||||
6
Miscellaneous/japan.md
Normal file
6
Miscellaneous/japan.md
Normal file
@ -0,0 +1,6 @@
|
||||
ha ji mei ma xi dei, ya ma da xio dei si
|
||||
ha ji mei ma xi dei, li nan dei si
|
||||
ko lei wa ni hong no o mi ya gei dei si, dou zou
|
||||
a li ga tou gou za yi ma si,
|
||||
ko lei ka la, ya lo xi ku ou ni gai i xi ma si
|
||||
ko qi la ko so, dou zou, ku lu ma wa a qi la dei si
|
||||
@ -217,7 +217,7 @@
|
||||
* 混入模式可以模拟类的复制行为，但是会产生丑陋并且脆弱的语法。
|
||||
* 而且对象（函数）只能复制引用，无法复制被引用的对象或者函数本身，所以在js中模拟类是得不偿失的，虽然可以解决当前的问题，但是可能会留下更多的隐患
|
||||
* 原型
|
||||
* `Object.create(...)`创建一个对象并将其`prototype`关联到指定对象
|
||||
* `Object.create(...)`创建一个对象并将其`prototype`关联到传入的对象
|
||||
* 所有对象的`prototype`最终都指向了内置的`Object.prototype`其中包含类如`.toString();.valueOf()`之类的方法
|
||||
* 分析：如果foo不直接存在于obj上而是存在于原型链上层时会出现的三种情况
|
||||
* 如果上层的foo是普通的数据访问属性，并且没有被标记为只读，那就会在对象上直接创建foo属性，它是遮蔽属性
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
* 比较
|
||||
* 如果两边任意一边出现 `true` 或者 `false` 使用 ===
|
||||
* 如果两边任意一边可能是特定值`0,"", []` 使用 ===
|
||||
* 剩下的所有情况，使用 ==
|
||||
* 对于引用类型来说，比较仅仅是比较其引用是否是同一个，另外在和字符串比较时，数组会自动转成字符串
|
||||
* 剩下的所有情况,使用 ==
|
||||
* 对于引用类型来说,比较仅仅是比较其引用是否是同一个,另外在和字符串比较时,数组会自动转成字符串
|
||||
```js
|
||||
var a = [1,2,3]
|
||||
var b = [1,2,3]
|
||||
@ -28,28 +28,28 @@
|
||||
```
|
||||
|
||||
## ES6
|
||||
* let 尽量将变量声明放在代码块开始，避免在(Temproal Dead Zone, TDZ)临时死亡区使用而报错
|
||||
* 尽量使用for...let，在每次循环中都会声明一个新的变量，生成了一个闭包。避免for里边的函数在调用的时候引用不到正确的变量。
|
||||
* const声明，相对于保护其中的内容更注重其语意所带来的规范性
|
||||
* 如果把方法定义在{}内，那么在块外执行会报ReferenceError
|
||||
* spread/rest`...`放在数组前用于展开数组，放在变量前就是收集变量到一个数组里，例如 `function a(...arg){} a(a,b,c) -> arg = [a,b,c]`
|
||||
* let 尽量将变量声明放在代码块开始,避免在(Temproal Dead Zone, TDZ)临时死亡区使用而报错
|
||||
* 尽量使用for...let,在每次循环中都会声明一个新的变量,生成了一个闭包。避免for里边的函数在调用的时候引用不到正确的变量。
|
||||
* const声明,相对于保护其中的内容更注重其语意所带来的规范性
|
||||
* 如果把方法定义在{}内,那么在块外执行会报ReferenceError
|
||||
* spread/rest`...`放在数组前用于展开数组,放在变量前就是收集变量到一个数组里,例如 `function a(...arg){} a(a,b,c) -> arg = [a,b,c]`
|
||||
* 解构 `var [a, b, c] = foo()` 如果foo返回的是一个长度为三的数组其内容将会被依次赋值给abc
|
||||
* 对象属性复制模式`var {a, b, c} = foo()`这里省略的其实是`a:, b:, c:`，对象的属性名要和函数返回的属性名相同，然后将值一一赋值给属性值`var {a: x, b: y, c: z} = foo()`最后使用的是`xyz`而不是`abc`
|
||||
* 对于这个形式，如果省略声明符就需要用小括号括起来`({a, b, c} = foo())`
|
||||
* 对象属性复制模式`var {a, b, c} = foo()`这里省略的其实是`a:, b:, c:`,对象的属性名要和函数返回的属性名相同,然后将值一一赋值给属性值`var {a: x, b: y, c: z} = foo()`最后使用的是`xyz`而不是`abc`
|
||||
* 对于这个形式,如果省略声明符就需要用小括号括起来`({a, b, c} = foo())`
|
||||
* 对象属性名的计算属性`var which = 'w'; o1 = {which: 'w'}; => {which: 'w'} o2 = {[which]: 'w'}; => {w: 'w'}`使用中括号即可
|
||||
* 简单的交换两个元素`[a, b] = [b, a]`'
|
||||
* 允许出现多次列出同一个源属性`{a: {x: X, x: Y}, a} = {a: {x: 1}} => X == X == 1, a = {x :1}`
|
||||
* 不必都写在一行里，解构的目的不是为了打字更少，而是为了可读性更强
|
||||
* 允许出现多次列出同一个源属性`{a: {x: X, x: Y}, a} = {a: {x: 1}} => X == Y == 1, a = {x :1}`
|
||||
* 不必都写在一行里,解构的目的不是为了打字更少,而是为了可读性更强
|
||||
* 赋值的时候用不到的东西可以抛弃`[,a,b] = [1, 2, 3] => a = 2, b = 3`
|
||||
* 赋值的时候多余的东西会赋值undefined`[a, b] = [1] => a = 1, b = undefined`
|
||||
* 赋值的时候可以使用spread/rest`...`进行收集操作`[...a,b] = [1, 2, 3] => a = [1, 2], b = 3`
|
||||
* 赋值的时候可以使用默认值`{a, b: WW = 20} = {a: 10} => a = 10, WW = 20`
|
||||
* 赋值的时候可以嵌套结构
|
||||
* 在形参中使用这个就接近了命名参数，得到了任意位置的可选参数功能，设置默认参数`{x = 10} = {}`
|
||||
* 在形参中使用这个就接近了命名参数,得到了任意位置的可选参数功能,设置默认参数`{x = 10} = {}`
|
||||
* 对象字面量扩展
|
||||
* 简洁属性`{x}`
|
||||
* 简洁方法`{x(){}}`
|
||||
* 这个操作会生成一个匿名的函数，如果需要递归请不要使用
|
||||
* 这个操作会生成一个匿名的函数,如果需要递归请不要使用
|
||||
* 模板字面量``...${foo(`${name}s`)}``
|
||||
```js
|
||||
function foo(strings, ...args) {
|
||||
@ -60,10 +60,10 @@
|
||||
foo`Every thing is ${desc}!`
|
||||
// ["Every this is ", "!"]
|
||||
// ["awesome"]
|
||||
// 配合Strng.resuce可以用来处理字符串
|
||||
// 配合String.reduce可以用来处理字符串
|
||||
```
|
||||
* 箭头函数
|
||||
* 合理使用，函数越短越适合用，函数长了反而会使函数边界模糊
|
||||
* 合理使用,函数越短越适合用,函数长了反而会使函数边界模糊
|
||||
* 主要的功能是为了this的规范化而不是减少代码量
|
||||
* 尽可能减少非必要情况下的箭头函数使用
|
||||
* for...of循环
|
||||
@ -74,10 +74,10 @@
|
||||
* 正则匹配
|
||||
* 定点标识
|
||||
* `re = /d/ re.lastIndex`
|
||||
* 定点定位`/f../y`会从lastIndex开始搜索，不会更新lastIndex
|
||||
* 定点定位`/f../y`会从lastIndex开始搜索,不会更新lastIndex
|
||||
* g模式使用exec 会更新lastIndex
|
||||
* ^ 总是指向输入起始处的锚点，不受lastIndex的影响
|
||||
* y 加上 ^ 加上lastIndex > 0 是一个不兼容的组合，总是会导致失败
|
||||
* ^ 总是指向输入起始处的锚点,不受lastIndex的影响
|
||||
* y 加上 ^ 加上lastIndex > 0 是一个不兼容的组合,总是会导致失败
|
||||
* flags
|
||||
* `re = /foo/ig re.flags => gi`查看应用的哪些标识
|
||||
* 顺序总是`gimuy`
|
||||
@ -100,13 +100,13 @@
|
||||
* 使用typeof识别
|
||||
* 获取全局符号（如果全局不存在则新建一个放在全局）`Symbol.for("exec.name")`
|
||||
* 通过符号获取字符串`Symbol.keyFor(sym)`
|
||||
* 设置为对象的属性之后不可枚举，但是可以通过`Object.getOwnPropertySymbols(sym)`获取
|
||||
* 设置为对象的属性之后不可枚举,但是可以通过`Object.getOwnPropertySymbols(sym)`获取
|
||||
* 迭代器
|
||||
* 可以用来满足消费者生产者模型
|
||||
* 必须拥有一个next()
|
||||
* 可选return()用于消费者向生产者发送所有消费过程完成的信号，生产者应进行销毁程序
|
||||
* 可选throw()用于向生产者发送错误信号，终止生产
|
||||
* for of 可以消费迭代器，使用break退出会触发return
|
||||
* 可选return()用于消费者向生产者发送所有消费过程完成的信号,生产者应进行销毁程序
|
||||
* 可选throw()用于向生产者发送错误信号,终止生产
|
||||
* for of 可以消费迭代器,使用break退出会触发return
|
||||
* 通过rest/gather运算符可以消耗迭代器`it = arr[Symbol.iterator]() var [x, y] = it; var [z, ...w] = it;` it最终会被消耗光
|
||||
* 生成器
|
||||
* `function *foo() {yield 1;} it = foo() it.next() // value 1 ` next里边的参数会替换掉 yield后边的东西
|
||||
@ -134,15 +134,15 @@
|
||||
```js
|
||||
var a = 1
|
||||
export { a as b }
|
||||
// -> 只有b可以被导入，a被隐藏
|
||||
// -> 只有b可以被导入,a被隐藏
|
||||
```
|
||||
* 导入不是赋值操作，而是类似指针一样的绑定
|
||||
* es6倾向于一个文件一个export，可以使import变得简单
|
||||
* 导入不是赋值操作,而是类似指针一样的绑定
|
||||
* es6倾向于一个文件一个export,可以使import变得简单
|
||||
* 默认导出的两种形式
|
||||
```js
|
||||
export default function foo() {} // -> 导出的是表达式的绑定
|
||||
function foo() {} export default foo // -> 同上,即`export default`接受的是一个表达式
|
||||
function foo() {} export { foo as default } // -> 导出的是标识符的绑定，也就是导出foo在文件中最后的值
|
||||
function foo() {} export { foo as default } // -> 导出的是标识符的绑定,也就是导出foo在文件中最后的值
|
||||
```
|
||||
* 一个模块只能有一个default
|
||||
```js
|
||||
@ -154,7 +154,7 @@
|
||||
function bar() {}
|
||||
export { foo as default, bar }
|
||||
```
|
||||
* 可以导出别的模块的导出 -> 感觉可以用来集成模块，，也没啥用
|
||||
* 可以导出别的模块的导出 -> 感觉可以用来集成模块,,也没啥用
|
||||
```js
|
||||
export { foo, bar } from 'baz'
|
||||
export { foo as FOO, bar as BAR } from 'baz'
|
||||
@ -164,12 +164,12 @@
|
||||
* 对导入进行重命名`import { foo as Foo } from "baz" -> Foo()`
|
||||
* 对复合导入`import FOOFN, { bar, baz } from "baz"`
|
||||
* 命名空间导入`import * as foo from "foo" -> foo.bar()`当前只能全部导入
|
||||
* 如果有默认导出，就是`foo.default()`
|
||||
* 如果有默认导出,就是`foo.default()`
|
||||
* 默认+命名空间`import foofn, * as hello from "world"` `foofn -> hello.default` 尽量不要用这种迷惑操作
|
||||
* 所有导入的绑定都是只读的，所有的赋值操作都会报错
|
||||
* 所有导入都会被提升，全局访问
|
||||
* 所有导入的绑定都是只读的,所有的赋值操作都会报错
|
||||
* 所有导入都会被提升,全局访问
|
||||
* 类
|
||||
* 使用`class`声明类，类名大写
|
||||
* 使用`class`声明类,类名大写
|
||||
```js
|
||||
class Foo {
|
||||
constructor(a, b) {
|
||||
@ -182,14 +182,14 @@
|
||||
}
|
||||
```
|
||||
* 不能使用call所以只能通过new实例化
|
||||
* 类不能被提升，所以实例化之前必须声明
|
||||
* 类不能被提升,所以实例化之前必须声明
|
||||
* 声明一个class并没有创建一个同名的全局对象属性
|
||||
* class本身并不是一个实体，而是一个包裹着其他像函数和属性这样的具体实体并把它们组合到一起的元概念
|
||||
* class本身并不是一个实体,而是一个包裹着其他像函数和属性这样的具体实体并把它们组合到一起的元概念
|
||||
* class也可以是一个表达式
|
||||
```js
|
||||
var x = class Y {} // -> 对于把类定义(严格说是构造器本身)作为函数参数传递，或者把它赋值给一个对象属性的时候特别管用
|
||||
var x = class Y {} // -> 对于把类定义(严格说是构造器本身)作为函数参数传递,或者把它赋值给一个对象属性的时候特别管用
|
||||
```
|
||||
* 把类理解为一个宏，用于自动产生一个prototype对象
|
||||
* 把类理解为一个宏,用于自动产生一个prototype对象
|
||||
* 类对extends以及super提供语法糖
|
||||
```js
|
||||
class Bar extends Foo {
|
||||
@ -220,8 +220,8 @@
|
||||
```
|
||||
* `new.target`在构造器中访问new直接调用的构造器
|
||||
* Promise
|
||||
* 决议的结果只可能是完成或者拒绝，附带一个可选的单个值，如果拒绝，那么最终的值称为原因
|
||||
* 只能被完成或者拒绝一次，之后完成或者拒绝的操作都会被忽略
|
||||
* 决议的结果只可能是完成或者拒绝,附带一个可选的单个值,如果拒绝,那么最终的值称为原因
|
||||
* 只能被完成或者拒绝一次,之后完成或者拒绝的操作都会被忽略
|
||||
* 创建一个Promise
|
||||
```js
|
||||
var p = new Promise(function(resolve, reject) {
|
||||
@ -233,13 +233,13 @@
|
||||
reject(why)
|
||||
})
|
||||
// 调用
|
||||
// then接受两个函数第一个是完成，第二个是拒绝时执行
|
||||
// then接受两个函数第一个是完成,第二个是拒绝时执行
|
||||
p().then(
|
||||
function fulfilled(res) {},
|
||||
funcrion rejected(err){},
|
||||
)
|
||||
```
|
||||
* 不论是`.then`还是`.catch`都会返回一个Promise，可以用`.then`进行处理
|
||||
* 不论是`.then`还是`.catch`都会返回一个Promise,可以用`.then`进行处理
|
||||
* 只要是函数里边包含`then`方法都会被认为是一个`thenable`所以不要盲目信任自称是Promise的东西
|
||||
* Promise API
|
||||
* `Promise.resolve`
|
||||
@ -248,13 +248,227 @@
|
||||
var p2 = new Promise(function pr(resolve){resolve(42)})
|
||||
// p1 和 p2 的最终行为方式是相同的
|
||||
```
|
||||
这个接口提供了一个规范化Promise的方法，可以将刚刚不可信任的thenable放进去规范化
|
||||
这个接口提供了一个规范化Promise的方法,可以将刚刚不可信任的thenable放进去规范化
|
||||
* `Promise.reject`
|
||||
* 和上边的一样创建一个立即被拒绝的promise，但是如果他的参数是Promise，它不会理会传进来得Promise的决议值
|
||||
* 和上边的一样创建一个立即被拒绝的promise,但是如果他的参数是Promise,它不会理会传进来得Promise的决议值
|
||||
* `Promise.all([])`
|
||||
* 接受一个或者多个值的数组，比如立即值、Promise、thenable，它返回一个promise，如果里边的所有值都是完成则决议结果是完成，其中某一个被拒绝这个Promise就立即被拒绝
|
||||
* 接受一个或者多个值的数组,比如立即值、Promise、thenable,它返回一个promise,如果里边的所有值都是完成则决议结果是完成,其中某一个被拒绝这个Promise就立即被拒绝
|
||||
* 是等待所有都完成或者第一个拒绝
|
||||
* `Promise.rase([])`
|
||||
* 等待第一个完成或者拒绝
|
||||
* 也就是说返回第一个完成的决议值
|
||||
*
|
||||
* 集合
|
||||
* TypedArray
|
||||
```js
|
||||
// 创建一个buffer,长度为32字节,一共256位
|
||||
var buf = new ArrayBuffer(32)
|
||||
console.log(buf.byteLength) // 32
|
||||
// 将这256位映射成一个16位无符号整型的类型数组
|
||||
var arr = new Uint16Array(buf)
|
||||
console.log(arr.length) // 16
|
||||
```
|
||||
* 大小端
|
||||
* 是指多字节数字中的低字节位于这个数字字节表示中的右侧还是左侧
|
||||
* 举个例子,设想一个十进制数字3085,我们需要用16位来表示它。如果只是用一个十六位数字容器,那么不论大小端配置如何都是0000110000001101B,或者0c0dH
|
||||
* 但是如果用两个八位数组表示数字3085,那么大小端蛇者就会明显影响他在内存中的存储表示：
|
||||
* 0000110000001101/0c0d（大端）
|
||||
* 0000110100001100/0d0c（小端）
|
||||
* 快速监测javaScript大小端的方法
|
||||
```js
|
||||
var littleEndian = (function() {
|
||||
var buffer = new ArrayBuffer(2);
|
||||
new DataView( buffer ).setInt16(0, 256, true)
|
||||
return new Int16Array(buffer)[0] === 256;
|
||||
})();
|
||||
```
|
||||
* Map
|
||||
* 当前的js的对象的键只支持字符串
|
||||
```js
|
||||
var m = {}
|
||||
var x = { id : 1 }
|
||||
var y = { id : 2 }
|
||||
m[x] = "foo"
|
||||
m[y] = "bar"
|
||||
m[x] // "bar"
|
||||
m[y] // "bar"
|
||||
```
|
||||
* 因为x,y两个对象字符串化都是"[object object]", 所以m中只有一个键
|
||||
* ES6
|
||||
```js
|
||||
var m = new Map();
|
||||
var x = { id : 1 }
|
||||
var y = { id : 2 }
|
||||
m.set(x, "foo")
|
||||
m.set(y, "bar")
|
||||
m.get(x)
|
||||
m.get(y)
|
||||
m.delete(x)
|
||||
m.clear()
|
||||
m.size
|
||||
```
|
||||
只是不能使用`[]`的方式来进行访问了,但是可以用set、get完美替换,删除的话不能用`delete`操作符,要用`delete()`方法,完全清空map用`clear()`方法,访问映射的大小用`size`属性
|
||||
`new`的时候可以传入一个二维数组`[[key, value]]`
|
||||
* Map值
|
||||
* 使用`value()`
|
||||
```js
|
||||
var m = new Map()
|
||||
var x = {id: 1},
|
||||
y = {id: 2}
|
||||
m.set(x, "foo")
|
||||
m.set(y, "bar")
|
||||
var vals = [...m.values()]
|
||||
vals // ["foo","bar"]
|
||||
Array.from( m.values())
|
||||
// 使用entries迭代
|
||||
vals = [...m.entries()]
|
||||
vals[0][0] === x; // true
|
||||
vals[0][1]; // "foo"
|
||||
vals[1][0] === y; // false
|
||||
vals[1][1]; // "bar"
|
||||
```
|
||||
* Map键
|
||||
* 使用`keys()`
|
||||
```js
|
||||
var keys = [...m.keys()]
|
||||
keys[0] === x; // true
|
||||
keys[1] === y; // true
|
||||
```
|
||||
查看是否有给定的键
|
||||
```js
|
||||
m.has(x); // true
|
||||
m.has(z); // false
|
||||
```
|
||||
map的本质是允许你把某些额外的信息关联到一个对象上,而无需把这个信息放入对象本身
|
||||
|
||||
* weakmap
|
||||
* 作为键的对象被回收后会被自动删除,多用于dom中
|
||||
* 没有size,没有clear()
|
||||
* Set
|
||||
* 是一个值得集合,其中得值唯一（重复会被忽略）
|
||||
* 用add()代替set(),没有get()
|
||||
```js
|
||||
var s = new Set()
|
||||
var x = {id: 1}
|
||||
var y = {id: 2}
|
||||
s.add(x)
|
||||
s.add(y)
|
||||
s.add(x)
|
||||
s.size // 2
|
||||
s.delete(y)
|
||||
s.size // 1
|
||||
s.clear() // 0
|
||||
s.size // 0
|
||||
```
|
||||
初始化可以放进去一个构造器
|
||||
```js
|
||||
var x = {id: 1}
|
||||
var y = {id: 2}
|
||||
var s = new Set([x, y])
|
||||
s.has(x) // true
|
||||
```
|
||||
* 新增API
|
||||
* Array
|
||||
* 静态函数Array.of()
|
||||
* 正常使用`new Array(4)`会生成一个长度为4得空数组,但是使用`of`就能生成长度为1值为4的数组
|
||||
* 静态函数Array.from()
|
||||
* `Array.from({length:4})` 生成4个undefined可以避免空槽位
|
||||
* 映射`Array.from(arr, function(val, idx){return}, this)`对每一个值进行进行映射处理,类似.map(),如果有第三个参数,则会被绑定为第二个函数的this
|
||||
* 原型方法copyWithin()
|
||||
* 从一个数组中复制一部分到同一个数组的另一个位置,覆盖这个位置所有原来的值,如果有任何一个参数是负值,就被当作是相对于数组结束的相对值
|
||||
```js
|
||||
[1,2,3,4,5].copyWithin(3,0); // [1,2,3,1,2]
|
||||
[1,2,3,4,5].copyWithin(3,0,1); // [1,2,3,1,5]
|
||||
[1,2,3,4,5].copyWithin(0,-2); // [4,5,3,4,5]
|
||||
[1,2,3,4,5].copyWithin(0,-2,-1); // [4,2,3,4,5]
|
||||
```
|
||||
* 用的时候输出一下结果,避免不是想要的结果
|
||||
* 原型方法fill()
|
||||
* 填充数组,第一个参数是要填充的内容,然后是填充的开始和结束
|
||||
```js
|
||||
[null, null, null, null].fill(42, 1, 3) // [null, 42, 42, null]
|
||||
```
|
||||
* 原型方法find()
|
||||
* indexOf是用的===导致'2'不能与2匹配
|
||||
* es5中的变通方法是用some方法对每个元素调用一个函数回调,直到某次返回为true为止,因为可以定义回调函数,所以拥有了对匹配方式的完全控制,但是最后只能得到匹配的true或者false提示,无法的到真正的匹配值本身
|
||||
* find()与some()基本一致,除了一旦返回值是真值,会返回实际的数组值,如果没找到会返回undefined
|
||||
```js
|
||||
var a = [1,2,3,4,5]
|
||||
var b = a.find(function matcher(v){
|
||||
return v == '2'
|
||||
})
|
||||
console.log(b) // 2
|
||||
```
|
||||
* 原型方法findIndex()
|
||||
* 和find()一样对每个元素调用一个函数回调,但是如果返回是true则会返回index,如果没找到返回-1
|
||||
* 不要使用findIndex(..) != -1(这是indexOf的惯用法)从搜索中得到布尔值,因为some()已经yield出你想要的true/false。也不要用a[a.findIndex(..)]来得到匹配值,因为这是find()所作的事。最后如果需要严格匹配的索引值,那么使用indexOf()；如果需要自定义匹配的索引值,那么使用findIndex()
|
||||
* 接受回调的数组方法接收一个可选的第二个参数,如果设定这个参数就绑定到第一个参数回调的this,否则this就是undefined
|
||||
* 原型方法entries()、values()、keys()
|
||||
* 同SET,MAP差不多
|
||||
```js
|
||||
var a = [1, 2, 3]
|
||||
[...a.values()] // [1,2,3]
|
||||
[...a.keys()] // [0,1,2]
|
||||
[...a.entries()] // [[0,1],[1,2],[2,3]]
|
||||
[...a[Symbol.iterator]()] // [1,2,3]
|
||||
```
|
||||
* Object
|
||||
* 静态函数Object.is()
|
||||
* 执行比===更严格的值比较,应该继续使用===进行严格相等比较,不可当作这个运算符的替代,如果需要严格识别NaN或者-0,则应该选择Object.is()
|
||||
```js
|
||||
var x = NaN, y = 0, z = -0
|
||||
x === x // false
|
||||
y === z // true
|
||||
Object.is(x,x) // true
|
||||
Object.is(y,z) // false
|
||||
```
|
||||
* 静态函数Object.getOwnPropertySymbols()
|
||||
* Symbol可能会成为对象最经常使用的特殊(元)属性。所以引入了这个工具直接从对象上回去所有的符号属性
|
||||
```js
|
||||
var o = {
|
||||
foo: 42,
|
||||
[Symbol("bar")]: "hello world",
|
||||
baz: true
|
||||
}
|
||||
Object.getOwnPropertySymbols(o); // [Symbol(bar)]
|
||||
```
|
||||
* 静态函数Object.setPrototypeOf()
|
||||
* 用于设置对象的[[Prototype]]用于行为委托
|
||||
```js
|
||||
var o1 = {foo() {}}
|
||||
var o2 = {baz() {}}
|
||||
Object.setPrototypeOf(o2, o1)
|
||||
o2.foo()
|
||||
// 或者
|
||||
var o2 = Object.setPrototypeOf({baz(){}},o1)
|
||||
o2.foo()
|
||||
```
|
||||
* 静态函数Object.assign()
|
||||
* 第一个参数是target,剩下的所有参数的传入的源,按照传入的顺序依次处理,对于每个源来讲,他的可枚举属性和自己拥有的简直,包括符号都会通过简单的=赋值被复制,会返回目标对象,经过实测,后边的会覆盖前边的值,如果不想这样就使用符号,只读属性可被复制：复制后是个普通属性，不可枚举属性不可复制，不可枚举符号不可被复制
|
||||
* 而且除了setPrototypeOf可以链接[[prototype]]还可以使用
|
||||
```js
|
||||
var o1 = {foo(){}}
|
||||
var o2 = Object.assign(Object.create(o1),{// o2 的定义})
|
||||
o2.foo()
|
||||
```
|
||||
* Math
|
||||
* 静态属性
|
||||
* Number.EPSILON任意两个值之间的最小差
|
||||
* Number.MAX_SAFE_INTEGER可以用数字值无歧义“安全表达”的最大整数：2^53 - 1
|
||||
* Number.MIN_SAFE_INTEGER可以用数字值无歧义“安全表达” 的最小整数：-(2^53-1) 或 (-2)^53 + 1
|
||||
* 静态函数Number.isNaN()
|
||||
* 是对于全局函数isNaN()的修正，可以按期望工作
|
||||
* 静态函数Number.isFinite()
|
||||
* 判断数字是不是非无限的，能排除掉NaN和Infinity
|
||||
* 全局的isFinite()会强制进行类型转换，而这个不会
|
||||
* 整型相关静态函数
|
||||
* 正常情况下是检查小数部分是否非0 x===Math.floor(x)
|
||||
* ES6新增Number.isInteger(),可以更有效的判断这个性质，同时排除了NaN 和 Infinity 返回false，对于4,4.0,4.00都会返回true
|
||||
* 字符串
|
||||
* 原型函数repeat()
|
||||
* 在python和ruby这样的语言中，可以这样重复字符串`"foo" * 3 // 'foofoofoo'`
|
||||
* ES6中`"foo".repeat(3) // 'foofoofoo'`
|
||||
* 字符串检查函数
|
||||
* `str.startsWith("some") // true`
|
||||
* `str.endsWith("some") // true`
|
||||
* `str.includes("some") // true`
|
||||
* 不会接受正则表达式用于搜索，而且如果搜索空字符串一般会在开始或者结尾找到
|
||||
@ -41,9 +41,9 @@ db.createUser(
|
||||
)
|
||||
db.createUser(
|
||||
{
|
||||
user: "apiwx",
|
||||
pwd: "srVgEGwTf4",
|
||||
roles: [ { role: "dbOwner", db: "apiwx" }]
|
||||
user: "pb",
|
||||
pwd: "wO0pM5rD9eP3",
|
||||
roles: [ { role: "dbOwner", db: "pb" }]
|
||||
}
|
||||
)
|
||||
db.createUser(
|
||||
@ -60,6 +60,21 @@ db.createUser(
|
||||
roles: [ { role: "dbOwner", db: "coc" }]
|
||||
}
|
||||
)
|
||||
db.createUser(
|
||||
{
|
||||
user: "neko",
|
||||
pwd: "lO1wV2gT0eJ0",
|
||||
roles: [ { role: "dbOwner", db: "neko" }]
|
||||
}
|
||||
)
|
||||
db.createUser(
|
||||
{
|
||||
user: "web",
|
||||
pwd: "xA5uU1eZ6fV1",
|
||||
roles: [ { role: "dbOwner", db: "web" }]
|
||||
}
|
||||
)
|
||||
db.dropUser("goldbird")
|
||||
```
|
||||
|
||||
### log目录 `/var/log/mongodb/mongod.log`
|
||||
@ -109,6 +124,17 @@ db.auth("yg", "zV1pL8sP4nQ1")
|
||||
db.auth("admin", "dY1oU0wM6yW9")
|
||||
db.auth("ccb", "wL2wG2aD6aI1")
|
||||
db.auth("yg", "zV1pL8sP4nQ1")
|
||||
db.auth("cherry", "fR1jW2xG3bE9")
|
||||
db.auth("pb", "wO0pM5rD9eP3")
|
||||
db.auth("pc", "zV1pL8sP4nQ1")
|
||||
db.auth("goldbird", "oM9eA2lI1uC2")
|
||||
db.auth("qrcode", "mR6rN4pI0rU6")
|
||||
db.auth("wxapi", "uJ5hB9mJ0gR2")
|
||||
db.auth("teaweb", "srVgEGwTf4")
|
||||
db.auth("curl", "jV9cL0eW6mX4")
|
||||
db.auth("web", "xA5uU1eZ6fV1")
|
||||
db.auth("neko", "lO1wV2gT0eJ0")
|
||||
|
||||
|
||||
docker exec -it 8b4f1cbbf048 mongo admin
|
||||
```
|
||||
@ -378,6 +404,9 @@ mongorestore 最后的一个参数，设置备份数据所在位置，例如：c
|
||||
你不能同时指定 <path> 和 --dir 选项。
|
||||
```
|
||||
|
||||
mongoexport --host 127.0.0.1 --port 5000 -u wxapi -p uJ5hB9mJ0gR2 --db wxapi -c keyword --type json -o wxapi.json
|
||||
|
||||
mongoimport --host 127.0.0.1 --port 27017 -u pb -p wO0pM5rD9eP3 --db pb -c user --type json --file /data/db/pb.json
|
||||
|
||||
|
||||
```
|
||||
|
||||
@ -281,6 +281,7 @@ server {
|
||||
listen 80;
|
||||
server_name coc.powerrain.cn;
|
||||
return 301 https://coc.powerrain.cn$request_uri;
|
||||
# return 301 https://cherry.lacus.site$request_uri;
|
||||
access_log /data/nginx/logs/coc.log;
|
||||
}
|
||||
|
||||
@ -288,6 +289,7 @@ server {
|
||||
#SSL 访问端口号为 443
|
||||
listen 443 ssl http2; #填写绑定证书的域名
|
||||
server_name coc.powerrain.cn;
|
||||
|
||||
#证书文件名称
|
||||
ssl_certificate 1_coc.powerrain.cn_bundle.crt;
|
||||
#私钥文件名称
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
setTimeout(() => console.log('a'));
|
||||
Promise.resolve()
|
||||
.then(
|
||||
() => {
|
||||
console.log('b');
|
||||
}
|
||||
).then(
|
||||
() => Promise.resolve('c').then(
|
||||
(data) => {
|
||||
setTimeout(() => console.log('d'));
|
||||
console.log('f');
|
||||
return data;
|
||||
}
|
||||
)
|
||||
).then(data => console.log(data));
|
||||
var o = {
|
||||
foo: 42,
|
||||
[Symbol("bar")]: "hello world",
|
||||
baz: true
|
||||
}
|
||||
var b = {
|
||||
foo: 43,
|
||||
[Symbol("bar")]: "hello world",
|
||||
baz: false
|
||||
}
|
||||
|
||||
console.log(a[Symbol("bar")])
|
||||
a = Object.assign({}, o, b)
|
||||
3
Miscellaneous/test.py
Normal file
3
Miscellaneous/test.py
Normal file
@ -0,0 +1,3 @@
|
||||
row_data = {"code": 0, "data": {"code": "8722a06", "domain": "5879b7c", "phone": "99949000000", "hashed": "6a0a2688f3b3fac5",
|
||||
"password": "0702", "port": 26877, "site": "glados.network", "userId": 41830, "vip": 11, }}
|
||||
userId = row_data['data']['userId']
|
||||
Loading…
x
Reference in New Issue
Block a user