最近,这几周更新文章的频率明显比之前有所降低。不是懒,主要是最近想沉淀沉淀。休息的这几天我也有所收获,抽着晚上的空打算自己写一个玩具JS库玩玩。不像很多大型框架那样,在开发之前都有严思缜密的计划。然而,我就只想动手尝试尝试。所以,我写了一个叫Strview.js
这样一个玩具JS库。
如果您想看看呢?可以继续读下去。如果觉得没啥意思的话,那可以当做一篇烂文章,直接跳过也可以啊!
Strview.js
是一个可以将字符串转换为视图的JS库。这里的字符串一般指的是模板字符串。当然你也可以使用普通字符串,只不过在特定场景下普通字符串更有局限性。所以,优先使用模板字符串。其次Strview.js
只关注视图层,不仅易于上手,还便于灵活拆装不同的代码块。
这里是中文官方文档地址:
https://www.maomin.club/site/strviewjs/zh
如果您想上手项目,那么请看下面怎么安装它吧!
直接引入以下地址:
<script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script>
如果你使用原生 ES Modules,这里也有一个兼容 ES Module 的构建文件:
<script type="module">
import { createView } from 'https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.esm.js'
</script>
最新稳定版本:1.8.0
npm install strview
strviewApp
是基于strview.js
的项目构建工具,您可以使用它更方便灵活地搭建页面。如何安装它,你可以使用strviewCli
来快速安装strviewApp
。
全局安装
npm install strview-cli -g
查看版本
strview-cli -v
初始化项目
strview-cli init <projectName>
尝试 Strview.js
最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。你可以使用CDN版本下的strview.global.js
。使用这个文件,会将Strview
全局暴露,您可以直接调用。
<!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>
如下图所示:
Hello World
使用createView
方法传入一个对象,对象属性分别为el
、data
、template
。el
表示为要挂载的DOM 元素,data
表示为观察的数据对象,template
表示为DOM模板字符串。定义好这三个属性之后就可以生成一个预想的视图页面。
<!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
只适用于初次渲染。
<!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
<!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
eventListener
方法一共有三个参数,分别是DOM节点、事件名称、回调函数。
<!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
针对单一简单属性。
<!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>
针对复杂属性。
<!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>
如果您使用strviewApp
这个项目构建工具,你可以这样部署您的项目。
npm run build
or
yarn build
以上就是Strview.js
大概介绍了,需要改进的地方肯定很多。写出来也是为了拿出一点东西来,还有就是吸取大家的意见,让自己可以更快地成长。
以下是源码地址:
https://github.com/maomincoding/strview https://github.com/maomincoding/strview-app https://github.com/maomincoding/strview-cli