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

·  阅读 4002
Strve.js,一个可以将字符串转换为视图的JS库

「时光不负,创作不停,本文正在参加2021年终总结征文大赛

年终总结(小插曲)

2021年即将结束,今年过得好快。小伙们立得Flag都实现了吗?没实现的话,也不要着急。人生就是一个不停进步的过程,每天进步一点点。

在年初,我给自己立下了一个Flag,就是让自己稳下来,多看看书,沉淀下自己的技术。只有地基打好了,以后不管大楼盖多高都可以屹立不倒!

之前,看了一篇关于技术深度与广度的文章,上面说得我深有体会。上面说到:推荐把事情做专,做出高度上的价值,这个价值经常会大过广度上的价值,除非你的广度本身成了一种高度,因此更建议程序员去寻找高度上的价值。

新的2022即将来临,让我们一起迎接新的挑战吧!

前言

好久没有写原创了,今天就发一篇关于自己研发的JS库——Strve.js的文章。

终于体验了一把自己写JS库或框架,自己写文档,自己写工具的乐趣。

如果想了解一下Strve.js,可以根据文档上手一下。

官方文档:

www.maomin.club/site/strvej…

NPM:

www.npmjs.com/package/str…

Github:

github.com/maomincodin…

Strve.js

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

  • ⚡️ 快速地

超快的虚拟 DOM。

  • 📦 空间小

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

  • 🗂 灵活地

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

介绍

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

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

安装

CDN

如果你使用原生 ES Modules。

<script type="module">
  import { Strve, render, updateView } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.min.js';
</script>
复制代码

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

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');
}
复制代码

与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

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

复制代码

与React.js搭配

Strve.jsVue.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

其它

关于作者

分类:
阅读
分类:
阅读