這幾天，寫了一個Strview.js

作者： maomin9761 2021-08-12 00:03:37

Strview.js是一個可以將字符串轉換為視圖的JS庫。這里的字符串一般指的是模板字符串。當然你也可以使用普通字符串，只不過在特定場景下普通字符串更有局限性。

[[417014]]

前言

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

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

介紹

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

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

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

如果您想上手項目，那么請看下面怎么安裝它吧!

安裝

CDN

直接引入以下地址：

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

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

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

NPM

最新穩定版本：1.8.0

npm install strview

命令行工具 (CLI)

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

全局安裝

npm install strview-cli -g

查看版本

strview-cli -v

初始化項目

strview-cli init <projectName>

快速上手

嘗試 Strview.js 最簡單的方法是使用 Hello World 例子。你可以在瀏覽器新標簽頁中打開它，跟著例子學習一些基礎用法。你可以使用CDN版本下的strview.global.js。使用這個文件，會將Strview全局暴露，您可以直接調用。

<!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>Strview.js</title> 
</head> 
 
<body> 
    <div id="app"></div> 
    <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
    <script> 
        Strview.createView({ 
            el: "#app", 
            data: { 
                msg: 'Hello World' 
            }, 
            template: `<p>{msg}</p>`, 
        }); 
    </script> 
</body> 
 
</html>

如下圖所示：

Hello World

基本使用

創建視圖

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

<!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>Strview.js</title> 
</head> 
 
<body> 
    <div id="app"></div> 
    <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
    <script> 
        Strview.createView({ 
            el: "#app", 
            data: { 
                msg: 'Hello Strview.js' 
            }, 
            template: `<p>{msg}</p>`, 
        }); 
    </script> 
</body> 
 
</html>

Hello Strview.js

條件渲染

只適用于初次渲染。

<!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>Strview.js</title> 
</head> 
 
<body> 
    <div id="app"></div> 
    <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
    <script> 
        let isOk = false; 
        Strview.createView({ 
            el: "#app", 
            data: { 
                msg: 'Hello Strview.js', 
                isOk:false 
            }, 
            template: ` 
            <p>{msg}</p> 
            ${isOk ? `<span>hide</span>` : ''} 
            `, 
        }); 
    </script> 
</body> 
 
</html>

Hello Strview.js

列表渲染

<!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>Strview.js</title> 
</head> 
 
<body> 
    <div id="app"></div> 
    <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
    <script> 
        let liNodes = ``; 
        for (let index = 1; index < 3; index++) { 
            liNodes += `<li>${index}</li>` 
        } 
        const app = Strview.createView({ 
            el: '#app', 
            template: `<ul>${liNodes}</ul>` 
        }) 
    </script> 
</body> 
 
</html>

1 2

事件處理

eventListener方法一共有三個參數，分別是DOM節點、事件名稱、回調函數。

<!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>Strview.js</title> 
</head> 
 
<body> 
    <div id="app"></div> 
    <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
    <script> 
        Strview.createView({ 
            el: "#app", 
            data: { 
                msg: 'Hello Strview.js', 
            }, 
            template: ` 
            <p>{msg}</p> 
            `, 
        }); 
 
        Strview.eventListener('p', 'click', () => { 
            console.log(1); 
        }); 
    </script> 
</body> 
 
</html>

響應性數據

ref

針對單一簡單屬性。

<!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>Strview.js</title> 
</head> 
 
<body> 
    <div id="app"></div> 
    <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
    <script> 
        Strview.createView({ 
            el: "#app", 
            data: { 
                msg: 'Hello Strview.js', 
            }, 
            template: ` 
            <p>{msg}</p> 
            `, 
        }); 
 
        Strview.eventListener('p', 'click', () => { 
            Strview.ref().msg = 1; 
        }); 
    </script> 
</body> 
 
</html>

reactive

針對復雜屬性。

<!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>Strview.js</title> 
</head> 
 
<body> 
    <div id="app"></div> 
    <script src="https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.global.js"></script> 
    <script> 
        Strview.createView({ 
            el: "#app", 
            data: { 
                obj: { 
                    a: 1, 
                    b: 2 
                } 
            }, 
            template: ` 
            <button class="btn1">change</button> 
            <p>{obj.a}</p> 
            <p>{obj.b}</p> 
            `, 
        }); 
 
        Strview.eventListener('.btn1', 'click', () => { 
            Strview.reactive()['obj.a'] = 2; 
            Strview.reactive().obj.b = 3; 
        }); 
    </script> 
</body> 
 
</html>

部署

如果您使用strviewApp這個項目構建工具，你可以這樣部署您的項目。

npm run build

yarn build

結語

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

備注

以下是源碼地址：

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

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

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

JS Strview 視圖

国产精品电影_久久视频免费_欧美日韩国产激情_成年人视频免费在线播放_日本久久亚洲电影_久久都是精品_66av99_九色精品美女在线_蜜臀a∨国产成人精品_冲田杏梨av在线_欧美精品在线一区二区三区_麻豆mv在线看