好久没有写原创了,今天就发一篇关于自己研发的JS库——Strve.js的文章。
终于体验了一把自己写JS库或框架,自己写文档,自己写工具的乐趣。
如果想了解一下Strve.js,可以根据文档上手一下。
官方文档:
https://www.maomin.club/site/strvejs/
NPM:
https://www.npmjs.com/package/strvejs
Github:
https://github.com/maomincoding/strve
一个可以将字符串转换为视图的JS库。
超快的虚拟 DOM。
源代码文件大小仅仅4kb。
易于灵活地拆装不同的代码块。
Strve.js
是一个可以将字符串转换为视图的JS库。这里的字符串指的是模板字符串,所以你仅需要在JavaScript
中开发视图。Strve.js
不仅易于上手,还便于灵活拆装不同的代码块。
如果您想上手项目,那么请看下面怎么安装它吧!
如果你使用原生 ES Modules。
<script type="module">
import { Strve, render, updateView } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.min.js';
</script>
npm i strvejs
create-strve
是基于strve.js
的项目构建工具,您可以使用它更方便灵活地搭建页面。
全局安装
npm install create-strve -g
查看版本
create-strve -v
初始化项目
create-strve init <projectName>
尝试 Strve.js
最简单的方法是使用直接引入CDN链接。你可以在浏览器打开它,跟着例子学习一些基础用法。
<!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>Strve.js</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import { Strve, render, updateView } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.min.js';
const state = {
arr: ['1', '2'],
};
function App() {
return render`
<div class='inner'>
<button id='btn2' onclick=${usePush}>push</button>
<ul>
${state.arr.map((todo) => render`<li key=${todo}>${todo}</li>`)}
</ul>
</div>
`;
}
function usePush() {
updateView(() => {
state.arr.push('3');
});
}
Strve('#app', {
data: { state },
template: App
});
</script>
</body>
</html>
如果你还想深入学习其他关于Strve.js
的内容,你可以继续往下阅读。
Strve.js
目前仅仅有三个API。
是不是很简单!快来看看这三个API是什么意思?怎么使用它们?
string
object
初始化Strve.js
。第一个参数传入需要挂载到HTML页面的节点选择器名称。第二个参数传入一个对象,第一个属性data
表示的意思是状态对象,第二个属性template
表示模板函数。
Strve('#app', {
data: { state },
template: App
});
Function
render``
是一个标签函数,标签函数的语法是函数名后面直接带一个模板字符串,并从模板字符串中的插值表达式中获取参数。比如说,你可以在模板字符串中直接可以写HTML标签。
function App() {
return render`
<div class='inner'>
<h1>Hello</h1>
</div >
`;
}
Function
它仅仅有一个参数,这个参数是一个函数。函数体中需要执行将改变页面状态的值,例如以下示例中的state.msg
。
const state = {
msg:'1'
};
function App() {
return render`
<div class='inner'>
<button onclick=${useChange}>change</button>
<p>{state.msg}</p>
}
</div >
`;
}
function useChange() {
updateView(() => {
state.msg = '2';
});
}
Strve.js
使用了基于 JavaScript 的模板字符串语法,允许开发者声明式地将 DOM 绑定至底层实例的数据。所有 Strve.js
的模板字符串都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Strve.js
将模板字符串编译成虚拟 DOM 渲染函数,并把 DOM 操作次数减到最少。
在Strve.js
中,你可以尽情的使用JavaScript 的模板字符串,感受它独特的魅力吧!
数据绑定最常见的形式就是使用符号${}
的文本插值:
const state = {
msg: 'hello'
};
function App() {
return render`
<div class='inner'>
<p>${state.msg}</p>
</div >
`;
}
另外你还可以使用更简便的方法符号{}
,同样可以达到预想的效果。
const state = {
msg: 'hello'
};
function App() {
return render`
<div class='inner'>
<p>{state.msg}</p>
</div >
`;
}
但是,使用这种符号{}
需要注意的是,它只适用于标签内的文本插值。例如如下这种情况,它是不起作用的,不过你可以使用强大的符号${}
。
// Bad
function App() {
return render`
<div class='inner'>
<input type="text" value={state.msg}/>
}
</div >
`;
}
// Good
function App() {
return render`
<div class='inner'>
<input type="text" value=${state.msg}/>
}
</div >
`;
}
目前仅支持在符号${}
中使用表达式。例如,
const state = {
a: 1,
b: 2
};
function App() {
return render`
<div class='inner'>
<p>${String(state.a + state.b)}</p>
}
</div >
`;
}
前面,我们可以看到使用符号${}
可以与属性value
绑定值。
function App() {
return render`
<div class='inner'>
<input type="text" value=${state.msg}/>
}
</div >
`;
}
另外,你还可以绑定其他属性,例如class
。
const state = {
isRed: true
};
function App() {
return render`
<div class='inner'>
<p class=${state.isRed ? 'red' : ''}>Strve.js</p>
</div >
`;
}
我们也可以使用符号${}
,这块内容只会在指令的表达式返回 true
值的时候被渲染。
const state = {
isShow: false
};
function App() {
return render`
<div class='inner'>
<button onclick=${useShow}>show</button>
${state.isShow ? render`<p>Strve.js</p>` : ''
}
</div >
`;
}
function useShow() {
updateView(() => {
state.isShow = !state.isShow;
});
}
我们可以用符号${}
基于一个数组来渲染一个列表。比如我们使用数组的map
方法来渲染列表,并且可以动态添加数组项。
const state = {
arr: ['1', '2']
};
function App() {
return render`
<div class='inner'>
<button onclick=${usePush}>push</button>
<ul>
${state.arr.map((todo) => render`<li key=${todo}>${todo}</li>`)}
</ul>
}
</div >
`;
}
function usePush() {
updateView(() => {
state.arr.push('3');
});
}
我们可以使用原生onclick
指令来监听 DOM 事件,并在触发事件时执行一些 JavaScript。需要使用符号${}
来绑定事件。
function App() {
return render`
<div class='inner'>
<button onclick=${useClick}>sayHello</button>
}
</div >
`;
}
function useClick() {
console.log('hello');
}
Strve.js
不仅可以单独使用,也可以与Vue.js搭配使用。你需要在Vue实例挂载完成后被调用Strve()
注册方法,并且第一个参数已经在template
标签中存在。
App.vue
<template>
<div id="container">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld ,{hello} from './components/HelloWorld.vue';
import { about,state } from './components/About.vue';
import { render, Strve } from "strvejs";
const AppTm = () => render`
<div>
${hello()}
${about()}
</div>
`;
export default {
name: "App",
components:{
HelloWorld
},
mounted() {
Strve("#container", {
data: {state},
template: AppTm,
});
},
};
</script>
如果需要与Vue共享一个方法,推荐在setup
方法中使用。
HelloWorld.vue
<template>
<div>
<img src="../assets/logo.png" alt="" @click="useCliimg">
</div>
</template>
<script>
import { render } from "strvejs";
import styles from '../assets/hello/hello.module.css';
export const hello = ()=>render`
<h2 class="${styles.color}" onclick=${useCliimg}>hello</h2>
`
function useCliimg(){
console.log(1);
}
export default {
name:'HelloWorld',
setup(){
return {
useCliimg
}
}
}
</script>
如果,你想在Vue组件中完全使用Strve.js
,当然也可以。不过最后,推荐使用export default
导出组件名。
About.vue
<script>
import { render, updateView } from "strvejs";
import styles from '../assets/about/about.module.css';
export const about = ()=>render`
<div>
<p>{state.msg}</p>
<h2 class="${styles.color}" onclick=${useClick}>about</h2>
</div>
`
export const state = {
msg:"hello"
}
function useClick() {
updateView(()=>{
state.msg = 'world';
})
}
export default {
name:"About"
}
</script>
Strve.js
与Vue.js搭配相比,与React.js搭配使用更为灵活。同样需要在组件第一次渲染完成后调用Strve()
方法注册方法。
App.js
import {useEffect} from 'react'
import {Strve,render,updateView} from 'strvejs';
import './App.css';
const state = {
msg:"Hello"
}
function Home(){
return render`<h1 onclick=${useClick}>{state.msg}</h1>`
}
function useClick(){
updateView(()=>{
state.msg = "World";
})
}
function App() {
useEffect(()=>{
Strve(".App",{
data:{state},
template: Home
})
})
return (<div className="App"></div>);
}
export default App;
在前面我们也简单介绍过,create-strve
是基于Strve.js
的项目构建工具,您可以使用它更方便灵活地搭建页面。create-strve
是用Vite来构建的,它是一种新型前端构建工具,能够显著提升前端开发体验。
全局安装
npm install create-strve -g
查看版本
create-strve -v
初始化项目
create-strve init <projectName>
yarn dev
# OR
npm run dev
yarn build
# OR
npm run build
因为create-strve
是用Vite来构建的,所以你可以按照Vite的约定配置进行自定义配置create-strve
。