这几天,写了一个Strview.js

开发 前端
Strview.js是一个可以将字符串转换为视图的JS库。这里的字符串一般指的是模板字符串。当然你也可以使用普通字符串,只不过在特定场景下普通字符串更有局限性。

[[417014]]

前言

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

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

介绍

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

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

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

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

安装

CDN

直接引入以下地址:

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

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

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

NPM

最新稳定版本:1.8.0

  1. npm install strview 

命令行工具 (CLI)

strviewApp是基于strview.js的项目构建工具,您可以使用它更方便灵活地搭建页面。如何安装它,你可以使用strviewCli来快速安装strviewApp。

全局安装

  1. npm install strview-cli -g 

查看版本

  1. strview-cli -v 

初始化项目

  1. strview-cli init <projectName> 

快速上手

尝试 Strview.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。你可以使用CDN版本下的strview.global.js。使用这个文件,会将Strview全局暴露,您可以直接调用。

  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 

基本使用

创建视图

使用createView方法传入一个对象,对象属性分别为el、data、template。el表示为要挂载的DOM 元素,data表示为观察的数据对象,template表示为DOM模板字符串。定义好这三个属性之后就可以生成一个预想的视图页面。

  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方法一共有三个参数,分别是DOM节点、事件名称、回调函数。

  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> 

响应性数据

ref

针对单一简单属性。

  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

针对复杂属性。

  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这个项目构建工具,你可以这样部署您的项目。

  1. npm run build 

or

  1. yarn build 

结语

以上就是Strview.js大概介绍了,需要改进的地方肯定很多。写出来也是为了拿出一点东西来,还有就是吸取大家的意见,让自己可以更快地成长。

备注

以下是源码地址:

 

  • https://github.com/maomincoding/strview
  • https://github.com/maomincoding/strview-app
  • https://github.com/maomincoding/strview-cli
  • 本文转载自微信公众号「前端历劫之路」,可以通过以下二维码关注。转载本文请联系前端历劫之路公众号。

 

责任编辑:武晓燕 来源: 前端历劫之路
相关推荐

2021-09-05 17:22:08

Strview.js工具js

2021-08-30 06:59:06

StrviewAppStrview.js项目

2020-11-02 08:19:18

RPC框架Java

2024-02-22 17:13:19

Sora人工智能OpenAI

2009-09-02 18:36:46

LinuxLinux操作系统Linux开发

2022-03-24 07:57:58

Python水果忍者游戏

2018-03-02 09:25:23

IT编程机器学习阿里巴巴

2021-06-07 10:20:31

2021-02-20 07:52:35

防猝死插件 IDEA

2021-02-02 11:59:15

插件开发工具

2022-09-30 13:55:46

Python机器人

2013-03-18 10:31:22

JS异常

2020-12-28 05:54:37

构造builder模式

2021-03-11 08:32:58

参数模式构造

2023-12-28 08:01:59

2021-07-01 07:43:41

项目程序员代码

2022-05-17 08:37:16

MacOSiTerm2工具

2024-08-14 08:35:38

sql数据库OOM 异常

2021-04-26 09:20:24

蜜罐网络安全网络攻击

2020-08-25 20:10:53

GitHub代码开发者
点赞
收藏

51CTO技术栈公众号