0%

Generator

function* 这种声明方式(function关键字后跟一个星号)会定义一个生成器函数 (generator function),它返回一个 Generator 对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function* g(i) {
yield i;
yield i + i;
}

let a = g(3);
// console.log(a)

console.log(a.next().value);
console.log(a.next().value);
console.log(8888);

function *foo() {
yield 1;
yield 2;
yield 3;
return;
}
for(let v of foo()) {
console.log(v);
}

yield

yield关键字使生成器函数执行暂停,yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。

yield关键字实际返回一个IteratorResult对象,它有两个属性,value和done。value属性是对yield表达式求值的结果,而done是false,表示生成器函数尚未完全完成。

一旦遇到 yield 表达式,生成器的代码将被暂停运行,直到生成器的 next() 方法被调用。每次调用生成器的next()方法时,生成器都会恢复执行,直到达到以下某个值:

1
2
3
4
5
6
7
8
9
10
11
12
13
function* dd(n){
var index = 0;
while(index < n)
yield index++;
}

let a = dd(2);

console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

iterator js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var c = console;

function arrayIterator(array){
var i = 0;
var obj = {
next: function(){
return i < array.length ?
{value: array[i++], done: false} :
{value: undefined, done: true};
}
}
return obj;
}

var ai = arrayIterator(['x', 'y', 'z']);

c.log(ai.next()); // { value: "x", done: false }
c.log(ai.next()); // { value: "y", done: false }
c.log(ai.next()); // { value: "z", done: false }
c.log(ai.next()); // { value: undefined, done: true }

yield “协程”(coroutine)

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
var fs = require('fs');
var gen;

function run(generator) {
gen = generator();
gen.next();
}

function read(file) {
fs.readFile(file, function(err, data) {
if (!err) console.log('read %s success!', file);
gen.next(data);
});
}

function write(file, data) {
fs.writeFile(file, data, function(err) {
if (!err) console.log('write %s success!', file);
gen.next();
});
}

run(function* () {
var text = yield read('yieldFile.js');
yield write('yieldFile.bak', text);
});

1
2
3
4
5
6
7
8
async function asynctest() {
console.log('start');
await call();
await normalFunction();
await new Promise(resolve=>{ console.log('wait result'); resolve()});
console.log('end');
}
asynctest();
  • command + shift + p 命令行
  • View > Appearance > Toggle Zen Mode (View > Appearance > Toggle Centered Layout)
  • 在 Preferences > Settings - 插件 中打开 emmet.triggerExpansionOnTab

更多 emmet 技巧

  1. 推荐在循环对象属性的时候,使用for…in,在遍历数组的时候的时候使用for…of。
  2. for…in循环出的是key,for…of循环出的是value
  3. 注意,for…of是ES6新引入的特性。修复了ES5引入的for…in的不足
  4. for…of不能循环普通的对象,需要通过和Object.keys()搭配使用

via https://segmentfault.com/q/1010000006658882

1
2
3
4
5
6
7
8
let aArray = ['a',123,{a:'1',b:'2'}]
for(let index in aArray){
console.log(`${aArray[index]}`);
}

for(var value of aArray){
console.log(value);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
var student={
name:'wujunchuan',
age:22,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+student[key]);
}

需要带参数的 Chrome Canary

1
/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --remote-debugging-port=9222

还要放在 dock

方法 1

Use Automator to create an application that in effect launches Chrome with command line arguments.

Start Automator and select to create an Application. Double-click Run Shell Script in the Library/Utilities folder and replace the text content — cat — with the following:

1
open -a "Google Chrome.app" --args -pinned-tab-count=4

keep the .app suffix or will break with Parallels

Save anywhere you like.

更换图标

To replace this application’s icon, Get Info on your real Google Chrome, click on the icon on the top left, press Cmd-C, Get Info on your Chrome Automator app, click the icon, and press Cmd-V.

Since it’s a different application, the Dock will display two Chrome applications when it’s running: Chrome, and your Chrome launcher.

方法 2

直接修改默认的启动项目

Edit your application bundle to launch a script instead. This script will start the actual application, adding the command line argument.

Right-click Google Chrome.app and select Show Package Contents. Go to Contents/ and open Info.plist in Property List Editor/Xcode (Apple’s developer tools), or a third party plist editor.

Look for the entry CFBundleExecutable or Executable File. Remember its value (e.g. firefox-bin for Firefox). Replace it with parameterized-app.sh.

Open Terminal and enter the following:

touch /Applications/Firefox.app/Contents/MacOS/parameterized-app.sh
open /Applications/Firefox.app/Contents/MacOS/parameterized-app.sh
An editor for the .sh file will open. Set the contents of the file to:

1
2
#!/usr/bin/env bash
exec /Applications/Firefox.app/Contents/MacOS/firefox-bin -ProfileManager

(using the actual executable’s name you removed from Info.plist, adding the desired command-line arguments)

Save and close. In Terminal, enter the following:

chmod +x /Applications/Firefox.app/Contents/MacOS/parameterized-app.sh
Now, close Terminal and move your application (which must not be running right now) to a different folder and back again. This will update Launch Services, otherwise your changes will be ignored and irritate you immensely.

Now, when you open your application, it will actually execute the .sh file, which will in turn launch the actual executable file, sending the command line args along.

It will look and behave like you expect it to, but you will need to repeat this whenever you update your application, as this will generally replace the application bundle and all the changes you made.

Cross-Origin Resource Sharing

Apache

In the folders where your JavaScript files will be served from, create an .htaccess file with the following contents:

1
Header add Access-Control-Allow-Origin "*"

Nginx

Add the add_header directive to the location block that serves your JavaScript files:

1
2
3
location ~ ^/assets/ {
add_header Access-Control-Allow-Origin *;
}

js bind

1
2
3
4
5
6
7
8
9
10
11
window.name = 'gswin'
var geeks = {
name : "ABC",
printFunc: function(){
console.log(this.name,this);}
}

var printFunc2= geeks.printFunc;
printFunc2();
```

window.name = ‘gswin’
var geeks = {
name : “ABC”,
printFunc: function(){
console.log(this.name,this);}
}

var printFunc2= geeks.printFunc.bind(geeks);
printFunc2();
```

I have a file with function like a func.js like below

1
2
3
4
5
export const func = {
functionName: (data) => {
return something
}
}

In main.js

1
2
import {func} from './func.js'
Vue.prototype.$func = func

and you can use from all components if in script tag like below

1
this.$func.functionName(somedata)

or if template tag like

1
$func.functionName(somedata)

dom ready

1
2
3
4
5
document.addEventListener('readystatechange', function() {
if (document.readyState === "complete") {
init();
}
});

img 2 ascii

https://www.degraeve.com/img2txt.php

1
2
<style lang="scss">
</style>
1
npm install -D sass-loader node-sass

如果 sass(锁进 而不是 大括号) 需要修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// webpack.config.js -> module.rules
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true,
// sass-loader version >= 8
sassOptions: {
indentedSyntax: true
}
}
}
]
}

less

1
npm install -D less less-loader
1
2
3
4
5
6
7
8
9
// webpack.config.js -> module.rules
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
}
1
npm install -D stylus stylus-loader

1
npm install -D pug pug-plain-loader
1
2
3
4
5
// webpack.config.js -> module.rules
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
1
2
3
4
<template lang="pug">
div
h1 Hello world!
</template>

2020 02 01 到 2020 06 03 数据

img

  • 15-24 岁 一共死亡 9,442 其中新冠是 106
  • 老人死亡率高

https://data.cdc.gov/NCHS/Provisional-COVID-19-Death-Counts-by-Sex-Age-and-S/9bhg-hcku

2020 02 01 到 2020 05 31

img
img

https://www.cdc.gov/nchs/nvss/vsrr/covid_weekly/index.htm

2017 美国死亡人数 280万

  • Number of deaths: 2,813,503
  • Death rate: 863.8 deaths per 100,000 population
  • Life expectancy: 78.6 years 平均寿命
  • Infant Mortality rate: 5.79 deaths per 1,000 live births 婴儿死亡率

死因排行

  • Heart disease: 647,457 心脏病
  • Cancer: 599,108 癌症
  • Accidents (unintentional injuries): 169,936 世故
  • Chronic lower respiratory diseases: 160,201 呼吸系统
  • Stroke (cerebrovascular diseases): 146,383 中风
  • Alzheimer’s disease: 121,404 阿尔茨海默氏病
  • Diabetes: 83,564 糖尿
  • Influenza and Pneumonia: 55,672 流感和肺炎
  • Nephritis, nephrotic syndrome and nephrosis: 50,633 肾病
  • Intentional self-harm (suicide): 47,173 自杀

2018

In 2018, a total of 2,839,205

cli 3

vue create AAA

cli 2

vue init webpack AAA

version of vue cli

1
vue --version

version of vue

1
npm list vue

2 到 3(4)

1
2
npm uninstall -g vue-cli
npm install -g @vue/cli

前者不行,改用后面 yarn,OK

1
2
yarn global remove vue-cli
yarn global add @vue/cli
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<title>SVG Graph</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="/style.css" />

<!-- template for the polygraph component. -->
<script type="text/x-template" id="polygraph-template">
<g>
<polygon :points="points"></polygon>
<circle cx="100" cy="100" r="80"></circle>
<axis-label
v-for="(stat, index) in stats"
:stat="stat"
:index="index"
:total="stats.length">2222
</axis-label>
</g>
</script>

<!-- template for the axis label component. -->
<script type="text/x-template" id="axis-label-template">
<text :x="point.x" :y="point.y">{{stat.label}}</text>
</script>
</head>
<body>
<!-- demo root element -->
<div id="demo">
<!-- Use the component -->
<svg width="200" height="200">
<polygraph :stats="stats"></polygraph>
</svg>
<!-- controls -->
<div v-for="stat in stats">
<label>{{stat.label}}</label>
<input type="range" v-model="stat.value" min="0" max="100" />
<span>{{stat.value}}</span>
<button @click="remove(stat)" class="remove">X</button>
</div>
<form id="add">
<input name="newlabel" v-model="newLabel" />
<button @click="add">Add a Stat</button>
</form>
<pre id="raw">{{ stats }}</pre>
</div>

<p style="font-size:12px">* input[type="range"] requires IE10 or above.</p>

<script>
// The raw data to observe
var stats = [
{ label: "A", value: 100 },
{ label: "B", value: 100 },
{ label: "C", value: 100 },
{ label: "D", value: 100 },
{ label: "E", value: 100 },
{ label: "F", value: 100 }
];

// A resusable polygon graph component
Vue.component("polygraph", {
props: ["stats"],
template: "#polygraph-template",
computed: {
// a computed property for the polygon's points
points: function() {
var total = this.stats.length;
return this.stats
.map(function(stat, i) {
var point = valueToPoint(stat.value, i, total);
return point.x + "," + point.y;
})
.join(" ");
}
},
components: {
// a sub component for the labels
"axis-label": {
props: {
stat: Object,
index: Number,
total: Number
},
template: "#axis-label-template",
computed: {
point: function() {
return valueToPoint(
+this.stat.value + 10,
this.index,
this.total
);
}
}
}
}
});

// math helper...
function valueToPoint(value, index, total) {
var x = 0;
var y = -value * 0.8;
var angle = ((Math.PI * 2) / total) * index;
var cos = Math.cos(angle);
var sin = Math.sin(angle);
var tx = x * cos - y * sin + 100;
var ty = x * sin + y * cos + 100;
return {
x: tx,
y: ty
};
}

// bootstrap the demo
new Vue({
el: "#demo",
data: {
newLabel: "",
stats: stats
},
methods: {
add: function(e) {
e.preventDefault();
if (!this.newLabel) return;
this.stats.push({
label: this.newLabel,
value: 100
});
this.newLabel = "";
},
remove: function(stat) {
if (this.stats.length > 3) {
this.stats.splice(this.stats.indexOf(stat), 1);
} else {
alert("Can't delete more!");
}
}
}
});
</script>
</body>
</html>

http://www.hammerspoon.org/

https://github.com/greyby/hammerspoon

apply 和 call 的区别

1
2
3
4
5
6
7
8
9
var obj = {
name : 'linxin'
}

function func(firstName, lastName){
console.log(firstName + ' ' + this.name + ' ' + lastName);
}

func.apply(obj, ['A', 'B']); // A linxin B

call 方法第一个参数也是作为函数上下文的对象,但是后面传入的是一个参数列表,而不是单个数组。

1
2
3
4
5
6
7
8
9
var obj = {
name: 'linxin'
}

function func(firstName, lastName) {
console.log(firstName + ' ' + this.name + ' ' + lastName);
}

func.call(obj, 'C', 'D'); // C linxin D

bind

1
2
3
4
5
6
7
8
9
function func(a, b, c) {
console.log(a, b, c);
}
var func1 = func.bind(null,'linxin');

func('A', 'B', 'C'); // A B C
func1('A', 'B', 'C'); // linxin A B
func1('B', 'C'); // linxin B C
func.call(null, 'linxin'); // linxin undefined undefined

via https://github.com/lin-xin/blog/issues/7