Skip to content

Commit ca430b4

Browse files
pandaCurepandaCure
committed
第一次
0 parents  commit ca430b4

File tree

159 files changed

+77280
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

159 files changed

+77280
-0
lines changed

‎.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/.idea
5+
/.DS_Store
6+
7+
*.DS_Store
8+

‎React/ReactButton/button.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="zn">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<script src="./buttonClass.js"></script>
9+
</head>
10+
<body>
11+
<script>
12+
const button = new Button();
13+
document.body.appendChild(button.render());
14+
document.body.addEventListener('click',() => {
15+
console.log('body');
16+
},false);
17+
</script>
18+
</body>
19+
</html>

‎React/ReactButton/buttonClass.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const DOM =
2+
`
3+
<button>
4+
<span class='button-text'>点赞</span>
5+
<span>👍</span>
6+
</button>
7+
`;
8+
9+
const createDOMFromString = domString => {
10+
let div = document.createElement('div');
11+
div.innerHTML = domString;
12+
return div;
13+
}
14+
15+
class Button {
16+
constructor() {
17+
this.state = { isLiked: false };
18+
}
19+
20+
render() {
21+
this.el = createDOMFromString(DOM);
22+
this.el.addEventListener('click', this.changeState.bind(this), false);
23+
return this.el;
24+
}
25+
26+
changeState() {
27+
// 这里面的this是指向这个元素
28+
const text = document.querySelector('.button-text');
29+
this.state.isLiked = !this.state.isLiked;
30+
text.innerHTML = this.state.isLiked ? '点赞' : '取消';
31+
}
32+
}
33+

‎React/ReactButton/buttonClass2.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="zn">
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+
<script type="text/javascript">
13+
const DOM = state => {
14+
return `
15+
<button>
16+
<span class='button-text'>${state.isLike ? '点赞' : '取消'}</span>
17+
<span>👍</span>
18+
</button>
19+
`};
20+
21+
const createDOMFromString = domString => {
22+
let div = document.createElement('div');
23+
div.innerHTML = domString;
24+
return div;
25+
}
26+
27+
class Button {
28+
constructor() {
29+
this.state = {
30+
isLike: false
31+
}
32+
}
33+
34+
setState(state) {
35+
this.state = state;
36+
const oldValue = this.el;
37+
const newValue = this.render();
38+
if (this.onChange) this.onChange(oldValue, newValue);
39+
}
40+
41+
render() {
42+
this.el = createDOMFromString(DOM(this.state));
43+
this.el.addEventListener('click', this.changeLikeText.bind(this), false);
44+
return this.el;
45+
}
46+
47+
changeLikeText() {
48+
this.setState({
49+
isLike: !this.state.isLike
50+
})
51+
}
52+
}
53+
54+
const button = new Button();
55+
button.onChange = (oldValue, newValue) => {
56+
document.body.insertBefore(newValue, oldValue);
57+
document.body.removeChild(oldValue);
58+
}
59+
document.body.appendChild(button.render());
60+
</script>
61+
</body>
62+
63+
</html>

‎React/ReactButton/buttonClass3.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="zn">
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+
<!-- 将组件抽象成公共组件 -->
13+
<script type="text/javascript">
14+
15+
const createDOMFromString = domString => {
16+
let div = document.createElement('div');
17+
div.innerHTML = domString;
18+
return div;
19+
}
20+
21+
class Component {
22+
constructor(props = {}) {
23+
this.props = props
24+
}
25+
26+
setState(state) {
27+
this.state = state;
28+
const oldDom = this.el;
29+
this.el = this._render();
30+
if (this.onChange) {
31+
this.onChange(oldDom, this.el);
32+
}
33+
}
34+
35+
_render() {
36+
this.el = createDOMFromString(this.render());
37+
this.el.addEventListener('click', this.onClick.bind(this), false);
38+
return this.el;
39+
}
40+
}
41+
42+
class Button extends Component {
43+
constructor(props) {
44+
super(props);
45+
this.state = {
46+
isLike: true
47+
}
48+
}
49+
50+
render() {
51+
return `
52+
<button>
53+
<span class='button-text' style='color:${this.props.color}'>${this.state.isLike ? '点赞' : '取消'}</span>
54+
<span>👍</span>
55+
</button>
56+
`;
57+
}
58+
59+
onClick() {
60+
this.setState({
61+
isLike: !this.state.isLike
62+
})
63+
}
64+
}
65+
66+
const mount = (component, wrapper) => {
67+
wrapper.appendChild(component._render());
68+
component.onChange = (oldValue, newValue) => {
69+
wrapper.insertBefore(newValue, oldValue);
70+
wrapper.removeChild(oldValue);
71+
}
72+
}
73+
74+
mount(new Button({ color: 'red' }), document.body);
75+
</script>
76+
</body>
77+
78+
</html>

‎React/hello-react/.gitignore

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*

0 commit comments

Comments
 (0)