preface
In recent weeks, the frequency of updating articles has been significantly lower than before. Not lazy, mainly want to precipitate recently. I have also gained something in the rest days. I plan to write a toy JS Library in my spare time in the evening. Unlike many large frameworks, there is a careful plan before development. However, I just want to try. So I wrote a toy JS library called Strview.js.
What if you want to see it? You can read on. If you don't think it's interesting, you can treat it as a bad article and skip it directly!
introduce
Strview.js is a JS library that can convert strings into views. The string here generally refers to the template string. Of course, you can also use ordinary strings, but ordinary strings are more limited in specific scenarios. Therefore, the template string is preferred. Secondly, strview.js only focuses on the layer, which is not only easy to start, but also convenient for flexible disassembly and assembly of different code blocks.
Here is the official Chinese document address:
https://www.maomin.club/site/strviewjs/zh
If you want to start the project, please see how to install it below!
install
CDN
Directly to the following address:
<script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script>
If you use native ES Modules, there is also a build file compatible with ES Modules:
<script type="module">
import { createView } from 'https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.esm.js'
</script>
NPM
Latest stable version: 1.8.0
npm install strview
Command line tool (CLI)
strviewApp is a project building tool based on strview.js. You can use it to build pages more conveniently and flexibly. How to install it, you can use strviewCli to quickly install strviewApp.
Global installation
npm install strview-cli -g
View version
strview-cli -v
Initialize project
strview-cli init <projectName>
Get started quickly
The easiest way to try Strview.js is to use the Hello World example. You can open it in the browser's new tab and learn some basic usage from the examples. You can use strview.global.js in the CDN version. Using this file will expose Strview globally, which you can call directly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strview.js</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script>
<script>
Strview.createView({
el: "#app",
data: {
msg: 'Hello World'
},
template: `<p>{msg}</p>`,
});
</script>
</body>
</html>
As shown in the figure below:
Hello World
Basic use
Create view
Use the createView method to pass in an object whose attributes are el, data, and template. El represents the DOM element to be mounted, data represents the observed data object, and template represents the DOM template string. After defining these three properties, you can generate an expected view page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strview.js</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script>
<script>
Strview.createView({
el: "#app",
data: {
msg: 'Hello Strview.js'
},
template: `<p>{msg}</p>`,
});
</script>
</body>
</html>
Hello Strview.js
conditional rendering
Applies only to initial rendering.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strview.js</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script>
<script>
let isOk = false;
Strview.createView({
el: "#app",
data: {
msg: 'Hello Strview.js',
isOk:false
},
template: `
<p>{msg}</p>
${isOk ? `<span>hide</span>` : ''}
`,
});
</script>
</body>
</html>
Hello Strview.js
List rendering
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strview.js</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script>
<script>
let liNodes = ``;
for (let index = 1; index < 3; index++) {
liNodes += `<li>${index}</li>`
}
const app = Strview.createView({
el: '#app',
template: `<ul>${liNodes}</ul>`
})
</script>
</body>
</html>
1 2
event processing
The eventListener method has three parameters: DOM node, event name and callback function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strview.js</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script>
<script>
Strview.createView({
el: "#app",
data: {
msg: 'Hello Strview.js',
},
template: `
<p>{msg}</p>
`,
});
Strview.eventListener('p', 'click', () => {
console.log(1);
});
</script>
</body>
</html>
1
Responsiveness data
ref
For a single simple attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strview.js</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script>
<script>
Strview.createView({
el: "#app",
data: {
msg: 'Hello Strview.js',
},
template: `
<p>{msg}</p>
`,
});
Strview.eventListener('p', 'click', () => {
Strview.ref().msg = 1;
});
</script>
</body>
</html>
reactive
For complex attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strview.js</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script>
<script>
Strview.createView({
el: "#app",
data: {
obj: {
a: 1,
b: 2
}
},
template: `
<button class="btn1">change</button>
<p>{obj.a}</p>
<p>{obj.b}</p>
`,
});
Strview.eventListener('.btn1', 'click', () => {
Strview.reactive()['obj.a'] = 2;
Strview.reactive().obj.b = 3;
});
</script>
</body>
</html>
deploy
If you use strviewApp, a project building tool, you can deploy your project this way.
npm run build
or
yarn build
epilogue
The above is a general introduction to Strview.js. There must be a lot to improve. It is also written to come up with something, and to absorb everyone's opinions so that they can grow faster.
remarks
The following is the source code address:
https://github.com/maomincoding/strview https://github.com/maomincoding/strview-app https://github.com/maomincoding/strview-cli