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

每個(gè)前端開(kāi)發(fā)者都可以開(kāi)發(fā)一個(gè)屬于自己的庫(kù)或框架「Strve.js生態(tài)初步建成」

作者：maomin9761
開(kāi)發(fā) 前端
Strve.js是一個(gè)可以將字符串轉(zhuǎn)換為視圖的JS庫(kù)。這里的字符串指的是模板字符串，所以你僅需要在JavaScript中開(kāi)發(fā)視圖。Strve.js不僅易于上手，還便于靈活拆裝不同的代碼塊。

[[441664]]

前言

從3個(gè)月之前，就想自己開(kāi)發(fā)一個(gè)庫(kù)，從而提高一下自己的能力。慶幸的是在年前就開(kāi)發(fā)出來(lái)了，并且生態(tài)也初步建成。這里提到的生態(tài)包括：Create Strve App、Strve Router以及其他輔助Strve.js開(kāi)發(fā)的工具。

說(shuō)實(shí)話，這段時(shí)間是挺難熬的，這也算是今年給自己一個(gè)禮物吧!

我開(kāi)發(fā)Strve.js的初衷是之前接觸過(guò)JSX語(yǔ)法，一直覺(jué)的JSX語(yǔ)法非?？?，可以在JS中寫(xiě)HTML標(biāo)簽，于是就想開(kāi)發(fā)一款類(lèi)似JSX語(yǔ)法的庫(kù)。剛開(kāi)始也開(kāi)發(fā)了一段時(shí)間，搭配Babel可以簡(jiǎn)單實(shí)現(xiàn)JSX語(yǔ)法。但是到后來(lái)覺(jué)得并不是那么完美，還要解決一些類(lèi)似修改數(shù)據(jù)更新視圖的一些問(wèn)題。熬了幾天夜，也沒(méi)有完美的解決。最后，還是放棄了這種方案。

我當(dāng)時(shí)在想，如果我僅僅想在JS中寫(xiě)HTML標(biāo)簽，那么使用JS中的模板字符串就已經(jīng)具備在字符串內(nèi)寫(xiě)HTML標(biāo)簽的能力了，為什么不換一下思路，研究一下在模板字符串中寫(xiě)HTML標(biāo)簽這種更加方便直接的方案呢?剛開(kāi)始我就是從基礎(chǔ)著手，寫(xiě)一串字符串，然后怎么想辦法將字符串掛載到頁(yè)面中。借鑒了React、Vue這些框架的思想，在頁(yè)面指定一個(gè)掛載元素。這就簡(jiǎn)單實(shí)現(xiàn)了在模板字符串內(nèi)開(kāi)發(fā)HTML，但是隨之而來(lái)的是不能做到數(shù)據(jù)變頁(yè)面變，從更加專(zhuān)業(yè)的角度上講就是數(shù)據(jù)驅(qū)動(dòng)頁(yè)面。并且更新頁(yè)面后盡可能的少修改DOM元素，減少重排帶來(lái)的性能上的影響。這從最初的簡(jiǎn)單的在JS寫(xiě)HTML又上升到一個(gè)層面上，怎么實(shí)現(xiàn)一個(gè)MVVM框架。

市面上知名的MVVM框架有Vue、React、Angular，既然自己想設(shè)計(jì)一個(gè)MVVM框架，那么可以借鑒一下它們的思想。首先，非常喜歡Vue的漸進(jìn)式設(shè)計(jì)思想，只要你是一個(gè)前端小白就可以立馬上手，這是非常值得借鑒的。另外又借鑒了React框架中的“All in JS”以及異步更新數(shù)據(jù)的思想。最后，它們兩個(gè)框架都使用了虛擬DOM來(lái)提升性能，那么我們也可以引入虛擬DOM機(jī)制。

之前，聽(tīng)過(guò)尤老師的幾期中文分享，談到框架的話題說(shuō)，框架的設(shè)計(jì)就是不斷的取舍。這其中肯定還會(huì)復(fù)雜很多，我上面也就是簡(jiǎn)單的概括了一下。能不能實(shí)現(xiàn)我所預(yù)期的那樣，當(dāng)時(shí)我也不知道，當(dāng)時(shí)就想把東西做出來(lái)。前面一個(gè)多月是非常痛苦的，幾乎是閉門(mén)造車(chē)。主要的難點(diǎn)是怎么將模板字符串轉(zhuǎn)化成虛擬DOM結(jié)構(gòu)，并且代碼量控制在最小。然后將轉(zhuǎn)化的虛擬DOM進(jìn)行Diff算法，更有效的更新DOM。

最終，功夫不負(fù)有心人，我終于如愿以償?shù)耐瓿闪薙trve.js的開(kāi)發(fā)。這個(gè)小型庫(kù)，也算不上是框架吧!設(shè)計(jì)的初衷上面也說(shuō)了就是自己想練練手，看自己也能不能開(kāi)發(fā)出起碼不是很差的庫(kù)或者框架。

下面，我將詳細(xì)介紹Strve.js，如果有疑問(wèn)或者其他問(wèn)題可以留言哦!謝謝閱讀!

Github

https://github.com/maomincoding/strve

Doc

https://maomincoding.github.io/strvejs-doc/

介紹

Strve.js的讀音/str'vi/，是字符串(String)與視圖(View)的拼接。Strve.js是一個(gè)可以將字符串轉(zhuǎn)換為視圖的JS庫(kù)。這里的字符串指的是模板字符串，所以你僅需要在JavaScript中開(kāi)發(fā)視圖。Strve.js不僅易于上手，還便于靈活拆裝不同的代碼塊。

使用模板字符串開(kāi)發(fā)視圖主要是利用了原生JavaScript的能力，可以更加靈活地分離代碼塊，你僅僅只關(guān)注JavaScript文件。從另一方面來(lái)看，目前源代碼文件僅僅4kb左右，當(dāng)然這是目前版本文件的大小。在之后的版本，會(huì)增加功能，肯定會(huì)增加代碼量。不過(guò)，Strve.js會(huì)盡力做到輕量級(jí)。

Strve.js又是一款輕量級(jí)的MVVM框架，你只需要關(guān)心數(shù)據(jù)以及如何操作它，其他工作交給Strve.js內(nèi)部處理。Strve.js首先會(huì)將模板字符串轉(zhuǎn)化為虛擬DOM，然后進(jìn)行Diff算法通過(guò)比較前后兩次的狀態(tài)差異更新真實(shí)DOM。這也是很多框架為了提升瀏覽器性能采用的方案，但是Strve.js更加輕量。

Strve.js目前僅僅3個(gè)API，是不是很容易上手? 如果你想上手項(xiàng)目，那么請(qǐ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> 
  1. npm i strvejs 

命令行工具

create-strve-app

一套快速搭建Strve.js項(xiàng)目的命令行工具。與早期的腳手架 Create Strve 相比，Create Strve App 更勝一籌，可直接輸入命令快速創(chuàng)建Strve項(xiàng)目。Create Strve App是用Vite來(lái)構(gòu)建的，它是一種新型前端構(gòu)建工具，能夠顯著提升前端開(kāi)發(fā)體驗(yàn)。

npm

  1. npm init strve-app@latest 

yarn

  1. yarn create strve-app 

pnpm

  1. pnpm create strve-app 

create-strve

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

全局安裝

  1. npm install create-strve -g 

查看版本

  1. create-strve -v 

初始化項(xiàng)目

  1. create-strve init <projectName> 

快速上手

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

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

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

使用

API

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

  • Strve
  • render
  • updateView

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

Strve

參數(shù)：

  • string
  • object

詳細(xì)：

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

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

render

  • 類(lèi)型：Function
  • 詳細(xì)：

render`` 是一個(gè)標(biāo)簽函數(shù)，標(biāo)簽函數(shù)的語(yǔ)法是函數(shù)名后面直接帶一個(gè)模板字符串，并從模板字符串中的插值表達(dá)式中獲取參數(shù)。比如說(shuō)，你可以在模板字符串中直接可以寫(xiě)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í)行將改變頁(yè)面狀態(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 的模板字符串語(yǔ)法，允許開(kāi)發(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ù)綁定最常見(jiàn)的形式就是使用符號(hào)${}的文本插值：

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

 另外你還可以使用更簡(jiǎn)便的方法符號(hào){}，同樣可以達(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. } 

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

  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á)式

目前僅支持在符號(hào)${}中使用表達(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. } 

屬性綁定

前面，我們可以看到使用符號(hào)${}可以與屬性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. } 

條件渲染

我們也可以使用符號(hào)${}，這塊內(nèi)容只會(huì)在指令的表達(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. } 

列表渲染

我們可以用符號(hào)${}基于一個(gè)數(shù)組來(lái)渲染一個(gè)列表。比如我們使用數(shù)組的map方法來(lái)渲染列表，并且可以動(dòng)態(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指令來(lái)監(jiān)聽(tīng) DOM 事件，并在觸發(fā)事件時(shí)執(zhí)行一些 JavaScript。需要使用符號(hào)${}來(lái)綁定事件。

  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()注冊(cè)方法，并且第一個(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)然也可以。不過(guò)最后，推薦使用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()方法注冊(cè)方法。

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

一套快速搭建Strve.js項(xiàng)目的命令行工具。與早期的腳手架 Create Strve 相比，Create Strve App 更勝一籌，可直接輸入命令快速創(chuàng)建Strve項(xiàng)目。Create Strve App是用Vite來(lái)構(gòu)建的，它是一種新型前端構(gòu)建工具，能夠顯著提升前端開(kāi)發(fā)體驗(yàn)。

搭建你的第一個(gè) Strve 項(xiàng)目

npm

  1. npm init strve-app@latest 

yarn

  1. yarn create strve-app 

pnpm

  1. pnpm create strve-app 

選擇模板

你可以根據(jù)自己的需要選擇對(duì)應(yīng)的模板。

  • strve

只包含Strve.js基本使用的功能。此模板適用于項(xiàng)目中僅僅單頁(yè)面，沒(méi)有跳轉(zhuǎn)其他頁(yè)面的應(yīng)用。

  • strve-apps

不僅包含了Strve.js的基本使用的功能，而且還包含了Strve Router，適用于跳轉(zhuǎn)多頁(yè)面以及稍微復(fù)雜的應(yīng)用。

create-strve

在前面我們也簡(jiǎn)單介紹過(guò)，Create Strve是基于Strve.js的項(xiàng)目構(gòu)建工具，您可以使用它更方便靈活地搭建頁(yè)面。Create Strve同樣是用Vite來(lái)構(gòu)建的。

不過(guò)，在這里推薦使用Create Strve App，它相對(duì)安裝更加靈活以及快速。

安裝

全局安裝

  1. npm install create-strve -g 

查看版本

  1. create-strve -v 

初始化項(xiàng)目

  1. create-strve init <projectName> 

strve-router

Strve Router 是 Strve.js 的官方路由管理器。 它與 Strve.js 的核心深度集成，可以輕松構(gòu)建單頁(yè)應(yīng)用程序。

目前只支持Hash模式。

開(kāi)始

嘗試 Strve Router 最簡(jiǎn)單的方法是使用直接導(dǎo)入 CDN 鏈接。 您可以在瀏覽器中打開(kāi)它并按照示例學(xué)習(xí)一些基本用法。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.  
  4. <head> 
  5.     <meta charset="UTF-8"> 
  6.     <title>StrveRouter</title> 
  7. </head> 
  8.  
  9. <body> 
  10.     <div id="app"></div> 
  11.     <script type="module"> 
  12.         import { Strve, render, updateView } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.js'; 
  13.         import StrveRouter from 'https://cdn.jsdelivr.net/npm/strve-router/dist/strve-router.esm.js'; 
  14.  
  15.         const state = { 
  16.             msg: 'Hello!' 
  17.         }; 
  18.  
  19.         const strveRouter = new StrveRouter([{ 
  20.             path: '/', 
  21.             template: Home 
  22.         }, { 
  23.             path: '/about', 
  24.             template: About 
  25.         }]); 
  26.  
  27.         strveRouter.routerHashUpdate(updateView, () => { 
  28.             console.log(strveRouter.param2Obj()); 
  29.         }); 
  30.  
  31.         function Home() { 
  32.             return render` 
  33.                 <div class='innter'> 
  34.                     <button onclick="${goAbout}">goAbout</button> 
  35.                     <h1>Home</h1> 
  36.                 </div> 
  37.             ` 
  38.         } 
  39.  
  40.         function About() { 
  41.             return render` 
  42.                 <div class="innter"> 
  43.                     <button onclick="${goback}">goback</button> 
  44.                     <button onclick="${goHome}">goHome</button> 
  45.                     <h2>About</h2> 
  46.                 </div> 
  47.             ` 
  48.         } 
  49.  
  50.         function App() { 
  51.             return render` 
  52.               <div class='inner'> 
  53.                 <p>{state.msg}</p> 
  54.                 ${strveRouter.routerView()} 
  55.               </div > 
  56.           `; 
  57.         } 
  58.  
  59.         function goback() { 
  60.             strveRouter.back(); 
  61.         } 
  62.  
  63.         function goAbout() { 
  64.             console.log('goAbout'); 
  65.             strveRouter.routerLink({ 
  66.                 path: '/about', 
  67.                 query: { 
  68.                     id: 1, 
  69.                     name: "maomin" 
  70.                 } 
  71.             }); 
  72.         } 
  73.  
  74.         function goHome() { 
  75.             console.log('goHome'); 
  76.             strveRouter.routerLink('/'); 
  77.         } 
  78.  
  79.         Strve('#app', { 
  80.             data: { state }, 
  81.             template: App 
  82.         }); 
  83.     </script> 
  84. </body> 
  85.  
  86. </html> 

安裝

npm

  1. npm install strve-router 

yarn

  1. yarn add strve-router 

pnpm

  1. pnpm add strve-router 

使用

如果在一個(gè)模塊化工程中使用它，可以引入StrveRouter對(duì)象，然后實(shí)例化。參數(shù)是需要注冊(cè)的路由組件，path屬性代表路徑，template屬性代表引入的組件。

匹配到相應(yīng)的路徑頁(yè)面會(huì)相應(yīng)的更新，所以這里必須注冊(cè)一個(gè)routerHashUpdate()方法，然后第一個(gè)參數(shù)傳入updateViewAPI，第二個(gè)參數(shù)則是一個(gè)自定義方法。最后導(dǎo)出strveRouter實(shí)例。

比如這里在一個(gè)router文件夾下創(chuàng)建一個(gè)index.js文件。

  1. import StrveRouter from 'strve-router'; 
  2. import {updateView} from 'strvejs'; 
  3.  
  4. import Home from '../template/homepage.js'; 
  5. import About from '../template/aboutpage.js'; 
  6.  
  7. const strveRouter = new StrveRouter([{ 
  8.     path: '/', 
  9.     template: Home 
  10. }, { 
  11.     path: '/about', 
  12.     template: About 
  13. }]); 
  14.  
  15. strveRouter.routerHashUpdate(updateView,()=>{ 
  16.     console.log('router'); 
  17. }); 
  18.  
  19. export default strveRouter 

路由匹配到的組件將渲染到routerView()方法所在的地方，一般會(huì)放在主頁(yè)面入口文件下(例如App.js)。

  1. import { render } from 'strvejs'; 
  2. import strveRouter from './router/index'; 
  3. function template() { 
  4.   return render` 
  5.         <div class='inner'> 
  6.         ${strveRouter.routerView()} 
  7.         </div> 
  8.     `; 
  9. } 
  10.  
  11. export default template; 

 如果需要跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面，使用strveRouter.routerLink()方法，可以傳對(duì)應(yīng)的路徑和需要傳的參數(shù)，也可以直接傳一個(gè)路徑字符串。

  1. import { render } from 'strvejs' 
  2. import strveRouter from '../router/index.js' 
  3.  
  4. function Home(){ 
  5.     return render` 
  6.         <div> 
  7.             <button onclick="${goAbout}">goAbout</button> 
  8.             <h1>Home</h1> 
  9.         </div> 
  10.     ` 
  11. } 
  12.  
  13. function goAbout(){ 
  14.     strveRouter.routerLink({ 
  15.         path: '/about', 
  16.         query: { 
  17.             id: 1, 
  18.             name: "maomin" 
  19.         } 
  20.     }); 
  21. } 
  22.  
  23. export default Home 

最后，如果你需要實(shí)現(xiàn)后退、前進(jìn)跳轉(zhuǎn)頁(yè)面這樣操作時(shí)，同樣提供了幾個(gè)方法。

  • strveRouter.forward(): 向前跳轉(zhuǎn)1個(gè)頁(yè)面
  • strveRouter.back(): 向后跳轉(zhuǎn)1個(gè)頁(yè)面
  • strveRouter.go(n): 向前跳轉(zhuǎn)n個(gè)頁(yè)面

其它

IDE支持

Visual Studio Code

模板字符串自動(dòng)補(bǔ)全標(biāo)簽

打開(kāi)設(shè)置下的Settings.json，加入如下代碼：

  1. "emmet.triggerExpansionOnTab": true, 
  2. "emmet.showAbbreviationSuggestions": true, 
  3. "emmet.showExpandedAbbreviation": "always", 
  4. "emmet.includeLanguages": { 
  5.     "javascript": "html" 
  6. } 

 

責(zé)任編輯：姜華 來(lái)源： 前端歷劫之路
前端技術(shù)編程
相關(guān)推薦

2019-09-19 09:02:52

開(kāi)發(fā)者技能工具

2021-12-19 07:22:16

Create前端工具

2022-02-23 10:48:52

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

2021-11-29 00:17:41

JS符串轉(zhuǎn)換

2022-04-20 06:56:33

Strve.js前端

2012-10-23 14:01:21

Yibo 客戶端已經(jīng)停

2022-02-21 06:02:49

Strve.jsCodepenReact

2023-04-02 13:46:26

人工智能OpenAI漏洞

2023-08-10 08:31:53

工具實(shí)用網(wǎng)站

2023-06-27 07:55:03

前端開(kāi)發(fā)工具

2014-08-26 10:05:37

框架開(kāi)發(fā)AngularJS

2021-12-15 20:06:48

ReactJSSentry開(kāi)發(fā)者

2021-01-26 09:13:07

前端開(kāi)發(fā)者程序員

2019-07-18 10:14:32

前端Javascript圖表庫(kù)

2021-12-16 23:40:33

部署ReactTypeScript

2022-04-27 09:48:56

JS前端開(kāi)發(fā)

2023-02-13 00:18:22

前端庫(kù)框架集合

2019-08-09 10:52:58

Linux內(nèi)核Spark

2014-08-01 10:24:11

2021-04-08 10:40:24

前端工具代碼
點(diǎn)贊
收藏

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