鲨鱼网
这几天，写了一个Strview.js
创始人
2025-05-03 11:40:21
0次

[[417014]]

前言

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

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

介绍

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

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

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

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

安装

CDN

直接引入以下地址：

  1.  

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

  1.  
  2.   import { createView } from 'https://cdn.jsdelivr.net/npm/strview@1.8.0/dist/strview.esm.js' 
  3.  

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  

快速上手

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

  1.  
  2.  
  3.  
  4.  
  5.      
  6.      
  7.      
  8.     Strview.js 
  9.  
  10.  
  11.  
  12.     
 
  •      
  •      
  •  
  •  
  •  

    • 如下图所示：

    1. Hello World 

    基本使用

    创建视图

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

    1.  
    2.  
    3.  
    4.  
    5.      
    6.      
    7.      
    8.     Strview.js 
    9.  
    10.  
    11.  
    12.     
     
  •      
  •      
  •  
  •  
  •  
    1. Hello Strview.js 

    条件渲染

    只适用于初次渲染。

    1.  
    2.  
    3.  
    4.  
    5.      
    6.      
    7.      
    8.     Strview.js 
    9.  
    10.  
    11.  
    12.     
     
  •      
  •      
  •  
  •  
  •  
    1. Hello Strview.js 

    列表渲染

    1.  
    2.  
    3.  
    4.  
    5.      
    6.      
    7.      
    8.     Strview.js 
    9.  
    10.  
    11.  
    12.     
     
  •      
  •      
  •  
  •  
  •  
    1. 1 2 

    事件处理

    eventListener方法一共有三个参数，分别是DOM节点、事件名称、回调函数。

    1.  
    2.  
    3.  
    4.  
    5.      
    6.      
    7.      
    8.     Strview.js 
    9.  
    10.  
    11.  
    12.     
     
  •      
  •      
  •  
  •  
  •  
    1. 1 

    响应性数据

    ref

    针对单一简单属性。

    1.  
    2.  
    3.  
    4.  
    5.      
    6.      
    7.      
    8.     Strview.js 
    9.  
    10.  
    11.  
    12.     
     
  •      
  •      
  •  
  •  
  •  

    • reactive

    针对复杂属性。

    1.  
    2.  
    3.  
    4.  
    5.      
    6.      
    7.      
    8.     Strview.js 
    9.  
    10.  
    11.  
    12.     
     
  •      
  •      
  •  
  •  
  •  

    • 部署

    如果您使用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

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

     

    上一篇：如何使用 JavaScript 解析 URL？

    下一篇：深入理解Node.js的Async hooks

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    2009 IBM动态架构新动力...
    通过 XML 进行内容发布
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    着眼MAC地址，解救无法享受D... 在安装了DHCP服务器的局域网环境中，每一台工作站在上网之前，都要先从DHCP服务器那里享受到地址动...
    为啥国人偏爱 Mybatis，... 关于 SQL 和 ORM 的争论，永远都不会终止，我也一直在思考这个问题。昨天又跟群里的小伙伴进行...