RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
这几天，写了一个Strview.js

前言

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

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

介绍

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

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

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

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

安装

CDN

直接引入以下地址：

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

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

NPM

最新稳定版本：1.8.0

 
 
 
 
    
  
  
  
  
  1. npm install strview 
    2.

命令行工具 (CLI)

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

全局安装

 
 
 
 
    
  
  
  
  
  1. npm install strview-cli -g 
    2.

查看版本

 
 
 
 
    
  
  
  
  
  1. strview-cli -v 
    2.

初始化项目

 
 
 
 
    
  
  
  
  
  1. strview-cli init  
    2.

快速上手

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

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

    • 如下图所示：

     
 
 
 
      
  
  
  
  
    1. Hello World 
      2.

    基本使用

    创建视图

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

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

    条件渲染

    只适用于初次渲染。

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

    列表渲染

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

    事件处理

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

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

    响应性数据

    ref

    针对单一简单属性。

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

    • reactive

    针对复杂属性。

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

    • 部署

    如果您使用strviewApp这个项目构建工具，你可以这样部署您的项目。

     
 
 
 
      
  
  
  
  
    1. npm run build 
      2.

    or

     
 
 
 
      
  
  
  
  
    1. yarn build 
      2.

    结语

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

    备注

    以下是源码地址：

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

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


    当前文章：这几天，写了一个Strview.js
    文章起源：http://www.jxjierui.cn/article/ccsdhei.html

    其他资讯

    快速导航
    友情链接
    网站建设
    联系方式
    • 企业：青羊区浩晨众云设计工作室（个体工商户）
    • 地址：成都市青羊区太升南路288号
    • 电话：18980820575
    • 网址：www.jxjierui.cn

    公司名称：青羊区浩晨众云设计工作室（个体工商户） 联系电话：18980820575

    网站备案号：蜀ICP备2025119795号-2

    内江浩晨众云建站 内江网站建设 内江网站设计 内江网站制作 成都做网站