「Strve.Js」可以將字符串轉換為視圖的JS庫

作者： maomin9761 2021-11-29 00:17:41

開發前端

好久沒有寫原創了，今天就發一篇關于自己研發的JS庫——Strve.js的文章。終于體驗了一把自己寫JS庫或框架，自己寫文檔，自己寫工具的樂趣。如果想了解一下Strve.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

本文轉載自微信公眾號「前端歷劫之路」，可以通過以下二維碼關注。轉載本文請聯系前端歷劫之路公眾號。

責任編輯：武曉燕來源：前端歷劫之路

JS 符串轉換

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看