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

這幾天，寫了一個(gè)Strview.js

作者： maomin9761
開發(fā) 前端
Strview.js是一個(gè)可以將字符串轉(zhuǎn)換為視圖的JS庫。這里的字符串一般指的是模板字符串。當(dāng)然你也可以使用普通字符串，只不過在特定場景下普通字符串更有局限性。

[[417014]]

前言

最近，這幾周更新文章的頻率明顯比之前有所降低。不是懶，主要是最近想沉淀沉淀。休息的這幾天我也有所收獲，抽著晚上的空打算自己寫一個(gè)玩具JS庫玩玩。不像很多大型框架那樣，在開發(fā)之前都有嚴(yán)思縝密的計(jì)劃。然而，我就只想動(dòng)手嘗試嘗試。所以，我寫了一個(gè)叫Strview.js這樣一個(gè)玩具JS庫。

如果您想看看呢?可以繼續(xù)讀下去。如果覺得沒啥意思的話，那可以當(dāng)做一篇爛文章，直接跳過也可以啊!

介紹

Strview.js是一個(gè)可以將字符串轉(zhuǎn)換為視圖的JS庫。這里的字符串一般指的是模板字符串。當(dāng)然你也可以使用普通字符串，只不過在特定場景下普通字符串更有局限性。所以，優(yōu)先使用模板字符串。其次Strview.js 只關(guān)注視圖層，不僅易于上手，還便于靈活拆裝不同的代碼塊。

這里是中文官方文檔地址：

  1. https://www.maomin.club/site/strviewjs/zh 

如果您想上手項(xiàng)目，那么請(qǐng)看下面怎么安裝它吧!

安裝

CDN

直接引入以下地址：

  1. <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 

如果你使用原生 ES Modules，這里也有一個(gè)兼容 ES Module 的構(gòu)建文件：

  1. <script type="module"> 
  2.   import { createView } from 'https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.esm.js' 
  3. </script> 

NPM

最新穩(wěn)定版本：1.8.0

  1. npm install strview 

命令行工具 (CLI)

strviewApp是基于strview.js的項(xiàng)目構(gòu)建工具，您可以使用它更方便靈活地搭建頁面。如何安裝它，你可以使用strviewCli來快速安裝strviewApp。

全局安裝

  1. npm install strview-cli -g 

查看版本

  1. strview-cli -v 

初始化項(xiàng)目

  1. strview-cli init <projectName> 

快速上手

嘗試 Strview.js 最簡單的方法是使用 Hello World 例子。你可以在瀏覽器新標(biāo)簽頁中打開它，跟著例子學(xué)習(xí)一些基礎(chǔ)用法。你可以使用CDN版本下的strview.global.js。使用這個(gè)文件，會(huì)將Strview全局暴露，您可以直接調(diào)用。

  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>Strview.js</title> 
  9. </head> 
  10.  
  11. <body> 
  12.     <div id="app"></div> 
  13.     <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
  14.     <script> 
  15.         Strview.createView({ 
  16.             el: "#app", 
  17.             data: { 
  18.                 msg: 'Hello World' 
  19.             }, 
  20.             template: `<p>{msg}</p>`, 
  21.         }); 
  22.     </script> 
  23. </body> 
  24.  
  25. </html> 

如下圖所示：

  1. Hello World 

基本使用

創(chuàng)建視圖

使用createView方法傳入一個(gè)對(duì)象，對(duì)象屬性分別為el、data、template。el表示為要掛載的DOM 元素，data表示為觀察的數(shù)據(jù)對(duì)象，template表示為DOM模板字符串。定義好這三個(gè)屬性之后就可以生成一個(gè)預(yù)想的視圖頁面。

  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>Strview.js</title> 
  9. </head> 
  10.  
  11. <body> 
  12.     <div id="app"></div> 
  13.     <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
  14.     <script> 
  15.         Strview.createView({ 
  16.             el: "#app", 
  17.             data: { 
  18.                 msg: 'Hello Strview.js' 
  19.             }, 
  20.             template: `<p>{msg}</p>`, 
  21.         }); 
  22.     </script> 
  23. </body> 
  24.  
  25. </html> 
  1. Hello Strview.js 

條件渲染

只適用于初次渲染。

  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>Strview.js</title> 
  9. </head> 
  10.  
  11. <body> 
  12.     <div id="app"></div> 
  13.     <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
  14.     <script> 
  15.         let isOk = false; 
  16.         Strview.createView({ 
  17.             el: "#app", 
  18.             data: { 
  19.                 msg: 'Hello Strview.js', 
  20.                 isOk:false 
  21.             }, 
  22.             template: ` 
  23.             <p>{msg}</p> 
  24.             ${isOk ? `<span>hide</span>` : ''} 
  25.             `, 
  26.         }); 
  27.     </script> 
  28. </body> 
  29.  
  30. </html> 
  1. Hello Strview.js 

列表渲染

  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>Strview.js</title> 
  9. </head> 
  10.  
  11. <body> 
  12.     <div id="app"></div> 
  13.     <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
  14.     <script> 
  15.         let liNodes = ``; 
  16.         for (let index = 1; index < 3; index++) { 
  17.             liNodes += `<li>${index}</li>` 
  18.         } 
  19.         const app = Strview.createView({ 
  20.             el: '#app', 
  21.             template: `<ul>${liNodes}</ul>` 
  22.         }) 
  23.     </script> 
  24. </body> 
  25.  
  26. </html> 
  1. 1 2 

事件處理

eventListener方法一共有三個(gè)參數(shù)，分別是DOM節(jié)點(diǎn)、事件名稱、回調(diào)函數(shù)。

  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>Strview.js</title> 
  9. </head> 
  10.  
  11. <body> 
  12.     <div id="app"></div> 
  13.     <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
  14.     <script> 
  15.         Strview.createView({ 
  16.             el: "#app", 
  17.             data: { 
  18.                 msg: 'Hello Strview.js', 
  19.             }, 
  20.             template: ` 
  21.             <p>{msg}</p> 
  22.             `, 
  23.         }); 
  24.  
  25.         Strview.eventListener('p', 'click', () => { 
  26.             console.log(1); 
  27.         }); 
  28.     </script> 
  29. </body> 
  30.  
  31. </html> 
  1. 1 

響應(yīng)性數(shù)據(jù)

ref

針對(duì)單一簡單屬性。

  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>Strview.js</title> 
  9. </head> 
  10.  
  11. <body> 
  12.     <div id="app"></div> 
  13.     <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
  14.     <script> 
  15.         Strview.createView({ 
  16.             el: "#app", 
  17.             data: { 
  18.                 msg: 'Hello Strview.js', 
  19.             }, 
  20.             template: ` 
  21.             <p>{msg}</p> 
  22.             `, 
  23.         }); 
  24.  
  25.         Strview.eventListener('p', 'click', () => { 
  26.             Strview.ref().msg = 1; 
  27.         }); 
  28.     </script> 
  29. </body> 
  30.  
  31. </html> 

reactive

針對(duì)復(fù)雜屬性。

  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>Strview.js</title> 
  9. </head> 
  10.  
  11. <body> 
  12.     <div id="app"></div> 
  13.     <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
  14.     <script> 
  15.         Strview.createView({ 
  16.             el: "#app", 
  17.             data: { 
  18.                 obj: { 
  19.                     a: 1, 
  20.                     b: 2 
  21.                 } 
  22.             }, 
  23.             template: ` 
  24.             <button class="btn1">change</button> 
  25.             <p>{obj.a}</p> 
  26.             <p>{obj.b}</p> 
  27.             `, 
  28.         }); 
  29.  
  30.         Strview.eventListener('.btn1', 'click', () => { 
  31.             Strview.reactive()['obj.a'] = 2; 
  32.             Strview.reactive().obj.b = 3; 
  33.         }); 
  34.     </script> 
  35. </body> 
  36.  
  37. </html> 

部署

如果您使用strviewApp這個(gè)項(xiàng)目構(gòu)建工具，你可以這樣部署您的項(xiàng)目。

  1. npm run build 

or

  1. yarn build 

結(jié)語

以上就是Strview.js大概介紹了，需要改進(jìn)的地方肯定很多。寫出來也是為了拿出一點(diǎn)東西來，還有就是吸取大家的意見，讓自己可以更快地成長。

備注

以下是源碼地址：

 

  • https://github.com/maomincoding/strview
  • https://github.com/maomincoding/strview-app
  • https://github.com/maomincoding/strview-cli

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

 

責(zé)任編輯：武曉燕 來源： 前端歷劫之路
JSStrview視圖
相關(guān)推薦

2021-09-05 17:22:08

Strview.js工具js

2021-08-30 06:59:06

StrviewAppStrview.js項(xiàng)目

2020-11-02 08:19:18

RPC框架Java

2024-02-22 17:13:19

Sora人工智能OpenAI

2022-03-24 07:57:58

Python水果忍者游戲

2009-09-02 18:36:46

LinuxLinux操作系統(tǒng)Linux開發(fā)

2018-03-02 09:25:23

IT編程機(jī)器學(xué)習(xí)阿里巴巴

2021-02-20 07:52:35

防猝死插件 IDEA

2021-06-07 10:20:31

2021-02-02 11:59:15

插件開發(fā)工具

2025-04-07 04:00:00

教學(xué)型任務(wù)調(diào)度系統(tǒng)

2022-09-30 13:55:46

Python機(jī)器人

2013-03-18 10:31:22

JS異常

2020-12-28 05:54:37

構(gòu)造builder模式

2021-03-11 08:32:58

參數(shù)模式構(gòu)造

2021-04-26 09:20:24

蜜罐網(wǎng)絡(luò)安全網(wǎng)絡(luò)攻擊

2022-05-17 08:37:16

MacOSiTerm2工具

2021-07-01 07:43:41

項(xiàng)目程序員代碼

2023-12-28 08:01:59

2024-08-14 08:35:38

sql數(shù)據(jù)庫OOM 異常
點(diǎn)贊
收藏

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