Skip to content

Commit 5a5741c

Browse files
ReactMVCReactMVC
authored
fix bug
1 parent 773e807 commit 5a5741c

File tree

9 files changed

+429
-0
lines changed

9 files changed

+429
-0
lines changed

‎Elroid.js

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
// Class Elroid
2+
class Elroid {
3+
constructor(options) {
4+
this.el = options.el;
5+
this.data = options.data;
6+
7+
this.compile();
8+
this.bindEvents();
9+
}
10+
11+
compile() {
12+
const elements = document.querySelectorAll(this.el);
13+
elements.forEach((element) => {
14+
this.compileElement(element);
15+
});
16+
}
17+
18+
compileElement(element) {
19+
const template = element.innerHTML;
20+
const compiled = this.compileTemplate(template);
21+
element.innerHTML = compiled;
22+
}
23+
24+
compileTemplate(template) {
25+
const regex = /\{\{(.*?)\}\}/g;
26+
const compiled = template.replace(regex, (match, p1) => {
27+
return p1.split('.').reduce((acc, key) => acc[key.trim()], this.data) || '';
28+
});
29+
return compiled;
30+
}
31+
32+
bindEvents() {
33+
const elements = document.querySelectorAll('[el-click]');
34+
elements.forEach((element) => {
35+
const methodName = element.getAttribute('el-click');
36+
const method = this.data.methods[methodName];
37+
if (method && typeof method === 'function') {
38+
element.addEventListener('click', () => {
39+
method.bind(this.data)();
40+
this.compile();
41+
this.bindEvents();
42+
});
43+
}
44+
});
45+
}
46+
}
47+
48+
// Component
49+
class ElComponent {
50+
constructor(options) {
51+
this.template = options.template;
52+
this.data = options.data;
53+
this.el = document.createElement('div');
54+
55+
this.compile();
56+
this.bindEvents();
57+
}
58+
59+
compile() {
60+
const compiledTemplate = this.compileTemplate(this.template);
61+
this.el.innerHTML = compiledTemplate;
62+
}
63+
64+
compileTemplate(template) {
65+
const regex = /\{\{(.*?)\}\}/g;
66+
const compiled = template.replace(regex, (match, p1) => {
67+
return p1.split('.').reduce((acc, key) => acc[key.trim()], this.data) || '';
68+
});
69+
return compiled;
70+
}
71+
72+
bindEvents() {
73+
const elements = this.el.querySelectorAll('[el-click]');
74+
elements.forEach((element) => {
75+
const methodName = element.getAttribute('el-click');
76+
const method = this.data.methods[methodName];
77+
if (method && typeof method === 'function') {
78+
element.addEventListener('click', () => {
79+
method.bind(this.data)();
80+
this.compile();
81+
this.bindEvents();
82+
});
83+
}
84+
});
85+
}
86+
}
87+
88+
class ElRequest {
89+
constructor() {
90+
this.http = new XMLHttpRequest();
91+
this.headers = {};
92+
}
93+
94+
setHeader(key, value) {
95+
this.headers[key] = value;
96+
}
97+
98+
get(url = '', data = {}, callback = () => { }) {
99+
const queryString = Object.entries(data)
100+
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
101+
.join('&');
102+
103+
this.http.open('GET', `${url}?${queryString}`, true);
104+
105+
for (const [key, value] of Object.entries(this.headers)) {
106+
this.http.setRequestHeader(key, value);
107+
}
108+
109+
this.http.onload = function () {
110+
if (this.http.status === 200) {
111+
callback(null, this.http.responseText);
112+
} else {
113+
callback(`Error: ${this.http.status}`);
114+
}
115+
}.bind(this);
116+
117+
this.http.send();
118+
}
119+
120+
post(url = '', data = {}, callback = () => { }) {
121+
this.http.open('POST', url, true);
122+
123+
for (const [key, value] of Object.entries(this.headers)) {
124+
this.http.setRequestHeader(key, value);
125+
}
126+
127+
this.http.onload = function () {
128+
callback(null, this.http.responseText);
129+
}.bind(this);
130+
131+
const requestBody = Object.entries(data)
132+
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
133+
.join('&');
134+
135+
this.http.send(requestBody);
136+
}
137+
138+
put(url = '', data = {}, callback = () => { }) {
139+
this.http.open('PUT', url, true);
140+
141+
for (const [key, value] of Object.entries(this.headers)) {
142+
this.http.setRequestHeader(key, value);
143+
}
144+
145+
this.http.onload = function () {
146+
callback(null, this.http.responseText);
147+
}.bind(this);
148+
149+
const requestBody = Object.entries(data)
150+
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
151+
.join('&');
152+
153+
this.http.send(requestBody);
154+
}
155+
156+
delete(url = '', callback = () => { }) {
157+
this.http.open('DELETE', url, true);
158+
159+
for (const [key, value] of Object.entries(this.headers)) {
160+
this.http.setRequestHeader(key, value);
161+
}
162+
163+
this.http.onload = function () {
164+
if (this.http.status === 200) {
165+
callback(null, 'Post Deleted!');
166+
} else {
167+
callback(`Error: ${this.http.status}`);
168+
}
169+
}.bind(this);
170+
171+
this.http.send();
172+
}
173+
}

‎HTTP-Example/0_GET_noData.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Elroid</title>
9+
</head>
10+
11+
<body>
12+
13+
<script src="Elroid.js"></script>
14+
15+
<script>
16+
const http = new ElRequest();
17+
18+
const url = "http://localhost:8000/api.php";
19+
20+
21+
http.get(url, {}, (err, res) => {
22+
if (err) {
23+
console.log(err);
24+
} else {
25+
console.log(res);
26+
}
27+
});
28+
29+
30+
</script>
31+
</body>
32+
33+
</html>

‎HTTP-Example/1_POST_noData.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Elroid</title>
9+
</head>
10+
11+
<body>
12+
13+
<script src="Elroid.js"></script>
14+
15+
<script>
16+
const http = new ElRequest();
17+
18+
const url = "http://localhost:8000/api.php";
19+
20+
21+
http.post(url, {}, (err, res) => {
22+
if (err) {
23+
console.log(err);
24+
} else {
25+
console.log(res);
26+
}
27+
});
28+
29+
30+
</script>
31+
</body>
32+
33+
</html>

‎HTTP-Example/2_GET.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Elroid</title>
9+
</head>
10+
11+
<body>
12+
13+
<script src="Elroid.js"></script>
14+
15+
<script>
16+
const http = new ElRequest();
17+
18+
const url = "http://localhost:8000/api.php";
19+
20+
const data = {
21+
name: 'Hossein',
22+
};
23+
24+
http.get(url, data, (err, res) => {
25+
if (err) {
26+
console.log(err);
27+
} else {
28+
console.log(res);
29+
}
30+
});
31+
32+
33+
</script>
34+
</body>
35+
36+
</html>

‎HTTP-Example/3_POST.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Elroid</title>
9+
</head>
10+
11+
<body>
12+
13+
<script src="Elroid.js"></script>
14+
15+
<script>
16+
const http = new ElRequest();
17+
18+
const url = "http://localhost:8000/api.php";
19+
20+
const data = {
21+
name: 'Hossein',
22+
};
23+
24+
http.post(url, data, (err, res) => {
25+
if (err) {
26+
console.log(err);
27+
} else {
28+
console.log(res);
29+
}
30+
});
31+
32+
33+
</script>
34+
</body>
35+
36+
</html>

‎HTTP-Example/4_HEADER.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Elroid</title>
9+
</head>
10+
11+
<body>
12+
13+
<script src="Elroid.js"></script>
14+
15+
<script>
16+
const http = new ElRequest();
17+
18+
const url = "http://localhost:8000/api.php";
19+
20+
const data = {
21+
name: 'Hossein',
22+
};
23+
24+
http.setHeader('Authorization', 'Bearer token123');
25+
http.setHeader('Content-type', 'application/x-www-form-urlencoded');
26+
27+
http.post(url, data, (err, res) => {
28+
if (err) {
29+
console.log(err);
30+
} else {
31+
console.log(res);
32+
}
33+
});
34+
35+
36+
</script>
37+
</body>
38+
39+
</html>

0 commit comments

Comments
 (0)