Strve.js，一個可以將字符串轉換為視圖的JS庫詳情 - javascript,virtual-dom,string,npm Vam的金豆之路博客

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

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

Vam的金豆之路博客

Vam的金豆之路博客

博客 / 詳情