锐客网

  1. 首页 > it技术 > >

Strve.js，一个可以将字符串转换为视图的JS库

Strve.js，一个可以将字符串转换为视图的JS库
文章图片

前言 好久没有写原创了，今天就发一篇关于自己研发的JS库——Strve.js的文章。
终于体验了一把自己写JS库或框架，自己写文档，自己写工具的乐趣。
如果想了解一下Strve.js，可以根据文档上手一下。
官方文档：

https://www.maomin.club/site/...
NPM：
https://www.npmjs.com/package...
Github：
https://github.com/maomincodi...
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

快速上手 尝试 Strve.js 最简单的方法是使用直接引入CDN链接。你可以在浏览器打开它，跟着例子学习一些基础用法。
Strve.js - 锐客网

如果你还想深入学习其他关于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`Hello
`; }
updateView
  • 参数：
    • Function
  • 详细：
它仅仅有一个参数，这个参数是一个函数。函数体中需要执行将改变页面状态的值，例如以下示例中的state.msg。
const state = { msg:'1' }; function App() { return render`{state.msg}
}
`; }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`${state.msg}
`; }
另外你还可以使用更简便的方法符号{}，同样可以达到预想的效果。
const state = { msg: 'hello' }; function App() { return render`{state.msg}
`; }
但是，使用这种符号{}需要注意的是，它只适用于标签内的文本插值。例如如下这种情况，它是不起作用的，不过你可以使用强大的符号${}。
// Bad function App() { return render` } `; }// Good function App() { return render` } `; }

表达式
目前仅支持在符号${}中使用表达式。例如，
const state = { a: 1, b: 2 }; function App() { return render`${String(state.a + state.b)}
} `; }

属性绑定 前面，我们可以看到使用符号${}可以与属性value绑定值。
function App() { return render` } `; }

另外，你还可以绑定其他属性，例如class。
const state = { isRed: true }; function App() { return render`Strve.js
`; }

条件渲染 我们也可以使用符号${}，这块内容只会在指令的表达式返回 true 值的时候被渲染。
const state = { isShow: false }; function App() { return render` ${state.isShow ? render`Strve.js
` : '' } `; }function useShow() { updateView(() => { state.isShow = !state.isShow; }); }

列表渲染 我们可以用符号${}基于一个数组来渲染一个列表。比如我们使用数组的map方法来渲染列表，并且可以动态添加数组项。
const state = { arr: ['1', '2'] }; function App() { return render` } `; }function usePush() { updateView(() => { state.arr.push('3'); }); }

事件处理 我们可以使用原生onclick指令来监听 DOM 事件，并在触发事件时执行一些 JavaScript。需要使用符号${}来绑定事件。
function App() { return render` } `; }function useClick() { console.log('hello'); }

与Vue.js搭配 Strve.js不仅可以单独使用，也可以与Vue.js搭配使用。你需要在Vue实例挂载完成后被调用Strve()注册方法，并且第一个参数已经在template标签中存在。
App.vue

如果需要与Vue共享一个方法，推荐在setup方法中使用。
HelloWorld.vue

如果，你想在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`{state.msg}` }function useClick(){ updateView(()=>{ state.msg = "World"; }) }function App() { useEffect(()=>{ Strve(".App",{ data:{state}, template: Home }) }) return (); }export default App;

工具 create-strve 在前面我们也简单介绍过，create-strve是基于Strve.js的项目构建工具，您可以使用它更方便灵活地搭建页面。create-strve是用Vite来构建的，它是一种新型前端构建工具，能够显著提升前端开发体验。
安装
全局安装
npm install create-strve -g

查看版本
create-strve -v

初始化项目
create-strve init

启动
yarn dev # OR npm run dev

部署
yarn build # OR npm run build

配置
【Strve.js，一个可以将字符串转换为视图的JS库】因为create-strve是用Vite来构建的，所以你可以按照Vite的约定配置进行自定义配置create-strve。
其它 关于作者

推荐阅读


上一篇：伪前端花式调接口

下一篇：Java集合框架