「Strve.Js」可以将字符串转换为视图的JS库

益华IT技术论坛IT科技类资讯 2025-10-07 18:13:58

前言

好久没有写原创了，可库今天就发一篇关于自己研发的将字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

Strve.js

一个可以将字符串转换为视图的符串JS库。

快速地

超快的转换虚拟 DOM。

?为视? 空间小

源代码文件大小仅仅4kb。

灵活地

易于灵活地拆装不同的可库代码块。

介绍

Strve.js是将字一个可以将字符串转换为视图的JS库。这里的符串字符串指的是模板字符串，所以你仅需要在JavaScript中开发视图。转换Strve.js 不仅易于上手，为视还便于灵活拆装不同的代码块。

如果您想上手项目，那么请看下面怎么安装它吧!

安装

CDN

如果你使用原生 ES Modules。

NPM

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的内容，你可以继续往下阅读。

使用

API

Strve.js目前仅仅有三个API。

Strve render updateView

是不是很简单!快来看看这三个API是什么意思?怎么使用它们?

Strve

参数： string object 详细：

初始化Strve.js。第一个参数传入需要挂载到HTML页面的节点选择器名称。第二个参数传入一个对象，第一个属性data表示的意思是状态对象，第二个属性template表示模板函数。

Strve(#app, { data: { state }, template: App });

render

类型：Function 详细：

render`` 是一个标签函数，标签函数的语法是函数名后面直接带一个模板字符串，并从模板字符串中的插值表达式中获取参数。比如说，你可以在模板字符串中直接可以写HTML标签。

function App() { return render` <div class=inner> <h1>Hello</h1> </div > `; }

updateView

参数： Function 详细：

它仅仅有一个参数，这个参数是一个函数。函数体中需要执行将改变页面状态的服务器托管值，例如以下示例中的state.msg。

插值

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 值的时候被渲染。

列表渲染

我们可以用符号${ }基于一个数组来渲染一个列表。比如我们使用数组的map方法来渲染列表，并且可以动态添加数组项。

事件处理

我们可以使用原生onclick指令来监听 DOM 事件，并在触发事件时执行一些 JavaScript。需要使用符号${ }来绑定事件。

function App() { return render` <div class=inner> <button onclick=${ useClick}>sayHello</button> } </div > `; } function useClick() { console.log(hello); }

与Vue.js搭配

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

与React.js搭配

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

在前面我们也简单介绍过，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。

其它

关于作者

英文名：Vam

昵称ID：maomincoding

Github：https://github.com/maomincoding

Twitter：https://twitter.com/maomincoding

本文转载自微信公众号「前端历劫之路」，可以通过以下二维码关注。转载本文请联系前端历劫之路公众号。

前言