「Strve.js」可以將字符串轉(zhuǎn)換為視圖的JS庫
前言
好久沒有寫原創(chuàng)了，今天就發(fā)一篇關(guān)于自己研發(fā)的JS庫——Strve.js的文章。
終于體驗(yàn)了一把自己寫JS庫或框架，自己寫文檔，自己寫工具的樂趣。
如果想了解一下Strve.js，可以根據(jù)文檔上手一下。
官方文檔：
https://www.maomin.club/site/strvejs/
NPM：
https://www.npmjs.com/package/strvejs
Github：
https://github.com/maomincoding/strve
Strve.js
一個(gè)可以將字符串轉(zhuǎn)換為視圖的JS庫。
?? 快速地
超快的虛擬 DOM。
?? 空間小
源代碼文件大小僅僅4kb。
?? 靈活地
易于靈活地拆裝不同的代碼塊。
介紹
Strve.js是一個(gè)可以將字符串轉(zhuǎn)換為視圖的JS庫。這里的字符串指的是模板字符串，所以你僅需要在JavaScript中開發(fā)視圖。Strve.js 不僅易于上手，還便于靈活拆裝不同的代碼塊。
如果您想上手項(xiàng)目，那么請(qǐng)看下面怎么安裝它吧！
安裝
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的項(xiàng)目構(gòu)建工具，您可以使用它更方便靈活地搭建頁面。
全局安裝
npm?install?create-strve?-g
查看版本
create-strve?-v
初始化項(xiàng)目
create-strve?init?
快速上手
嘗試 Strve.js 最簡(jiǎn)單的方法是使用直接引入CDN鏈接。你可以在瀏覽器打開它，跟著例子學(xué)習(xí)一些基礎(chǔ)用法。
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.jstitle>
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`
??????????????
??????????????????${usePush}
??????????????????
????????????????????${state.arr.map((todo)?=>?render`${todo} >${todo}`)}
??????????????????
????????????????????????`;
????????}
????????function?usePush()?{
????????????updateView(()?=>?{
????????????????state.arr.push('3');
????????????});
????????}
????????Strve('#app',?{
????????????data:?{?state?},
????????????template:?App
????????});
????script>
body>
html>
如果你還想深入學(xué)習(xí)其他關(guān)于Strve.js的內(nèi)容，你可以繼續(xù)往下閱讀。
使用
API
Strve.js目前僅僅有三個(gè)API。
Strve render updateView
是不是很簡(jiǎn)單！快來看看這三個(gè)API是什么意思？怎么使用它們？
Strve
參數(shù)：
stringobject詳細(xì)：
初始化Strve.js。第一個(gè)參數(shù)傳入需要掛載到HTML頁面的節(jié)點(diǎn)選擇器名稱。第二個(gè)參數(shù)傳入一個(gè)對(duì)象，第一個(gè)屬性data表示的意思是狀態(tài)對(duì)象，第二個(gè)屬性template表示模板函數(shù)。
Strve('#app',?{
????data:?{?state?},
????template:?App
});
render
類型： Function詳細(xì)：
render`` 是一個(gè)標(biāo)簽函數(shù)，標(biāo)簽函數(shù)的語法是函數(shù)名后面直接帶一個(gè)模板字符串，并從模板字符串中的插值表達(dá)式中獲取參數(shù)。比如說，你可以在模板字符串中直接可以寫HTML標(biāo)簽。
function?App()?{
????return?render`
????????
????????????Hello
????????
????`
}
updateView
參數(shù)： Function詳細(xì)：
它僅僅有一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)函數(shù)。函數(shù)體中需要執(zhí)行將改變頁面狀態(tài)的值，例如以下示例中的state.msg。
const?state?=?{
????msg:'1'
};
function?App()?{
????return?render`
????????
????????????${useChange}
????????????{state.msg}
????????}
????????
????`;
}
function?useChange()?{
????updateView(()?=>?{
????????state.msg?=?'2';
????});
}
插值
Strve.js 使用了基于 JavaScript 的模板字符串語法，允許開發(fā)者聲明式地將 DOM 綁定至底層實(shí)例的數(shù)據(jù)。所有 Strve.js 的模板字符串都是合法的 HTML，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。
在底層的實(shí)現(xiàn)上，Strve.js 將模板字符串編譯成虛擬 DOM 渲染函數(shù)，并把 DOM 操作次數(shù)減到最少。
在Strve.js中，你可以盡情的使用JavaScript 的模板字符串，感受它獨(dú)特的魅力吧！
文本
數(shù)據(jù)綁定最常見的形式就是使用符號(hào)${}的文本插值：
const?state?=?{
????msg:?'hello'
};
function?App()?{
????return?render`
????????
????????????${state.msg}
????????
????`
}
另外你還可以使用更簡(jiǎn)便的方法符號(hào){}，同樣可以達(dá)到預(yù)想的效果。
const?state?=?{
????msg:?'hello'
};
function?App()?{
????return?render`
????????
????????????{state.msg}
????????
????`
}
但是，使用這種符號(hào){}需要注意的是，它只適用于標(biāo)簽內(nèi)的文本插值。例如如下這種情況，它是不起作用的，不過你可以使用強(qiáng)大的符號(hào)${}。
//?Bad
function?App()?{
????return?render`
????????
????????????
????????}
????????
????`
}
//?Good
function?App()?{
????return?render`
????????
????????????${state.msg}
????????}
????????
????`;
}
表達(dá)式
目前僅支持在符號(hào)${}中使用表達(dá)式。例如，
const?state?=?{
????a:?1,
????b:?2
};
function?App()?{
????return?render`
????????
????????????${String(state.a?+?state.b)}
????????}
????????
????`
}
屬性綁定
前面，我們可以看到使用符號(hào)${}可以與屬性value綁定值。
function?App()?{
????return?render`
????????
????????????${state.msg}
????????}
????????
????`;
}
另外，你還可以綁定其他屬性，例如class。
const?state?=?{
????isRed:?true
};
function?App()?{
????return?render`
????
????????${state.isRed???'red'?:?''}
????
`;
}
條件渲染
我們也可以使用符號(hào)${}，這塊內(nèi)容只會(huì)在指令的表達(dá)式返回 true 值的時(shí)候被渲染。
const?state?=?{
????isShow:?false
};
function?App()?{
????return?render`
????????
????????????${useShow}
????????????${state.isShow???render`Strve.js
`?:?''
????????}
????????
????`;
}
function?useShow()?{
????updateView(()?=>?{
????????state.isShow?=?!state.isShow;
????});
}
列表渲染
我們可以用符號(hào)${}基于一個(gè)數(shù)組來渲染一個(gè)列表。比如我們使用數(shù)組的map方法來渲染列表，并且可以動(dòng)態(tài)添加數(shù)組項(xiàng)。
const?state?=?{
????arr:?['1',?'2']
};
function?App()?{
????return?render`
????????
????????????${usePush}
????????????
????????????${state.arr.map((todo)?=>?render`${todo} >${todo}`)}
????????????
????????}
????????
????`;
}
function?usePush()?{
????updateView(()?=>?{
????????state.arr.push('3');
????});
}
事件處理
我們可以使用原生onclick指令來監(jiān)聽 DOM 事件，并在觸發(fā)事件時(shí)執(zhí)行一些 JavaScript。需要使用符號(hào)${}來綁定事件。
function?App()?{
????return?render`
????????
????????????${useClick}
????????}
????????
????`;
}
function?useClick()?{
????console.log('hello');
}
與Vue.js搭配
Strve.js不僅可以單獨(dú)使用，也可以與Vue.js搭配使用。你需要在Vue實(shí)例掛載完成后被調(diào)用Strve()注冊(cè)方法，并且第一個(gè)參數(shù)已經(jīng)在template標(biāo)簽中存在。
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`
??????
????????${hello()}
????????${about()}
??????
`;
export?default?{
??name:?"App",
??components:{
????HelloWorld
??},
??mounted()?{
????Strve("#container",?{
??????data:?{state},
??????template:?AppTm,
????});
??},
};
script>
如果需要與Vue共享一個(gè)方法，推薦在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`
${styles.color} "?onclick=${useCliimg}>hello
`
function?useCliimg(){
????console.log(1);
}
export?default?{
??name:'HelloWorld',
??setup(){
????return?{
??????useCliimg
????}
??}
}
script>
如果，你想在Vue組件中完全使用Strve.js，當(dāng)然也可以。不過最后，推薦使用export default導(dǎo)出組件名。
About.vue
<script>
import?{?render,?updateView?}?from?"strvejs";
import?styles?from?'../assets/about/about.module.css';
export?const?about?=?()=>render`
????{state.msg}
???${styles.color}"?onclick=${useClick}>about
`
export?const?state?=?{
????msg:"hello"
}
function?useClick()?{
????updateView(()=>{
????????state.msg?=?'world';
????})
}
export?default?{
????name:"About"
}
script>
與React.js搭配
Strve.js與Vue.js搭配相比，與React.js搭配使用更為靈活。同樣需要在組件第一次渲染完成后調(diào)用Strve()方法注冊(cè)方法。
App.js
import?{useEffect}?from?'react'
import?{Strve,render,updateView}?from?'strvejs';
import?'./App.css';
const?state?=?{
??msg:"Hello"
}
function?Home(){
??return?render`${useClick} >{state.msg}`
}
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
在前面我們也簡(jiǎn)單介紹過，create-strve是基于Strve.js的項(xiàng)目構(gòu)建工具，您可以使用它更方便靈活地搭建頁面。create-strve是用Vite來構(gòu)建的，它是一種新型前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗(yàn)。
安裝
全局安裝
npm?install?create-strve?-g
查看版本
create-strve?-v
初始化項(xiàng)目
create-strve?init?
啟動(dòng)
yarn?dev
#?OR
npm?run?dev
部署
yarn?build
#?OR
npm?run?build
配置
因?yàn)?code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;background: rgb(248, 245, 236);color: rgb(255, 53, 2);line-height: 1.5;font-size: 90%;padding: 3px 5px;border-radius: 2px;">create-strve是用Vite來構(gòu)建的，所以你可以按照Vite的約定配置進(jìn)行自定義配置create-strve。
其它
關(guān)于作者
英文名：Vam 昵稱ID：maomincoding Github：https://github.com/maomincoding Twitter：https://twitter.com/maomincoding