这几天，写了一个Strview.js

前言

最近，这几周更新文章的频率明显比之前有所降低。不是懒，主要是最近想沉淀沉淀。休息的这几天我也有所收获，抽着晚上的空打算自己写一个玩具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>

事件处理

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

本文转载自微信公众号「前端历劫之路」，可以通过以下二维码关注。转载本文请联系前端历劫之路公众号。

上一篇：定制网站一般要多少钱？

下一篇：台服代理服务器连接失败如何解决