写了一个Strview.js

本是古典何须时尚 2021-09-09 10:16 313阅读 0赞

![logo.png][]

## 前言 ##

最近，这几周更新文章的频率明显比之前有所降低。不是懒，主要是最近想沉淀沉淀。休息的这几天我也有所收获，抽着晚上的空打算自己写一个玩具JS库玩玩。不像很多大型框架那样，在开发之前都有严思缜密的计划。然而，我就只想动手尝试尝试。所以，我写了一个叫`Strview.js`这样一个玩具JS库。

如果您想看看呢？可以继续读下去。如果觉得没啥意思的话，那可以当做一篇烂文章，直接跳过也可以啊！

## 介绍 ##

`Strview.js`是一个可以将字符串转换为视图的JS库。这里的字符串一般指的是模板字符串。当然你也可以使用普通字符串，只不过在特定场景下普通字符串更有局限性。所以，优先使用模板字符串。其次`Strview.js` 只关注视图层，不仅易于上手，还便于灵活拆装不同的代码块。

这里是中文官方文档地址：

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

如果您想上手项目，那么请看下面怎么安装它吧！

## 安装 ##

### CDN ###

直接引入以下地址：

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

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

> 1

### 响应性数据 ###

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

## 关于作者 ##

作者：**Vam的金豆之路**。曾获得2019年CSDN年度博客之星，CSDN博客访问量已达到数百万。掘金博客文章多次推送到首页，总访问量已达到数十万。

另外，我的公众号：`前端历劫之路`，公众号持续更新最新前端技术及相关技术文章。欢迎关注我的公众号，让我们一起在前端道路上历劫吧！Go！