自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

「Strve.Js」可以將字符串轉(zhuǎn)換為視圖的JS庫

作者： maomin9761
開發(fā) 前端
好久沒有寫原創(chuàng)了，今天就發(fā)一篇關(guān)于自己研發(fā)的JS庫——Strve.js的文章。終于體驗(yàn)了一把自己寫JS庫或框架，自己寫文檔，自己寫工具的樂趣。如果想了解一下Strve.js，可以根據(jù)文檔上手一下。

前言

好久沒有寫原創(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)目，那么請看下面怎么安裝它吧!

安裝

CDN

如果你使用原生 ES Modules。

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

 

NPM

  1. npm i strvejs 

命令行工具

create-strve是基于strve.js的項(xiàng)目構(gòu)建工具，您可以使用它更方便靈活地搭建頁面。

全局安裝

  1. npm install create-strve -g 

查看版本

  1. create-strve -v 

初始化項(xiàng)目

 

  1. create-strve init <projectName> 

快速上手

嘗試 Strve.js 最簡單的方法是使用直接引入CDN鏈接。你可以在瀏覽器打開它，跟著例子學(xué)習(xí)一些基礎(chǔ)用法。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.  
  4. <head> 
  5.     <meta charset="UTF-8"> 
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  8.     <title>Strve.js</title> 
  9. </head> 
  10.  
  11. <body> 
  12.     <div id="app"></div> 
  13.     <script type="module"> 
  14.         import { Strve, render, updateView } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.min.js'; 
  15.  
  16.         const state = { 
  17.             arr: ['1', '2'], 
  18.         }; 
  19.  
  20.         function App() { 
  21.             return render` 
  22.               <div class='inner'> 
  23.                   <button id='btn2' onclick=${usePush}>push</button> 
  24.                   <ul> 
  25.                     ${state.arr.map((todo) => render`<li key=${todo}>${todo}</li>`)} 
  26.                   </ul> 
  27.               </div> 
  28.           `; 
  29.         } 
  30.  
  31.         function usePush() { 
  32.             updateView(() => { 
  33.                 state.arr.push('3'); 
  34.             }); 
  35.         } 
  36.  
  37.         Strve('#app', { 
  38.             data: { state }, 
  39.             template: App 
  40.         }); 
  41.     </script> 
  42. </body> 
  43.  
  44. </html> 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

如果你還想深入學(xué)習(xí)其他關(guān)于Strve.js的內(nèi)容，你可以繼續(xù)往下閱讀。

使用

API

Strve.js目前僅僅有三個(gè)API。

  • Strve
  • render
  • updateView

是不是很簡單!快來看看這三個(gè)API是什么意思?怎么使用它們?

Strve

  • 參數(shù)：
    • string
    • object
  • 詳細(xì)：

初始化Strve.js。第一個(gè)參數(shù)傳入需要掛載到HTML頁面的節(jié)點(diǎn)選擇器名稱。第二個(gè)參數(shù)傳入一個(gè)對象，第一個(gè)屬性data表示的意思是狀態(tài)對象，第二個(gè)屬性template表示模板函數(shù)。

  1. Strve('#app', { 
  2.     data: { state }, 
  3.     template: App 
  4. }); 

render

  • 類型：Function
  • 詳細(xì)：

render`` 是一個(gè)標(biāo)簽函數(shù)，標(biāo)簽函數(shù)的語法是函數(shù)名后面直接帶一個(gè)模板字符串，并從模板字符串中的插值表達(dá)式中獲取參數(shù)。比如說，你可以在模板字符串中直接可以寫HTML標(biāo)簽。

  1. function App() { 
  2.     return render` 
  3.         <div class='inner'> 
  4.             <h1>Hello</h1> 
  5.         </div > 
  6.     `; 
  7. } 

updateView

  • 參數(shù)：
    • Function
  • 詳細(xì)：

它僅僅有一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)函數(shù)。函數(shù)體中需要執(zhí)行將改變頁面狀態(tài)的值，例如以下示例中的state.msg。

  1. const state = { 
  2.     msg:'1' 
  3. }; 
  4.  
  5. function App() { 
  6.     return render` 
  7.         <div class='inner'> 
  8.             <button onclick=${useChange}>change</button> 
  9.             <p>{state.msg}</p> 
  10.         } 
  11.         </div > 
  12.     `; 
  13. } 
  14.  
  15. function useChange() { 
  16.     updateView(() => { 
  17.         state.msg = '2'; 
  18.     }); 
  19. } 

插值

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ù)綁定最常見的形式就是使用符號${}的文本插值：

  1. const state = { 
  2.     msg: 'hello' 
  3. }; 
  4.  
  5. function App() { 
  6.     return render` 
  7.         <div class='inner'> 
  8.             <p>${state.msg}</p> 
  9.         </div > 
  10.     `; 
  11. } 

另外你還可以使用更簡便的方法符號{}，同樣可以達(dá)到預(yù)想的效果。

  1. const state = { 
  2.     msg: 'hello' 
  3. }; 
  4.  
  5. function App() { 
  6.     return render` 
  7.         <div class='inner'> 
  8.             <p>{state.msg}</p> 
  9.         </div > 
  10.     `; 
  11. } 

但是，使用這種符號{}需要注意的是，它只適用于標(biāo)簽內(nèi)的文本插值。例如如下這種情況，它是不起作用的，不過你可以使用強(qiáng)大的符號${}。

  1. // Bad 
  2. function App() { 
  3.     return render` 
  4.         <div class='inner'> 
  5.             <input type="text" value={state.msg}/> 
  6.         } 
  7.         </div > 
  8.     `; 
  9. } 
  10.  
  11. // Good 
  12. function App() { 
  13.     return render` 
  14.         <div class='inner'> 
  15.             <input type="text" value=${state.msg}/> 
  16.         } 
  17.         </div > 
  18.     `; 
  19. } 

表達(dá)式

目前僅支持在符號${}中使用表達(dá)式。例如，

  1. const state = { 
  2.     a: 1, 
  3.     b: 2 
  4. }; 
  5.  
  6. function App() { 
  7.     return render` 
  8.         <div class='inner'> 
  9.             <p>${String(state.a + state.b)}</p> 
  10.         } 
  11.         </div > 
  12.     `; 
  13. } 

屬性綁定

前面，我們可以看到使用符號${}可以與屬性value綁定值。

  1. function App() { 
  2.     return render` 
  3.         <div class='inner'> 
  4.             <input type="text" value=${state.msg}/> 
  5.         } 
  6.         </div > 
  7.     `; 
  8. } 

另外，你還可以綁定其他屬性，例如class。

  1. const state = { 
  2.     isRed: true 
  3. }; 
  4.  
  5. function App() { 
  6.     return render` 
  7.     <div class='inner'> 
  8.         <p class=${state.isRed ? 'red' : ''}>Strve.js</p> 
  9.     </div > 
  10. `; 
  11. } 

條件渲染

我們也可以使用符號${}，這塊內(nèi)容只會在指令的表達(dá)式返回 true 值的時(shí)候被渲染。

  1. const state = { 
  2.     isShow: false 
  3. }; 
  4.  
  5. function App() { 
  6.     return render` 
  7.         <div class='inner'> 
  8.             <button onclick=${useShow}>show</button> 
  9.             ${state.isShow ? render`<p>Strve.js</p>` : '' 
  10.         } 
  11.         </div > 
  12.     `; 
  13. } 
  14.  
  15. function useShow() { 
  16.     updateView(() => { 
  17.         state.isShow = !state.isShow; 
  18.     }); 
  19. } 

列表渲染

我們可以用符號${}基于一個(gè)數(shù)組來渲染一個(gè)列表。比如我們使用數(shù)組的map方法來渲染列表，并且可以動態(tài)添加數(shù)組項(xiàng)。

  1. const state = { 
  2.     arr: ['1', '2'] 
  3. }; 
  4.  
  5. function App() { 
  6.     return render` 
  7.         <div class='inner'> 
  8.             <button onclick=${usePush}>push</button> 
  9.             <ul> 
  10.             ${state.arr.map((todo) => render`<li key=${todo}>${todo}</li>`)} 
  11.             </ul> 
  12.         } 
  13.         </div > 
  14.     `; 
  15. } 
  16.  
  17. function usePush() { 
  18.     updateView(() => { 
  19.         state.arr.push('3'); 
  20.     }); 
  21. } 

事件處理

我們可以使用原生onclick指令來監(jiān)聽 DOM 事件，并在觸發(fā)事件時(shí)執(zhí)行一些 JavaScript。需要使用符號${}來綁定事件。

  1. function App() { 
  2.     return render` 
  3.         <div class='inner'> 
  4.             <button onclick=${useClick}>sayHello</button> 
  5.         } 
  6.         </div > 
  7.     `; 
  8. } 
  9.  
  10. function useClick() { 
  11.     console.log('hello'); 
  12. } 

與Vue.js搭配

Strve.js不僅可以單獨(dú)使用，也可以與Vue.js搭配使用。你需要在Vue實(shí)例掛載完成后被調(diào)用Strve()注冊方法，并且第一個(gè)參數(shù)已經(jīng)在template標(biāo)簽中存在。

App.vue

  1. <template> 
  2.   <div id="container"> 
  3.     <HelloWorld/> 
  4.   </div> 
  5. </template> 
  6.  
  7. <script> 
  8. import HelloWorld ,{hello} from './components/HelloWorld.vue'; 
  9. import { about,state } from './components/About.vue'; 
  10. import { render, Strve } from "strvejs"; 
  11. const AppTm = () => render` 
  12.       <div> 
  13.         ${hello()} 
  14.         ${about()} 
  15.       </div> 
  16. `; 
  17. export default { 
  18.   name: "App", 
  19.   components:{ 
  20.     HelloWorld 
  21.   }, 
  22.   mounted() { 
  23.     Strve("#container", { 
  24.       data: {state}, 
  25.       template: AppTm, 
  26.     }); 
  27.   }, 
  28. }; 
  29. </script> 

如果需要與Vue共享一個(gè)方法，推薦在setup方法中使用。

HelloWorld.vue

  1. <template> 
  2.   <div> 
  3.     <img src="../assets/logo.png" alt="" @click="useCliimg"> 
  4.   </div> 
  5. </template> 
  6. <script> 
  7. import { render } from "strvejs"; 
  8. import styles from '../assets/hello/hello.module.css'; 
  9.  
  10. export const hello = ()=>render` 
  11. <h2 class="${styles.color}" onclick=${useCliimg}>hello</h2> 
  12. ` 
  13. function useCliimg(){ 
  14.     console.log(1); 
  15. } 
  16.  
  17. export default { 
  18.   name:'HelloWorld', 
  19.   setup(){ 
  20.     return { 
  21.       useCliimg 
  22.     } 
  23.   } 
  24. } 
  25. </script> 

如果，你想在Vue組件中完全使用Strve.js，當(dāng)然也可以。不過最后，推薦使用export default導(dǎo)出組件名。

About.vue

  1. <script> 
  2. import { render, updateView } from "strvejs"; 
  3. import styles from '../assets/about/about.module.css'; 
  4.  
  5. export const about = ()=>render` 
  6. <div> 
  7.     <p>{state.msg}</p> 
  8.    <h2 class="${styles.color}" onclick=${useClick}>about</h2> 
  9. </div> 
  10. ` 
  11. export const state = { 
  12.     msg:"hello" 
  13. } 
  14.  
  15. function useClick() { 
  16.     updateView(()=>{ 
  17.         state.msg = 'world'; 
  18.     }) 
  19. } 
  20. export default { 
  21.     name:"About" 
  22. } 
  23. </script> 

與React.js搭配

Strve.js與Vue.js搭配相比，與React.js搭配使用更為靈活。同樣需要在組件第一次渲染完成后調(diào)用Strve()方法注冊方法。

App.js

  1. import {useEffect} from 'react' 
  2. import {Strve,render,updateView} from 'strvejs'; 
  3. import './App.css'; 
  4.  
  5. const state = { 
  6.   msg:"Hello" 
  7. } 
  8.  
  9. function Home(){ 
  10.   return render`<h1 onclick=${useClick}>{state.msg}</h1>` 
  11. } 
  12.  
  13. function useClick(){ 
  14.   updateView(()=>{ 
  15.     state.msg = "World"; 
  16.   }) 
  17. } 
  18.  
  19. function App() { 
  20.   useEffect(()=>{ 
  21.     Strve(".App",{ 
  22.       data:{state}, 
  23.       template: Home 
  24.     }) 
  25.   }) 
  26.   return (<div className="App"></div>); 
  27. } 
  28.  
  29. export default App; 

工具

create-strve

在前面我們也簡單介紹過，create-strve是基于Strve.js的項(xiàng)目構(gòu)建工具，您可以使用它更方便靈活地搭建頁面。create-strve是用Vite來構(gòu)建的，它是一種新型前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗(yàn)。

安裝

全局安裝

  1. npm install create-strve -g 

查看版本

  1. create-strve -v 

初始化項(xiàng)目

  1. create-strve init <projectName> 

啟動

  1. yarn dev 
  2. # OR 
  3. npm run dev 

部署

  1. yarn build 
  2.  
  3. # OR 
  4.  
  5. npm run build 

配置

因?yàn)閏reate-strve是用Vite來構(gòu)建的，所以你可以按照Vite的約定配置進(jìn)行自定義配置create-strve。

其它

關(guān)于作者

英文名：Vam

昵稱ID：maomincoding

Github：https://github.com/maomincoding

Twitter：https://twitter.com/maomincoding

本文轉(zhuǎn)載自微信公眾號「前端歷劫之路」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端歷劫之路公眾號。

 

責(zé)任編輯：武曉燕 來源： 前端歷劫之路
JS符串轉(zhuǎn)換
相關(guān)推薦

2021-12-23 06:07:21

前端技術(shù)編程

2022-02-21 06:02:49

Strve.jsCodepenReact

2024-01-04 09:17:03

前端開發(fā)CSV 格式JSON 字符串

2023-07-22 06:55:00

JS框架Strve

2021-08-12 00:03:37

JSStrview視圖

2024-02-19 15:38:08

JsonPython字符串

2024-10-08 09:32:08

算法題字符串函數(shù)

2023-06-15 06:57:06

Strve.jsVite

2022-11-14 00:14:49

2009-06-05 11:16:58

字符串動態(tài)轉(zhuǎn)換

2021-12-29 16:40:54

Python語言字符串

2022-02-23 10:48:52

TodoList應(yīng)用項(xiàng)目Strve開發(fā)

2009-11-25 16:55:45

PHP函數(shù)explod

2021-09-05 17:22:08

Strview.js工具js

2022-10-12 08:00:00

語音識別Node.js音頻質(zhì)量

2024-03-12 07:35:39

Python字符串列表

2010-03-31 19:15:25

Oracle函數(shù)

2016-12-30 13:16:51

字符串算法代碼

2010-11-26 14:09:32

MySQL內(nèi)置函數(shù)

2009-12-01 14:00:37

PHP字符串轉(zhuǎn)換為數(shù)值
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號