文章详情

登录

短信预约-IT技能 免费直播动态提醒

• 地区
• 手机号
• 验证码获取验证

立即预约

选择考试省份

• 北京
• 上海
• 天津
• 重庆
• 河北
• 山东
• 辽宁
• 黑龙江
• 吉林
• 甘肃
• 青海
• 河南
• 江苏
• 湖北
• 湖南
• 江西
• 浙江
• 广东
• 云南
• 福建
• 海南
• 山西
• 四川
• 陕西
• 贵州
• 安徽
• 广西
• 内蒙
• 西藏
• 新疆
• 宁夏
• 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-02 15:54

关注

终于体验了一把自己写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。

"module"> 
  import { Strve, render, updateView } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.min.js'; 
 

 

NPM

npm i strvejs 

命令行工具

create-strve是基于strve.js的项目构建工具，您可以使用它更方便灵活地搭建页面。

全局安装

npm install create-strve -g 

查看版本

create-strve -v 

初始化项目

 

create-strve init  

快速上手

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

 
"en"> 
 
 
    "UTF-8"> 
    "X-UA-Compatible" content="IE=edge"> 
    name="viewport" content="width=device-width, initial-scale=1.0"> 
     
 
 
 
    "app">

 

    "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` 

              'inner'> 

                  'btn2' onclick=${usePush}>push 

                  

 
•                     ${state.arr.map((todo) => render`key=${todo}>${todo}
`)} 
•                   

 

              

如果你还想深入学习其他关于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` 
        'inner'> 
             
         
    `; 
} 

updateView

• 参数：
  • Function
• 详细：

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

const state = { 
    msg:'1' 
}; 
 
function App() { 
    return render` 
        'inner'> 
            change 
            
{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` 
        'inner'> 
            
${state.msg}
 
         
    `; 
} 

另外你还可以使用更简便的方法符号{}，同样可以达到预想的效果。

const state = { 
    msg: 'hello' 
}; 
 
function App() { 
    return render` 
        'inner'> 
            
{state.msg}
 
         
    `; 
} 

但是，使用这种符号{}需要注意的是，它只适用于标签内的文本插值。例如如下这种情况，它是不起作用的，不过你可以使用强大的符号${}。

// Bad 
function App() { 
    return render` 
        'inner'> 
            "text" value={state.msg}/> 
        } 
         
    `; 
} 
 
// Good 
function App() { 
    return render` 
        'inner'> 
            "text" value=${state.msg}/> 
        } 
         
    `; 
} 

表达式

目前仅支持在符号${}中使用表达式。例如，

const state = { 
    a: 1, 
    b: 2 
}; 
 
function App() { 
    return render` 
        'inner'> 
            
${String(state.a + state.b)}
 
        } 
         
    `; 
} 

属性绑定

前面，我们可以看到使用符号${}可以与属性value绑定值。

function App() { 
    return render` 
        'inner'> 
            "text" value=${state.msg}/> 
        } 
         
    `; 
} 

另外，你还可以绑定其他属性，例如class。

const state = { 
    isRed: true 
}; 
 
function App() { 
    return render` 
    'inner'> 
        'red' : ''}>Strve.js
 
     
`; 
} 

条件渲染

我们也可以使用符号${}，这块内容只会在指令的表达式返回 true 值的时候被渲染。

const state = { 
    isShow: false 
}; 
 
function App() { 
    return render` 
        'inner'> 
            show 
            ${state.isShow ? render`
Strve.js
` : '' 
        } 
         
    `; 
} 
 
function useShow() { 
    updateView(() => { 
        state.isShow = !state.isShow; 
    }); 
} 

列表渲染

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

const state = { 
    arr: ['1', '2'] 
}; 
 
function App() { 
    return render` 
        'inner'> 
            push 
            
 
            ${state.arr.map((todo) => render`key=${todo}>${todo}
`)} 
            
 
        } 
         
    `; 
} 
 
function usePush() { 
    updateView(() => { 
        state.arr.push('3'); 
    }); 
} 

事件处理

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

function App() { 
    return render` 
        'inner'> 
            sayHello 
        } 
         
    `; 
} 
 
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`` 
} 
 
function useClick(){ 
  updateView(()=>{ 
    state.msg = "World"; 
  }) 
} 
 
function App() { 
  useEffect(()=>{ 
    Strve(".App",{ 
      data:{state}, 
      template: Home 
    }) 
  }) 
  return ("App">); 
} 
 
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 

配置

因为create-strve是用Vite来构建的，所以你可以按照Vite的约定配置进行自定义配置create-strve。

其它

关于作者

英文名：Vam

昵称ID：maomincoding

Github：https://github.com/maomincoding

Twitter：https://twitter.com/maomincoding

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

猜你喜欢

AI推送时光机

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

后端开发JS符串2024-12-02

PHP如何将8位字符串转换为带引号的可打印字符串

后端开发2024-04-02

PHP如何将带引号的可打印字符串转换为8位字符串

后端开发2024-04-02

Java如何将8位字符串转换为带引号的可打印字符串

后端开发2024-04-02

Java如何将带引号的可打印字符串转换为8位字符串

后端开发2024-04-02

PHP如何将8位字符串转换为带引号的可打印字符串

后端开发2024-04-02

PHP如何将带引号的可打印字符串转换为8位字符串

后端开发2024-04-02

Java中将base64编码字符串转换为图片的代码

后端开发2023-03-19

php怎么将数组转换为以逗号分隔符连接的字符串

后端开发2024-04-25

php如何将数组转换为以逗号分隔符连接的字符串

后端开发2023-06-29

php怎么将数组转换为以逗号分隔符连接的字符串

后端开发2021-01-01

首页课程

资料下载问答资讯