「Strve.Js」可以將字符串轉換為視圖的JS庫
前言
好久沒有寫原創了，今天就發一篇關于自己研發的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。
- <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
本文轉載自微信公眾號「前端歷劫之路」，可以通過以下二維碼關注。轉載本文請聯系前端歷劫之路公眾號。
